Merge branch 'main' into storage-product-page

appwrite · Nov 11, 2024 · 5f6783e · 5f6783e
2 parents 2341066 + 76b88bc
commit 5f6783e
Show file tree

Hide file tree

Showing 55 changed files with 1,317 additions and 25 deletions.
diff --git a/src/app.css b/src/app.css
@@ -53,6 +53,7 @@
     --color-white: hsl(0 0% 100%);
     --color-black: hsl(0 0% 0%);
     --color-transparent: rgba(0, 0, 0, 0);
+    --color-smooth: hsl(var(--color-greyscale-hue) 6%, 10%, 0.04);
     --color-greyscale-25: hsl(var(--color-greyscale-hue) 11% 98%);
     --color-greyscale-50: hsl(var(--color-greyscale-hue) 11% 94%);
     --color-greyscale-100: hsl(var(--color-greyscale-hue) 6% 90%);
@@ -68,8 +69,16 @@
     --color-greyscale-850: hsl(var(--color-greyscale-hue) 3% 14%);
     --color-greyscale-900: hsl(var(--color-greyscale-hue) 5.7% 10.4%);
 
+    /* utility colors */
+    --color-badge-bg-light: #f2c8d6;
+    --color-badge-border-light: #f69db7;
+    --color-badge-bg-dark: #2c2c2f;
+    --color-badge-border-dark: #39393c;
+
     /* Animations */
     --animate-scale-in: scale-in 200ms ease-out forwards;
+    --animate-text: fade-in 0.75s ease-in-out both, blur 0.75s ease-in-out both,
+        up 0.75s ease-in-out both;
 
     /* Pink polyfills */
     --transition: 0.2s;
@@ -84,6 +93,33 @@
         }
     }
 
+    @keyframes blur {
+        0% {
+            filter: blur(5px);
+        }
+        100% {
+            filter: blur(0);
+        }
+    }
+
+    @keyframes up {
+        0% {
+            transform: translateY(8px);
+        }
+        100% {
+            transform: translateY(0px);
+        }
+    }
+
+    @keyframes fade-in {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
     /* Fonts */
     --font-family-sans: 'Inter', arial, sans-serif;
     --font-family-mono: 'Fira Code', monospace;
@@ -152,12 +188,16 @@
     --color-primary: var(--color-greyscale-900);
     --color-secondary: var(--color-greyscale-700);
     --color-accent: var(--color-pink-600);
+    --color-badge-bg: var(--color-badge-bg-light);
+    --color-badge-border: var(--color-badge-border-light);
 }
 
 /* dark theme */
 .dark {
     --color-primary: var(--color-greyscale-100);
     --color-secondary: var(--color-greyscale-300);
+    --color-badge-bg: var(--color-badge-bg-dark);
+    --color-badge-border: var(--color-badge-border-dark);
 }
 
 /* Container */

diff --git a/src/lib/components/FooterNav.svelte b/src/lib/components/FooterNav.svelte
@@ -68,7 +68,8 @@
             ],
             Programs: [
                 { label: 'Heroes', href: '/heroes' },
-                { label: 'Startups', href: '/startups' }
+                { label: 'Startups', href: '/startups' },
+                { label: 'Students', href: '/students' }
             ],
             About: [
                 { label: 'Company', href: '/company' },

diff --git a/src/lib/components/animated/Text.svelte b/src/lib/components/animated/Text.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    export let text: string;
+
+    const words = text.split(' ');
+</script>
+
+<span class="sr-only">{text}</span>
+<span class="relative">
+    {#each words as word, i}
+        <span
+            class="animate-text mr-2 inline-block"
+            style:animation-delay="{i * 75}ms
+            ">{word}</span
+        >
+    {/each}
+</span>
diff --git a/src/lib/components/ui/InlineTag.svelte b/src/lib/components/ui/InlineTag.svelte
@@ -1,5 +1,5 @@
 <div
-    class="tracking-none text-sub-body text-greyscale-900 dark:text-greyscale-100 py-0.25 -mr-0.5 rounded-[.25rem] bg-black/[0.08] px-1 dark:bg-white/[0.12]"
+    class="tracking-none text-sub-body text-greyscale-900 dark:text-greyscale-100 py-0.25 -mr-0.5 rounded-[.25rem] bg-black/8 px-1 dark:bg-white/[0.12]"
 >
     <slot />
 </div>
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -1,4 +1,4 @@
-export const GITHUB_STARS = '43.9K';
+export const GITHUB_STARS = '45.1K';
 export const GITHUB_REPO_LINK = 'https://github.com/appwrite/appwrite';
 export const BANNER_KEY: Banners = 'discord-banner-01'; // Change key to force banner to show again
 export const SENTRY_DSN =

diff --git a/src/lib/layouts/DocsArticle.svelte b/src/lib/layouts/DocsArticle.svelte
@@ -99,7 +99,7 @@
                             </li>
                         {/each}
                     </ol>
-                    <div class="border-greyscale-900/[0.04] border-t pt-5">
+                    <div class="border-greyscale-900/4 border-t pt-5">
                         <button class="web-link inline-flex items-center gap-2" use:scrollToTop>
                             <span class="web-icon-arrow-up" aria-hidden="true" />
                             <span class="text-caption">Back to top</span>

diff --git a/src/lib/layouts/DocsTutorial.svelte b/src/lib/layouts/DocsTutorial.svelte
@@ -7,6 +7,7 @@
     import { onMount } from 'svelte';
 
     export let toc: Array<TocItem>;
+    export let back: string;
     export let currentStep: number;
     export let date: string;
 
@@ -44,6 +45,15 @@
     <article class="web-article contents">
         <header class="web-article-header">
             <div class="web-article-header-start web-u-cross-start flex flex-col">
+                {#if back}
+                    <a
+                        href={back}
+                        class="web-icon-button web-is-only-mobile"
+                        aria-label="previous page"
+                    >
+                        <span class="icon-cheveron-left" aria-hidden="true" />
+                    </a>
+                {/if}
                 <ul class="web-metadata web-caption-400">
                     {#if currentStepItem.difficulty}
                         <li>{currentStepItem.difficulty}</li>
@@ -53,7 +63,21 @@
                     {/if}
                 </ul>
                 <div class="u-cross-center relative flex">
-                    <h1 class="web-title">{firstStepItem?.title}</h1>
+                    {#if back}
+                        <a
+                            href={back}
+                            class="
+						web-button is-text is-only-icon web-u-cross-center
+						web-is-not-mobile -translate-x-1/2"
+                            aria-label="previous page"
+                        >
+                            <span
+                                class="icon-cheveron-left web-u-font-size-24 web-u-color-text-primary"
+                                aria-hidden="true"
+                            />
+                        </a>
+                    {/if}
+                    <h1 class="web-title lg:-ml-5">{firstStepItem?.title}</h1>
                 </div>
             </div>
             <div class="web-article-header-end" />
@@ -161,7 +185,7 @@
                         </li>
                     {/each}
                 </ol>
-                <div class="border-greyscale-900/[0.04] border-t pt-5">
+                <div class="border-greyscale-900/4 border-t pt-5">
                     <button class="web-link inline-flex items-center gap-2" use:scrollToTop>
                         <span class="web-icon-arrow-up" aria-hidden="true" />
                         <span class="text-caption">Back to top</span>

diff --git a/src/lib/layouts/Main.svelte b/src/lib/layouts/Main.svelte
@@ -277,7 +277,7 @@
     <MobileNav bind:open={$isMobileNavOpen} links={navLinks} />
 
     <main
-        class="web-main-section"
+        class="space-y-6"
         class:web-u-hide-mobile={$isMobileNavOpen}
         id={omitMainId ? undefined : 'main'}
     >

diff --git a/src/lib/layouts/Sidebar.svelte b/src/lib/layouts/Sidebar.svelte
@@ -5,6 +5,7 @@
         icon?: string;
         new?: boolean;
         isParent?: boolean;
+        openInNewTab?: boolean;
     };
 
     export type NavGroup = {

diff --git a/src/lib/layouts/SidebarNavButton.svelte b/src/lib/layouts/SidebarNavButton.svelte
@@ -9,6 +9,7 @@
     class="web-side-nav-button"
     class:is-selected={$page.url?.pathname === groupItem.href}
     href={groupItem.href}
+    target={groupItem.openInNewTab ? '_blank' : '_self'}
 >
     {#if groupItem.icon}
         <span class="icon {groupItem.icon}" aria-hidden="true" />
@@ -19,13 +20,24 @@
         {#if groupItem.new}
             <span class="web-inline-tag is-pink" style="">New</span>
         {/if}
+
+        {#if groupItem.openInNewTab}
+            <span class="icon icon-external-link icon-secondary" aria-hidden="true" />
+        {/if}
     </span>
     {#if groupItem.isParent}
         <span class="icon-cheveron-right ml-auto" aria-hidden="true" />
     {/if}
 </a>
 
 <style lang="scss">
+    :global(.light) {
+        --color-secondary-icon: var(--greyscale-400, #97979b);
+    }
+    :global(.dark) {
+        --color-secondary-icon: var(--greyscale-700, #56565c);
+    }
+
     [class*='icon'] {
         font-size: 1rem;
     }
@@ -35,4 +47,9 @@
         padding-block: 2px;
         margin-block-start: 1px;
     }
+
+    .icon-secondary {
+        color: var(--color-secondary-icon);
+        margin-left: -0.375rem;
+    }
 </style>
diff --git a/src/markdoc/layouts/Tutorial.svelte b/src/markdoc/layouts/Tutorial.svelte
@@ -8,6 +8,7 @@
         draft?: boolean;
         difficulty?: string;
         readtime?: string;
+        back: string;
     };
 </script>
 
@@ -25,6 +26,7 @@
     export let description: string;
     export let step: number;
     export let date: string;
+    export let back: string;
 
     setContext<LayoutContext>('headings', writable({}));
 
@@ -76,7 +78,7 @@
     <meta name="twitter:card" content="summary_large_image" />
 </svelte:head>
 
-<DocsTutorial {toc} {tutorials} {date} currentStep={step}>
+<DocsTutorial {toc} {back} {tutorials} {date} currentStep={step}>
     <slot />
 </DocsTutorial>
 <MainFooter variant="docs" />
diff --git a/src/markdoc/nodes/Code.svelte b/src/markdoc/nodes/Code.svelte
@@ -3,3 +3,14 @@
 </script>
 
 <span class="web-inline-code web-code">{content}</span>
+
+<style>
+    .web-inline-code {
+        font-size: 0.75rem;
+        line-height: 1.25rem;
+
+        @media (min-width: 1024px) {
+            margin-left: 0.5rem;
+        }
+    }
+</style>
diff --git a/src/markdoc/nodes/Link.svelte b/src/markdoc/nodes/Link.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { isInDocs } from '$lib/layouts/Docs.svelte';
     import { isInChangelog } from '$markdoc/layouts/Changelog.svelte';
 
     export let href: string;
@@ -9,11 +8,9 @@
     const target = isExternal ? '_blank' : undefined;
     const rel = isExternal ? 'noopener nofollow' : undefined;
 
-    const inDocs = isInDocs();
     const inChangelog = isInChangelog();
 
     $: classes = (() => {
-        if (inDocs) return 'text-paragraph-md';
         if (inChangelog) return 'text-paragraph-lg in-changelog';
         return '';
     })();

diff --git a/src/markdoc/nodes/Td.svelte b/src/markdoc/nodes/Td.svelte
@@ -6,6 +6,6 @@
     export let rowspan: HTMLTdAttributes['rowspan'] = undefined;
 </script>
 
-<td class="web-table-col" {align} {colspan} {rowspan}>
+<td class="py-[0.5625rem] px-3 text-sm leading-[1.375rem]" {align} {colspan} {rowspan}>
     <slot />
 </td>
diff --git a/src/markdoc/nodes/Th.svelte b/src/markdoc/nodes/Th.svelte
@@ -9,10 +9,10 @@
     style:width={width ? `${width}px` : undefined}
     style:min-inline-size={width ? 'unset' : undefined}
     role="columnheader"
-    class="web-table-head-col"
+    class="py-[0.5625rem] px-3"
     {align}
 >
-    <span class="text-micro uppercase">
+    <span class="text-sm leading-[1.375rem] text-[hsl(var(--web-color-primary))]">
         <slot />
     </span>
 </td>
diff --git a/src/markdoc/tags/Tabs.svelte b/src/markdoc/tags/Tabs.svelte
@@ -32,7 +32,7 @@
     >
         <ul class="tabs-list flex items-center gap-4" {...$list} use:list>
             {#each $ctx.triggers.entries() as [id, title]}
-                <li class="tabs-item rounded-t-[0.625rem] hover:bg-white/[0.04]">
+                <li class="tabs-item rounded-t-[0.625rem] hover:bg-white/4">
                     <button
                         class="tabs-button cursor-pointer bg-clip-padding py-[0.625rem] px-1 font-light outline-none"
                         class:is-selected={$value === id}

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -132,6 +132,7 @@
                         <span class="text-caption web-u-trim-1"
                             >Introducing Database Backups</span
                         >
+
                         <span class="web-icon-arrow-right shrink-0" aria-hidden="true" />
                     </a>
                     <Hero>
@@ -305,10 +306,10 @@
                     </section>
                     <div class="mt-20 overflow-hidden">
                         <ul
-                            class="web-info-boxes text-sub-body divide-x divide-y divide-black/[0.04] font-medium"
+                            class="web-info-boxes text-sub-body divide-x divide-y divide-black/4 font-medium"
                         >
                             {#each infoBoxes as box}
-                                <li class="relative border-black/[0.04] p-8 last-of-type:border-r">
+                                <li class="relative border-black/4 p-8 last-of-type:border-r">
                                     <img src={box.icon} width="40" height="40" alt="" />
                                     <h3
                                         class="text-primary mt-4 flex flex-wrap items-baseline gap-3"