Merge branch 'main' into doc-1364-next.js-ssr-auth-demo-add-await-to-…

…code

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 */

src/lib/animations/OpenSource.svelte

@@ -2,7 +2,7 @@
     import { toScale, type Scale } from '$lib/utils/toScale';
     import { spring, type AnimationListOptions, type SpringOptions } from 'motion';
     import { animation, createScrollHandler, scroll, type Animation } from '.';
-    import { GITHUB_STARS } from '$lib/constants';
+    import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
 
     const springOptions: SpringOptions = {
         stiffness: 58.78,
@@ -199,7 +199,7 @@
             <a
                 class="web-card is-white web-u-min-block-size-320 oss-card flex flex-col"
                 id="oss-github"
-                href="https://github.com/appwrite/appwrite"
+                href="{GITHUB_REPO_LINK}"
             >
                 <div class="flex flex-col justify-between gap-8">
                     <span
@@ -246,7 +246,7 @@
             <a
                 class="web-card is-white web-u-min-block-size-320 oss-card flex flex-col"
                 id="oss-commits"
-                href="https://github.com/appwrite/appwrite"
+                href="{GITHUB_REPO_LINK}"
             >
                 <div class="flex flex-col justify-between gap-8">
                     <span

src/lib/animations/Products/auth/index.ts

@@ -32,7 +32,7 @@ type State = {
 const state = createResettable<State>({
     email: '',
     password: '',
-    name: "Walter O'Brian",
+    name: "Walter O'Brien",
     showControls: false,
     submitted: false,
     controls: {

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' },
@@ -101,7 +102,7 @@
         {#each Object.entries(links) as [title, items]}
             <li class="web-footer-nav-main-item web-is-not-mobile">
                 <h2
-                    class="web-footer-nav-main-title web-is-not-mobile text-caption uppercase font-medium"
+                    class="web-footer-nav-main-title web-is-not-mobile text-caption font-medium uppercase"
                 >
                     {title}
                 </h2>

src/lib/components/MobileNav.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { afterNavigate } from '$app/navigation';
     import { IsLoggedIn } from '$lib/components';
-    import { GITHUB_STARS } from '$lib/constants';
+    import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
     import type { NavLink } from '$lib/layouts/Main.svelte';
 
     export let open = false;
@@ -37,7 +37,7 @@
         </div>
         <div class="web-side-nav-mobile-footer-buttons">
             <a
-                href="https://github.com/appwrite/appwrite/stargazers"
+                href="{GITHUB_REPO_LINK}"
                 target="_blank"
                 rel="noopener noreferrer"
                 class="web-button is-text web-u-inline-width-100-percent-mobile"

src/lib/components/Search.svelte

@@ -5,7 +5,7 @@
 
     import { createCombobox, melt } from '@melt-ui/svelte';
 
-    import { MeiliSearch, type Hit, type Hits } from 'meilisearch';
+    import { type Hit, type Hits, MeiliSearch } from 'meilisearch';
     import { tick } from 'svelte';
 
     export let open = true;
@@ -137,8 +137,11 @@
         }
     }
 
-    function getRelevantSubtitle(hit: Hit): string {
-        return hit.h2 ?? hit.h3 ?? hit.h4 ?? hit.h5 ?? hit.h6 ?? null;
+    function getSubtitleContent(hit: Hit): { header?: string; subtitle?: string } {
+        return {
+            header: hit.h1,
+            subtitle: hit.h2 ?? hit.h3 ?? hit.h4 ?? hit.h5 ?? hit.h6
+        };
     }
 </script>
 
@@ -187,7 +190,7 @@
                         <h6 class="text-micro uppercase">{results.length} results found</h6>
                         <ul class="mt-2 flex flex-col gap-1">
                             {#each results as hit, i (hit.uid)}
-                                {@const relevantSubtitle = getRelevantSubtitle(hit)}
+                                {@const subtitleContent = getSubtitleContent(hit)}
                                 <li>
                                     <a
                                         data-hit={i}
@@ -200,16 +203,27 @@
                                         })}
                                     >
                                         <div class="web-u-trim-1">
-                                            <span class="web-u-color-text-secondary">{hit.h1}</span>
-                                            {#if relevantSubtitle}
-                                                <span class="web-u-color-text-secondary"> / </span>
-                                                <span class="text-primary">
-                                                    {relevantSubtitle}
-                                                </span>
+                                            {#if subtitleContent.header}
+                                                <span class="web-u-color-text-secondary"
+                                                    >{subtitleContent.header}</span
+                                                >
+                                                {#if subtitleContent.subtitle}
+                                                    <span class="web-u-color-text-secondary">
+                                                        /
+                                                    </span>
+                                                {/if}
+                                            {/if}
+
+                                            {#if subtitleContent.subtitle}
+                                                <span class="text-primary"
+                                                    >{subtitleContent.subtitle}</span
+                                                >
                                             {/if}
                                         </div>
                                         {#if hit.p}
-                                            <div class="web-u-color-text-secondary web-u-trim-1">
+                                            <div
+                                                class="web-u-color-text-secondary w-full overflow-hidden text-ellipsis whitespace-nowrap text-left"
+                                            >
                                                 {hit.p}
                                             </div>
                                         {/if}

src/lib/components/Technologies.svelte

@@ -65,7 +65,7 @@
     }>;
 </script>
 
-<ul class="web-u-margin-block-32-mobile web-u-margin-block-40-not-mobile flex flex-wrap gap-4">
+<ul class="web-u-margin-block-32-mobile web-u-margin-block-40-not-mobile flex flex-wrap gap-4 lg:max-w-[34rem]">
     {#each platforms as platform}
         <Tooltip>
             <li>

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>

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>

src/lib/constants.ts

@@ -1,4 +1,5 @@
-export const GITHUB_STARS = '43.6K';
+export const GITHUB_STARS = '43.9K';
+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 =
     'https://[email protected]/4507497727000576';

src/lib/layouts/Docs.svelte

@@ -41,7 +41,7 @@
     import { Search, IsLoggedIn } from '$lib/components';
     import { isMac } from '$lib/utils/platform';
     import { getContext, setContext } from 'svelte';
-    import { GITHUB_STARS } from '$lib/constants';
+    import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
 
     export let variant: DocsLayoutVariant = 'default';
@@ -167,7 +167,7 @@
             <div class="web-main-header-end">
                 <div class="flex gap-2">
                     <a
-                        href="https://github.com/appwrite/appwrite/stargazers"
+                        href="{GITHUB_REPO_LINK}"
                         target="_blank"
                         rel="noopener noreferrer"
                         class="web-button is-text"

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>

src/lib/layouts/DocsTutorial.svelte

@@ -135,7 +135,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>

src/lib/layouts/Main.svelte

@@ -14,7 +14,7 @@
 <script lang="ts">
     import { browser } from '$app/environment';
     import { MobileNav, IsLoggedIn } from '$lib/components';
-    import { BANNER_KEY, GITHUB_STARS } from '$lib/constants';
+    import { BANNER_KEY, GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
     import { isVisible } from '$lib/utils/isVisible';
     import { createScrollInfo } from '$lib/utils/scroll';
     import { hasNewChangelog } from '$routes/changelog/utils';
@@ -258,7 +258,7 @@
             </div>
             <div class="web-main-header-end">
                 <a
-                    href="https://github.com/appwrite/appwrite/stargazers"
+                    href="{GITHUB_REPO_LINK}"
                     target="_blank"
                     rel="noopener noreferrer"
                     class="web-button is-text web-u-inline-width-100-percent-mobile"
@@ -274,7 +274,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'}
     >

src/lib/layouts/Sidebar.svelte

@@ -3,6 +3,7 @@
         label: string;
         href: string;
         icon?: string;
+        new?: boolean;
         isParent?: boolean;
     };
 
@@ -22,7 +23,7 @@
 <script lang="ts">
     import { clickOutside } from '$lib/actions/clickOutside';
     import { Tooltip, IsLoggedIn } from '$lib/components';
-    import { GITHUB_STARS } from '$lib/constants';
+    import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
     import { layoutState, toggleSidenav } from './Docs.svelte';
     import SidebarNavButton from './SidebarNavButton.svelte';
 
@@ -115,7 +116,7 @@
             <IsLoggedIn />
 
             <a
-                href="https://github.com/appwrite/appwrite/stargazers"
+                href="{GITHUB_REPO_LINK}"
                 target="_blank"
                 rel="noopener noreferrer"
                 class="web-button is-text web-u-inline-width-100-percent-mobile"

src/lib/layouts/SidebarNavButton.svelte

@@ -13,7 +13,13 @@
     {#if groupItem.icon}
         <span class="icon {groupItem.icon}" aria-hidden="true" />
     {/if}
-    <span class="text-caption">{groupItem.label} </span>
+    <span class="text-caption flex gap-2">
+        <span>{groupItem.label}</span>
+
+        {#if groupItem.new}
+            <span class="web-inline-tag is-pink" style="">New</span>
+        {/if}
+    </span>
     {#if groupItem.isParent}
         <span class="icon-cheveron-right ml-auto" aria-hidden="true" />
     {/if}
@@ -23,4 +29,10 @@
     [class*='icon'] {
         font-size: 1rem;
     }
+
+    .web-inline-tag {
+        font-size: 0.75rem;
+        padding-block: 2px;
+        margin-block-start: 1px;
+    }
 </style>

src/markdoc/nodes/Heading.svelte

@@ -13,7 +13,7 @@
     const classList: Record<typeof level, string> = {
         1: 'text-label mb-4 mt-8',
         2: 'text-description mb-4',
-        3: 'text-body font-medium',
+        3: 'text-body font-medium mb-4',
         4: 'text-sub-body font-medium'
     };