Merge pull request #1522 from ItzNotABug/fix-docs-bugs

ItzNotABug · web-flow · commit f1c029b1b283 · 2024-12-13T16:45:18.000+05:30
Fix Docs Bugs
diff --git a/src/lib/components/PreFooter.svelte b/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">
diff --git a/src/lib/layouts/Docs.svelte b/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)) {
diff --git a/src/lib/layouts/DocsTutorial.svelte b/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>
diff --git a/src/markdoc/nodes/Fence.svelte b/src/markdoc/nodes/Fence.svelte
@@ -7,6 +7,7 @@
     import { copy } from '$lib/utils/copy';
     import type { CodeContext } from '../tags/MultiCode.svelte';
     import { melt } from '@melt-ui/svelte';
+    import { isInTutorialDocs } from '$lib/layouts/Docs.svelte';
 
     export let content: string;
     export let toCopy: string | undefined = undefined;
@@ -15,6 +16,7 @@
     export let withLineNumbers = true;
     export let badge: string | null = null;
 
+    const inTutorialDocs = isInTutorialDocs();
     const insideMultiCode = hasContext('multi-code');
     const selected = insideMultiCode ? getContext<CodeContext>('multi-code').selected : null;
 
@@ -61,7 +63,11 @@
         {@html result}
     {/if}
 {:else}
-    <section class="dark web-code-snippet" aria-label="code-snippet panel">
+    <section
+        class="dark web-code-snippet"
+        class:no-top-margin={inTutorialDocs}
+        aria-label="code-snippet panel"
+    >
         <header class="web-code-snippet-header">
             <div class="web-code-snippet-header-start">
                 {#if badgeValue}
@@ -98,3 +104,9 @@
         </div>
     </section>
 {/if}
+
+<style>
+    .no-top-margin {
+        margin-top: unset !important;
+    }
+</style>
diff --git a/src/markdoc/nodes/Paragraph.svelte b/src/markdoc/nodes/Paragraph.svelte
@@ -3,10 +3,11 @@
     import { isInPolicy } from '$markdoc/layouts/Policy.svelte';
     import { getContext, hasContext } from 'svelte';
     import { isInTable } from './Table.svelte';
-    import { isInDocs } from '$lib/layouts/Docs.svelte';
+    import { isInDocs, isInTutorialDocs } from '$lib/layouts/Docs.svelte';
 
     const noParagraph = hasContext('no-paragraph') ? getContext('no-paragraph') : false;
     const inDocs = isInDocs();
+    const inTutorialDocs = isInTutorialDocs();
     const inPolicy = isInPolicy();
     const inChangelog = isInChangelog();
     const inTable = isInTable();
@@ -18,6 +19,7 @@
         if (inDocs) return 'text-paragraph-md mb-8';
         if (inPolicy) return 'text-paragraph-md mb-4';
         if (inTable) return 'text-paragraph-md';
+        if (inTutorialDocs) return 'text-paragraph-md mb-2';
         if (inChangelog) return 'text-paragraph-lg mb-4 font-normal';
         return 'text-paragraph-lg mb-8';
     })();
diff --git a/src/routes/products/storage/ProjectCard.svelte b/src/routes/products/storage/ProjectCard.svelte
@@ -18,6 +18,7 @@
     export let image: $$Props['image'];
     export let href: $$Props['href'];
 </script>
+
 <a
     class="web-card is-white web-u-flex-vertical u-gap-8"
     style="--card-padding: 0.5rem;"
