Merge branch 'main' into blog-authors-update-roles

Author: loks0n

markdoc.config.json

@@ -7,6 +7,9 @@
             "type": "esm",
             "property": "default",
             "watch": true
+        },
+        "partials": {
+            "auth-security.md": "./src/partials/auth-security.md"
         }
     }
 ]

src/lib/components/Feedback.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
+    import { fade } from 'svelte/transition';
+    import { loggedIn, user } from '$lib/utils/console';
     import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
 
     export let date: string | undefined = undefined;
@@ -14,6 +16,9 @@
     async function handleSubmit() {
         submitting = true;
         error = undefined;
+
+        const userId = loggedIn && $user?.$id ? $user.$id : undefined;
+
         const response = await fetch(`${PUBLIC_GROWTH_ENDPOINT}/feedback/docs`, {
             method: 'POST',
             headers: {
@@ -23,7 +28,10 @@
                 email,
                 type: feedbackType,
                 route: $page.route.id,
-                comment
+                comment,
+                metaFields: {
+                    userId
+                }
             })
         });
         submitting = false;
@@ -33,6 +41,7 @@
         }
         comment = email = '';
         submitted = true;
+        setTimeout(() => (showFeedback = false), 500);
     }
 
     function reset() {
@@ -45,6 +54,10 @@
     $: if (!showFeedback) {
         reset();
     }
+
+    $: if (showFeedback && loggedIn && $user?.email) {
+        email = $user?.email;
+    }
 </script>
 
 <section class="web-content-footer">
@@ -60,7 +73,7 @@
                         class="web-radio-button"
                         aria-label="helpful"
                         on:click={() => {
-                            showFeedback = feedbackType === 'positive' ? false : true;
+                            showFeedback = feedbackType !== 'positive';
                             feedbackType = 'positive';
                         }}
                     >
@@ -70,7 +83,7 @@
                         class="web-radio-button"
                         aria-label="unhelpful"
                         on:click={() => {
-                            showFeedback = feedbackType === 'negative' ? false : true;
+                            showFeedback = feedbackType !== 'negative';
                             feedbackType = 'negative';
                         }}
                     >
@@ -104,6 +117,7 @@
             on:submit|preventDefault={handleSubmit}
             class="web-card is-normal"
             style="--card-padding:1rem"
+            out:fade={{ duration: 450 }}
         >
             <div class="flex flex-col gap-2">
                 <label for="message">

src/lib/components/FooterNav.svelte

@@ -32,11 +32,11 @@
                 { label: 'Solid', href: '/docs/quick-starts/solid' }
             ],
             Products: [
-                { label: 'Auth', href: '/docs/products/auth' },
+                { label: 'Auth', href: '/products/auth' },
                 { label: 'Databases', href: '/docs/products/databases' },
-                { label: 'Functions', href: '/docs/products/functions' },
+                { label: 'Functions', href: '/products/functions' },
                 { label: 'Messaging', href: '/products/messaging' },
-                { label: 'Storage', href: '/docs/products/storage' },
+                { label: 'Storage', href: '/products/storage' },
                 { label: 'Realtime', href: '/docs/apis/realtime' }
             ],
             Learn: [

src/lib/components/PreFooter.svelte

@@ -3,7 +3,13 @@
     import { trackEvent } from '$lib/actions/analytics';
 </script>
 
-<img src="/images/bgs/pre-footer.png" alt="" class="web-pre-footer-bg" loading="lazy" style="z-index:-1" />
+<img
+    src="/images/bgs/pre-footer.png"
+    alt=""
+    class="web-pre-footer-bg"
+    loading="lazy"
+    style="z-index:-1"
+/>
 
 <div class="web-u-row-gap-80 relative grid gap-8 md:grid-cols-2">
     <section class="web-hero flex items-center justify-center gap-y-8">

src/lib/components/ProductsSubmenu.svelte

@@ -20,7 +20,7 @@
             icon: '/images/icons/illustrated/dark/auth.png'
         },
         {
-            name: 'Database',
+            name: 'Databases',
             href: '/docs/products/databases',
             description: 'Scalable and robust databases.',
             icon: '/images/icons/illustrated/dark/databases.png'

src/lib/layouts/Docs.svelte

@@ -34,7 +34,9 @@
     }
 
     const CTX_KEY = Symbol('docs');
+    const TUT_CTX_KEY = Symbol('tut-docs');
     export const isInDocs = () => getContext<boolean>(CTX_KEY) ?? false;
+    export const isInTutorialDocs = () => getContext<boolean>(TUT_CTX_KEY) ?? false;
 </script>
 
 <script lang="ts">
@@ -43,6 +45,7 @@
     import { getContext, setContext } from 'svelte';
     import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
+    import { page } from '$app/stores';
 
     export let variant: DocsLayoutVariant = 'default';
     export let isReferences = false;
@@ -63,7 +66,9 @@
             showSidenav: false
         }));
     });
-    setContext(CTX_KEY, true);
+
+    const key = $page.route.id?.includes('tutorials') ? TUT_CTX_KEY : CTX_KEY;
+    setContext(key, true);
 
     const handleKeydown = (e: KeyboardEvent) => {
         if (e.key === 'Escape' && ($layoutState.showReferences || $layoutState.showSidenav)) {

src/lib/layouts/DocsArticle.svelte

@@ -13,14 +13,17 @@
 </script>
 
 <script lang="ts">
-    import { scrollToTop } from '$lib/actions/scrollToTop';
-
+    import { setContext } from 'svelte';
+    import { writable } from 'svelte/store';
     import { Feedback } from '$lib/components';
+    import { scrollToTop } from '$lib/actions/scrollToTop';
 
     export let title: string;
     export let toc: Array<TocItem>;
     export let back: string | undefined = undefined;
     export let date: string | undefined = undefined;
+
+    const reducedArticleSize = setContext('articleHasNumericBadge', writable(false));
 </script>
 
 <main class="contents" id="main">
@@ -59,8 +62,9 @@
             </div>
             <div class="web-article-header-end" />
         </header>
-        <div class="web-article-content">
+        <div class="web-article-content" class:web-reduced-article-size={$reducedArticleSize}>
             <slot />
+
             <Feedback {date} />
         </div>
         <aside class="web-references-menu ps-6">
@@ -110,3 +114,12 @@
         </aside>
     </article>
 </main>
+
+<style>
+    @media (min-width: 1280px) and (max-width: 1330px) {
+        .web-reduced-article-size {
+            /* original/default is 41.5rem */
+            max-inline-size: 40.5rem;
+        }
+    }
+</style>

src/lib/layouts/DocsTutorial.svelte

@@ -4,7 +4,8 @@
     import type { Tutorial } from '$markdoc/layouts/Tutorial.svelte';
     import type { TocItem } from './DocsArticle.svelte';
     import Heading from '$markdoc/nodes/Heading.svelte';
-    import { onMount } from 'svelte';
+    import { onMount, tick } from 'svelte';
+    import { page } from '$app/stores';
 
     export let toc: Array<TocItem>;
     export let back: string;
@@ -31,13 +32,66 @@
 
     let slotContent: HTMLElement | null = null;
 
+    function scrollToElement(pageHash: string) {
+        const element = document.getElementById(pageHash);
+        if (element) {
+            const offset = 50;
+            const rect = element.getBoundingClientRect();
+            window.scroll({ top: window.scrollY + rect.top - offset });
+        }
+    }
+
+    /**
+     * Due to underlying logic with anchor links & the auto-scroll via hash values in the URL,
+     * we have an issue where if the first item is not scrolled enough it isn't marked as `selected`.
+     *
+     * We do below workaround for the time being without breaking things to scroll to the first item.
+     */
+    async function preSelectItemOnInit() {
+        await tick();
+
+        if (!$page.url.hash) return;
+        const tocItem = toc.slice(1);
+
+        // no sub-items, return.
+        if (!tocItem.length) return;
+
+        const pageHash = $page.url.hash.replace('#', '');
+        const tocItemHref = tocItem[0].href.replace('#', '');
+
+        if (pageHash !== tocItemHref) return;
+
+        scrollToElement(pageHash);
+    }
+
+    // same issue as above, only happens on the first item.
+    function scrollToItem(parent: TocItem, index: number) {
+        const tocItem = toc.slice(1);
+
+        if (!tocItem.length) return;
+        const tocItemHref = parent.href.replace('#', '');
+
+        const element = document.getElementById(tocItemHref);
+
+        if (index === 0) {
+            scrollToElement(tocItemHref);
+        } else {
+            element?.scrollIntoView();
+        }
+
+        // because we used `preventDefault`.
+        history.pushState(null, '', parent.href);
+    }
+
     onMount(() => {
         if (!slotContent) return;
 
         // dynamically modify all `label` headers to `body`.
-        slotContent.querySelectorAll<HTMLHeadingElement>('h2.web-label').forEach((header) => {
-            header.classList.replace('web-label', 'web-main-body-500');
+        slotContent.querySelectorAll<HTMLHeadingElement>('h2.text-label').forEach((header) => {
+            header.classList.replace('text-label', 'web-main-body-500');
         });
+
+        preSelectItemOnInit();
     });
 </script>
 
@@ -77,7 +131,9 @@
                             />
                         </a>
                     {/if}
-                    <h1 class="web-title lg:-ml-5">{firstStepItem?.title}</h1>
+                    <h1 class="web-title {currentStep === 1 ? 'lg:-ml-5' : ''}">
+                        {firstStepItem?.title}
+                    </h1>
                 </div>
             </div>
             <div class="web-article-header-end" />
@@ -87,16 +143,18 @@
                 <section class="web-article-content-sub-section">
                     <header class="web-article-content-header">
                         <span class="web-numeric-badge">{currentStep}</span>
-                        <Heading level={1} id={currentStepItem.href} step={currentStep}>
-                            {getCorrectTitle(currentStepItem, 1)}
-                        </Heading>
+                        <div class="tutorial-heading">
+                            <Heading level={1} id={currentStepItem.href} step={currentStep}>
+                                {getCorrectTitle(currentStepItem, 1)}
+                            </Heading>
+                        </div>
                     </header>
 
-                    <div class="u-padding-block-start-32" bind:this={slotContent}>
+                    <div class="web-u-padding-block-start-32" bind:this={slotContent}>
                         <slot />
                     </div>
 
-                    <div class="flex justify-between">
+                    <div class="web-u-padding-block-start-32 flex justify-between">
                         {#if prevStep}
                             <a href={prevStep.href} class="web-button is-text previous-step-anchor">
                                 <span class="icon-cheveron-left" aria-hidden="true" />
@@ -135,6 +193,7 @@
                 <ol class="web-references-menu-list">
                     {#each tutorials as tutorial, index}
                         {@const isCurrentStep = currentStep === tutorial.step}
+                        {@const absoluteToc = toc.slice(1)}
                         <li class="web-references-menu-item">
                             <a
                                 href={tutorial.href}
@@ -148,14 +207,16 @@
                                     >{index === 0 ? 'Introduction' : tutorial.title}</span
                                 >
                             </a>
-                            {#if isCurrentStep && toc.length}
+                            {#if isCurrentStep && absoluteToc.length}
                                 <ol
                                     class="web-references-menu-list u-margin-block-start-16 u-margin-inline-start-32"
                                 >
-                                    {#each toc.slice(1) as parent}
+                                    {#each absoluteToc as parent, innerIndex}
                                         <li class="web-references-menu-item">
                                             <a
                                                 href={parent.href}
+                                                on:click|preventDefault={() =>
+                                                    scrollToItem(parent, innerIndex)}
                                                 class="web-references-menu-link is-inner"
                                                 class:tutorial-scroll-indicator={parent.selected}
                                                 class:is-selected={parent.selected}
@@ -208,4 +269,49 @@
         background: unset;
         padding-inline-start: unset;
     }
+
+    .u-margin-block-start-16 {
+        margin-block-start: 1rem;
+    }
+
+    .u-margin-inline-start-32 {
+        margin-inline-start: 2rem;
+    }
+
+    .web-references-menu-item:has(.is-selected)::before {
+        /* maintains the distance correctly for the children items */
+        inset-inline-start: -3.55rem;
+    }
+
+    /* Static slider: default slider for each selected link */
+    .web-references-menu-list > .web-references-menu-item > .is-selected::before {
+        content: ' ';
+        position: absolute;
+        inset-block-start: 0;
+        block-size: 1.375rem;
+        inline-size: 0.0625rem;
+        inset-inline-start: -1.3125rem;
+        background-color: hsl(var(--p-references-menu-link-color-text));
+    }
+
+    /* Hide static slider if any child menu item is selected */
+    .web-references-menu-list
+        > .web-references-menu-item:has(.web-references-menu-list .is-selected)
+        > .is-selected::before {
+        background-color: transparent;
+    }
+
+    /* Transparent slider for selected child items because we use parent level */
+    .web-references-menu-list
+        > .web-references-menu-item
+        > .web-references-menu-list
+        > .web-references-menu-item
+        > .is-selected::before {
+        content: '';
+        background-color: transparent;
+    }
+
+    :global(.tutorial-heading h2) {
+        margin-bottom: unset;
+    }
 </style>