LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-09 12:57:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

updating u utility classes

Browse Source
This commit is contained in:
Jesse Winton
2024-08-22 13:50:09 -04:00
parent 1798e90548
commit 96d85e742d
38 changed files with 7114 additions and 6912 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/lib/components/MainFooter.svelte
View File

@@ -1,15 +1,15 @@
<script lang="ts">
import { socials } from '$lib/constants';
import ThemeSelect from './ThemeSelect.svelte';
import { socials } from "$lib/constants";
import ThemeSelect from "./ThemeSelect.svelte";
export let variant: 'homepage' | 'docs' = 'homepage';
export let variant: "homepage" | "docs" = "homepage";
const year = new Date().getFullYear();
</script>
{#if variant === 'homepage'}
<footer class="web-main-footer u-position-relative u-margin-block-start-48">
<ul class="u-flex u-gap-8">
{#if variant === "homepage"}
<footer class="web-main-footer u-margin-block-start-48 relative">
<ul class="flex gap-2">
{#each socials as social}
<li>
<a
@@ -39,19 +39,19 @@
style:margin-top="-4px"
/>
<ul class="u-flex u-gap-16">
<ul class="flex gap-4">
<li><a class="web-link" href="/terms">Terms</a></li>
<li><a class="web-link" href="/privacy">Privacy</a></li>
<li><a class="web-link" href="/cookies">Cookies</a></li>
</ul>
</div>
</footer>
{:else if variant === 'docs'}
{:else if variant === "docs"}
<footer
class="web-main-footer is-with-bg-color u-margin-block-start-32 u-small u-position-relative"
class="web-main-footer is-with-bg-color u-margin-block-start-32 u-small relative"
>
<div class="web-main-footer-grid-1">
<ul class="web-main-footer-grid-1-column-1 u-flex u-gap-8">
<ul class="web-main-footer-grid-1-column-1 flex gap-2">
{#each socials as social}
<li>
<a
@@ -69,13 +69,19 @@
<div class="web-main-footer-grid-1-column-2">
<ThemeSelect />
</div>
<ul class="web-main-footer-grid-1-column-3 u-cross-center web-main-footer-links">
<ul
class="web-main-footer-grid-1-column-3 u-cross-center web-main-footer-links"
>
<li>
<a href="/discord" target="_blank" rel="noopener noreferrer">Support</a>
<a href="/discord" target="_blank" rel="noopener noreferrer"
>Support</a
>
</li>
<li>
<a href="https://appwrite.online" target="_blank" rel="noopener noreferrer"
>Status</a
<a
href="https://appwrite.online"
target="_blank"
rel="noopener noreferrer">Status</a
>
</li>
<!-- <li>
@@ -90,7 +96,7 @@
{/if}
<style lang="scss">
@use '$scss/abstract/variables/devices';
@use "$scss/abstract/variables/devices";
.web-icon-button {
display: grid;
}

45
src/markdoc/layouts/Author.svelte
View File

@@ -1,12 +1,12 @@
<script lang="ts">
import { Article, FooterNav, MainFooter } from '$lib/components';
import { page } from '$app/stores';
import { Main } from '$lib/layouts';
import { getContext } from 'svelte';
import { BLOG_TITLE_SUFFIX } from '$routes/titles';
import type { PostsData, AuthorData } from '$routes/blog/content';
import { DEFAULT_HOST } from '$lib/utils/metadata';
import FloatingHead from '$lib/components/FloatingHead.svelte';
import { Article, FooterNav, MainFooter } from "$lib/components";
import { page } from "$app/stores";
import { Main } from "$lib/layouts";
import { getContext } from "svelte";
import { BLOG_TITLE_SUFFIX } from "$routes/titles";
import type { PostsData, AuthorData } from "$routes/blog/content";
import { DEFAULT_HOST } from "$lib/utils/metadata";
import FloatingHead from "$lib/components/FloatingHead.svelte";
export let name: string;
export let role: string;
@@ -16,15 +16,17 @@
export let linkedin: string;
export let github: string;
const posts = getContext<PostsData[]>('posts');
const authors = getContext<AuthorData[]>('authors');
const posts = getContext<PostsData[]>("posts");
const authors = getContext<AuthorData[]>("authors");
const author = authors.find(
(p) => $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1) === p.slug
(p) =>
$page.url.pathname.substring($page.url.pathname.lastIndexOf("/") + 1) ===
p.slug,
);
const seoTitle = name + BLOG_TITLE_SUFFIX;
const description = bio;
const ogImage = DEFAULT_HOST + '/images/open-graph/blog.png';
const ogImage = DEFAULT_HOST + "/images/open-graph/blog.png";
</script>
<svelte:head>
@@ -45,9 +47,9 @@
</svelte:head>
<Main>
<div class="web-big-padding-section-level-1 u-position-relative u-overflow-hidden">
<div class="web-big-padding-section-level-1 u-overflow-hidden relative">
<div
class="u-position-absolute u-inset-inline-start-0 u-inset-block-end-0 web-u-pointer-events-none"
class="u-inset-inline-start-0 u-inset-block-end-0 web-u-pointer-events-none absolute"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -102,11 +104,16 @@
</svg>
</div>
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-big-padding-section-level-2 relative">
<div class="web-container">
<div class="web-author-section u-block">
{#if avatar}
<FloatingHead --position="relative" src={avatar} alt={name} size={112} />
<FloatingHead
--position="relative"
src={avatar}
alt={name}
size={112}
/>
{/if}
<div>
<h1 class="web-title web-u-color-text-primary">{name}</h1>
@@ -119,7 +126,7 @@
{bio}
</p>
{/if}
<ul class="u-flex u-main-center u-gap-8 u-margin-block-start-16">
<ul class="u-main-center u-margin-block-start-16 flex gap-2">
{#if github}
<li>
<a
@@ -183,7 +190,7 @@
</label>
</div> -->
<!--<div class="web-is-not-mobile">
<div class="u-flex u-main-space-between u-gap-16 u-margin-block-start-24">
<div class="flex u-main-space-between gap-4 u-margin-block-start-24">
<ul
class="web-secondary-tabs is-transparent"
role="tablist"
@@ -287,7 +294,7 @@
</div>
</div>
<div
class="web-big-padding-section-level-2 is-margin-replace-padding u-position-relative u-overflow-hidden"
class="web-big-padding-section-level-2 is-margin-replace-padding u-overflow-hidden relative"
>
<div class="web-container">
<FooterNav />

35
src/markdoc/layouts/Category.svelte
View File

@@ -1,22 +1,24 @@
<script lang="ts">
import { page } from '$app/stores';
import { Article, FooterNav, MainFooter } from '$lib/components';
import { Main } from '$lib/layouts';
import { DEFAULT_HOST } from '$lib/utils/metadata';
import type { AuthorData, PostsData } from '$routes/blog/content';
import { BLOG_TITLE_SUFFIX } from '$routes/titles';
import { getContext } from 'svelte';
import { page } from "$app/stores";
import { Article, FooterNav, MainFooter } from "$lib/components";
import { Main } from "$lib/layouts";
import { DEFAULT_HOST } from "$lib/utils/metadata";
import type { AuthorData, PostsData } from "$routes/blog/content";
import { BLOG_TITLE_SUFFIX } from "$routes/titles";
import { getContext } from "svelte";
export let name: string;
export let description: string;
const pageSlug = $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1);
const authors = getContext<AuthorData[]>('authors');
const postsList = getContext<PostsData[]>('posts');
const pageSlug = $page.url.pathname.substring(
$page.url.pathname.lastIndexOf("/") + 1,
);
const authors = getContext<AuthorData[]>("authors");
const postsList = getContext<PostsData[]>("posts");
const posts = postsList.filter((post) => post.category.includes(pageSlug));
const seoTitle = name + BLOG_TITLE_SUFFIX;
const ogImage = DEFAULT_HOST + '/images/open-graph/blog.png';
const ogImage = DEFAULT_HOST + "/images/open-graph/blog.png";
</script>
<svelte:head>
@@ -40,7 +42,10 @@
<div class="web-big-padding-section-level-1">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<a class="web-link web-u-color-text-secondary u-cross-baseline" href="/blog">
<a
class="web-link web-u-color-text-secondary u-cross-baseline"
href="/blog"
>
<span class="web-icon-chevron-left" aria-hidden="true" />
<span>Back to blog</span>
</a>
@@ -60,7 +65,9 @@
<div class="u-margin-block-start-48">
<ul class="web-grid-articles">
{#each posts as post}
{@const author = authors.find((a) => a.slug.includes(post.author))}
{@const author = authors.find((a) =>
a.slug.includes(post.author),
)}
{#if author}
<Article
title={post.title}
@@ -76,7 +83,7 @@
</ul>
</div>
<div
class="web-big-padding-section-level-2 is-margin-replace-padding u-position-relative u-overflow-hidden"
class="web-big-padding-section-level-2 is-margin-replace-padding u-overflow-hidden relative"
>
<div class="web-container">
<FooterNav />

70
src/markdoc/layouts/Integration.svelte
View File

@@ -1,21 +1,21 @@
<script lang="ts">
import { Root, Slide } from '$lib/components/carousel';
import FooterNav from '$lib/components/FooterNav.svelte';
import MainFooter from '$lib/components/MainFooter.svelte';
import ProductsGrid from '$lib/components/ProductsGrid.svelte';
import { Main } from '$lib/layouts';
import { DEFAULT_HOST } from '$lib/utils/metadata';
import type { Integration } from '$routes/integrations/+page';
import { isHeaderHidden } from '$lib/layouts/Main.svelte';
import { Root, Slide } from "$lib/components/carousel";
import FooterNav from "$lib/components/FooterNav.svelte";
import MainFooter from "$lib/components/MainFooter.svelte";
import ProductsGrid from "$lib/components/ProductsGrid.svelte";
import { Main } from "$lib/layouts";
import { DEFAULT_HOST } from "$lib/utils/metadata";
import type { Integration } from "$routes/integrations/+page";
import { isHeaderHidden } from "$lib/layouts/Main.svelte";
export let title: Integration['title'];
export let images: Integration['images'];
export let title: Integration["title"];
export let images: Integration["images"];
// export let isNew: Integration['isNew'];
export let isPartner: Integration['isPartner'];
export let product: Integration['product'];
export let category: Integration['category'];
export let description: Integration['description'];
export let cover: Integration['cover'];
export let isPartner: Integration["isPartner"];
export let product: Integration["product"];
export let category: Integration["category"];
export let description: Integration["description"];
export let cover: Integration["cover"];
//const title = 'Integrations' + TITLE_SUFFIX;
//const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
@@ -47,7 +47,10 @@
<div class="web-container">
<div class="web-integrations-top-section">
<div class="web-carousel-wrapper">
<a href="/integrations" class="web-button is-text u-margin-block-end-48">
<a
href="/integrations"
class="web-button is-text u-margin-block-end-48"
>
<span class="icon-cheveron-left" aria-hidden="true"></span>
<span>Back to catalog</span>
</a>
@@ -85,10 +88,12 @@
</div>
<div class="web-big-padding-section-level-1">
<div class="web-container">
<article class="u-flex-vertical web-u-gap-60-not-mobile web-u-gap-40-mobile">
<article
class="web-u-gap-60-not-mobile web-u-gap-40-mobile flex flex-col"
>
<div class="l-grid-2-1 web-u-row-gap-56 web-u-gap-40-mobile">
<div class="l-grid-content">
<div class="u-flex u-cross-start u-gap-20">
<div class="u-cross-start flex gap-5">
<img
class="web-author-image"
src={product.avatar}
@@ -98,7 +103,7 @@
height="40"
/>
<h1
class="web-title web-u-color-text-primary"
class="web-title web-u-color-text-primary justif"
style="max-width: 28.15rem;"
>
{title}
@@ -113,22 +118,22 @@
</div>
<div class="l-grid-sidebar">
<dl
class="u-flex-vertical u-gap-20 sidebar-desc"
style:top={$isHeaderHidden ? '4rem' : '9rem'}
class="flex-vertical sidebar-desc gap-5"
style:top={$isHeaderHidden ? "4rem" : "9rem"}
>
<div class="u-flex u-main-space-between u-gap-8">
<div class="flex justify-between gap-2">
<dt>Vendor</dt>
<dd class="web-u-color-text-primary">{product.vendor}</dd>
</div>
<div class="web-u-sep-block-end"></div>
{#if isPartner}
<div class="u-flex u-main-space-between u-gap-8">
<div class="flex justify-between gap-2">
<dt>Partner</dt>
<dd><div class="web-inline-tag">Verified</div></dd>
</div>
{/if}
<div class="web-u-sep-block-end"></div>
<div class="u-flex u-main-space-between u-gap-8">
<div class="flex justify-between gap-2">
<dt>Category</dt>
<dd class="web-u-color-text-primary">{category}</dd>
</div>
@@ -145,7 +150,7 @@
<!-- <ProductsGrid /> -->
<div class="web-container">
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-big-padding-section-level-2 relative">
<img
src="/images/bgs/pre-footer.png"
alt=""
@@ -153,19 +158,20 @@
style="z-index:-1"
/>
<!-- <div class="u-position-relative cta"> -->
<div class="u-position-relative">
<!-- <div class="relative cta"> -->
<div class="relative">
<section
class="web-hero u-flex u-row-gap-16 u-main-center u-cross-center web-u-max-width-580"
class="web-hero u-row-gap-16 u-main-center u-cross-center web-u-max-width-580 flex"
>
<h2
class="web-display u-max-width-600 web-u-text-align-center web-u-color-text-primary"
class="web-display web-u-text-align-center web-u-color-text-primary max-w-[600px]"
>
Become a Technology Partner
</h2>
<p class="web-main-body-500">
Join our Technology Partners program to integrate your solutions with
Appwrite’s API, enhancing functionality and expanding your reach.
Join our Technology Partners program to integrate your solutions
with Appwrite’s API, enhancing functionality and expanding your
reach.
</p>
<a
href="/integrations/technology-partner"
@@ -183,7 +189,7 @@
</Main>
<style lang="scss">
@use '$scss/abstract' as *;
@use "$scss/abstract" as *;
.cta {
min-height: pxToRem(560);

40
src/markdoc/layouts/Policy.svelte
View File

@@ -18,18 +18,18 @@
</script>
<script lang="ts">
import { FooterNav, MainFooter } from '$lib/components';
import { FooterNav, MainFooter } from "$lib/components";
import { Main } from '$lib/layouts';
import { Main } from "$lib/layouts";
import { DEFAULT_HOST } from '$lib/utils/metadata';
import { DEFAULT_HOST } from "$lib/utils/metadata";
import { TITLE_SUFFIX } from '$routes/titles';
import { TITLE_SUFFIX } from "$routes/titles";
import TocNav from '$lib/components/TocNav.svelte';
import TocRoot from '$lib/components/TocRoot.svelte';
import { isHeaderHidden } from '$lib/layouts/Main.svelte';
import { getContext, hasContext, setContext } from 'svelte';
import TocNav from "$lib/components/TocNav.svelte";
import TocRoot from "$lib/components/TocRoot.svelte";
import { isHeaderHidden } from "$lib/layouts/Main.svelte";
import { getContext, hasContext, setContext } from "svelte";
export let title: string;
export let description: string;
@@ -38,9 +38,9 @@
let seo = {
title: title + TITLE_SUFFIX,
description: description,
ogImage: DEFAULT_HOST + '/images/open-graph/website.png',
ogImage: DEFAULT_HOST + "/images/open-graph/website.png",
APP_NAME: 'Appwrite'
APP_NAME: "Appwrite",
};
let showToc = false;
@@ -73,13 +73,13 @@
<h1 class="web-title web-u-color-text-primary">{title}</h1>
</header>
<button
class="toc-btn u-position-sticky u-flex u-width-full-line u-main-space-between u-cross-center
web-u-padding-20 web-u-margin-inline-20-negative web-u-color-text-primary web-is-only-mobile
u-margin-block-start-24 web-u-sep-block web-u-filter-blur-8"
class="toc-btn u-width-full-line u-main-space-between u-cross-center web-u-padding-20 web-u-margin-inline-20-negative
web-u-color-text-primary web-is-only-mobile u-margin-block-start-24 web-u-sep-block
web-u-filter-blur-8 sticky flex"
style:--inset-block-start="4.5rem"
style:inline-size="100vw"
style:background-color="hsl(var(--p-body-bg-color) / 0.1)"
style:translate="0 {$isHeaderHidden ? '-4.5rem' : '0'}"
style:translate="0 {$isHeaderHidden ? "-4.5rem" : "0"}"
style:z-index="1"
on:click={() => (showToc = !showToc)}
>
@@ -87,8 +87,14 @@
<span class="icon-menu-alt-4" aria-hidden="true" />
</button>
<TocNav />
<main class="web-grid-120-1fr-auto-main /web-is-mobile-closed" id="main">
<div class="web-content is-count-headers" class:web-is-mobile-closed={showToc}>
<main
class="web-grid-120-1fr-auto-main /web-is-mobile-closed"
id="main"
>
<div
class="web-content is-count-headers"
class:web-is-mobile-closed={showToc}
>
<!-- svelte-ignore a11y-hidden -->
<h2 aria-hidden="true">Introduction</h2>
<slot />
@@ -102,7 +108,7 @@
</Main>
<style lang="scss">
h2[aria-hidden='true'] {
h2[aria-hidden="true"] {
height: 0;
opacity: 0;
}

107
src/markdoc/layouts/Post.svelte
View File

@@ -1,16 +1,26 @@
<script lang="ts">
import { Media } from '$lib/UI';
import { scroll } from '$lib/animations';
import { Article, FooterNav, MainFooter, Newsletter, Tooltip } from '$lib/components';
import { Main } from '$lib/layouts';
import { formatDate } from '$lib/utils/date';
import { DEFAULT_HOST } from '$lib/utils/metadata';
import type { AuthorData, CategoryData, PostsData } from '$routes/blog/content';
import { BLOG_TITLE_SUFFIX } from '$routes/titles';
import { getContext } from 'svelte';
import { type SocialShareOption, socialSharingOptions } from '$lib/constants';
import { copy } from '$lib/utils/copy';
import { page } from '$app/stores';
import { Media } from "$lib/UI";
import { scroll } from "$lib/animations";
import {
Article,
FooterNav,
MainFooter,
Newsletter,
Tooltip,
} from "$lib/components";
import { Main } from "$lib/layouts";
import { formatDate } from "$lib/utils/date";
import { DEFAULT_HOST } from "$lib/utils/metadata";
import type {
AuthorData,
CategoryData,
PostsData,
} from "$routes/blog/content";
import { BLOG_TITLE_SUFFIX } from "$routes/titles";
import { getContext } from "svelte";
import { type SocialShareOption, socialSharingOptions } from "$lib/constants";
import { copy } from "$lib/utils/copy";
import { page } from "$app/stores";
export let title: string;
export let description: string;
@@ -20,30 +30,32 @@
export let cover: string;
export let category: string;
const authors = getContext<AuthorData[]>('authors');
const authors = getContext<AuthorData[]>("authors");
const authorData = authors.find((a) => a.slug === author);
const categoriesList = getContext<CategoryData[]>('categories');
const categoriesList = getContext<CategoryData[]>("categories");
const categories = getValidCategories();
const posts = getContext<PostsData[]>('posts');
const posts = getContext<PostsData[]>("posts");
function getValidCategories() {
if (!category) return undefined;
const cats = category.split(',');
const cats = category.split(",");
return categoriesList.filter((c) =>
cats.some((cat) => cat.toLocaleLowerCase() === c.name.toLocaleLowerCase())
cats.some(
(cat) => cat.toLocaleLowerCase() === c.name.toLocaleLowerCase(),
),
);
}
let readPercentage = 0;
enum CopyStatus {
Copy = 'Copy URL',
Copied = 'Copied'
Copy = "Copy URL",
Copied = "Copied",
}
let copyText = CopyStatus.Copy;
async function handleCopy() {
const blogPostUrl = encodeURI(`https://appwrite.io${$page.url.pathname}`)
const blogPostUrl = encodeURI(`https://appwrite.io${$page.url.pathname}`);
await copy(blogPostUrl);
@@ -54,10 +66,10 @@
}
function getShareLink(shareOption: SocialShareOption): string {
const blogPostUrl = encodeURI(`https://appwrite.io${$page.url.pathname}`)
const blogPostUrl = encodeURI(`https://appwrite.io${$page.url.pathname}`);
const shareableLink = shareOption.link
.replace('{TITLE}', title + '.')
.replace('{URL}', blogPostUrl);
.replace("{TITLE}", title + ".")
.replace("{URL}", blogPostUrl);
return shareableLink;
}
@@ -117,10 +129,7 @@
{/if}
{#if authorData}
<div class="web-author u-margin-block-start-16">
<a
href={authorData.href}
class="u-flex u-cross-center u-gap-8"
>
<a href={authorData.href} class="u-cross-center flex gap-2">
{#if authorData.avatar}
<img
class="web-author-image"
@@ -131,14 +140,14 @@
height="44"
/>
{/if}
<div class="u-flex-vertical">
<div class="flex flex-col">
<h4 class="web-sub-body-400 web-u-color-text-primary">
{authorData.name}
</h4>
<p class="web-caption-400">{authorData.role}</p>
</div>
</a>
<!-- <ul class="u-flex u-gap-8 u-margin-inline-start-auto u-cross-child-center">
<!-- <ul class="flex gap-2 u-margin-inline-start-auto u-cross-child-center">
{#if authorData.twitter}
<li>
<a
@@ -182,16 +191,24 @@
</div>
{/if}
<div class="share-post-section u-flex u-gap-16 u-margin-block-start-16 u-cross-center">
<span class="web-eyebrow u-padding-inline-end-8" style:color="#adadb0">
<div
class="share-post-section u-margin-block-start-16 u-cross-center flex gap-4"
>
<span
class="web-eyebrow u-padding-inline-end-8"
style:color="#adadb0"
>
SHARE
</span>
<ul class="u-flex u-gap-8">
<ul class="flex gap-2">
{#each socialSharingOptions as sharingOption}
<li class="share-list-item">
<Tooltip placement="bottom" disableHoverableContent={true}>
{#if sharingOption.type === 'link'}
<Tooltip
placement="bottom"
disableHoverableContent={true}
>
{#if sharingOption.type === "link"}
<a
class="web-icon-button"
aria-label={sharingOption.label}
@@ -199,24 +216,28 @@
target="_blank"
rel="noopener, noreferrer"
>
<span class={sharingOption.icon} aria-hidden="true" />
<span
class={sharingOption.icon}
aria-hidden="true"
/>
</a>
{:else}
<button
class="web-icon-button"
aria-label={sharingOption.label}
on:click="{() => handleCopy()}"
on:click={() => handleCopy()}
>
<span class={sharingOption.icon} aria-hidden="true" />
<span
class={sharingOption.icon}
aria-hidden="true"
/>
</button>
{/if}
<svelte:fragment slot="tooltip">
{
sharingOption.type === 'copy'
{sharingOption.type === "copy"
? copyText
: `Share on ${sharingOption.label}`
}
: `Share on ${sharingOption.label}`}
</svelte:fragment>
</Tooltip>
</li>
@@ -235,7 +256,7 @@
</div>
</article>
<!-- {#if categories?.length}
<div class="u-flex u-gap-16">
<div class="flex gap-4">
{#each categories as cat}
<a href={cat.href} class="web-tag">{cat.name}</a>
{/each}
@@ -271,7 +292,7 @@
</section>
</div>
</div>
<div class="web-big-padding-section-level-2 u-position-relative u-overflow-hidden">
<div class="web-big-padding-section-level-2 u-overflow-hidden relative">
<div class="web-container">
<Newsletter />
<FooterNav />

105
src/routes/+page.svelte
View File

@@ -1,19 +1,19 @@
<script lang="ts">
import OpenSource from '$lib/animations/OpenSource.svelte';
import Products from '$lib/animations/Products/Products.svelte';
import ProductsMobile from '$lib/animations/Products/ProductsMobile.svelte';
import PreFooter from '$lib/components/PreFooter.svelte';
import Technologies from '$lib/components/Technologies.svelte';
import { Main } from '$lib/layouts';
import { isMobileNavOpen } from '$lib/layouts/Main.svelte';
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
import FooterNav from '../lib/components/FooterNav.svelte';
import MainFooter from '../lib/components/MainFooter.svelte';
import DeveloperCard from './DeveloperCard.svelte';
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import CoverImage from './dashboard.png';
import OpenSource from "$lib/animations/OpenSource.svelte";
import Products from "$lib/animations/Products/Products.svelte";
import ProductsMobile from "$lib/animations/Products/ProductsMobile.svelte";
import PreFooter from "$lib/components/PreFooter.svelte";
import Technologies from "$lib/components/Technologies.svelte";
import { Main } from "$lib/layouts";
import { isMobileNavOpen } from "$lib/layouts/Main.svelte";
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from "$lib/utils/metadata";
import FooterNav from "../lib/components/FooterNav.svelte";
import MainFooter from "../lib/components/MainFooter.svelte";
import DeveloperCard from "./DeveloperCard.svelte";
import { PUBLIC_APPWRITE_DASHBOARD } from "$env/static/public";
import CoverImage from "./dashboard.png";
const title = 'Appwrite - Build like a team of hundreds';
const title = "Appwrite - Build like a team of hundreds";
const description = DEFAULT_DESCRIPTION;
const ogImage = `${DEFAULT_HOST}/images/open-graph/website.png`;
</script>
@@ -92,8 +92,8 @@
<div class="web-hero is-horizontal">
<h1 class="web-headline">
<span class="web-gradient-text">
Build like a team of hundreds<span class="web-u-color-text-accent"
>_</span
Build like a team of hundreds<span
class="web-u-color-text-accent">_</span
>
</span>
</h1>
@@ -101,8 +101,8 @@
<p class="web-description">
Build your entire backend within minutes and scale effortlessly
using Appwrite's open-source platform. Add Authentication,
Databases, Functions, Storage, and Messaging to your projects using
the frameworks and languages of your choice.
Databases, Functions, Storage, and Messaging to your projects
using the frameworks and languages of your choice.
</p>
<a
href={PUBLIC_APPWRITE_DASHBOARD}
@@ -136,7 +136,9 @@
>
Trusted by developers from the world's leading organizations
</h2>
<ul class="web-grid-3c-4c-6c is-for-logos web-u-padding-block-start-80">
<ul
class="web-grid-3c-4c-6c is-for-logos web-u-padding-block-start-80"
>
<li>
<img
src="/images/logos/trusted-by/apple.svg"
@@ -241,8 +243,12 @@
<Products />
<ProductsMobile />
<div class="web-big-padding-section-level-1 web-white-section theme-light relative">
<div class="u-inset-block-end-0 u-inset-inline-start u-width-full-line absolute">
<div
class="web-big-padding-section-level-1 web-white-section theme-light relative"
>
<div
class="u-inset-block-end-0 u-inset-inline-start u-width-full-line absolute"
>
<img
class="u-block u-width-full-line"
src="/images/bgs/padding-section-1.svg"
@@ -255,12 +261,13 @@
<div class="web-container">
<section class="web-hero is-align-start">
<span class="web-badges web-eyebrow">PRIVACY & SECURITY_</span>
<h2 class="web-display web-u-color-text-primary u-max-width-700">
<h2 class="web-display web-u-color-text-primary max-w-[700px]">
Self-host your data or take it to the Cloud
</h2>
<p class="web-description u-max-width-700">
Migrate your data from and to any platform at any time with Appwrite
Migrations. With built-in security and privacy for peace of mind.
<p class="web-description max-w-[700px]">
Migrate your data from and to any platform at any time with
Appwrite Migrations. With built-in security and privacy for peace
of mind.
</p>
</section>
<div class="u-overflow-hidden web-u-margin-block-start-80">
@@ -323,7 +330,8 @@
/>
<h3 class="aw-info-boxes-title">GDPR</h3>
<p class="aw-info-boxes-content">
Safeguard user data and privacy with provided GDPR regulations.
Safeguard user data and privacy with provided GDPR
regulations.
</p>
</li>
<li class="web-info-boxes-item">
@@ -374,8 +382,8 @@
icon="product-hunt"
avatarSrc="/images/community/avatars/terry.png"
>
Been a huge supporter of Appwrite for over a year, championing it
even at the companies I was working at. Their community is
Been a huge supporter of Appwrite for over a year, championing
it even at the companies I was working at. Their community is
second-to-none, speed of feature release is exceptional, and the
support in their Discord is incredible.
</DeveloperCard>
@@ -388,9 +396,9 @@
avatarSrc="/images/community/avatars/varun.png"
>
Recently, I embarked on a journey to create a Real-Time Chat
Application that would redefine seamless communication. Along the
way, I discovered an incredible tool that transformed my backend
game - Appwrite!
Application that would redefine seamless communication. Along
the way, I discovered an incredible tool that transformed my
backend game - Appwrite!
</DeveloperCard>
</li>
<li>
@@ -401,13 +409,14 @@
avatarSrc="/images/community/avatars/kap.png"
>
Backend Engineers, you will agree with me that building the
authentication process for your app with each new API development is
a pain. Here's my secret: I let <a
authentication process for your app with each new API
development is a pain. Here's my secret: I let <a
href="https://twitter.com/appwrite"
target="_blank"
rel="noopener noreferrer"
class="web-link is-inline">@appwrite</a
> handle my authentication process while I focus on the business logic.
> handle my authentication process while I focus on the business
logic.
</DeveloperCard>
</li>
<li>
@@ -428,10 +437,10 @@
icon="product-hunt"
avatarSrc="/images/community/avatars/terieyenike.png"
>
I have used Appwrite twice, and the experience of using it was great
as I got to build a full-stack application. I would gladly recommend
it to anyone looking to explore an alternative database option.
Appwrite is simply the best.
I have used Appwrite twice, and the experience of using it was
great as I got to build a full-stack application. I would gladly
recommend it to anyone looking to explore an alternative
database option. Appwrite is simply the best.
</DeveloperCard>
</li>
<li>
@@ -448,8 +457,8 @@
rel="noopener noreferrer"
class="web-link is-inline">@appwrite</a
>. With its robust feature set and open-source nature, it's the
perfect choice for developers who want to build secure and scalable
applications.
perfect choice for developers who want to build secure and
scalable applications.
</DeveloperCard>
</li>
</ul>
@@ -478,12 +487,12 @@
<div class="web-container relative">
<section class="web-hero is-align-start">
<span class="web-badges web-eyebrow">SDKs_</span>
<h2 class="web-display web-u-color-text-primary u-max-width-600">
<h2 class="web-display web-u-color-text-primary max-w-[600px]">
Code the way you want
</h2>
<p class="web-description u-max-width-600">
We support many SDKs making Appwrite flexible to your needs and ensuring
you can code with the language you want at any time.
<p class="web-description max-w-[600px]">
We support many SDKs making Appwrite flexible to your needs and
ensuring you can code with the language you want at any time.
</p>
<Technologies />
<a
@@ -503,7 +512,11 @@
style:height="100%"
style:left="0"
>
<div style:display="grid" style:place-items="center" style:height="100%">
<div
style:display="grid"
style:place-items="center"
style:height="100%"
>
<img
src="/images/bgs/diagonal-lines.png"
alt=""
@@ -516,7 +529,7 @@
<div class="grid-1-1">
<section class="web-hero is-align-start">
<span class="web-badges web-eyebrow">Scale_</span>
<h2 class="web-display u-max-width-600 web-u-color-text-primary">
<h2 class="web-display web-u-color-text-primary max-w-[600px]">
We scale for you
</h2>
</section>

2
src/routes/blog/post/personal-chatbot-gpt-4o/+page.markdoc
View File

@@ -90,7 +90,7 @@ To get our chatbot up and running, we must first develop a UI you can interact w
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Prompt ChatGPT demo</h1>
<code class="u-un-break-text"></code>

2
src/routes/blog/post/valentines-day-sonnet-generator/+page.markdoc
View File

@@ -80,7 +80,7 @@ In the project directory, visit `static/index.html` and replace the existing cod
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Valentine's Day Sonnet Generator ❤️</h1>
<code class="u-un-break-text"></code>

2
src/routes/brand-launch/+page.svelte
View File

@@ -1612,7 +1612,7 @@
<span>Share</span>
</button>
</div>
<div class="web-media-container u-flex-basis-250 u-stretch">
<div class="web-media-container u-stretch basis-[250px]">
<img
src="/images/brand/t-shirts.png"
alt="brand visual stuff"

300
src/routes/community/+page.svelte
View File

@@ -1,110 +1,112 @@
<script lang="ts" context="module">
export const events: EventCardProps[] = [
{
href: 'https://discord.com/events/564160730845151244/1218597329024843837',
href: "https://discord.com/events/564160730845151244/1218597329024843837",
cover: {
src: '/images/community/events/28march-office-hours.png',
alt: ''
src: "/images/community/events/28march-office-hours.png",
alt: "",
},
date: '2024-03-28',
location: 'Discord',
title: 'Office Hours: Ask me anything!',
date: "2024-03-28",
location: "Discord",
title: "Office Hours: Ask me anything!",
description:
'Join us for another round of Office Hours, where we answer your questions and geek out on everything tech and Appwrite!',
buttonText: 'View event'
"Join us for another round of Office Hours, where we answer your questions and geek out on everything tech and Appwrite!",
buttonText: "View event",
},
{
href: 'https://discord.com/events/564160730845151244/1218597959017431192',
href: "https://discord.com/events/564160730845151244/1218597959017431192",
cover: {
src: '/images/community/events/4april-office-hours.png',
alt: ''
src: "/images/community/events/4april-office-hours.png",
alt: "",
},
date: '2024-04-04',
location: 'Discord',
title: 'Office Hours: Ask me anything!',
date: "2024-04-04",
location: "Discord",
title: "Office Hours: Ask me anything!",
description:
'Join us for another round of Office Hours, where we answer your questions and geek out on everything tech and Appwrite!',
buttonText: 'View event'
"Join us for another round of Office Hours, where we answer your questions and geek out on everything tech and Appwrite!",
buttonText: "View event",
},
{
href: 'https://discord.com/events/564160730845151244/1218598369363230872',
href: "https://discord.com/events/564160730845151244/1218598369363230872",
cover: {
src: '/images/community/events/11april-office-hours.png',
alt: ''
src: "/images/community/events/11april-office-hours.png",
alt: "",
},
date: '2024-04-11',
location: 'Discord',
title: 'Office Hours: Ask me anything!',
date: "2024-04-11",
location: "Discord",
title: "Office Hours: Ask me anything!",
description:
'Join us for another round of Office Hours, where we answer your questions and geek out on everything tech and Appwrite!',
buttonText: 'View event'
}
"Join us for another round of Office Hours, where we answer your questions and geek out on everything tech and Appwrite!",
buttonText: "View event",
},
];
</script>
<script lang="ts">
import { Carousel } from '$lib/components';
import FloatingHeads from '$lib/components/FloatingHeads.svelte';
import FooterNav from '$lib/components/FooterNav.svelte';
import MainFooter from '$lib/components/MainFooter.svelte';
import MetricCard from '$lib/components/MetricCard.svelte';
import { newsletter } from '$lib/components/Newsletter.svelte';
import PreFooter from '$lib/components/PreFooter.svelte';
import { GITHUB_STARS } from '$lib/constants';
import { Main } from '$lib/layouts';
import { DEFAULT_HOST } from '$lib/utils/metadata';
import { TITLE_SUFFIX } from '$routes/titles';
import type { EventCardProps } from './EventCard.svelte';
import EventCard from './EventCard.svelte';
import type { ProjectCardProps } from './ProjectCard.svelte';
import ProjectCard from './ProjectCard.svelte';
import { Carousel } from "$lib/components";
import FloatingHeads from "$lib/components/FloatingHeads.svelte";
import FooterNav from "$lib/components/FooterNav.svelte";
import MainFooter from "$lib/components/MainFooter.svelte";
import MetricCard from "$lib/components/MetricCard.svelte";
import { newsletter } from "$lib/components/Newsletter.svelte";
import PreFooter from "$lib/components/PreFooter.svelte";
import { GITHUB_STARS } from "$lib/constants";
import { Main } from "$lib/layouts";
import { DEFAULT_HOST } from "$lib/utils/metadata";
import { TITLE_SUFFIX } from "$routes/titles";
import type { EventCardProps } from "./EventCard.svelte";
import EventCard from "./EventCard.svelte";
import type { ProjectCardProps } from "./ProjectCard.svelte";
import ProjectCard from "./ProjectCard.svelte";
export let data;
const projects: ProjectCardProps[] = [
{
title: 'Auth UI',
description: 'Appwrite-powered authentication screens generator for any application.',
image: {
src: 'https://cloud.appwrite.io/v1/storage/buckets/thumbnails/files/64803bb4f34eb4b05ee3/preview?width=800&output=webp&project=builtWithAppwrite',
alt: 'Auth UI: Fully customizable login flow for your applications'
},
href: 'https://builtwith.appwrite.io/projects/6467cedd4502d0e29205/'
},
{
title: 'Glitch',
description: 'Appwrite-powered collaboration Tool for streamlined team communication.',
image: {
src: '/images/community/projects/glitch.png',
alt: 'A screenshot of the Glitch dashboard. There\'s a sidebar, and a headline that reads: "Welcome to Glitch, powered by Appwrite"'
},
href: 'https://builtwith.appwrite.io/projects/648bfe0c1d8d70602b0b/'
},
{
title: 'uCanEarn',
title: "Auth UI",
description:
'Appwrite-powered platform where you can sell your digital products online.',
"Appwrite-powered authentication screens generator for any application.",
image: {
src: '/images/community/projects/ucanearn.png',
alt: "A screenshot of uCanEarn's website"
src: "https://cloud.appwrite.io/v1/storage/buckets/thumbnails/files/64803bb4f34eb4b05ee3/preview?width=800&output=webp&project=builtWithAppwrite",
alt: "Auth UI: Fully customizable login flow for your applications",
},
href: "https://builtwith.appwrite.io/projects/6467cedd4502d0e29205/",
},
{
title: "Glitch",
description:
"Appwrite-powered collaboration Tool for streamlined team communication.",
image: {
src: "/images/community/projects/glitch.png",
alt: 'A screenshot of the Glitch dashboard. There\'s a sidebar, and a headline that reads: "Welcome to Glitch, powered by Appwrite"',
},
href: "https://builtwith.appwrite.io/projects/648bfe0c1d8d70602b0b/",
},
{
title: "uCanEarn",
description:
"Appwrite-powered platform where you can sell your digital products online.",
image: {
src: "/images/community/projects/ucanearn.png",
alt: "A screenshot of uCanEarn's website",
},
href: "https://builtwith.appwrite.io/projects/648606ad9cd179190b28/",
},
href: 'https://builtwith.appwrite.io/projects/648606ad9cd179190b28/'
}
];
const metrics = [
{ metric: `${GITHUB_STARS}+`, description: 'GitHub Stars' },
{ metric: '3K+', description: 'Pull Requests' },
{ metric: '21K+', description: 'Commits' },
{ metric: '3K+', description: 'Issues' },
{ metric: '500+', description: 'Open Issues' },
{ metric: '2.5K+', description: 'Closed Issues' },
{ metric: '3.5K+', description: 'Forks' },
{ metric: '800+', description: 'Contributors' }
{ metric: `${GITHUB_STARS}+`, description: "GitHub Stars" },
{ metric: "3K+", description: "Pull Requests" },
{ metric: "21K+", description: "Commits" },
{ metric: "3K+", description: "Issues" },
{ metric: "500+", description: "Open Issues" },
{ metric: "2.5K+", description: "Closed Issues" },
{ metric: "3.5K+", description: "Forks" },
{ metric: "800+", description: "Contributors" },
];
let name = '';
let email = '';
let name = "";
let email = "";
let submitted = false;
let error: string | undefined;
let submitting = false;
@@ -115,15 +117,17 @@
const response = await newsletter(name, email);
submitting = false;
if (response.status >= 400) {
error = response.status >= 500 ? 'Server Error.' : 'Error submitting form.';
error =
response.status >= 500 ? "Server Error." : "Error submitting form.";
return;
}
submitted = true;
}
const title = 'Community' + TITLE_SUFFIX;
const description = 'Join our vibrant community of developers. Ask questions, contribute solutions, and inspire others to improve the backend development experience.';
const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
const title = "Community" + TITLE_SUFFIX;
const description =
"Join our vibrant community of developers. Ask questions, contribute solutions, and inspire others to improve the backend development experience.";
const ogImage = DEFAULT_HOST + "/images/open-graph/website.png";
</script>
<svelte:head>
@@ -145,9 +149,9 @@
<Main>
<div class="web-big-padding-section u-overflow-hidden">
<div class="web-big-padding-section-level-1 u-position-relative u-overflow-hidden">
<div class="web-big-padding-section-level-1 u-overflow-hidden relative">
<div
class="u-position-absolute web-u-z-index-1-negative web-u-hide-mobile"
class="web-u-z-index-1-negative web-u-hide-mobile absolute"
style:inline-size="704px"
style:block-size="670px"
style:left="calc((50% - 704px / 2) + 18rem)"
@@ -156,18 +160,18 @@
<img src="/images/community/sphere.png" alt="" />
</div>
<div class="web-big-padding-section-level-2">
<section class="web-container web-u-padding-block-end-0 u-position-relative">
<section class="web-container web-u-padding-block-end-0 relative">
<div class="web-hero is-align-start web-u-max-width-580">
<h1 class="web-display web-u-color-text-primary">
Built by a community of 800+ contributors
</h1>
<div>
<p class="web-description">
Inspire and get inspired. Join Appwrite's community of maintainers
and contributors and help us make Appwrite better for developers
worldwide.
Inspire and get inspired. Join Appwrite's community of
maintainers and contributors and help us make Appwrite better
for developers worldwide.
</p>
<div class="u-flex u-flex-wrap u-gap-12 u-margin-block-start-32">
<div class="u-margin-block-start-32 flex flex-wrap gap-3">
<a
href="/discord"
target="_blank"
@@ -195,7 +199,10 @@
</div>
<div class="web-big-padding-section-level-2">
<section class="web-container">
<ul class="web-grid-row-4 web-grid-row-4-mobile-2" style="--gap-mobile:1.5rem;">
<ul
class="web-grid-row-4 web-grid-row-4-mobile-2"
style="--gap-mobile:1.5rem;"
>
{#each metrics as props}
<li>
<MetricCard {...props} />
@@ -206,29 +213,31 @@
</div>
</div>
<div class="web-big-padding-section-level-1 u-position-relative">
<div class="web-big-padding-section-level-1 relative">
<div class="absolute-container">
<div class="green-gradient" />
<div class="pink-gradient" />
<FloatingHeads
images={[
'/images/community/avatars/1.png',
'/images/community/avatars/2.png',
'/images/avatars/torsten.png',
'/images/community/avatars/3.png',
'/images/avatars/jade.png',
'/images/community/avatars/4.png',
'/images/community/avatars/5.png',
'/images/avatars/haimantika.png',
'/images/community/avatars/6.png',
'/images/avatars/may.png'
"/images/community/avatars/1.png",
"/images/community/avatars/2.png",
"/images/avatars/torsten.png",
"/images/community/avatars/3.png",
"/images/avatars/jade.png",
"/images/community/avatars/4.png",
"/images/community/avatars/5.png",
"/images/avatars/haimantika.png",
"/images/community/avatars/6.png",
"/images/avatars/may.png",
]}
/>
</div>
<div class="web-big-padding-section-level-2">
<div class="web-container u-position-relative">
<div class="web-hero is-mobile-center web-u-gap-20 web-u-max-width-900">
<div class="web-container relative">
<div
class="web-hero is-mobile-center web-u-gap-20 web-u-max-width-900"
>
<h1 class="web-headline web-u-color-text-primary">
The power of open source benefits us all
</h1>
@@ -238,7 +247,7 @@
start contributing.
</p>
<div
class="u-flex u-flex-wrap u-main-center u-gap-12 u-margin-block-start-32"
class="u-main-center u-margin-block-start-32 flex flex-wrap gap-3"
>
<a
href="https://github.com/appwrite/appwrite/graphs/contributors"
@@ -262,8 +271,8 @@
<h2 class="web-display web-u-color-text-primary">Get involved</h2>
<div>
<p class="web-description">
With every contribution, Appwrite gets better for all of us. Start
contributing today.
With every contribution, Appwrite gets better for all of us.
Start contributing today.
</p>
</div>
</div>
@@ -273,8 +282,8 @@
style="--card-padding:2rem; --card-padding-mobile:1.25rem;"
>
<div
class="u-flex web-u-flex-direction-column-mobile
web-u-gap-96 web-u-row-gap-48"
class="web-u-flex-direction-column-mobile web-u-gap-96
web-u-row-gap-48 flex"
>
<div>
<h3 class="web-label web-u-color-text-primary">
@@ -310,9 +319,7 @@
{#each data.issues as issue}
<tr class="web-table-line-row">
<td class="web-table-line-cell u-un-break-text">
<span class="web-caption-400"
>#{issue.number}</span
>
<span class="web-caption-400">#{issue.number}</span>
</td>
<td class="web-table-line-cell">
<div>
@@ -327,7 +334,7 @@
<span>({issue.repository})</span>
</div>
<ul
class="u-flex u-flex-wrap u-gap-8 u-margin-block-start-8"
class="u-margin-block-start-8 flex flex-wrap gap-2"
>
{#each issue.tags as tag}
<li>
@@ -349,12 +356,12 @@
<section class="web-container">
<h4 class="web-label web-u-color-text-primary">Other ways to help</h4>
<ul
class="grid-box u-gap-32 web-u-gap-20-mobile u-margin-block-start-20"
class="grid-box web-u-gap-20-mobile u-margin-block-start-20 gap-8"
style="--grid-item-size:15rem"
>
<li>
<div
class="web-card is-normal has-border-gradient u-flex-vertical web-u-gap-6"
class="web-card is-normal has-border-gradient web-u-gap-6 flex flex-col"
>
<div class="web-sub-body-500 web-u-color-text-primary">
Create content
@@ -366,7 +373,7 @@
</li>
<li>
<div
class="web-card is-normal has-border-gradient u-flex-vertical web-u-gap-6"
class="web-card is-normal has-border-gradient web-u-gap-6 flex flex-col"
>
<div class="web-sub-body-500 web-u-color-text-primary">
Present at meetups
@@ -378,7 +385,7 @@
</li>
<li>
<div
class="web-card is-normal has-border-gradient u-flex-vertical web-u-gap-6"
class="web-card is-normal has-border-gradient web-u-gap-6 flex flex-col"
>
<div class="web-sub-body-500 web-u-color-text-primary">
Report bugs
@@ -390,7 +397,7 @@
</li>
<li>
<div
class="web-card is-normal has-border-gradient u-flex-vertical web-u-gap-6"
class="web-card is-normal has-border-gradient web-u-gap-6 flex flex-col"
>
<div class="web-sub-body-500 web-u-color-text-primary">
Submit new ideas
@@ -402,7 +409,7 @@
</li>
<li>
<div
class="web-card is-normal has-border-gradient u-flex-vertical web-u-gap-6"
class="web-card is-normal has-border-gradient web-u-gap-6 flex flex-col"
>
<div class="web-sub-body-500 web-u-color-text-primary">
Improve documentation
@@ -414,7 +421,7 @@
</li>
<li>
<div
class="web-card is-normal has-border-gradient u-flex-vertical web-u-gap-6"
class="web-card is-normal has-border-gradient web-u-gap-6 flex flex-col"
>
<div class="web-sub-body-500 web-u-color-text-primary">
Helping others
@@ -428,10 +435,14 @@
</section>
</div>
<div class="web-big-padding-section-level-2">
<section class="web-container web-u-sep-block-start web-u-padding-block-start-64">
<section
class="web-container web-u-sep-block-start web-u-padding-block-start-64"
>
<Carousel size="big">
<svelte:fragment slot="header">
<h4 class="web-label web-u-color-text-primary">Upcoming Events</h4>
<h4 class="web-label web-u-color-text-primary">
Upcoming Events
</h4>
</svelte:fragment>
{#each events as event}
<li>
@@ -452,7 +463,7 @@
</div>
<div
class="web-big-padding-section-level-1 u-position-relative web-white-section theme-light"
class="web-big-padding-section-level-1 web-white-section theme-light relative"
>
<div class="web-big-padding-section-level-2">
<div class="web-container">
@@ -461,8 +472,8 @@
Inspire and get inspired
</h2>
<p class="web-description web-u-margin-block-start-0">
Visit our showcase website built with Appwrite to find inspiration for
your projects or to showcase what you have built.
Visit our showcase website built with Appwrite to find inspiration
for your projects or to showcase what you have built.
</p>
<a
href="https://builtwith.appwrite.io"
@@ -486,7 +497,9 @@
<div class="web-big-padding-section-level-1 web-white-section theme-light">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<div class="web-grid-15-25-desktop web-u-row-gap-48 web-u-column-gap-96">
<div
class="web-grid-15-25-desktop web-u-row-gap-48 web-u-column-gap-96"
>
<div class="web-hero is-align-start web-u-max-width-380">
<div class="web-display web-u-color-text-primary">
Visit the community
@@ -501,10 +514,10 @@
href="/discord"
target="_blank"
rel="noopener noreferrer"
class="web-card is-white web-u-min-block-size-320 u-flex-vertical"
class="web-card is-white web-u-min-block-size-320 flex flex-col"
style="--card-padding:2rem;rotate: 6deg"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<div class="u-main-space-between flex flex-col gap-8">
<span
class="icon-discord web-u-font-size-40"
aria-hidden="true"
@@ -521,10 +534,10 @@
href="https://twitter.com/intent/follow?screen_name=appwrite"
target="_blank"
rel="noopener noreferrer"
class="web-card is-white web-u-min-block-size-320 u-flex-vertical"
class="web-card is-white web-u-min-block-size-320 flex flex-col"
style="--card-padding:2rem; rotate: 2deg"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<div class="u-main-space-between flex flex-col gap-8">
<span
class="web-icon-x web-u-font-size-40"
aria-hidden="true"
@@ -541,10 +554,10 @@
href="https://github.com/appwrite/appwrite"
target="_blank"
rel="noopener noreferrer"
class="web-card is-white web-u-min-block-size-320 u-flex-vertical"
class="web-card is-white web-u-min-block-size-320 flex flex-col"
style="--card-padding:2rem; rotate: -10deg"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<div class="u-main-space-between flex flex-col gap-8">
<span
class="icon-github web-u-font-size-40"
aria-hidden="true"
@@ -561,10 +574,10 @@
href="https://www.youtube.com/c/appwrite?sub_confirmation=1"
target="_blank"
rel="noopener noreferrer"
class="web-card is-white web-u-min-block-size-320 u-flex-vertical"
class="web-card is-white web-u-min-block-size-320 flex flex-col"
style="--card-padding:2rem; rotate: -6deg"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<div class="u-main-space-between flex flex-col gap-8">
<span
class="icon-youtube web-u-font-size-40"
aria-hidden="true"
@@ -584,13 +597,13 @@
<div class="web-big-padding-section-level-1">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<div class="web-grid-1-1-opt-2 u-gap-32">
<div class="web-grid-1-1-opt-2 gap-8">
<div class="">
<div
class="web-u-max-inline-size-none-mobile"
class:web-u-max-width-380={!submitted}
>
<section class="u-flex-vertical web-u-gap-20">
<section class="web-u-gap-20 flex flex-col">
<h1 class="web-title web-u-color-text-primary">
Appwrite insights
</h1>
@@ -603,7 +616,7 @@
</div>
</div>
{#if submitted}
<div class="u-flex u-gap-8 u-cross-center">
<div class="u-cross-center flex gap-2">
<svg
width="18"
height="18"
@@ -633,16 +646,17 @@
</svg>
<span class="text">
Thank you for subscribing! An email has been sent to your inbox.
Thank you for subscribing! An email has been sent to your
inbox.
</span>
</div>
{:else}
<form
method="post"
on:submit|preventDefault={submit}
class="u-flex-vertical u-gap-16"
class="flex flex-col gap-4"
>
<div class="u-flex u-flex-vertical u-gap-4">
<div class="flex flex flex-col gap-1">
<label for="name">Your name</label>
<input
class="web-input-text"
@@ -654,7 +668,7 @@
bind:value={name}
/>
</div>
<div class="u-flex u-flex-vertical u-gap-4">
<div class="flex flex flex-col gap-1">
<label for="email">Your email</label>
<input
class="web-input-text"
@@ -681,7 +695,7 @@
</div>
<div
class="web-big-padding-section-level-2 is-margin-replace-padding u-position-relative"
class="web-big-padding-section-level-2 is-margin-replace-padding relative"
>
<div class="web-container">
<PreFooter />
@@ -710,7 +724,11 @@
border-radius: 842px;
opacity: 0.4;
background: radial-gradient(50% 46.73% at 50% 53.27%, #fe9567 28.17%, #fd366e 59.38%);
background: radial-gradient(
50% 46.73% at 50% 53.27%,
#fe9567 28.17%,
#fd366e 59.38%
);
filter: blur(150px);
position: absolute;
@@ -721,7 +739,11 @@
.green-gradient {
border-radius: 771px;
opacity: 0.3;
background: radial-gradient(49.55% 43.54% at 47% 50.69%, #e7f8f7 0%, #85dbd8 100%);
background: radial-gradient(
49.55% 43.54% at 47% 50.69%,
#e7f8f7 0%,
#85dbd8 100%
);
filter: blur(150px);
width: 571px;
height: 771px;

159
src/routes/company/+page.svelte
View File

@@ -1,13 +1,13 @@
<script lang="ts">
import { Main } from '$lib/layouts';
import MainFooter from '$lib/components/MainFooter.svelte';
import FooterNav from '$lib/components/FooterNav.svelte';
import { TITLE_SUFFIX } from '$routes/titles';
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
import { Main } from "$lib/layouts";
import MainFooter from "$lib/components/MainFooter.svelte";
import FooterNav from "$lib/components/FooterNav.svelte";
import { TITLE_SUFFIX } from "$routes/titles";
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from "$lib/utils/metadata";
const title = 'Company' + TITLE_SUFFIX;
const title = "Company" + TITLE_SUFFIX;
const description = DEFAULT_DESCRIPTION;
const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
const ogImage = DEFAULT_HOST + "/images/open-graph/website.png";
</script>
<svelte:head>
@@ -29,17 +29,17 @@
<Main>
<enhanced:img
class="u-position-absolute u-inset-inline-start-0 u-inset-block-start-0"
class="u-inset-inline-start-0 u-inset-block-start-0 absolute"
src="./bg-left.png"
alt=""
/>
<enhanced:img
class="u-position-absolute u-inset-inline-end-0 u-inset-block-start-0"
class="u-inset-inline-end-0 u-inset-block-start-0 absolute"
src="./bg-right.png"
alt=""
/>
<div class="web-big-padding-section u-position-relative">
<div class="web-big-padding-section-level-1 u-position-relative">
<div class="web-big-padding-section relative">
<div class="web-big-padding-section-level-1 relative">
<div class="web-big-padding-section-level-2" style:margin-block="8rem">
<section class="web-container web-u-padding-block-end-0">
<div
@@ -51,24 +51,24 @@
</h1>
<div>
<p class="web-description">
Software development transforms our everyday lives, relying heavily
on the creativity and innovation of developers. At Appwrite, we
enable them to develop products the world loves by removing
technical barriers with our backend products.
Software development transforms our everyday lives, relying
heavily on the creativity and innovation of developers. At
Appwrite, we enable them to develop products the world loves by
removing technical barriers with our backend products.
</p>
</div>
</div>
</section>
</div>
</div>
<div class="web-big-padding-section-level-1 u-position-relative">
<div class="web-big-padding-section-level-1 relative">
<div class="web-big-padding-section-level-2">
<section class="web-container">
<section
class="web-grid-1-1"
style="--grid-1-1-gap:2rem; --grid-1-1-gap-desktop:6.25rem;"
>
<div class="u-flex-vertical u-gap-32">
<div class="flex flex-col gap-8">
<h2 class="web-display web-u-color-text-primary">
Designed for and by developers
</h2>
@@ -82,20 +82,22 @@
</a>
</div>
<div class="web-description u-flex-vertical u-gap-16">
<div class="web-description flex flex-col gap-4">
<p>
At Appwrite it is our mission to eliminate friction and abstract
complexity for every creator. Giving developers all the tools they
need with the best experience possible to have all the capabilities
to create and innovate without limits and with minimum concerns.
complexity for every creator. Giving developers all the tools
they need with the best experience possible to have all the
capabilities to create and innovate without limits and with
minimum concerns.
</p>
<p>
We do this by building the most complete development platform
created for developers, backed by the open source community. A
platform that has all the solutions you need in one place, with
maximum flexibility and minimum friction. A platform that moves with
you on your journey, from ideation to scale. A platform that allows
you to succeed in the challenges of today, and those of tomorrow.
maximum flexibility and minimum friction. A platform that moves
with you on your journey, from ideation to scale. A platform
that allows you to succeed in the challenges of today, and those
of tomorrow.
</p>
<p>Build like a team of hundreds.</p>
</div>
@@ -104,7 +106,7 @@
</div>
</div>
<!-- <div class="web-big-padding-section-level-1 u-position-relative web-white-section theme-light">
<!-- <div class="web-big-padding-section-level-1 relative web-white-section theme-light">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<div class="web-hero is-center">
@@ -121,7 +123,7 @@
<li class="web-timeline-content-item">
<div class="web-timeline-content-item-top web-grid-1-1"
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div class="u-flex-vertical u-gap-16">
<div class="flex flex-col gap-4">
<span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span>
<h3 class="web-title web-u-color-text-primary">
A passion project called Appwrite
@@ -154,7 +156,7 @@
<li class="web-timeline-content-item">
<div class="web-grid-1-1"
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div class="u-flex-vertical u-gap-16">
<div class="flex flex-col gap-4">
<span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span>
<h3 class="web-title web-u-color-text-primary">
Building the team
@@ -182,7 +184,7 @@
<li class="web-timeline-content-item">
<div class="web-grid-1-1"
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div class="u-flex-vertical u-gap-16">
<div class="flex flex-col gap-4">
<span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span>
<h3 class="web-title web-u-color-text-primary">
Community validation
@@ -200,8 +202,8 @@
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div>
<div class="web-card is-white">
<div class="web-social-item u-flex-vertical u-gap-24">
<div class="u-flex u-gap-16 u-main-space-between">
<div class="web-social-item flex flex-col gap-6">
<div class="flex gap-4 u-main-space-between">
<div class="web-user-box">
<img class="web-user-box-image" src="/images/avatars/eldad.png" alt="Avatar of Eldad Fux">
<div class="web-user-box-name web-sub-body-500">Eldad Fux</div>
@@ -224,7 +226,7 @@
<li class="web-timeline-content-item">
<div class="web-grid-1-1"
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div class="u-flex-vertical u-gap-16">
<div class="flex flex-col gap-4">
<span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span>
<h3 class="web-title web-u-color-text-primary">
Continuous improvement
@@ -253,7 +255,7 @@
<li class="web-timeline-content-item">
<div class="web-grid-1-1"
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div class="u-flex-vertical u-gap-16">
<div class="flex flex-col gap-4">
<span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span>
<h3 class="web-title web-u-color-text-primary">
Taking it to the Cloud
@@ -286,9 +288,12 @@
<div class="web-big-padding-section-level-2">
<div class="web-container">
<div class="web-hero web-u-max-width-800">
<h4 class="web-display web-u-color-text-primary">Backed by top investors</h4>
<h4 class="web-display web-u-color-text-primary">
Backed by top investors
</h4>
<p class="web-description web-u-max-width-480 u-margin-inline-auto">
Appwrite is proudly backed by some of the top investors in the industry.
Appwrite is proudly backed by some of the top investors in the
industry.
</p>
</div>
<ul class="web-investor-cards web-u-margin-block-start-64">
@@ -299,7 +304,10 @@
target="_blank"
rel="noopener noreferrer"
>
<div class="web-card is-full-color" style="--card-padding:1rem;">
<div
class="web-card is-full-color"
style="--card-padding:1rem;"
>
<img
src="/images/investors/light/bessemer.svg"
alt=""
@@ -315,7 +323,10 @@
target="_blank"
rel="noopener noreferrer"
>
<div class="web-card is-full-color" style="--card-padding:1rem;">
<div
class="web-card is-full-color"
style="--card-padding:1rem;"
>
<img
src="/images/investors/light/tiger-global.svg"
alt=""
@@ -331,7 +342,10 @@
target="_blank"
rel="noopener noreferrer"
>
<div class="web-card is-full-color" style="--card-padding:1rem;">
<div
class="web-card is-full-color"
style="--card-padding:1rem;"
>
<img
src="/images/investors/light/ibex.svg"
alt=""
@@ -347,7 +361,10 @@
target="_blank"
rel="noopener noreferrer"
>
<div class="web-card is-full-color" style="--card-padding:1rem;">
<div
class="web-card is-full-color"
style="--card-padding:1rem;"
>
<img
src="/images/investors/light/flybridge.svg"
alt=""
@@ -363,7 +380,10 @@
target="_blank"
rel="noopener noreferrer"
>
<div class="web-card is-full-color" style="--card-padding:1rem;">
<div
class="web-card is-full-color"
style="--card-padding:1rem;"
>
<img
src="/images/investors/light/seedcamp.svg"
alt=""
@@ -377,16 +397,18 @@
</div>
<div class="web-big-padding-section-level-2">
<div class="web-container">
<h5 class="web-title web-u-color-text-primary u-text-center">Angel Investors</h5>
<h5 class="web-title web-u-color-text-primary text-center">
Angel Investors
</h5>
<ul class="web-grid-2c-4c u-margin-block-start-48">
<li class="u-flex-vertical">
<li class="flex flex-col">
<h6 class="web-main-body-500 web-u-color-text-primary">
Aaron Applebaum
</h6>
<p class="web-main-body-500">Partner</p>
<p class="web-main-body-500">MizMaa</p>
<ul
class="u-flex u-gap-8 u-padding-block-start-16 u-margin-block-start-auto"
class="u-padding-block-start-16 u-margin-block-start-auto flex gap-2"
>
<li>
<a
@@ -412,12 +434,14 @@
</li>
</ul>
</li>
<li class="u-flex-vertical">
<h6 class="web-main-body-500 web-u-color-text-primary">Ariel Maislos</h6>
<li class="flex flex-col">
<h6 class="web-main-body-500 web-u-color-text-primary">
Ariel Maislos
</h6>
<p class="web-main-body-500">Angel Investor</p>
<p class="web-main-body-500">Former Apple IL CEO</p>
<ul
class="u-flex u-gap-8 u-padding-block-start-16 u-margin-block-start-auto"
class="u-padding-block-start-16 u-margin-block-start-auto flex gap-2"
>
<li>
<a
@@ -443,21 +467,23 @@
</li>
</ul>
</li>
<li class="u-flex-vertical">
<h6 class="web-main-body-500 web-u-color-text-primary">Gilad Engel</h6>
<li class="flex flex-col">
<h6 class="web-main-body-500 web-u-color-text-primary">
Gilad Engel
</h6>
<p class="web-main-body-500">Angel Investor</p>
<ul
class="u-flex u-gap-8 u-padding-block-start-16 u-margin-block-start-auto"
class="u-padding-block-start-16 u-margin-block-start-auto flex gap-2"
/>
</li>
<li class="u-flex-vertical">
<li class="flex flex-col">
<h6 class="web-main-body-500 web-u-color-text-primary">
Krishna Visvanathan
</h6>
<p class="web-main-body-500">Co-founder & Partner</p>
<p class="web-main-body-500">Crane Venture Partners</p>
<ul
class="u-flex u-gap-8 u-padding-block-start-16 u-margin-block-start-auto"
class="u-padding-block-start-16 u-margin-block-start-auto flex gap-2"
>
<li>
<a
@@ -472,11 +498,13 @@
</li>
</ul>
</li>
<li class="u-flex-vertical">
<h6 class="web-main-body-500 web-u-color-text-primary">Ameet Patel</h6>
<li class="flex flex-col">
<h6 class="web-main-body-500 web-u-color-text-primary">
Ameet Patel
</h6>
<p class="web-main-body-500">Angel Investor</p>
<ul
class="u-flex u-gap-8 u-padding-block-start-16 u-margin-block-start-auto"
class="u-padding-block-start-16 u-margin-block-start-auto flex gap-2"
>
<li>
<a
@@ -491,12 +519,14 @@
</li>
</ul>
</li>
<li class="u-flex-vertical">
<h6 class="web-main-body-500 web-u-color-text-primary">Benno Jering</h6>
<li class="flex flex-col">
<h6 class="web-main-body-500 web-u-color-text-primary">
Benno Jering
</h6>
<p class="web-main-body-500">Partner</p>
<p class="web-main-body-500">Redline Capital</p>
<ul
class="u-flex u-gap-8 u-padding-block-start-16 u-margin-block-start-auto"
class="u-padding-block-start-16 u-margin-block-start-auto flex gap-2"
>
<li>
<a
@@ -511,14 +541,14 @@
</li>
</ul>
</li>
<li class="u-flex-vertical">
<li class="flex flex-col">
<h6 class="web-main-body-500 web-u-color-text-primary">
James Lindenbaum
</h6>
<p class="web-main-body-500">Co-founder</p>
<p class="web-main-body-500">Heroku</p>
<ul
class="u-flex u-gap-8 u-padding-block-start-16 u-margin-block-start-auto"
class="u-padding-block-start-16 u-margin-block-start-auto flex gap-2"
>
<li>
<a
@@ -533,12 +563,14 @@
</li>
</ul>
</li>
<li class="u-flex-vertical">
<h6 class="web-main-body-500 web-u-color-text-primary">Uri Boness</h6>
<li class="flex flex-col">
<h6 class="web-main-body-500 web-u-color-text-primary">
Uri Boness
</h6>
<p class="web-main-body-500">Co-Founder</p>
<p class="web-main-body-500">Elastic</p>
<ul
class="u-flex u-gap-8 u-padding-block-start-16 u-margin-block-start-auto"
class="u-padding-block-start-16 u-margin-block-start-auto flex gap-2"
>
<li>
<a
@@ -560,7 +592,7 @@
<div class="web-big-padding-section-level-1 u-padding-0 u-overflow-hidden">
<div
class="web-big-padding-section-level-2 is-margin-replace-padding u-position-relative"
class="web-big-padding-section-level-2 is-margin-replace-padding relative"
>
<img
src="/images/bgs/pre-footer.png"
@@ -572,7 +604,8 @@
<div class="web-hero web-u-max-width-380">
<h3 class="web-display web-u-color-text-primary">Join the team</h3>
<p class="web-u-color-text-primary web-u-opacity-64">
Find your next career at Appwrite and join a team of remote workers.
Find your next career at Appwrite and join a team of remote
workers.
</p>
<a
href="https://appwrite.careers"

61
src/routes/contact-us/+page.svelte
View File

@@ -1,43 +1,44 @@
<script lang="ts">
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
import { Main } from '$lib/layouts';
import { TITLE_SUFFIX } from '$routes/titles';
import FooterNav from '../../lib/components/FooterNav.svelte';
import MainFooter from '../../lib/components/MainFooter.svelte';
import { socials } from '$lib/constants';
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from "$lib/utils/metadata";
import { Main } from "$lib/layouts";
import { TITLE_SUFFIX } from "$routes/titles";
import FooterNav from "../../lib/components/FooterNav.svelte";
import MainFooter from "../../lib/components/MainFooter.svelte";
import { socials } from "$lib/constants";
let email = '';
let firstName = '';
let subject = '';
let message = '';
let email = "";
let firstName = "";
let subject = "";
let message = "";
let error: string | undefined;
let submitted = false;
async function handleSubmit() {
error = undefined;
const response = await fetch('https://growth.appwrite.io/v1/feedback', {
method: 'POST',
const response = await fetch("https://growth.appwrite.io/v1/feedback", {
method: "POST",
headers: {
'Content-Type': 'application/json'
"Content-Type": "application/json",
},
body: JSON.stringify({
email,
firstName,
subject,
message
})
message,
}),
});
if (response.status >= 400) {
error = response.status >= 500 ? 'Server Error.' : 'Error submitting form.';
error =
response.status >= 500 ? "Server Error." : "Error submitting form.";
return;
}
submitted = true;
}
const title = 'Contact us' + TITLE_SUFFIX;
const title = "Contact us" + TITLE_SUFFIX;
const description = DEFAULT_DESCRIPTION;
const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
const ogImage = DEFAULT_HOST + "/images/open-graph/website.png";
</script>
<svelte:head>
@@ -57,7 +58,7 @@
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<div class="u-position-absolute" style="pointer-events:none;">
<div class="absolute" style="pointer-events:none;">
<enhanced:img src="./bg.png" alt="" />
</div>
@@ -66,14 +67,14 @@
<div class="web-big-padding-section-level-1">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<div class="web-grid-1-1-opt-2 u-gap-32">
<div class="web-grid-1-1-opt-2 gap-8">
<div>
<div
class="web-u-max-inline-size-none-mobile"
class:web-u-max-width-380={!submitted}
>
{#if submitted}
<section class="u-flex-vertical web-u-gap-20">
<section class="web-u-gap-20 flex flex-col">
<h1 class="web-display web-u-color-text-primary">
Thank you for your message
</h1>
@@ -90,21 +91,21 @@
</a>
</section>
{:else}
<section class="u-flex-vertical web-u-gap-20">
<section class="web-u-gap-20 flex flex-col">
<h1 class="web-display web-u-color-text-primary">
Contact Us
</h1>
<p class="web-description web-u-padding-block-end-40">
We'd love your input: questions, feature requests, bugs
or compliments.
We'd love your input: questions, feature requests, bugs or
compliments.
</p>
</section>
{/if}
<section
class="u-flex-vertical u-gap-12 web-u-padding-block-start-40 web-u-sep-block-start"
class="web-u-padding-block-start-40 web-u-sep-block-start flex flex-col gap-3"
>
<h2 class="web-label web-u-color-text-primary">Follow us</h2>
<ul class="u-flex u-gap-8">
<ul class="flex gap-2">
{#each socials as social}
<li>
<a
@@ -129,11 +130,11 @@
<form
method="post"
on:submit|preventDefault={handleSubmit}
class="u-flex-vertical u-gap-16"
class="flex flex-col gap-4"
>
<div class="u-flex u-main-end">
<div class="u-main-end flex">
<ul
class="web-form-list is-two-columns u-gap-16 u-width-full-line web-u-max-width-580 web-u-max-inline-size-none-mobile"
class="web-form-list is-two-columns u-width-full-line web-u-max-width-580 web-u-max-inline-size-none-mobile gap-4"
>
<li class="web-form-item">
<input
@@ -179,7 +180,7 @@
</ul>
</div>
<div
class="u-flex u-gap-16 u-main-space-between web-u-flex-vertical-reverse-mobile"
class="u-main-space-between web-u-flex-vertical-reverse-mobile flex gap-4"
>
<p class="web-caption-400 web-u-max-width-380">
{#if error}

166
src/routes/docs/+page.svelte
View File

@@ -1,48 +1,49 @@
<script lang="ts">
import { Carousel } from '$lib/components';
import Technologies from '$lib/components/Technologies.svelte';
import Docs from '$lib/layouts/Docs.svelte';
import { DEFAULT_HOST } from '$lib/utils/metadata';
import { TITLE_SUFFIX } from '$routes/titles';
import MainFooter from '../../lib/components/MainFooter.svelte';
import CodeCard, { type CodeCardProps } from './CodeCard.svelte';
import Sidebar from './Sidebar.svelte';
import { Carousel } from "$lib/components";
import Technologies from "$lib/components/Technologies.svelte";
import Docs from "$lib/layouts/Docs.svelte";
import { DEFAULT_HOST } from "$lib/utils/metadata";
import { TITLE_SUFFIX } from "$routes/titles";
import MainFooter from "../../lib/components/MainFooter.svelte";
import CodeCard, { type CodeCardProps } from "./CodeCard.svelte";
import Sidebar from "./Sidebar.svelte";
const title = 'Docs' + TITLE_SUFFIX;
const description = 'Learn how to build like a team of hundreds. Get started with Authentication, Databases, Storage, Functions, and Messaging in your preferred framework.';
const ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
const title = "Docs" + TITLE_SUFFIX;
const description =
"Learn how to build like a team of hundreds. Get started with Authentication, Databases, Storage, Functions, and Messaging in your preferred framework.";
const ogImage = DEFAULT_HOST + "/images/open-graph/docs.png";
const tutorials: CodeCardProps[] = [
{
href: '/docs/tutorials/react',
cover: '/images/tutorials/react.png',
title: 'React tutorial',
description: 'Learn Appwrite Auth, Databases, and more with React.'
href: "/docs/tutorials/react",
cover: "/images/tutorials/react.png",
title: "React tutorial",
description: "Learn Appwrite Auth, Databases, and more with React.",
},
{
href: '/docs/tutorials/sveltekit',
cover: '/images/tutorials/svelte.png',
title: 'SvelteKit tutorial',
description: 'Learn Appwrite Auth, Databases, and more with SvelteKit.'
href: "/docs/tutorials/sveltekit",
cover: "/images/tutorials/svelte.png",
title: "SvelteKit tutorial",
description: "Learn Appwrite Auth, Databases, and more with SvelteKit.",
},
{
href: '/docs/tutorials/vue',
cover: '/images/tutorials/vue.png',
title: 'Vue tutorial',
description: 'Learn Appwrite Auth, Databases, and more with Vue.'
href: "/docs/tutorials/vue",
cover: "/images/tutorials/vue.png",
title: "Vue tutorial",
description: "Learn Appwrite Auth, Databases, and more with Vue.",
},
{
href: '/docs/tutorials/android',
cover: '/images/tutorials/android.png',
title: 'Android tutorial',
description: 'Learn Appwrite Auth, Databases, and more with Android.'
href: "/docs/tutorials/android",
cover: "/images/tutorials/android.png",
title: "Android tutorial",
description: "Learn Appwrite Auth, Databases, and more with Android.",
},
{
href: '/docs/tutorials/flutter',
cover: '/images/tutorials/flutter.png',
title: 'Flutter tutorial',
description: 'Learn Appwrite Auth, Databases, and more with Flutter.'
}
href: "/docs/tutorials/flutter",
cover: "/images/tutorials/flutter.png",
title: "Flutter tutorial",
description: "Learn Appwrite Auth, Databases, and more with Flutter.",
},
];
</script>
@@ -67,44 +68,50 @@
<Sidebar />
<main
class="web-main-section u-position-relative web-u-overflow-hidden-break1-to-break3"
class="web-main-section web-u-overflow-hidden-break1-to-break3 relative"
id="main"
>
<div class="u-position-absolute web-u-opacity-40-mobile bg-blur">
<div class="web-u-opacity-40-mobile bg-blur absolute">
<img src="/images/bgs/docs-blur-1.svg" alt="" />
</div>
<div
class="u-position-absolute u-inset-inline-start-0 u-inset-block-start-16 web-u-opacity-40-mobile"
class="u-inset-inline-start-0 u-inset-block-start-16 web-u-opacity-40-mobile absolute"
style=" margin-inline-start: -30px;"
>
<enhanced:img src="./blur-2.png" alt="" />
</div>
<section class="web-hero is-align-start u-position-relative e-hero-docs">
<h1 class="web-display web-u-color-text-primary u-max-width-600">
Learn how to build like a team of hundreds<span class="web-u-color-text-accent"
<section class="web-hero is-align-start e-hero-docs relative">
<h1 class="web-display web-u-color-text-primary max-w-[600px]">
Learn how to build like a team of hundreds<span
class="web-u-color-text-accent"
>_
</span>
</h1>
<p class="web-description u-max-width-600">
Appwrite helps you build secure and scalable apps, faster. Leverage Appwrite's
powerful APIs to stop fighting technologies and start delivering value.
<p class="web-description max-w-[600px]">
Appwrite helps you build secure and scalable apps, faster. Leverage
Appwrite's powerful APIs to stop fighting technologies and start
delivering value.
</p>
</section>
<section class="web-hero is-align-start tech-hero">
<h2 class="web-title web-u-color-text-primary u-max-width-600">
<h2 class="web-title web-u-color-text-primary max-w-[600px]">
Get started with your technologies
</h2>
<p class="web-description u-max-width-600">
Start building with your preferred web, mobile, and native frameworks by following a
quick start guide.
<p class="web-description max-w-[600px]">
Start building with your preferred web, mobile, and native frameworks by
following a quick start guide.
</p>
<Technologies />
<a href="/docs/sdks" class="web-button is-secondary" style:align-self="start">
<a
href="/docs/sdks"
class="web-button is-secondary"
style:align-self="start"
>
<span class="web-sub-body-500">Explore all technologies</span>
</a>
<div class="u-position-absolute web-is-not-mobile spline-wrapper">
<div class="web-is-not-mobile spline-wrapper absolute">
<img
class="u-only-dark"
src="/images/animations/tech-dark-transparent.png"
@@ -125,8 +132,10 @@
<div class="bg-overlay" />
</section>
<section>
<h2 class="web-title web-u-color-text-primary u-max-width-600">Show me some code</h2>
<p class="web-description u-max-width-600 u-margin-block-start-16">
<h2 class="web-title web-u-color-text-primary max-w-[600px]">
Show me some code
</h2>
<p class="web-description u-margin-block-start-16 max-w-[600px]">
If you learn best from code examples, follow one of our tutorials.
</p>
<Carousel size="medium">
@@ -138,10 +147,12 @@
</Carousel>
</section>
<section class="web-hero is-align-start is-no-max-width">
<h2 class="web-title web-u-color-text-primary u-max-width-600">Explore capabilities</h2>
<p class="web-description u-max-width-600">
All the core functionalities you need with a scalable and flexible API. Explore
Appwrite's product offerings.
<h2 class="web-title web-u-color-text-primary max-w-[600px]">
Explore capabilities
</h2>
<p class="web-description max-w-[600px]">
All the core functionalities you need with a scalable and flexible API.
Explore Appwrite's product offerings.
</p>
<div class="u-margin-block-start-24">
<ul class="web-grid-row-4 web-grid-row-4-m-1">
@@ -305,12 +316,12 @@
</div>
</section>
<section class="web-hero is-align-start is-no-max-width">
<h2 class="web-title web-u-color-text-primary u-max-width-600">
<h2 class="web-title web-u-color-text-primary max-w-[600px]">
Explore ways to integrate
</h2>
<p class="web-description u-max-width-600">
Choose how you integrate with Appwrite. Explore references for the Appwrite SDK,
REST API, GraphQL API, or Realtime API.
<p class="web-description max-w-[600px]">
Choose how you integrate with Appwrite. Explore references for the
Appwrite SDK, REST API, GraphQL API, or Realtime API.
</p>
<div class="u-margin-block-start-24">
<ul class="web-grid-row-2">
@@ -346,8 +357,8 @@
GraphQL
</h4>
<p class="web-sub-body-400 u-margin-block-start-4">
Leverage GraphQL through our SDKs or integrate directly with REST
endpoints.
Leverage GraphQL through our SDKs or integrate directly with
REST endpoints.
</p>
</a>
</li>
@@ -368,14 +379,19 @@
</div>
</section>
<section class="web-hero is-align-start is-no-max-width">
<h2 class="web-title web-u-color-text-primary u-max-width-600">Migrate to Appwrite</h2>
<p class="web-description u-max-width-600">
<h2 class="web-title web-u-color-text-primary max-w-[600px]">
Migrate to Appwrite
</h2>
<p class="web-description max-w-[600px]">
Own your data with automatic data migrations.
</p>
<div class="u-margin-block-start-24">
<ul class="web-grid-row-4">
<li>
<a href="/docs/advanced/migrations/self-hosted" class="web-card is-normal">
<a
href="/docs/advanced/migrations/self-hosted"
class="web-card is-normal"
>
<h4
class="web-sub-body-500 web-u-color-text-primary u-margin-block-start-8"
>
@@ -387,7 +403,10 @@
</a>
</li>
<li>
<a href="/docs/advanced/migrations/firebase" class="web-card is-normal">
<a
href="/docs/advanced/migrations/firebase"
class="web-card is-normal"
>
<h4
class="web-sub-body-500 web-u-color-text-primary u-margin-block-start-8"
>
@@ -399,7 +418,10 @@
</a>
</li>
<li>
<a href="/docs/advanced/migrations/supabase" class="web-card is-normal">
<a
href="/docs/advanced/migrations/supabase"
class="web-card is-normal"
>
<h4
class="web-sub-body-500 web-u-color-text-primary u-margin-block-start-8"
>
@@ -411,7 +433,10 @@
</a>
</li>
<li>
<a href="/docs/advanced/migrations/nhost" class="web-card is-normal">
<a
href="/docs/advanced/migrations/nhost"
class="web-card is-normal"
>
<h4
class="web-sub-body-500 web-u-color-text-primary u-margin-block-start-8"
>
@@ -431,7 +456,7 @@
</Docs>
<style lang="scss">
@use '$scss/abstract/mixins/border-gradient' as gradients;
@use "$scss/abstract/mixins/border-gradient" as gradients;
.e-hero-docs {
@media (min-width: 1280px) {
@@ -483,14 +508,19 @@
.bg-overlay {
position: absolute;
background: linear-gradient(to right, #ffffff00 0%, #ffffff00 400px, #ffffff);
background: linear-gradient(
to right,
#ffffff00 0%,
#ffffff00 400px,
#ffffff
);
top: 0;
right: 10rem;
translate: 100%;
width: 100rem;
height: 100%;
content: '';
content: "";
z-index: 9999;
}
}

2
src/routes/docs/products/ai/integrations/anyscale/+page.markdoc
View File

@@ -135,7 +135,7 @@ After the `</head>` tag add a `<body>` containing the visible form:
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Prompt Anyscale Demo</h1>
<code class="u-un-break-text"></code>

2
src/routes/docs/products/ai/integrations/elevenlabs/+page.markdoc
View File

@@ -138,7 +138,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">ElevenLabs Demo</h1>
<code class="u-un-break-text"></code>

2
src/routes/docs/products/ai/integrations/fal-ai/+page.markdoc
View File

@@ -135,7 +135,7 @@ And after the `</head>` tag, add our `<body>` tag with the following content:
<main class="main-content">
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div class="flex gap-4 u-flex-justify-center u-margin-block-start-16">
<div class="flex gap-4 justify-center u-margin-block-start-16">
<h1 class="heading-level-1">fal.ai demo</h1>
<code class="u-un-break-text"></code>
</div>

2
src/routes/docs/products/ai/integrations/langchain/+page.markdoc
View File

@@ -118,7 +118,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Pinecone Demo</h1>
<code class="u-un-break-text"></code>

2
src/routes/docs/products/ai/integrations/lmnt/+page.markdoc
View File

@@ -146,7 +146,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">LMNT Demo</h1>
<code class="u-un-break-text"></code>

2
src/routes/docs/products/ai/integrations/openai/+page.markdoc
View File

@@ -135,7 +135,7 @@ After the `</head>` tag add a `<body>` containing the visible form:
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Prompt ChatGPT Demo</h1>
<code class="u-un-break-text"></code>

2
src/routes/docs/products/ai/integrations/perplexity/+page.markdoc
View File

@@ -137,7 +137,7 @@ And after the `</head>` tag we're going to add our `<body>` which will contain t
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Perplexity AI Demo</h1>
<code class="u-un-break-text"></code>

2
src/routes/docs/products/ai/integrations/pinecone/+page.markdoc
View File

@@ -119,7 +119,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Pinecone Demo</h1>
<code class="u-un-break-text"></code>

2
src/routes/docs/products/ai/integrations/replicate/+page.markdoc
View File

@@ -133,7 +133,7 @@ And after the `</head>` tag we're going to add our `<body>` which will contain t
<main class="main-content">
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div class="flex gap-4 u-flex-justify-center u-margin-block-start-16">
<div class="flex gap-4 justify-center u-margin-block-start-16">
<h1 class="heading-level-1">Replicate Demo</h1>
<code class="u-un-break-text"></code>
</div>

2
src/routes/docs/products/ai/integrations/tensorflow/+page.markdoc
View File

@@ -264,7 +264,7 @@ Create a HTML web page that the function will serve. Create a new file at `stati
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div
class="flex gap-4 u-flex-justify-center u-margin-block-start-16"
class="flex gap-4 justify-center u-margin-block-start-16"
>
<h1 class="heading-level-1">Generate with TensorFlow demo</h1>
<code class="u-un-break-text"></code>

2
src/routes/docs/products/ai/integrations/togetherai/+page.markdoc
View File

@@ -136,7 +136,7 @@ And after the `</head>` tag add a `<body>` which will contain the actual form:
<main class="main-content">
<div class="top-cover u-padding-block-end-56">
<div class="container">
<div class="flex gap-4 u-flex-justify-center u-margin-block-start-16">
<div class="flex gap-4 justify-center u-margin-block-start-16">
<h1 class="heading-level-1">Together AI Demo</h1>
<code class="u-un-break-text"></code>
</div>

224
src/routes/docs/quick-starts/+page.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { MainFooter } from '$lib/components';
import { DEFAULT_HOST } from '$lib/utils/metadata';
import { DOCS_TITLE_SUFFIX } from '$routes/titles';
import { MainFooter } from "$lib/components";
import { DEFAULT_HOST } from "$lib/utils/metadata";
import { DOCS_TITLE_SUFFIX } from "$routes/titles";
type QuickStart = {
title: string;
@@ -17,163 +17,164 @@
const quickStarts: QuickStarts = [
{
title: 'Web app',
title: "Web app",
quickStarts: [
{
title: 'Web',
icon: 'icon-js',
image: '/images/blog/placeholder.png',
href: 'web'
title: "Web",
icon: "icon-js",
image: "/images/blog/placeholder.png",
href: "web",
},
{
title: 'Next.js',
icon: 'icon-nextjs',
image: '/images/blog/placeholder.png',
href: 'nextjs'
title: "Next.js",
icon: "icon-nextjs",
image: "/images/blog/placeholder.png",
href: "nextjs",
},
{
title: 'React',
icon: 'icon-react',
image: '/images/blog/placeholder.png',
href: 'react'
title: "React",
icon: "icon-react",
image: "/images/blog/placeholder.png",
href: "react",
},
{
title: 'Vue.js',
icon: 'web-icon-vue',
image: '/images/blog/placeholder.png',
href: 'vue'
title: "Vue.js",
icon: "web-icon-vue",
image: "/images/blog/placeholder.png",
href: "vue",
},
{
title: 'Nuxt',
icon: 'web-icon-nuxt',
image: '/images/blog/placeholder.png',
href: 'nuxt'
title: "Nuxt",
icon: "web-icon-nuxt",
image: "/images/blog/placeholder.png",
href: "nuxt",
},
{
title: 'SvelteKit',
icon: 'icon-svelte',
image: '/images/blog/placeholder.png',
href: 'sveltekit'
title: "SvelteKit",
icon: "icon-svelte",
image: "/images/blog/placeholder.png",
href: "sveltekit",
},
{
title: 'Refine',
icon: 'web-icon-refine',
image: '/images/blog/placeholder.png',
href: 'refine'
title: "Refine",
icon: "web-icon-refine",
image: "/images/blog/placeholder.png",
href: "refine",
},
{
title: 'Angular',
icon: 'icon-angular',
image: '/images/blog/placeholder.png',
href: 'angular'
title: "Angular",
icon: "icon-angular",
image: "/images/blog/placeholder.png",
href: "angular",
},
{
title: 'Solid',
icon: 'icon-solidjs',
image: '/images/blog/placeholder.png',
href: 'solid'
}
]
title: "Solid",
icon: "icon-solidjs",
image: "/images/blog/placeholder.png",
href: "solid",
},
],
},
{
title: 'Mobile and native',
title: "Mobile and native",
quickStarts: [
{
title: 'React Native',
icon: 'icon-react-native',
image: '/images/blog/placeholder.png',
href: 'react-native'
title: "React Native",
icon: "icon-react-native",
image: "/images/blog/placeholder.png",
href: "react-native",
},
{
title: 'Flutter',
icon: 'icon-flutter',
image: '/images/blog/placeholder.png',
href: 'flutter'
title: "Flutter",
icon: "icon-flutter",
image: "/images/blog/placeholder.png",
href: "flutter",
},
{
title: 'Apple',
icon: 'icon-apple',
image: '/images/blog/placeholder.png',
href: 'apple'
title: "Apple",
icon: "icon-apple",
image: "/images/blog/placeholder.png",
href: "apple",
},
{
title: 'Android',
icon: 'icon-android',
image: '/images/blog/placeholder.png',
href: 'android'
}
]
title: "Android",
icon: "icon-android",
image: "/images/blog/placeholder.png",
href: "android",
},
],
},
{
title: 'Server',
title: "Server",
quickStarts: [
{
title: 'Node.js',
icon: 'icon-node_js',
image: '/images/blog/placeholder.png',
href: 'node'
title: "Node.js",
icon: "icon-node_js",
image: "/images/blog/placeholder.png",
href: "node",
},
{
title: 'Python',
icon: 'icon-python',
image: '/images/blog/placeholder.png',
href: 'python'
title: "Python",
icon: "icon-python",
image: "/images/blog/placeholder.png",
href: "python",
},
{
title: 'Dart',
icon: 'icon-dart',
image: '/images/blog/placeholder.png',
href: 'dart'
title: "Dart",
icon: "icon-dart",
image: "/images/blog/placeholder.png",
href: "dart",
},
{
title: 'PHP',
icon: 'icon-php',
image: '/images/blog/placeholder.png',
href: 'php'
title: "PHP",
icon: "icon-php",
image: "/images/blog/placeholder.png",
href: "php",
},
{
title: 'Ruby',
icon: 'icon-ruby',
image: '/images/blog/placeholder.png',
href: 'ruby'
title: "Ruby",
icon: "icon-ruby",
image: "/images/blog/placeholder.png",
href: "ruby",
},
{
title: '.NET',
icon: 'icon-dotnet',
image: '/images/blog/placeholder.png',
href: 'dotnet'
title: ".NET",
icon: "icon-dotnet",
image: "/images/blog/placeholder.png",
href: "dotnet",
},
{
title: 'Deno',
icon: 'icon-deno',
image: '/images/blog/placeholder.png',
href: 'deno'
title: "Deno",
icon: "icon-deno",
image: "/images/blog/placeholder.png",
href: "deno",
},
{
title: 'Go',
icon: 'icon-go',
image: '/images/blog/placeholder.png',
href: 'go'
title: "Go",
icon: "icon-go",
image: "/images/blog/placeholder.png",
href: "go",
},
{
title: 'Swift',
icon: 'icon-swift',
image: '/images/blog/placeholder.png',
href: 'swift'
title: "Swift",
icon: "icon-swift",
image: "/images/blog/placeholder.png",
href: "swift",
},
{
title: 'Kotlin',
icon: 'icon-kotlin',
image: '/images/blog/placeholder.png',
href: 'kotlin'
title: "Kotlin",
icon: "icon-kotlin",
image: "/images/blog/placeholder.png",
href: "kotlin",
},
],
},
]
}
];
const title = 'Quick starts' + DOCS_TITLE_SUFFIX;
const description = 'Get started with your favorite framework and language in just a few clicks.';
const ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
const title = "Quick starts" + DOCS_TITLE_SUFFIX;
const description =
"Get started with your favorite framework and language in just a few clicks.";
const ogImage = DEFAULT_HOST + "/images/open-graph/docs.png";
</script>
<svelte:head>
@@ -193,12 +194,11 @@
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<main class="web-main-section" id="main">
<article class="web-article">
<header class="web-article-header">
<div class="web-article-header-start u-flex-vertical web-u-cross-start">
<div class="u-position-relative u-flex u-cross-center">
<div class="web-article-header-start web-u-cross-start flex flex-col">
<div class="u-cross-center relative flex">
<h1 class="web-title">Quick start</h1>
</div>
</div>
@@ -206,7 +206,7 @@
</header>
<div class="web-article-content web-u-gap-80">
{#each quickStarts as category}
<section class="u-flex-vertical u-gap-24">
<section class="flex flex-col gap-6">
<h2 class="web-eyebrow">{category.title}</h2>
<ul class="web-grid-row-4 web-grid-row-4-mobile-2">
{#each category.quickStarts as quickStart}
@@ -215,7 +215,7 @@
href={`/docs/quick-starts/${quickStart.href}`}
class="web-card is-normal"
>
<header class="u-flex u-cross-baseline u-gap-4">
<header class="u-cross-baseline flex gap-1">
<span
class="{quickStart.icon} web-u-font-size-24"
aria-hidden="true"

128
src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
View File

@@ -1,10 +1,10 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { MainFooter, Select } from '$lib/components';
import { DEFAULT_HOST } from '$lib/utils/metadata';
import { layoutState, toggleReferences } from '$lib/layouts/Docs.svelte';
import { parse } from '$lib/utils/markdown';
import { goto } from "$app/navigation";
import { page } from "$app/stores";
import { MainFooter, Select } from "$lib/components";
import { DEFAULT_HOST } from "$lib/utils/metadata";
import { layoutState, toggleReferences } from "$lib/layouts/Docs.svelte";
import { parse } from "$lib/utils/markdown";
import {
Platform,
platformMap,
@@ -12,26 +12,26 @@
preferredVersion,
serviceMap,
versions,
type Version
} from '$lib/utils/references';
import type { LayoutContext } from '$markdoc/layouts/Article.svelte';
import { Fence, Heading } from '$markdoc/nodes/_Module.svelte';
import { API_REFERENCE_TITLE_SUFFIX } from '$routes/titles.js';
import { getContext, onMount, setContext } from 'svelte';
import { writable } from 'svelte/store';
import { anyify } from '$lib/utils/anyify.js';
import { scrollToTop } from '$lib/actions/scrollToTop.js';
import { clickOutside } from '$lib/actions/clickOutside.js';
import { Accordion, AccordionItem } from '$lib/components/Accordion';
import Request from './(components)/Request.svelte';
import Response from './(components)/Response.svelte';
import RateLimits from './(components)/RateLimits.svelte';
type Version,
} from "$lib/utils/references";
import type { LayoutContext } from "$markdoc/layouts/Article.svelte";
import { Fence, Heading } from "$markdoc/nodes/_Module.svelte";
import { API_REFERENCE_TITLE_SUFFIX } from "$routes/titles.js";
import { getContext, onMount, setContext } from "svelte";
import { writable } from "svelte/store";
import { anyify } from "$lib/utils/anyify.js";
import { scrollToTop } from "$lib/actions/scrollToTop.js";
import { clickOutside } from "$lib/actions/clickOutside.js";
import { Accordion, AccordionItem } from "$lib/components/Accordion";
import Request from "./(components)/Request.svelte";
import Response from "./(components)/Response.svelte";
import RateLimits from "./(components)/RateLimits.svelte";
export let data;
setContext<LayoutContext>('headings', writable({}));
setContext<LayoutContext>("headings", writable({}));
const headings = getContext<LayoutContext>('headings');
const headings = getContext<LayoutContext>("headings");
let selected: string | undefined = undefined;
headings.subscribe((n) => {
@@ -52,7 +52,7 @@
const platform = event.detail as Platform;
preferredPlatform.set(platform);
goto(`/docs/references/${version}/${platform}/${service}`, {
noScroll: true
noScroll: true,
});
}
@@ -61,7 +61,7 @@
const version = event.detail as Version;
preferredVersion.set(version);
goto(`/docs/references/${version}/${platform}/${service}`, {
noScroll: true
noScroll: true,
});
}
@@ -71,11 +71,11 @@
});
$: platform = $page.params.platform as Platform;
$: platformType = platform.startsWith('client-') ? 'CLIENT' : 'SERVER';
$: platformType = platform.startsWith("client-") ? "CLIENT" : "SERVER";
$: serviceName = serviceMap[data.service?.name];
$: title = serviceName + API_REFERENCE_TITLE_SUFFIX;
$: description = data.service?.description;
$: ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
$: ogImage = DEFAULT_HOST + "/images/open-graph/docs.png";
</script>
<svelte:head>
@@ -94,7 +94,7 @@
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
{#if $page.params.version !== 'cloud'}
{#if $page.params.version !== "cloud"}
<link
rel="canonical"
href={`https://appwrite.io/docs/references/cloud/${$page.params.platform}/${$page.params.service}`}
@@ -110,9 +110,13 @@
<div class="web-inline-code">{platformType}</div>
</div>
<div class="web-article-header-end">
<div class="u-flex u-gap-24 web-u-flex-vertical-mobile web-u-color-text-primary">
<div class="u-flex u-cross-center u-gap-8">
<label class="u-small web-is-not-mobile" for="platform">Platform</label>
<div
class="web-u-flex-vertical-mobile web-u-color-text-primary flex gap-6"
>
<div class="u-cross-center flex gap-2">
<label class="u-small web-is-not-mobile" for="platform"
>Platform</label
>
<Select
--min-width="10rem"
id="platform"
@@ -120,36 +124,38 @@
on:change={selectPlatform}
options={[
...Object.values(Platform)
.filter((p) => p.startsWith('client-'))
.filter((p) => p.startsWith("client-"))
.map((p) => ({
value: p,
label: platformMap[p],
group: 'Client'
group: "Client",
})),
...Object.values(Platform)
.filter((p) => p.startsWith('server-'))
.filter((p) => p.startsWith("server-"))
.map((p) => ({
value: p,
label: platformMap[p],
group: 'Server'
}))
group: "Server",
})),
]}
nativeMobile
/>
</div>
<div class="u-flex u-cross-center u-gap-8">
<label class="u-small web-is-not-mobile" for="version">Version</label>
<div class="u-cross-center flex gap-2">
<label class="u-small web-is-not-mobile" for="version"
>Version</label
>
<Select
nativeMobile
on:change={selectVersion}
value={$page.params.version}
options={[
{ value: 'cloud', label: 'Cloud' },
{ value: "cloud", label: "Cloud" },
...versions.map((version) => ({
value: version,
label: anyify(version)
}))
label: anyify(version),
})),
]}
/>
</div>
@@ -158,12 +164,12 @@
</header>
<div class="web-article-content" style:gap="6rem">
<section class="web-article-content-grid-6-4">
<div class="web-article-content-grid-6-4-column-1 u-flex-vertical u-gap-8">
<div class="web-article-content-grid-6-4-column-1 flex flex-col gap-2">
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html parse(data.service?.description)}
</div>
<div
class="web-article-content-grid-6-4-column-2 u-flex-vertical u-gap-32 u-main-end"
class="web-article-content-grid-6-4-column-2 u-main-end flex flex-col gap-8"
>
<Fence
language="text"
@@ -175,7 +181,9 @@
</div>
{#if data.methods.length === 0}
<div class="web-article-content-grid-6-4-column-2 u-flex-vertical u-gap-32">
<div
class="web-article-content-grid-6-4-column-2 flex flex-col gap-8"
>
<div class="web-inline-info">
<span class="icon-info" aria-hidden="true" />
<h5 class="web-sub-body-500 web-u-color-text-primary">
@@ -188,11 +196,15 @@
</section>
{#each data.methods as method (method.id)}
<section class="web-article-content-grid-6-4">
<div class="web-article-content-grid-6-4-column-1 u-flex-vertical u-gap-32">
<div
class="web-article-content-grid-6-4-column-1 flex flex-col gap-8"
>
<header class="web-article-content-header">
<Heading id={method.id} level={2} inReferences>{method.title}</Heading>
<Heading id={method.id} level={2} inReferences
>{method.title}</Heading
>
</header>
<div class="u-flex-vertical u-gap-8">
<div class="flex flex-col gap-2">
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html parse(method.description)}
</div>
@@ -205,17 +217,19 @@
<AccordionItem title="Response">
<Response {method} />
</AccordionItem>
{#if method?.['rate-limit'] > 0 && method?.['rate-key']?.length > 0}
{#if method?.["rate-limit"] > 0 && method?.["rate-key"]?.length > 0}
<AccordionItem title="Rate limits">
<RateLimits {method} {platformType} />
</AccordionItem>
{/if}
</Accordion>
</div>
<div class="web-article-content-grid-6-4-column-2 u-flex-vertical u-gap-32">
<div
class="web-article-content-grid-6-4-column-2 flex flex-col gap-8"
>
<div class="u-contents theme-dark">
<div
class="u-position-sticky"
class="sticky"
style="--inset-block-start:var(--p-grid-huge-navs-secondary-sticky-position);"
>
<Fence
@@ -246,15 +260,23 @@
use:clickOutside={() => ($layoutState.showReferences = false)}
>
{#if data.methods.length > 0}
<button class="web-icon-button" id="refOpen" on:click={toggleReferences}>
<button
class="web-icon-button"
id="refOpen"
on:click={toggleReferences}
>
<span class="icon-menu-alt-4" aria-hidden="true" />
</button>
<div class="web-references-menu-content">
<div
class="web-references-menu-header u-flex u-main-space-between u-cross-center u-gap-16 u-margin-block-start-24"
class="web-references-menu-header u-main-space-between u-cross-center u-margin-block-start-24 flex gap-4"
>
<h5 class="web-references-menu-title web-eyebrow">On This Page</h5>
<button class="web-icon-button" id="refClose" on:click={toggleReferences}>
<button
class="web-icon-button"
id="refClose"
on:click={toggleReferences}
>
<span class="icon-x" aria-hidden="true" />
</button>
</div>
@@ -271,7 +293,7 @@
</ul>
<div class="u-sep-block-start web-u-padding-block-20">
<button
class="web-link u-inline-flex u-cross-center u-gap-8"
class="web-link u-inline-flex u-cross-center gap-2"
use:scrollToTop
>
<span class="web-icon-arrow-up" aria-hidden="true" />

61
src/routes/docs/tutorials/+page.svelte
View File

@@ -1,39 +1,40 @@
<script lang="ts">
import { MainFooter } from '$lib/components';
import { DEFAULT_HOST } from '$lib/utils/metadata';
import { DOCS_TITLE_SUFFIX } from '$routes/titles';
import { MainFooter } from "$lib/components";
import { DEFAULT_HOST } from "$lib/utils/metadata";
import { DOCS_TITLE_SUFFIX } from "$routes/titles";
const title = 'Tutorials' + DOCS_TITLE_SUFFIX;
const description = 'Follow a simple tutorial to get started with Appwrite in your preferred framework quickly and easily.';
const ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
const title = "Tutorials" + DOCS_TITLE_SUFFIX;
const description =
"Follow a simple tutorial to get started with Appwrite in your preferred framework quickly and easily.";
const ogImage = DEFAULT_HOST + "/images/open-graph/docs.png";
export let data;
type MappedTutorial = (typeof data.tutorials)[number];
const iconMap: Record<string, string> = {
'react native': 'icon-react-native',
react: 'icon-react',
vue: 'web-icon-vue',
angular: 'icon-angular',
svelte: 'icon-svelte',
sveltekit: 'icon-svelte',
'sveltekit ssr': 'icon-svelte',
android: 'icon-android',
apple: 'icon-apple',
flutter: 'icon-flutter',
nuxt: 'icon-nuxt',
'nuxt ssr': 'icon-nuxt',
stripe: 'icon-stripe',
refine: 'web-icon-refine',
'next.js': 'icon-nextjs',
'next.js ssr': 'icon-nextjs',
astro: 'icon-astro',
'astro ssr': 'icon-astro'
"react native": "icon-react-native",
react: "icon-react",
vue: "web-icon-vue",
angular: "icon-angular",
svelte: "icon-svelte",
sveltekit: "icon-svelte",
"sveltekit ssr": "icon-svelte",
android: "icon-android",
apple: "icon-apple",
flutter: "icon-flutter",
nuxt: "icon-nuxt",
"nuxt ssr": "icon-nuxt",
stripe: "icon-stripe",
refine: "web-icon-refine",
"next.js": "icon-nextjs",
"next.js ssr": "icon-nextjs",
astro: "icon-astro",
"astro ssr": "icon-astro",
};
const getIcon = (tutorial: MappedTutorial) => {
if (!tutorial.framework) return ''; // TODO: Default icon
if (!tutorial.framework) return ""; // TODO: Default icon
return iconMap[tutorial.framework.toLowerCase()];
};
</script>
@@ -58,8 +59,8 @@
<main class="web-main-section" id="main">
<article class="web-article">
<header class="web-article-header">
<div class="web-article-header-start u-flex-vertical web-u-cross-start">
<div class="u-position-relative u-flex u-cross-center">
<div class="web-article-header-start web-u-cross-start flex flex-col">
<div class="u-cross-center relative flex">
<h1 class="web-title">Tutorials</h1>
</div>
</div>
@@ -67,7 +68,7 @@
</header>
<div class="web-article-content web-u-gap-80">
{#each data.tutorials as category}
<section class="u-flex-vertical u-gap-24">
<section class="flex flex-col gap-6">
<h2 class="web-eyebrow">{category.title}</h2>
<ul class="web-grid-row-4 web-grid-row-4-mobile-2">
{#each category.tutorials as tutorial}
@@ -79,7 +80,7 @@
aria-disabled="true"
tabindex="-1"
>
<header class="u-flex u-cross-baseline u-gap-4">
<header class="u-cross-baseline flex gap-1">
<span
class="{getIcon(tutorial)} web-u-font-size-24"
aria-hidden="true"
@@ -92,7 +93,7 @@
</a>
{:else}
<a href={tutorial.href} class="web-card is-normal">
<header class="u-flex u-cross-baseline u-gap-4">
<header class="u-cross-baseline flex gap-1">
<span
class="{getIcon(tutorial)} web-u-font-size-24"
aria-hidden="true"

183
src/routes/heroes/+page.svelte
View File

@@ -1,92 +1,92 @@
<script lang="ts">
import { FooterNav, MainFooter } from '$lib/components';
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
import { Main } from '$lib/layouts';
import { TITLE_SUFFIX } from '$routes/titles';
import type { HeroCardProps } from './HeroCard.svelte';
import HeroCard from './HeroCard.svelte';
import FloatingHead from '$lib/components/FloatingHead.svelte';
import { FooterNav, MainFooter } from "$lib/components";
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from "$lib/utils/metadata";
import { Main } from "$lib/layouts";
import { TITLE_SUFFIX } from "$routes/titles";
import type { HeroCardProps } from "./HeroCard.svelte";
import HeroCard from "./HeroCard.svelte";
import FloatingHead from "$lib/components/FloatingHead.svelte";
const title = 'Heroes' + TITLE_SUFFIX;
const title = "Heroes" + TITLE_SUFFIX;
const description = DEFAULT_DESCRIPTION;
const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
const ogImage = DEFAULT_HOST + "/images/open-graph/website.png";
const heroCards: HeroCardProps[] = [
{
name: 'Diana Pham',
role: 'Developer Advocate',
name: "Diana Pham",
role: "Developer Advocate",
bio: "Diana discovered Appwrite and its wonderful team while completing her master's in computer science.\
Now, as a developer advocate at Vonage, she is excited to build projects using both backend servicing and telecommunications APIs.",
github: 'https://github.com/dianapham',
twitter: 'https://twitter.com/dianasoyster',
linkedin: 'https://www.linkedin.com/in/dianasoyster',
avatar: 'images/heroes/avatars/diana.png'
github: "https://github.com/dianapham",
twitter: "https://twitter.com/dianasoyster",
linkedin: "https://www.linkedin.com/in/dianasoyster",
avatar: "images/heroes/avatars/diana.png",
},
{
name: 'Lucas Audart',
role: 'Web Consultant',
bio: 'Lucas is a web consultant at Zenika who specializes in front-end technologies and has spoken about\
Appwrite and other technologies at various development conferences in France.',
github: 'https://github.com/Slocaly',
twitter: 'https://twitter.com/Slocalyy',
linkedin: 'https://www.linkedin.com/in/lucas-audart',
avatar: 'images/heroes/avatars/lucas.png'
name: "Lucas Audart",
role: "Web Consultant",
bio: "Lucas is a web consultant at Zenika who specializes in front-end technologies and has spoken about\
Appwrite and other technologies at various development conferences in France.",
github: "https://github.com/Slocaly",
twitter: "https://twitter.com/Slocalyy",
linkedin: "https://www.linkedin.com/in/lucas-audart",
avatar: "images/heroes/avatars/lucas.png",
},
{
name: 'Tanmoy Karmakar',
role: 'Software Engineer',
bio: 'Tanmoy Karmakar is a co-organizer at Flutter Kolkata and SDE-II [Flutter] at SaaS Labs.\
name: "Tanmoy Karmakar",
role: "Software Engineer",
bio: "Tanmoy Karmakar is a co-organizer at Flutter Kolkata and SDE-II [Flutter] at SaaS Labs.\
He loves to create content related to Flutter and organize events and meet-ups.\
Learning new ways to complement Flutter development always amuses him.',
github: 'https://github.com/tanmoy27112000',
twitter: 'https://twitter.com/tanmoykar27',
linkedin: 'https://www.linkedin.com/in/tanmoykarmakar2711',
avatar: 'images/heroes/avatars/tanmoy.png'
Learning new ways to complement Flutter development always amuses him.",
github: "https://github.com/tanmoy27112000",
twitter: "https://twitter.com/tanmoykar27",
linkedin: "https://www.linkedin.com/in/tanmoykarmakar2711",
avatar: "images/heroes/avatars/tanmoy.png",
},
{
name: 'Bishwajeet Parhi',
role: 'Flutter Developer',
name: "Bishwajeet Parhi",
role: "Flutter Developer",
bio: "Bishwajeet Parhi is a Flutter developer and active open-source contributor.\
He's currently a junior pursuing a Computer Science and Engineering degree and also an organizer of the Hack This Fall hackathon.",
github: 'https://github.com/2002Bishwajeet',
twitter: 'https://twitter.com/biswa_20p',
linkedin: 'https://www.linkedin.com/in/2002bishwajeet',
avatar: 'images/heroes/avatars/bishwajeet.png'
github: "https://github.com/2002Bishwajeet",
twitter: "https://twitter.com/biswa_20p",
linkedin: "https://www.linkedin.com/in/2002bishwajeet",
avatar: "images/heroes/avatars/bishwajeet.png",
},
{
name: 'Mickaël Alves',
role: 'Front-end Consultant',
bio: 'Mickaël is a front-end developer working as a web consultant in Lyon at Zenika. He co-organizes meetups with LyonJS and speaks at conferences about Appwrite, Flutter, and Remotion.',
github: 'https://github.com/CruuzAzul',
twitter: 'https://twitter.com/CruuzAzul',
linkedin: 'https://www.linkedin.com/in/mickaelalves',
avatar: 'images/heroes/avatars/mickael.png'
name: "Mickaël Alves",
role: "Front-end Consultant",
bio: "Mickaël is a front-end developer working as a web consultant in Lyon at Zenika. He co-organizes meetups with LyonJS and speaks at conferences about Appwrite, Flutter, and Remotion.",
github: "https://github.com/CruuzAzul",
twitter: "https://twitter.com/CruuzAzul",
linkedin: "https://www.linkedin.com/in/mickaelalves",
avatar: "images/heroes/avatars/mickael.png",
},
{
name: 'Jason Torres',
role: 'Freelance Community Manager',
name: "Jason Torres",
role: "Freelance Community Manager",
bio: "Jason Torres a former film-maker turned developer who is currently exploring Developer Advocacy and Community Management freelance, and hosting The Tech Commute, a series of Twitter Spaces catered towards developers.",
github: 'https://github.com/jasonetorres',
twitter: 'https://twitter.com/tasonjorres',
linkedin: 'https://www.linkedin.com/in/thejasontorres',
avatar: 'images/heroes/avatars/jason.png'
github: "https://github.com/jasonetorres",
twitter: "https://twitter.com/tasonjorres",
linkedin: "https://www.linkedin.com/in/thejasontorres",
avatar: "images/heroes/avatars/jason.png",
},
{
name: 'Nishant Jain',
role: 'Frontend Developer',
name: "Nishant Jain",
role: "Frontend Developer",
bio: "Nishant Jain is a frontend developer and community builder from Indore, India. He has been actively contributing to the Appwrite community as a Discord moderator.",
github: 'https://github.com/Nishantjain10',
twitter: 'https://twitter.com/devnishant10',
linkedin: 'https://www.linkedin.com/in/nishantj2002/',
avatar: 'images/heroes/avatars/nishant.png'
}
github: "https://github.com/Nishantjain10",
twitter: "https://twitter.com/devnishant10",
linkedin: "https://www.linkedin.com/in/nishantj2002/",
avatar: "images/heroes/avatars/nishant.png",
},
];
const infiniteScroll = (node: HTMLElement) => {
if (window.matchMedia('prefers-reduced-motion').matches) return;
const content = node.querySelector('.inner') as HTMLElement;
if (window.matchMedia("prefers-reduced-motion").matches) return;
const content = node.querySelector(".inner") as HTMLElement;
content.innerHTML += content?.innerHTML;
node.dataset.animated = 'true';
node.dataset.animated = "true";
};
</script>
@@ -113,11 +113,14 @@
<div class="web-big-padding-section-level-2">
<section class="web-container hero web-u-padding-block-end-0">
<div>
<h1 class="web-display web-u-color-text-primary">Appwrite Heroes</h1>
<h1 class="web-display web-u-color-text-primary">
Appwrite Heroes
</h1>
<p class="web-main-body-500 u-margin-block-start-20">
If you love building, writing, speaking, and helping other developers
build with Appwrite, help us support you by joining the Appwrite Heroes
program and becoming a leader in our developer community.
If you love building, writing, speaking, and helping other
developers build with Appwrite, help us support you by joining the
Appwrite Heroes program and becoming a leader in our developer
community.
</p>
<a
href="https://7nxwryuitoy.typeform.com/heroes-apply"
@@ -138,18 +141,24 @@
<div class="web-big-padding-section-level-2">
<section class="web-container">
<div class="web-hero web-u-max-width-800 about">
<h2 class="web-title web-u-color-text-primary">About Appwrite Heroes</h2>
<h2 class="web-title web-u-color-text-primary">
About Appwrite Heroes
</h2>
<div>
<p class="web-sub-body-500">
The Appwrite Heroes program is an exclusive group of developers who
are experts in Appwrite and dedicated to creating valuable content
to assist other developers in achieving success. Appwrite Heroes
excel in creating video tutorials, written guides, blog posts, or
providing support in our fast-growing Discord community.
The Appwrite Heroes program is an exclusive group of developers
who are experts in Appwrite and dedicated to creating valuable
content to assist other developers in achieving success.
Appwrite Heroes excel in creating video tutorials, written
guides, blog posts, or providing support in our fast-growing
Discord community.
</p>
</div>
<div class="avatar-1">
<FloatingHead src="/images/heroes/avatars/bishwajeet.png" size={64} />
<FloatingHead
src="/images/heroes/avatars/bishwajeet.png"
size={64}
/>
</div>
<div class="avatar-2">
<FloatingHead src="/images/heroes/avatars/tanmoy.png" size={80} />
@@ -164,7 +173,7 @@
</div>
<div
class="web-big-padding-section-level-1 u-position-relative web-white-section theme-light"
class="web-big-padding-section-level-1 web-white-section theme-light relative"
>
<div class="web-big-padding-section-level-2">
<div class="web-container">
@@ -203,7 +212,7 @@
<div class="web-big-padding-section-level-2">
<div class="web-container">
<section class="web-hero is-align-start">
<h2 class="web-display web-u-color-text-primary u-max-width-700">
<h2 class="web-display web-u-color-text-primary max-w-[700px]">
How Appwrite Heroes can benefit you
</h2>
</section>
@@ -231,8 +240,8 @@
/>
<h3 class="web-info-boxes-title">In-person gatherings</h3>
<p class="web-info-boxes-content">
Top contributors get invited to an in-person gathering with the
Appwrite team.
Top contributors get invited to an in-person gathering with
the Appwrite team.
</p>
</li>
<li class="web-info-boxes-item">
@@ -294,20 +303,24 @@
</div>
</div>
<div class="web-big-padding-section-level-1 u-position-relative footer-wrapper">
<div class="web-big-padding-section-level-1 footer-wrapper relative">
<enhanced:img
src="./bg-pre.png"
alt=""
class="u-position-absolute"
class="absolute"
style:inset-block-start="0"
/>
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-big-padding-section-level-2 relative">
<div class="web-container">
<div class="web-hero web-u-max-width-800">
<h5 class="web-display web-u-color-text-primary">Become a Hero</h5>
<p class="web-description web-u-color-text-primary" style="opacity:0.64">
Have you been actively providing value for the Appwrite community? Apply
now to join our hero program! Applications are open every three months.
<p
class="web-description web-u-color-text-primary"
style="opacity:0.64"
>
Have you been actively providing value for the Appwrite community?
Apply now to join our hero program! Applications are open every
three months.
</p>
<a
href="https://7nxwryuitoy.typeform.com/heroes-apply"
@@ -319,8 +332,8 @@
</a>
</div>
</div>
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-container u-position-relative">
<div class="web-big-padding-section-level-2 relative">
<div class="web-container relative">
<FooterNav noBorder />
<MainFooter />
</div>
@@ -331,7 +344,7 @@
</Main>
<style lang="scss">
@use '$scss/abstract/mixins/border-gradient' as gradients;
@use "$scss/abstract/mixins/border-gradient" as gradients;
.hero {
display: grid;
@@ -407,7 +420,7 @@
}
@media (max-width: 1023px) {
[class*='avatar-'] {
[class*="avatar-"] {
display: none;
}

159
src/routes/integrations/+page.svelte
View File

@@ -1,52 +1,53 @@
<script lang="ts">
import { Main } from '$lib/layouts';
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
import { TITLE_SUFFIX } from '$routes/titles';
import FooterNav from '$lib/components/FooterNav.svelte';
import MainFooter from '$lib/components/MainFooter.svelte';
import { type ResultType, Fuse } from '$lib/integrations';
import { writable } from 'svelte/store';
import { autoHash } from '$lib/actions/autoHash';
import type { Integration } from './+page';
import { goto } from '$app/navigation';
import { onDestroy, onMount } from 'svelte';
import { browser } from '$app/environment';
import { Main } from "$lib/layouts";
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from "$lib/utils/metadata";
import { TITLE_SUFFIX } from "$routes/titles";
import FooterNav from "$lib/components/FooterNav.svelte";
import MainFooter from "$lib/components/MainFooter.svelte";
import { type ResultType, Fuse } from "$lib/integrations";
import { writable } from "svelte/store";
import { autoHash } from "$lib/actions/autoHash";
import type { Integration } from "./+page";
import { goto } from "$app/navigation";
import { onDestroy, onMount } from "svelte";
import { browser } from "$app/environment";
export let data;
const title = 'Integrations' + TITLE_SUFFIX;
const title = "Integrations" + TITLE_SUFFIX;
const description = DEFAULT_DESCRIPTION;
const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
const ogImage = DEFAULT_HOST + "/images/open-graph/website.png";
// search functionality
let fuseOptions = {
keys: ['title'],
threshold: 0.3
keys: ["title"],
threshold: 0.3,
};
let result: ResultType<Integration> = [];
let hasQuery: boolean;
let query = writable('');
let query = writable("");
$: query.subscribe((value) => {
hasQuery = value.length > 0;
});
// platform filters
const platforms = ['All', ...data.platforms];
const platforms = ["All", ...data.platforms];
let activePlatform = 'All';
let activePlatform = "All";
// categories
let activeCategory: string | null = null;
onMount(() => {
if (browser) document.documentElement.setAttribute('data-scroll-smooth', '');
if (browser)
document.documentElement.setAttribute("data-scroll-smooth", "");
});
onDestroy(() => {
if (browser) document.documentElement.removeAttribute('data-scroll-smooth');
if (browser) document.documentElement.removeAttribute("data-scroll-smooth");
});
</script>
@@ -70,32 +71,34 @@
<!-- binding for fuse -->
<Fuse list={data.list} options={fuseOptions} bind:query={$query} bind:result />
<Main>
<header class="web-u-sep-block-end u-padding-block-end-0 u-position-relative u-overflow-hidden">
<div class="web-container u-position-relative hero web-u-padding-block-end-0">
<header
class="web-u-sep-block-end u-padding-block-end-0 u-overflow-hidden relative"
>
<div class="container hero web-u-padding-block-end-0 relative">
<img
src="/images/pages/integration/integration-bg-top-1.png"
alt=""
width="983"
height="985"
class="l-bg-1 u-position-absolute web-is-not-mobile"
class="l-bg-1 web-is-not-mobile absolute"
/>
<img
src="/images/pages/integration/net-desktop.png"
alt=""
width="895"
height="560"
class="l-bg-2 u-position-absolute web-is-not-mobile"
class="l-bg-2 web-is-not-mobile absolute"
/>
<img
src="/images/pages/integration/net-desktop.png"
alt=""
width="360"
height="560"
class="l-bg-2 u-position-absolute web-is-only-mobile"
class="l-bg-2 web-is-only-mobile absolute"
/>
<div class="web-integrations-top-section">
<div
class="l-integrations-hero u-flex-vertical u-main-center u-gap-20 web-u-max-width-680"
class="l-integrations-hero u-main-center web-u-max-width-680 flex flex-col gap-5"
>
<div class="web-eyebrow web-u-color-text-primary">
INTEGRATIONS<span class="web-u-color-text-accent">_</span>
@@ -118,21 +121,21 @@
<div class="web-big-padding-section-level-1">
<div>
<div class="web-container">
<div class="container">
<div class="l-integrations-grid">
<aside class="u-flex-vertical u-gap-32 sidebar">
<aside class="sidebar flex flex-col gap-8">
<section>
<label class="web-input-button web-u-flex-basis-400">
<span class="web-icon-search" aria-hidden="true"></span>
<input class="text" placeholder="Search" bind:value={$query} />
</label>
</section>
<section class="u-flex-vertical">
<section class="u-flex-vertical u-gap-16">
<section class="flex flex-col">
<section class="flex flex-col gap-4">
<h2 class="web-side-nav-header web-eyebrow u-un-break-text">
Platform
</h2>
<ul class="u-flex u-flex-wrap u-gap-8" class:disabled={hasQuery}>
<ul class="flex flex-wrap gap-2" class:disabled={hasQuery}>
{#each platforms as platform}
<li>
<button
@@ -147,12 +150,12 @@
</ul>
</section>
<div class="web-u-sep-block-start u-margin-block-24"></div>
<section class="u-flex-vertical u-gap-16">
<section class="flex flex-col gap-4">
<h2 class="web-side-nav-header web-eyebrow u-un-break-text">
Categories
</h2>
<div class="u-position-relative is-not-desktop">
<div class="is-not-desktop relative">
<select
class="web-input-text"
bind:value={activeCategory}
@@ -162,9 +165,9 @@
>
{#each data.categories as category}
{@const integrations = data.integrations.find(
(i) => i.category === category
(i) => i.category === category,
)}
{#if integrations && (activePlatform === 'All' || integrations.integrations.some( (i) => i.platform.includes(activePlatform) ))}
{#if integrations && (activePlatform === "All" || integrations.integrations.some( (i) => i.platform.includes(activePlatform), ))}
<option value={category.toLowerCase()}>
{category}
</option>
@@ -173,20 +176,20 @@
<option value={null}> Select category </option>
</select>
<span
class="icon-cheveron-down u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 web-u-pointer-events-none"
class="icon-cheveron-down u-inset-inline-end-8 u-inset-block-start-8 web-u-pointer-events-none absolute"
aria-hidden="true"
/>
</div>
<ul
class="u-flex-vertical u-gap-16 is-only-desktop"
class="is-only-desktop flex flex-col gap-4"
class:disabled={hasQuery}
>
{#each data.categories as category}
{@const integrations = data.integrations.find(
(i) => i.category === category
(i) => i.category === category,
)}
{#if integrations && (activePlatform === 'All' || integrations.integrations.some( (i) => i.platform.includes(activePlatform) ))}
{#if integrations && (activePlatform === "All" || integrations.integrations.some( (i) => i.platform.includes(activePlatform), ))}
<li>
<a
href={`#${category.toLowerCase()}`}
@@ -206,30 +209,30 @@
</aside>
<section>
<div class="u-flex-vertical u-gap-64">
<div class="flex flex-col gap-16">
{#if hasQuery}
<section
class="l-max-size-list-cards-section u-flex-vertical u-gap-32"
class="l-max-size-list-cards-section flex flex-col gap-8"
>
<header class="u-flex-vertical u-gap-4">
<header class="flex flex-col gap-1">
<h2 class="web-label web-u-color-text-primary">
Search results
</h2>
<p class="web-description">
{result.length > 0 ? result.length : 'No'} results found
for "{$query}"
{result.length > 0 ? result.length : "No"} results found for
"{$query}"
</p>
</header>
<div class="l-max-size-list-cards u-flex-vertical u-gap-32">
<div class="l-max-size-list-cards flex flex-col gap-8">
<ul class="l-grid-1">
{#each result.map((d) => d.item) as item}
<li>
<a
href={item.href}
class="web-card is-normal u-height-100-percent"
class="web-card is-normal h-full"
style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;"
>
<div class="u-flex u-cross-center u-gap-8">
<div class="flex items-center gap-2">
<img
class="web-user-box-image is-32px"
src={item.product.avatar}
@@ -245,9 +248,7 @@
aria-hidden="true"
></span>
</div>
<p
class="web-sub-body-400 u-margin-block-start-4"
>
<p class="web-sub-body-400 u-margin-block-start-4">
{item.description}
</p>
</a>
@@ -257,8 +258,8 @@
</div>
</section>
{:else}
<section class="u-flex-vertical u-gap-32">
<header class="u-flex-vertical u-gap-4">
<section class="flex flex-col gap-8">
<header class="flex flex-col gap-1">
<h2 class="web-label web-u-color-text-primary">Featured</h2>
<p class="web-description">Top recommended integrations</p>
</header>
@@ -287,11 +288,9 @@
style="border-radius: 50%;"
/>
<div
class="web-user-box-name web-main-body-500 u-flex u-gap-8"
>
<span
class="web-u-color-text-primary"
class="web-user-box-name web-main-body-500 flex gap-2"
>
<span class="web-u-color-text-primary">
{item.title}
</span>
<!-- {#if item.isNew}
@@ -316,9 +315,9 @@
</section>
{#each data.integrations as { category, description, integrations }}
{#if integrations?.length > 0 && (activePlatform === 'All' || integrations.some( (i) => i.platform.includes(activePlatform) ))}
{#if integrations?.length > 0 && (activePlatform === "All" || integrations.some( (i) => i.platform.includes(activePlatform), ))}
<section
class="l-max-size-list-cards-section u-flex-vertical u-gap-32"
class="l-max-size-list-cards-section flex flex-col gap-8"
id={category.toLowerCase()}
use:autoHash={(entries) => {
entries.forEach((entry) => {
@@ -331,7 +330,7 @@
});
}}
>
<header class="u-flex-vertical u-gap-4">
<header class="flex flex-col gap-1">
<h2 class="web-label web-u-color-text-primary">
{category}
</h2>
@@ -339,27 +338,23 @@
{description}
</p>
</header>
<div
class="l-max-size-list-cards u-flex-vertical u-gap-32"
>
<div class="l-max-size-list-cards flex flex-col gap-8">
<ul class="l-grid-1">
{#each integrations as integration, index (`${integration.title}-${index}`)}
{#if activePlatform === 'All' || integration.platform.includes(activePlatform)}
{#if activePlatform === "All" || integration.platform.includes(activePlatform)}
<li>
<a
href={integration.href}
class="web-card is-normal u-height-100-percent"
class="web-card is-normal h-full"
style="--card-padding:1.5rem; --card-padding-mobile:1.5rem; --card-border-radius: 1.5rem"
>
<div
class="u-flex u-cross-center u-gap-8"
class="flex items-center justify-between"
>
<img
class="web-user-box-image is-32px"
src={integration.product
.avatar}
alt={integration.product
.vendor}
src={integration.product.avatar}
alt={integration.product.vendor}
width="32"
height="32"
/>
@@ -402,9 +397,12 @@
</div>
</div>
<div class="web-big-padding-section-level-1 u-overflow-hidden" style:margin-top="160px">
<div class="web-container">
<div class="web-big-padding-section-level-2 u-position-relative">
<div
class="web-big-padding-section-level-1 u-overflow-hidden"
style:margin-top="160px"
>
<div class="container">
<div class="web-big-padding-section-level-2 relative">
<img
src="/images/bgs/pre-footer.png"
alt=""
@@ -412,18 +410,19 @@
style="z-index:-1"
/>
<div class="u-position-relative">
<div class="relative">
<section
class="web-hero u-flex u-row-gap-16 u-main-center u-cross-center web-u-max-width-580"
class="web-hero u-row-gap-16 u-main-center u-cross-center web-u-max-width-580 flex"
>
<h2
class="web-display u-max-width-600 web-u-text-align-center web-u-color-text-primary"
class="web-display web-u-text-align-center web-u-color-text-primary max-w-[600px]"
>
Become a Technology Partner
</h2>
<p class="web-main-body-500">
Join our Technology Partners program to integrate your solutions with
Appwrite’s API, enhancing functionality and expanding your reach.
Join our Technology Partners program to integrate your solutions
with Appwrite’s API, enhancing functionality and expanding your
reach.
</p>
<a
href="/integrations/technology-partner"
@@ -441,7 +440,7 @@
</Main>
<style lang="scss">
@use '$scss/abstract' as *;
@use "$scss/abstract" as *;
:global([data-scroll-smooth]) {
scroll-behavior: smooth;
}
@@ -531,7 +530,7 @@
height: 100%;
width: 100%;
max-height: pxToRem(350);
content: '';
content: "";
display: block;
background: linear-gradient(
180deg,

132
src/routes/integrations/technology-partner/+page.svelte
View File

@@ -1,26 +1,26 @@
<script lang="ts">
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
import { Main } from '$lib/layouts';
import { TITLE_SUFFIX } from '$routes/titles';
import FooterNav from '../../../lib/components/FooterNav.svelte';
import MainFooter from '../../../lib/components/MainFooter.svelte';
import { socials } from '$lib/constants';
import { anyify } from '$lib/utils/anyify';
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from "$lib/utils/metadata";
import { Main } from "$lib/layouts";
import { TITLE_SUFFIX } from "$routes/titles";
import FooterNav from "../../../lib/components/FooterNav.svelte";
import MainFooter from "../../../lib/components/MainFooter.svelte";
import { socials } from "$lib/constants";
import { anyify } from "$lib/utils/anyify";
//import BlobPink from "$routes/startups/(assets)/blob-pink.svg";
// import BlobPinkMobile from "$routes/startups/(assets)/blob-pink-mobile.svg";
import Pink from './bg.png';
import Pink from "./bg.png";
let email = '';
let name = '';
let companyName = '';
let email = "";
let name = "";
let companyName = "";
let companySize: string | null = null;
let companyWebsite = '';
let companyWebsite = "";
let integrationStatus: string | null = null;
let linkToDocumentation = '';
let productUrl = '';
let extraDetails = '';
let subject = '';
let message = '';
let linkToDocumentation = "";
let productUrl = "";
let extraDetails = "";
let subject = "";
let message = "";
let hasCreatedIntegration = false;
let error: string | undefined;
let submitted = false;
@@ -30,29 +30,30 @@
message = `Name of representative: ${name}\n\nWork Email: ${email}\n\nCompany Name: ${companyName}\n\nCompany Size: ${companySize}\n\nCompany Website: ${companyWebsite}\n\nIntegration status: ${integrationStatus}\n\nLink to Documentation: ${linkToDocumentation}\n\nLink to product/company assets: ${productUrl}\n\nDetails: ${extraDetails}`;
subject = `Technology Partner Application: ${companyName}`;
const response = await fetch('https://growth.appwrite.io/v1/feedback', {
method: 'POST',
const response = await fetch("https://growth.appwrite.io/v1/feedback", {
method: "POST",
headers: {
'Content-Type': 'application/json'
"Content-Type": "application/json",
},
body: JSON.stringify({
email,
firstName: name,
subject,
message
})
message,
}),
});
if (response.status >= 400) {
error = response.status >= 500 ? 'Server Error.' : 'Error submitting form.';
error =
response.status >= 500 ? "Server Error." : "Error submitting form.";
return;
}
submitted = true;
}
const title = 'Become a Technology Partner' + TITLE_SUFFIX;
const title = "Become a Technology Partner" + TITLE_SUFFIX;
const description = DEFAULT_DESCRIPTION;
const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
const ogImage = DEFAULT_HOST + "/images/open-graph/website.png";
</script>
<svelte:head>
@@ -72,21 +73,24 @@
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<div class="u-position-absolute" style="pointer-events:none;">
<div class="absolute" style="pointer-events:none;">
<img src={Pink} alt="" />
</div>
<Main>
<div class="web-big-padding-section">
<div id="form" class="web-big-padding-section-level-1 u-padding-0 u-overflow-hidden">
<div
class="web-big-padding-section-level-2 is-margin-replace-padding u-position-relative"
id="form"
class="web-big-padding-section-level-1 u-padding-0 u-overflow-hidden"
>
<div class="u-position-relative">
<div class="web-container u-position-relative">
<div
class="web-big-padding-section-level-2 is-margin-replace-padding relative"
>
<div class="relative">
<div class="web-container relative">
<!-- before submit -->
<div
class="u-position-relative u-z-index-1 web-grid-1-1-opt-2 u-gap-32 e-u-row-gap-0"
class="u-z-index-1 web-grid-1-1-opt-2 e-u-row-gap-0 relative gap-8"
>
<div>
<div
@@ -94,14 +98,13 @@
class:web-u-max-width-380={!submitted}
>
{#if submitted}
<section class="u-flex-vertical web-u-gap-20">
<section class="web-u-gap-20 flex flex-col">
<h1 class="web-display web-u-color-text-primary">
Thank you for applying
</h1>
<p class="web-description web-u-padding-block-end-32">
Your application has been sent successfully. Our
team will try to get back to you as soon as
possible.
Your application has been sent successfully. Our team
will try to get back to you as soon as possible.
</p>
<a
href="/integrations"
@@ -111,24 +114,24 @@
</a>
</section>
{:else}
<section class="u-flex-vertical web-u-gap-20">
<section class="web-u-gap-20 flex flex-col">
<h4 class="web-display web-u-color-text-primary">
Become a Technology Partner
</h4>
<p class="web-description">
Apply to our Technology Partners Program by filling
out this form. Our team will reach out to you to
confirm your application was accepted.
Apply to our Technology Partners Program by filling out
this form. Our team will reach out to you to confirm
your application was accepted.
</p>
</section>
{/if}
<section
class="u-flex-vertical u-gap-12 u-padding-block-start-40 u-margin-block-start-40 web-u-sep-block-start"
class="u-padding-block-start-40 u-margin-block-start-40 web-u-sep-block-start flex flex-col gap-3"
>
<h2 class="web-label web-u-color-text-primary">
Follow us
</h2>
<ul class="u-flex u-gap-8">
<ul class="flex gap-2">
{#each socials as social}
<li>
<a
@@ -138,10 +141,7 @@
target="_blank"
rel="noopener noreferrer"
>
<span
class={social.icon}
aria-hidden="true"
/>
<span class={social.icon} aria-hidden="true" />
</a>
</li>
{/each}
@@ -156,13 +156,13 @@
<form
method="post"
on:submit|preventDefault={handleSubmit}
class="u-flex-vertical u-gap-16"
class="flex flex-col gap-4"
>
<div class="u-flex u-main-end">
<div class="u-main-end flex">
<ul
class="web-form-list is-two-columns u-gap-16 u-width-full-line web-u-max-width-580 web-u-max-inline-size-none-mobile"
class="web-form-list is-two-columns u-width-full-line web-u-max-width-580 web-u-max-inline-size-none-mobile gap-4"
>
<li class="web-form-item u-flex-vertical u-gap-4">
<li class="web-form-item flex flex-col gap-1">
<label class="u-block" for="name"
>Name of representative</label
>
@@ -175,7 +175,7 @@
bind:value={name}
/>
</li>
<li class="web-form-item u-flex-vertical u-gap-4">
<li class="web-form-item flex flex-col gap-1">
<label class="u-block" for="workEmail"
>Work email address</label
>
@@ -188,7 +188,7 @@
bind:value={email}
/>
</li>
<li class="web-form-item u-flex-vertical u-gap-4">
<li class="web-form-item flex flex-col gap-1">
<label class="u-block" for="companyName"
>Company name</label
>
@@ -201,12 +201,12 @@
bind:value={companyName}
/>
</li>
<li class="web-form-item u-flex-vertical u-gap-4">
<li class="web-form-item flex flex-col gap-1">
<label class="u-block" for="companySize"
>Company size</label
>
<div class="u-position-relative">
<div class="relative">
<select
class="web-input-text"
id="companySize"
@@ -222,13 +222,13 @@
<option>5000+ employees</option>
</select>
<span
class="icon-cheveron-down u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 web-u-pointer-events-none"
class="icon-cheveron-down u-inset-inline-end-8 u-inset-block-start-8 web-u-pointer-events-none absolute"
aria-hidden="true"
></span>
</div>
</li>
<li
class="web-form-item is-column-span-2 u-flex-vertical u-gap-4"
class="web-form-item is-column-span-2 flex flex-col gap-1"
>
<label class="u-block" for="companyWebsite"
>Company website</label
@@ -243,44 +243,42 @@
/>
</li>
<li
class="web-form-item is-column-span-2 u-flex-vertical u-gap-4"
class="web-form-item is-column-span-2 flex flex-col gap-1"
>
<label class="u-block" for="integration"
>Have you already created an integration with
Appwrite?</label
>
<div class="u-position-relative">
<div class="relative">
<select
class="web-input-text"
id="integration"
bind:value={integrationStatus}
on:change={(e) =>
anyify(e.target).value === 'yes'
anyify(e.target).value === "yes"
? (hasCreatedIntegration = true)
: (hasCreatedIntegration = false)}
>
<option value={null}>Select</option>
<option value="yes"
>Yes, we have already created an
integration</option
>Yes, we have already created an integration</option
>
<option value="no"
>No, it is currently in the process of
being built</option
>No, it is currently in the process of being built</option
>
<option value="notYet"
>No, we have yet to start building</option
>
</select>
<span
class="icon-cheveron-down u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 web-u-pointer-events-none"
class="icon-cheveron-down u-inset-inline-end-8 u-inset-block-start-8 web-u-pointer-events-none absolute"
aria-hidden="true"
></span>
</div>
</li>
{#if hasCreatedIntegration}
<li
class="web-form-item is-column-span-2 u-flex-vertical u-gap-4"
class="web-form-item is-column-span-2 flex flex-col gap-1"
>
<label class="u-block" for="linkToDocumentation"
>Link to the integration's documentation</label
@@ -296,7 +294,7 @@
</li>
{/if}
<li
class="web-form-item is-column-span-2 u-flex-vertical u-gap-4"
class="web-form-item is-column-span-2 flex flex-col gap-1"
>
<label class="u-block" for="productUrl"
>Link to the product/company's brand assets</label
@@ -311,7 +309,7 @@
/>
</li>
<li
class="web-form-item is-column-span-2 u-flex-vertical u-gap-4"
class="web-form-item is-column-span-2 flex flex-col gap-1"
>
<label class="u-block" for="details"
>Any other details you'd like to share with us?</label
@@ -327,7 +325,7 @@
</ul>
</div>
<div
class="u-flex u-gap-16 u-main-space-between web-u-flex-vertical-reverse-mobile"
class="u-main-space-between web-u-flex-vertical-reverse-mobile flex gap-4"
>
<p class="web-caption-400 web-u-max-width-380">
{#if error}

88
src/routes/oss-program/+page.svelte
View File

@@ -1,19 +1,19 @@
<script lang="ts">
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
import { Main } from '$lib/layouts';
import { TITLE_SUFFIX } from '$routes/titles';
import FooterNav from '../../lib/components/FooterNav.svelte';
import MainFooter from '../../lib/components/MainFooter.svelte';
import { socials } from '$lib/constants';
import GradientBackground from './bg.png';
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from "$lib/utils/metadata";
import { Main } from "$lib/layouts";
import { TITLE_SUFFIX } from "$routes/titles";
import FooterNav from "../../lib/components/FooterNav.svelte";
import MainFooter from "../../lib/components/MainFooter.svelte";
import { socials } from "$lib/constants";
import GradientBackground from "./bg.png";
let personName = '';
let personEmail = '';
let projectName = '';
let githubUrl = '';
let websiteUrl = '';
let license = '';
let message = '';
let personName = "";
let personEmail = "";
let projectName = "";
let githubUrl = "";
let websiteUrl = "";
let license = "";
let message = "";
let error: string | undefined;
let submitted = false;
@@ -22,10 +22,12 @@
async function handleSubmit() {
error = undefined;
submitting = true;
const response = await fetch('https://growth.appwrite.io/v1/conversations/oss', {
method: 'POST',
const response = await fetch(
"https://growth.appwrite.io/v1/conversations/oss",
{
method: "POST",
headers: {
'Content-Type': 'application/json'
"Content-Type": "application/json",
},
body: JSON.stringify({
personName,
@@ -34,20 +36,22 @@
githubUrl,
websiteUrl,
license,
message
})
});
message,
}),
},
);
if (response.status >= 400) {
error = response.status >= 500 ? 'Server Error.' : 'Error submitting form.';
error =
response.status >= 500 ? "Server Error." : "Error submitting form.";
return;
}
submitted = true;
submitting = false;
}
const title = 'OSS program' + TITLE_SUFFIX;
const title = "OSS program" + TITLE_SUFFIX;
const description = DEFAULT_DESCRIPTION;
const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
const ogImage = DEFAULT_HOST + "/images/open-graph/website.png";
</script>
<svelte:head>
@@ -67,7 +71,7 @@
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<div class="u-position-absolute" style="pointer-events:none;">
<div class="absolute" style="pointer-events:none;">
<img src={GradientBackground} alt="" />
</div>
@@ -76,14 +80,14 @@
<div class="web-big-padding-section-level-1">
<div class="web-big-padding-section-level-2">
<div class="web-container">
<div class="web-grid-1-1-opt-2 u-gap-32">
<div class="web-grid-1-1-opt-2 gap-8">
<div>
<div
class="web-u-max-inline-size-none-mobile"
class:web-u-max-width-380={!submitted}
>
{#if submitted}
<section class="u-flex-vertical web-u-gap-20">
<section class="web-u-gap-20 flex flex-col">
<h1 class="web-display web-u-color-text-primary">
Thank you for your application
</h1>
@@ -99,22 +103,22 @@
</a>
</section>
{:else}
<section class="u-flex-vertical web-u-gap-20">
<section class="web-u-gap-20 flex flex-col">
<h1 class="web-display web-u-color-text-primary">
OSS program
</h1>
<p class="web-description web-u-padding-block-end-40">
Apply to the OSS Program by filling out this form. Our
team will reach out to you to confirm your application
was accepted.
team will reach out to you to confirm your application was
accepted.
</p>
</section>
{/if}
<section
class="u-flex-vertical u-gap-12 web-u-padding-block-start-40 web-u-sep-block-start"
class="web-u-padding-block-start-40 web-u-sep-block-start flex flex-col gap-3"
>
<h2 class="web-label web-u-color-text-primary">Follow us</h2>
<ul class="u-flex u-gap-8">
<ul class="flex gap-2">
{#each socials as social}
<li>
<a
@@ -139,13 +143,13 @@
<form
method="post"
on:submit|preventDefault={handleSubmit}
class="u-flex-vertical u-gap-16"
class="flex flex-col gap-4"
>
<div class="u-flex u-main-end">
<div class="u-main-end flex">
<ul
class="web-form-list is-two-columns u-gap-16 u-width-full-line web-u-max-width-580 web-u-max-inline-size-none-mobile"
class="web-form-list is-two-columns u-width-full-line web-u-max-width-580 web-u-max-inline-size-none-mobile gap-4"
>
<li class="web-form-item u-flex-vertical u-gap-4">
<li class="web-form-item flex flex-col gap-1">
<div class="u-block">Full name</div>
<input
required
@@ -156,7 +160,7 @@
bind:value={personName}
/>
</li>
<li class="web-form-item u-flex-vertical u-gap-4">
<li class="web-form-item flex flex-col gap-1">
<div class="u-block">Email address</div>
<input
required
@@ -168,7 +172,7 @@
/>
</li>
<li
class="web-form-item u-flex-vertical u-gap-4 is-column-span-2"
class="web-form-item is-column-span-2 flex flex-col gap-1"
>
<div class="u-block">Project or company name</div>
<input
@@ -180,7 +184,7 @@
bind:value={projectName}
/>
</li>
<li class="web-form-item u-flex-vertical u-gap-4">
<li class="web-form-item flex flex-col gap-1">
<div class="u-block">GitHub URL</div>
<input
required
@@ -191,7 +195,7 @@
bind:value={githubUrl}
/>
</li>
<li class="web-form-item u-flex-vertical u-gap-4">
<li class="web-form-item flex flex-col gap-1">
<div class="u-block">Website URL</div>
<input
class="web-input-text"
@@ -202,7 +206,7 @@
/>
</li>
<li
class="web-form-item u-flex-vertical u-gap-4 is-column-span-2"
class="web-form-item is-column-span-2 flex flex-col gap-1"
>
<div class="u-block">OSS license</div>
<input
@@ -214,7 +218,7 @@
/>
</li>
<li
class="web-form-item u-flex-vertical u-gap-4 is-column-span-2"
class="web-form-item is-column-span-2 flex flex-col gap-1"
>
<div class="u-block">Message</div>
<textarea
@@ -229,7 +233,7 @@
</ul>
</div>
<div
class="u-flex u-gap-16 u-main-space-between web-u-flex-vertical-reverse-mobile"
class="u-main-space-between web-u-flex-vertical-reverse-mobile flex gap-4"
>
<p class="web-caption-400 web-u-max-width-380">
{#if error}

57
src/routes/pricing/+page.svelte
View File

@@ -1,17 +1,18 @@
<script lang="ts">
import { FooterNav, MainFooter, PreFooter } from '$lib/components';
import { DEFAULT_HOST } from '$lib/utils/metadata';
import { FooterNav, MainFooter, PreFooter } from "$lib/components";
import { DEFAULT_HOST } from "$lib/utils/metadata";
import { Main } from '$lib/layouts';
import { TITLE_SUFFIX } from '$routes/titles';
import ComparePlans from './compare-plans.svelte';
import Faq from './faq.svelte';
import BG from './bg.png?enhanced';
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { Main } from "$lib/layouts";
import { TITLE_SUFFIX } from "$routes/titles";
import ComparePlans from "./compare-plans.svelte";
import Faq from "./faq.svelte";
import BG from "./bg.png?enhanced";
import { PUBLIC_APPWRITE_DASHBOARD } from "$env/static/public";
const title = 'Pricing' + TITLE_SUFFIX;
const description = 'Explore our straightforward pricing plans that scale with your project.';
const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
const title = "Pricing" + TITLE_SUFFIX;
const description =
"Explore our straightforward pricing plans that scale with your project.";
const ogImage = DEFAULT_HOST + "/images/open-graph/website.png";
</script>
<svelte:head>
@@ -32,7 +33,7 @@
</svelte:head>
<div
class="u-position-absolute u-overflow-hidden web-location-for-mobile"
class="u-overflow-hidden web-location-for-mobile absolute"
style="pointer-events:none; inline-size:100%;"
>
<enhanced:img
@@ -102,8 +103,7 @@
<li><span>No Add-ons</span></li>
<li>
<span
>1 Database, 3 Buckets, 5 Functions per
project</span
>1 Database, 3 Buckets, 5 Functions per project</span
>
</li>
</ul>
@@ -123,12 +123,10 @@
>
$15
</div>
<div class="u-margin-block-start-4">
per member/month
</div>
<div class="u-margin-block-start-4">per member/month</div>
<p class="web-main-body-500 u-margin-block-start-16">
For pro developers and teams that need to scale
their products.
For pro developers and teams that need to scale their
products.
</p>
<a
href="https://cloud.appwrite.io/console?type=createPro"
@@ -153,8 +151,7 @@
<li><span>Removable Appwrite branding</span></li>
<li><span>Add-ons</span></li>
<li>
<span
>Unlimited Databases, Buckets and Functions</span
<span>Unlimited Databases, Buckets and Functions</span
>
</li>
</ul>
@@ -209,13 +206,13 @@
</ul>
</div>
<ul class="web-grid-1-1-opt-2 u-gap-32 web-u-margin-block-start-80">
<ul class="web-grid-1-1-opt-2 web-u-margin-block-start-80 gap-8">
<li>
<article
class="web-card is-transparent has-border-gradient u-min-height-100-percent"
style="background:rgba(35, 35, 37, 0.90);"
>
<header class="u-flex u-gap-12">
<header class="flex gap-3">
<h3
id="enterprises"
class="web-main-body-500 web-u-color-text-primary"
@@ -225,8 +222,8 @@
<div class="web-inline-tag is-pink">Coming Soon</div>
</header>
<p class="u-margin-block-start-8">
Large scale projects seeking greater performance, collaboration
and security.
Large scale projects seeking greater performance,
collaboration and security.
</p>
<a
href="/contact-us"
@@ -241,7 +238,7 @@
class="web-card is-transparent has-border-gradient u-min-height-100-percent"
style="background:rgba(35, 35, 37, 0.90);"
>
<header class="u-flex u-gap-12">
<header class="flex gap-3">
<h3
id="open-source-teams"
class="web-main-body-500 web-u-color-text-primary"
@@ -268,10 +265,10 @@
<ComparePlans />
<div
class="web-big-padding-section-level-1 theme-dark u-position-relative u-overflow-hidden"
class="web-big-padding-section-level-1 theme-dark u-overflow-hidden relative"
>
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-container u-position-relative" style:z-index="10">
<div class="web-big-padding-section-level-2 relative">
<div class="web-container relative" style:z-index="10">
<section class="web-grid-4-6">
<header>
<div class="web-display web-u-color-text-primary">FAQ</div>
@@ -280,7 +277,7 @@
</section>
</div>
</div>
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-big-padding-section-level-2 relative">
<div class="web-container">
<PreFooter />
<FooterNav />

4
src/routes/pricing/compare-plans.svelte
View File

@@ -378,7 +378,7 @@
</header>
<div
class="web-is-only-mobile web-u-padding-block-start-48 web-u-padding-inline-8 web-u-margin-inline-8-negative web-u-filter-blur-8 /u-position-sticky /u-z-index-5"
class="web-is-only-mobile web-u-padding-block-start-48 web-u-padding-inline-8 web-u-margin-inline-8-negative web-u-filter-blur-8 /sticky /u-z-index-5"
style:--inset-block-start="2rem"
>
<Tabs bind:tab tabs={cols} let:TabsList>
@@ -396,7 +396,7 @@
</div>
<div
class="web-is-not-mobile web-u-grid-auto-column-1fr is-with-footer-border web-u-padding-inline-8 web-u-margin-inline-8-negative web-u-filter-blur-8 u-position-sticky u-z-index-5 web-u-container-query-inline gap-8"
class="web-is-not-mobile web-u-grid-auto-column-1fr is-with-footer-border web-u-padding-inline-8 web-u-margin-inline-8-negative web-u-filter-blur-8 u-z-index-5 web-u-container-query-inline sticky gap-8"
style:--inset-block-start={$isHeaderHidden ? "0px" : "70px"}
style:transition="inset-block-start 0.3s ease"
>

4
src/routes/products/messaging/(components)/Target.svelte
View File

@@ -383,10 +383,10 @@
<div
class="u-margin-block-start-16 target-text flex flex-col items-center gap-6"
>
<h3 class="web-title web-u-color-text-primary u-text-center">
<h3 class="web-title web-u-color-text-primary text-center">
Target and group your subscribers
</h3>
<p class="web-description u-text-center" style:max-inline-size="580px">
<p class="web-description text-center" style:max-inline-size="580px">
Segment your users based on topics using list subscriptions to send
focused messages.
</p>

2
src/routes/products/messaging/+page.svelte
View File

@@ -579,7 +579,7 @@ messaging.create_email(
class="web-big-padding-section-level-1 web-u-sep-block-start web-u-padding-block-start-80"
>
<div class="container">
<h4 class="web-label u-text-center web-u-color-text-primary">
<h4 class="web-label web-u-color-text-primary text-center">
Keep exploring our products
</h4>
<ul

344
src/routes/startups/+page.svelte
View File

@@ -1,34 +1,34 @@
<script lang="ts">
import ProjectTimeline from './(assets)/project-timeline.avif';
import UsageGraphs from './(assets)/usage-graphs.avif';
import SecurityOptions from './(assets)/security-options.avif';
import ProjectTimeline from "./(assets)/project-timeline.avif";
import UsageGraphs from "./(assets)/usage-graphs.avif";
import SecurityOptions from "./(assets)/security-options.avif";
import BackgroundHero from './(assets)/bg-hero.svg';
import BackgroundLeft from './(assets)/bg-left.png';
import BackgroundRight from './(assets)/bg-right.png';
import BlobGreen from './(assets)/blob-green.svg';
import BlobPink from './(assets)/blob-pink.svg';
import BlobGreenMobile from './(assets)/blob-green-mobile.svg';
import BlobPinkMobile from './(assets)/blob-pink-mobile.svg';
import BackgroundHero from "./(assets)/bg-hero.svg";
import BackgroundLeft from "./(assets)/bg-left.png";
import BackgroundRight from "./(assets)/bg-right.png";
import BlobGreen from "./(assets)/blob-green.svg";
import BlobPink from "./(assets)/blob-pink.svg";
import BlobGreenMobile from "./(assets)/blob-green-mobile.svg";
import BlobPinkMobile from "./(assets)/blob-pink-mobile.svg";
import { Main } from '$lib/layouts';
import MainFooter from '$lib/components/MainFooter.svelte';
import FooterNav from '$lib/components/FooterNav.svelte';
import { TITLE_SUFFIX } from '$routes/titles';
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
import { Main } from "$lib/layouts";
import MainFooter from "$lib/components/MainFooter.svelte";
import FooterNav from "$lib/components/FooterNav.svelte";
import { TITLE_SUFFIX } from "$routes/titles";
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from "$lib/utils/metadata";
import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
import Faq from './faq.svelte';
import { PUBLIC_GROWTH_ENDPOINT } from "$env/static/public";
import Faq from "./faq.svelte";
const title = 'Startups' + TITLE_SUFFIX;
const title = "Startups" + TITLE_SUFFIX;
const description = DEFAULT_DESCRIPTION;
const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
const ogImage = DEFAULT_HOST + "/images/open-graph/website.png";
const infiniteScroll = (node: HTMLElement) => {
if (window.matchMedia('prefers-reduced-motion').matches) return;
const content = node.querySelector('.inner') as HTMLElement;
if (window.matchMedia("prefers-reduced-motion").matches) return;
const content = node.querySelector(".inner") as HTMLElement;
content.innerHTML += content?.innerHTML;
node.dataset.animated = 'true';
node.dataset.animated = "true";
};
let personName: string;
@@ -41,34 +41,39 @@
let submitting = false;
function scrollToForm() {
const form = document.getElementById('form');
form?.scrollIntoView({ behavior: 'smooth' });
const form = document.getElementById("form");
form?.scrollIntoView({ behavior: "smooth" });
}
async function handleSubmit() {
error = undefined;
submitting = true;
const response = await fetch(`${PUBLIC_GROWTH_ENDPOINT}/conversations/startups`, {
method: 'POST',
const response = await fetch(
`${PUBLIC_GROWTH_ENDPOINT}/conversations/startups`,
{
method: "POST",
headers: {
'Content-Type': 'application/json'
"Content-Type": "application/json",
},
body: JSON.stringify({
personName,
personEmail,
companyName,
companyUrl: companyUrl.startsWith('http') ? companyUrl : `https://${companyUrl}`
})
});
companyUrl: companyUrl.startsWith("http")
? companyUrl
: `https://${companyUrl}`,
}),
},
);
submitting = false;
if (response.status >= 400) {
error =
response.status >= 500
? 'Internal server Error.'
: 'Error submitting form. Please contact support.';
? "Internal server Error."
: "Error submitting form. Please contact support.";
return;
}
@@ -76,72 +81,77 @@
}
function resetForm() {
personName = '';
personEmail = '';
companyName = '';
companyUrl = '';
personName = "";
personEmail = "";
companyName = "";
companyUrl = "";
error = undefined;
submitted = false;
}
const testimonial = (name: string, handle: string, text: string, image: string) => {
const testimonial = (
name: string,
handle: string,
text: string,
image: string,
) => {
return {
name,
handle,
text,
image: `/images/testimonials/${image}.png`
image: `/images/testimonials/${image}.png`,
};
};
const mariusBolik = testimonial(
'Marius Bolik',
'CTO // mySHOEFITTER',
'Appwrite has been a tremendous asset in implementing our IT infrastructure. Not only is the software an absolute game-changer, but the team is always there when you need them.',
'marius-bolik'
"Marius Bolik",
"CTO // mySHOEFITTER",
"Appwrite has been a tremendous asset in implementing our IT infrastructure. Not only is the software an absolute game-changer, but the team is always there when you need them.",
"marius-bolik",
);
const souvikSarkar = testimonial(
'Souvik Sarkar',
'@Jeet_2003',
'With its robust feature set and open-source nature, Appwrite is the perfect choice for developers who want to build secure and scalable applications.',
'souvik-sarkar'
"Souvik Sarkar",
"@Jeet_2003",
"With its robust feature set and open-source nature, Appwrite is the perfect choice for developers who want to build secure and scalable applications.",
"souvik-sarkar",
);
const ryanOconner = testimonial(
"Ryan O'Conner",
'Founder // K-Collect',
"Founder // K-Collect",
"There's no struggling with writing backend code and working with databases, as that's already taken care of.",
'ryan-oconner'
"ryan-oconner",
);
const testimonials = [
souvikSarkar,
ryanOconner,
testimonial(
'Gilbert Gonzalez',
'@ggsotillo',
'We reduced 80% time-to-market of our apps using Appwrite.',
'gilbert-gonzalez'
"Gilbert Gonzalez",
"@ggsotillo",
"We reduced 80% time-to-market of our apps using Appwrite.",
"gilbert-gonzalez",
),
testimonial(
'Eddie Jaoude',
'@eddiejaoude',
'It is great you are delivering an awesome product that is Open Source as well as having a great community!',
'eddie-jaoude'
"Eddie Jaoude",
"@eddiejaoude",
"It is great you are delivering an awesome product that is Open Source as well as having a great community!",
"eddie-jaoude",
),
testimonial(
'Diego Ferreyra',
'@diego_ferreyra1',
'Loving it. I’ve been a web developer for 20+ years and I’ve never gotten from 0 lines to actual useful coding so fast. 100% recommend.',
'diego-ferreyra'
"Diego Ferreyra",
"@diego_ferreyra1",
"Loving it. I’ve been a web developer for 20+ years and I’ve never gotten from 0 lines to actual useful coding so fast. 100% recommend.",
"diego-ferreyra",
),
testimonial(
'Alejandro Morales',
'@alexparton',
"Alejandro Morales",
"@alexparton",
"I just migrated a project from Firebase to Appwrite: Authentication, Users, Databases and Storage. And I can't be more in love with it.",
'alejandro-morales'
"alejandro-morales",
),
mariusBolik
mariusBolik,
];
</script>
@@ -164,22 +174,22 @@
<Main>
<img
class="u-block u-position-absolute u-inset-inline-end-0 u-inset-block-start-0 u-margin-inline-auto u-inset-0"
class="u-block u-inset-inline-end-0 u-inset-block-start-0 u-margin-inline-auto u-inset-0 absolute"
src={BackgroundHero}
alt=""
/>
<img
class="u-position-absolute u-inset-inline-start-0 u-inset-block-start-0 e-bg-left-mobile"
class="u-inset-inline-start-0 u-inset-block-start-0 e-bg-left-mobile absolute"
src={BackgroundLeft}
alt=""
/>
<img
class="u-position-absolute u-inset-inline-end-0 u-inset-block-start-0 e-bg-right-mobile"
class="u-inset-inline-end-0 u-inset-block-start-0 e-bg-right-mobile absolute"
src={BackgroundRight}
alt=""
/>
<div class="web-big-padding-section u-position-relative u-overflow-hidden">
<div class="web-big-padding-section-level-1 u-position-relative">
<div class="web-big-padding-section u-overflow-hidden relative">
<div class="web-big-padding-section-level-1 relative">
<div class="web-big-padding-section-level-2 e-u-margin-block-128-desktop">
<section class="web-container web-u-padding-block-end-0">
<div
@@ -192,9 +202,9 @@
<p
class="web-description web-u-max-width-640 u-margin-inline-auto e-u-padding-inline-32-desktop"
>
The Appwrite Startups Program supports your startup with a complete
backend for you to build your products. Eligible startups receive
Appwrite Cloud Scale for 12 months.
The Appwrite Startups Program supports your startup with a
complete backend for you to build your products. Eligible startups
receive Appwrite Cloud Scale for 12 months.
</p>
<button
on:click={scrollToForm}
@@ -210,9 +220,11 @@
class="web-big-padding-section-level-2 e-u-padding-block-start-48-mobile e-u-padding-block-start-80-desktop e-u-margin-block-end-80-mobile"
>
<section class="web-container">
<ul class="u-flex web-u-flex-vertical-mobile web-u-gap-80 e-u-gap-64-mobile">
<ul
class="web-u-flex-vertical-mobile web-u-gap-80 e-u-gap-64-mobile flex"
>
<li
class="u-flex-vertical u-cross-center u-gap-16 u-stretch u-max-width-350 u-margin-inline-auto"
class="u-cross-center u-stretch u-margin-inline-auto flex max-w-[350px] flex-col gap-4"
>
<img
src="/images/icons/gradients/backend.svg"
@@ -220,16 +232,18 @@
height="48"
alt=""
/>
<div class="u-flex-vertical u-gap-8 u-text-center">
<h2 class="web-label web-u-color-text-primary">Complete backend</h2>
<div class="flex flex-col gap-2 text-center">
<h2 class="web-label web-u-color-text-primary">
Complete backend
</h2>
<p class="web-main-body-500">
Get access to Appwrite’s Scale plan and build your entire backend
with Appwrite.
Get access to Appwrite’s Scale plan and build your entire
backend with Appwrite.
</p>
</div>
</li>
<li
class="u-flex-vertical u-cross-center u-gap-16 u-stretch u-max-width-350 u-margin-inline-auto"
class="u-cross-center u-stretch u-margin-inline-auto flex max-w-[350px] flex-col gap-4"
>
<img
src="/images/icons/gradients/cloud-credit.svg"
@@ -237,16 +251,18 @@
height="48"
alt=""
/>
<div class="u-flex-vertical u-gap-8 u-text-center">
<h2 class="web-label web-u-color-text-primary">Cloud credits</h2>
<div class="flex flex-col gap-2 text-center">
<h2 class="web-label web-u-color-text-primary">
Cloud credits
</h2>
<p class="web-main-body-500">
Get Appwrite Cloud Scale for 12 months and reduce risk at an early
stage.
Get Appwrite Cloud Scale for 12 months and reduce risk at an
early stage.
</p>
</div>
</li>
<li
class="u-flex-vertical u-cross-center u-gap-16 u-stretch u-max-width-350 u-margin-inline-auto"
class="u-cross-center u-stretch u-margin-inline-auto flex max-w-[350px] flex-col gap-4"
>
<img
src="/images/icons/gradients/support.svg"
@@ -254,8 +270,10 @@
height="48"
alt=""
/>
<div class="u-flex-vertical u-gap-8 u-text-center">
<h2 class="web-label web-u-color-text-primary">Priority support</h2>
<div class="flex flex-col gap-2 text-center">
<h2 class="web-label web-u-color-text-primary">
Priority support
</h2>
<p class="web-main-body-500">
Get community support and priority email support from the
Appwrite team.
@@ -268,9 +286,11 @@
</div>
<div
class="web-big-padding-section-level-1 u-position-relative web-white-section theme-light"
class="web-big-padding-section-level-1 web-white-section theme-light relative"
>
<div
class="web-big-padding-section-level-2 e-u-margin-block-start-80-mobile"
>
<div class="web-big-padding-section-level-2 e-u-margin-block-start-80-mobile">
<div class="web-container">
<div class="web-timeline-content">
<ol class="web-timeline-content-list">
@@ -279,21 +299,21 @@
class="web-timeline-content-item-top web-grid-1-1"
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;"
>
<div class="u-flex-vertical u-gap-16">
<div class="flex flex-col gap-4">
<h3 class="web-title web-u-color-text-primary">
Ship faster
</h3>
<p class="web-main-body-500">
Utilizing Appwrite as your backend, you significantly
cut down the time and resources spent on building a
backend infrastructure from scratch. This means you can
get to quicker iterations and faster time-to-market,
directly addressing the challenge of finding
product-market fit sooner.
Utilizing Appwrite as your backend, you significantly cut
down the time and resources spent on building a backend
infrastructure from scratch. This means you can get to
quicker iterations and faster time-to-market, directly
addressing the challenge of finding product-market fit
sooner.
</p>
</div>
<div>
<div class="web-card is-white u-flex-vertical web-u-gap-20">
<div class="web-card is-white web-u-gap-20 flex flex-col">
<p class="aw-sub-body-500">
The integrated user authentication and the ease of
creating data structures have undoubtedly saved us
@@ -340,7 +360,7 @@
<div class="web-is-not-mobile">
<img alt="" src={UsageGraphs} />
</div>
<div class="u-flex-vertical u-gap-16 web-u-flex-basis-380">
<div class="web-u-flex-basis-380 flex flex-col gap-4">
<h3 class="web-title web-u-color-text-primary">
Scalable architecture
</h3>
@@ -376,7 +396,7 @@
</div>
<div class="web-is-only-mobile">
<img
class="u-block u-max-width-450 u-margin-inline-auto"
class="u-block u-margin-inline-auto max-w-[450px]"
alt=""
src={UsageGraphs}
/>
@@ -387,18 +407,18 @@
class="web-timeline-content-item-top web-grid-1-1"
style="--grid-1-1-gap: 2.5rem; --grid-1-1-gap-desktop: 6.5rem;"
>
<div class="u-flex-vertical u-gap-16">
<div class="flex flex-col gap-4">
<h3 class="web-title web-u-color-text-primary">
Built-in security and compliance
</h3>
<p class="web-main-body-500">
Appwrite comes with built-in security features like
authentication, database security, and more, reducing
the time and effort you need to spend on securing your
authentication, database security, and more, reducing the
time and effort you need to spend on securing your
application.
</p>
<div
class="web-card is-white u-flex-vertical web-u-gap-20 web-u-margin-block-start-64 e-u-margin-block-start-16-mobile"
class="web-card is-white web-u-gap-20 web-u-margin-block-start-64 e-u-margin-block-start-16-mobile flex flex-col"
>
<p class="aw-sub-body-500">{souvikSarkar.text}</p>
<div class="web-user-box">
@@ -419,18 +439,16 @@
</div>
</div>
<div class="web-is-not-desktop u-position-relative">
<div class="web-is-not-desktop relative">
<img
class="u-block u-max-width-450 u-margin-inline-auto"
class="u-block u-margin-inline-auto max-w-[450px]"
src={SecurityOptions}
alt=""
style="height:auto;"
/>
</div>
<div
class="web-is-only-desktop u-position-relative u-overflow-hidden"
>
<div class="web-is-only-desktop u-overflow-hidden relative">
<div class="u-flex">
<img
src={SecurityOptions}
@@ -464,9 +482,7 @@
width="40"
alt="Avatar of Walter"
/>
<div
class="web-user-box-name u-flex u-gap-8"
>
<div class="web-user-box-name flex gap-2">
<span class="web-sub-body-500"
>Walter O'Brien</span
>
@@ -478,9 +494,9 @@
<div
class="web-user-box-content web-caption-400 web-u-color-text-primary"
>
Hello devs! I am getting a CORS
error when sending a request to the
backend. Can you help me?
Hello devs! I am getting a CORS error when
sending a request to the backend. Can you help
me?
</div>
</div>
</div>
@@ -495,12 +511,8 @@
height="48"
alt="Avatar of Steven"
/>
<div
class="web-user-box-name u-flex u-gap-8"
>
<span class="web-sub-body-500"
>Steven</span
>
<div class="web-user-box-name flex gap-2">
<span class="web-sub-body-500">Steven</span>
<time
class="web-caption-400 web-u-color-text-tertiary"
>8:38 AM</time
@@ -509,8 +521,7 @@
<div
class="web-user-box-content web-caption-400 web-u-color-text-primary"
>
Hey Louis! Is this the message you
get
Hey Louis! Is this the message you get
<a
class="web-link is-pink"
href="/blog/post/cors-error"
@@ -531,9 +542,7 @@
width="40"
alt="Avatar of Walter"
/>
<div
class="web-user-box-name u-flex u-gap-8"
>
<div class="web-user-box-name flex gap-2">
<span class="web-sub-body-500"
>Walter O'Brien</span
>
@@ -560,12 +569,8 @@
height="48"
alt="Avatar of Steven"
/>
<div
class="web-user-box-name u-flex u-gap-8"
>
<span class="web-sub-body-500"
>Steven</span
>
<div class="web-user-box-name flex gap-2">
<span class="web-sub-body-500">Steven</span>
<time
class="web-caption-400 web-u-color-text-tertiary"
>9:08 AM</time
@@ -574,9 +579,8 @@
<div
class="web-user-box-content web-caption-400 web-u-color-text-primary"
>
You should be able to debug this
with a few steps. Just follow this
blog:
You should be able to debug this with a few
steps. Just follow this blog:
<a
class="web-link is-pink"
href="/blog/post/cors-error"
@@ -591,7 +595,7 @@
</div>
</div>
<div
class="u-flex-vertical u-gap-16 u-margin-inline-start-auto web-u-margin-inline-auto-mobile"
class="u-margin-inline-start-auto web-u-margin-inline-auto-mobile flex flex-col gap-4"
>
<h3 class="web-title web-u-color-text-primary">
Power of open source community
@@ -634,12 +638,12 @@
class="web-big-padding-section-level-2 web-u-overflow-hidden e-u-margin-block-start-200-desktop e-u-margin-block-start-128-mobile"
>
<h4
class="web-title web-u-color-text-primary u-text-center u-max-width-350 u-margin-inline-auto"
class="web-title web-u-color-text-primary u-margin-inline-auto max-w-[350px] text-center"
>
Focus on building your product
</h4>
<div class="scroll-carousel" use:infiniteScroll>
<ul class="inner u-gap-32">
<ul class="inner gap-8">
{#each testimonials as t}
<li>
<div
@@ -670,33 +674,36 @@
</div>
</div>
<div id="form" class="web-big-padding-section-level-1 u-padding-0 u-overflow-hidden">
<div
class="web-big-padding-section-level-2 is-margin-replace-padding u-position-relative"
id="form"
class="web-big-padding-section-level-1 u-padding-0 u-overflow-hidden"
>
<div class="u-position-relative">
<div
class="web-big-padding-section-level-2 is-margin-replace-padding relative"
>
<div class="relative">
<div class="web-big-padding-section-level-2">
<div class="web-container u-position-relative">
<div class="web-container relative">
<img
class="u-position-absolute is-only-desktop"
class="is-only-desktop absolute"
style="inset-inline-end:-650px; inset-block-start:-200px; max-width:none; max-height:none;"
src={BlobGreen}
alt=""
/>
<img
class="u-position-absolute is-only-desktop"
class="is-only-desktop absolute"
style="inset-inline-start:-1000px; inset-block-start:-800px; max-width:none; max-height:none;"
src={BlobPink}
alt=""
/>
<img
class="u-position-absolute is-only-mobile"
class="is-only-mobile absolute"
style="inset-inline-end:-450px; inset-block-start:400px; max-width:none; max-height:none;"
src={BlobGreenMobile}
alt=""
/>
<img
class="u-position-absolute is-only-mobile"
class="is-only-mobile absolute"
style="inset-inline-start:-700px; inset-block-start:-400px; max-width:none; max-height:none;"
src={BlobPinkMobile}
alt=""
@@ -704,25 +711,24 @@
<!-- before submit -->
<div
class="u-position-relative u-z-index-1 web-grid-1-1-opt-2 u-gap-32 e-u-row-gap-0"
class="u-z-index-1 web-grid-1-1-opt-2 e-u-row-gap-0 relative gap-8"
>
<div>
<div
class="web-u-max-inline-size-none-mobile"
class:web-u-max-width-380={!submitted}
>
<section class="u-flex-vertical web-u-gap-20">
<section class="web-u-gap-20 flex flex-col">
<h4 class="web-title web-u-color-text-primary">
Join the Appwrite Startups program
</h4>
<p class="web-description">
We support VC backed or revenue generating
startups that have been established within
the last decade with:
We support VC backed or revenue generating startups that
have been established within the last decade with:
</p>
<div class="u-flex-vertical u-gap-12">
<div class="u-flex u-gap-16">
<div class="flex flex-col gap-3">
<div class="flex gap-4">
<div
class="web-check-bullet u-margin-block-start-4"
></div>
@@ -730,7 +736,7 @@
Appwrite Cloud Scale for 12 months
</p>
</div>
<div class="u-flex u-gap-16">
<div class="flex gap-4">
<div
class="web-check-bullet u-margin-block-start-4"
></div>
@@ -747,13 +753,13 @@
</div>
{#if submitted}
<div
class="u-position-relative u-z-index-1 u-flex-vertical u-gap-8 u-text-center web-u-max-width-380 web-u-max-inline-size-none-mobile u-margin-inline-auto"
class="u-z-index-1 web-u-max-width-380 web-u-max-inline-size-none-mobile u-margin-inline-auto relative flex flex-col gap-2 text-center"
>
<h6
class="web-label u-flex u-main-center u-cross-center u-gap-8 e-mobile-fix-1"
class="web-label u-main-center u-cross-center e-mobile-fix-1 flex gap-2"
>
<img
class="u-flex-shrink-0"
class="shrink-0"
src="/images/icons/colored/check.svg"
alt=""
/>
@@ -762,8 +768,8 @@
>
</h6>
<p class="web-main-body-400">
Our team will review your application and get back to
you soon.
Our team will review your application and get back to you
soon.
</p>
<button
on:click={resetForm}
@@ -775,13 +781,13 @@
<form
method="post"
on:submit|preventDefault={handleSubmit}
class="u-flex-vertical u-gap-16"
class="flex flex-col gap-4"
>
<div class="u-flex u-main-end">
<div class="u-main-end flex">
<ul
class="web-form-list u-gap-16 u-width-full-line web-u-max-width-580 web-u-max-inline-size-none-mobile"
class="web-form-list u-width-full-line web-u-max-width-580 web-u-max-inline-size-none-mobile gap-4"
>
<li class="web-form-item u-flex-vertical u-gap-4">
<li class="web-form-item flex flex-col gap-1">
<div class="u-block">Full name</div>
<input
required
@@ -792,7 +798,7 @@
bind:value={personName}
/>
</li>
<li class="web-form-item u-flex-vertical u-gap-4">
<li class="web-form-item flex flex-col gap-1">
<div class="u-block">Email address</div>
<input
required
@@ -803,7 +809,7 @@
bind:value={personEmail}
/>
</li>
<li class="web-form-item u-flex-vertical u-gap-4">
<li class="web-form-item flex flex-col gap-1">
<div class="u-block">Company name</div>
<input
required
@@ -815,7 +821,7 @@
bind:value={companyName}
/>
</li>
<li class="web-form-item u-flex-vertical u-gap-4">
<li class="web-form-item flex flex-col gap-1">
<div class="u-block">Company website</div>
<input
required
@@ -830,7 +836,7 @@
</ul>
</div>
<div
class="u-flex u-gap-16 u-main-space-between web-u-flex-vertical-reverse-mobile"
class="u-main-space-between web-u-flex-vertical-reverse-mobile flex gap-4"
>
<p class="web-caption-400 web-u-max-width-380">
{#if error}
@@ -849,8 +855,8 @@
</div>
</div>
</div>
<div class="web-big-padding-section-level-2 u-position-relative">
<div class="web-container u-position-relative" style:z-index="10">
<div class="web-big-padding-section-level-2 relative">
<div class="web-container relative" style:z-index="10">
<section class="web-grid-4-6">
<header>
<div class="web-display web-u-color-text-primary">FAQ</div>
@@ -870,8 +876,8 @@
</Main>
<style lang="scss">
@use '$scss/abstract/mixins/border-gradient' as gradients;
@use '$scss/abstract/variables/devices' as devices;
@use "$scss/abstract/mixins/border-gradient" as gradients;
@use "$scss/abstract/variables/devices" as devices;
@keyframes scroll {
to {

48
src/routes/threads/[id]/+page.svelte
View File

@@ -1,22 +1,22 @@
<script lang="ts">
import { Main } from '$lib/layouts';
import { DEFAULT_DESCRIPTION } from '$lib/utils/metadata';
import { TITLE_SUFFIX } from '$routes/titles';
import { Main } from "$lib/layouts";
import { DEFAULT_DESCRIPTION } from "$lib/utils/metadata";
import { TITLE_SUFFIX } from "$routes/titles";
import FooterNav from '$lib/components/FooterNav.svelte';
import MainFooter from '$lib/components/MainFooter.svelte';
import SeoOgImage from '$lib/components/SeoOgImage.svelte';
import PreFooter from '../PreFooter.svelte';
import MessageCard from './MessageCard.svelte';
import FooterNav from "$lib/components/FooterNav.svelte";
import MainFooter from "$lib/components/MainFooter.svelte";
import SeoOgImage from "$lib/components/SeoOgImage.svelte";
import PreFooter from "../PreFooter.svelte";
import MessageCard from "./MessageCard.svelte";
export let data;
const title = data.title + ' - Threads' + TITLE_SUFFIX;
const title = data.title + " - Threads" + TITLE_SUFFIX;
const description = DEFAULT_DESCRIPTION;
const discordLink = `https://discord.com/channels/564160730845151244/${data.discord_id}`;
function shorten(str: string, len: number) {
return str.length > len ? str.slice(0, len) + '...' : str;
return str.length > len ? str.slice(0, len) + "..." : str;
}
</script>
@@ -27,8 +27,14 @@
<meta name="twitter:title" content={title} />
<!-- Description -->
<meta name="description" content={data.seo_description ?? description} />
<meta property="og:description" content={data.seo_description ?? description} />
<meta name="twitter:description" content={data.seo_description ?? description} />
<meta
property="og:description"
content={data.seo_description ?? description}
/>
<meta
name="twitter:description"
content={data.seo_description ?? description}
/>
<SeoOgImage
title={shorten(data.title, 32)}
description={shorten(data.seo_description ?? DEFAULT_DESCRIPTION, 64)}
@@ -71,7 +77,9 @@
<MessageCard {message}>
{#if isFirst}
<div class="web-inline-info web-u-margin-block-start-24">
<div class="web-sub-body-500 web-u-color-text-primary">TL;DR</div>
<div class="web-sub-body-500 web-u-color-text-primary">
TL;DR
</div>
{data.tldr}
</div>
{/if}
@@ -90,22 +98,24 @@
</div>
<div class="related">
{#if data.related.length}
<h2 class="web-eyebrow web-u-color-text-primary">Recommended threads</h2>
<h2 class="web-eyebrow web-u-color-text-primary">
Recommended threads
</h2>
{/if}
<ul>
{#each data.related as thread}
<li>
<a href="/threads/{thread.$id}" data-sveltekit-reload>
<div class="u-flex u-cross-center">
<div class="u-cross-center flex">
<span class="web-sub-body-500 web-u-color-text-primary">
{thread.title.length > 40
? thread.title.slice(0, 40) + '...'
? thread.title.slice(0, 40) + "..."
: thread.title}
</span>
</div>
<p class="web-sub-body-400 u-margin-block-start-8">
{thread.content.length > 160
? thread.content.slice(0, 160) + '...'
? thread.content.slice(0, 160) + "..."
: thread.content}
</p>
</a>
@@ -124,7 +134,7 @@
</Main>
<style lang="scss">
@use '$scss/abstract/variables/devices';
@use "$scss/abstract/variables/devices";
.header {
display: grid;
@@ -186,7 +196,7 @@
overflow: hidden;
&::before {
content: '';
content: "";
position: absolute;
top: 0;
left: -20px;