use singular toc component

Author: thejessewinton

src/lib/components/blog/table-of-contents.svelte

@@ -1,19 +1,27 @@
 <script lang="ts">
     import type { TocItem } from '$lib/layouts/DocsArticle.svelte';
     import { classNames } from '$lib/utils/classnames';
+    import { fade } from 'svelte/transition';
 
     const backToTop = () => {
         window.scrollTo({ top: 0 });
     };
 
+    let isScrolled: boolean = false;
+
+    window.addEventListener('scroll', () => {
+        isScrolled = !!window.scrollY;
+    });
+
     export let toc: Array<TocItem> = [];
+    export let heading: string = 'Table of Contents';
 </script>
 
 <nav class="sticky top-32 col-span-3 mt-2 -ml-4 hidden h-[800px] flex-col gap-6 lg:flex">
-    <span class="text-micro text-primary ps-6 uppercase tracking-tighter">Table of Contents</span>
+    <span class="text-micro text-primary ps-6 uppercase tracking-tighter">{heading}</span>
     <div class="relative">
         <ul
-            class="border-smooth mask text-caption flex max-h-[600px] flex-col gap-4 overflow-scroll border-b pb-11 [scrollbar-width:none]"
+            class="mask text-caption flex max-h-[600px] flex-col gap-4 overflow-scroll pb-11 [scrollbar-width:none]"
         >
             {#each toc as parent (parent.href)}
                 <li
@@ -33,7 +41,7 @@
 
                     {#if parent.children}
                         <ul
-                            class="border-smooth mt-11 ml-9 flex flex-col gap-7 border-b pb-11 text-xs"
+                            class="border-smooth text-caption mt-11 ml-9 flex flex-col gap-7 border-b pb-11"
                         >
                             {#each parent.children as child}
                                 <li
@@ -58,11 +66,15 @@
         </ul>
     </div>
 
-    <button
-        class="text-primary group mt-8 flex cursor-pointer items-center gap-2 pl-7 transition-all active:scale-95"
-        on:click={backToTop}
-    >
-        <span class="web-icon-arrow-up transition group-hover:-translate-y-0.5" />
-        Back to Top
-    </button>
+    {#if isScrolled}
+        <button
+            class="text-primary group border-smooth text-caption ms-5 flex cursor-pointer items-center gap-2 border-t pt-11 font-medium transition-all"
+            on:click={backToTop}
+            out:fade
+            in:fade
+        >
+            <span class="web-icon-arrow-up transition group-hover:-translate-y-0.5" />
+            Back to Top
+        </button>
+    {/if}
 </nav>

src/lib/layouts/DocsArticle.svelte

@@ -19,6 +19,7 @@
     import { writable } from 'svelte/store';
     import { Feedback } from '$lib/components';
     import { scrollToTop } from '$lib/actions/scrollToTop';
+    import TableOfContents from '$lib/components/blog/table-of-contents.svelte';
 
     export let title: string;
     export let toc: Array<TocItem>;
@@ -72,45 +73,7 @@
         <aside class="web-references-menu ps-6">
             <div class="web-references-menu-content">
                 {#if toc && toc.length > 0}
-                    <div class="flex items-center justify-between gap-4">
-                        <h5 class="web-references-menu-title text-micro uppercase">On This Page</h5>
-                    </div>
-                    <ol class="web-references-menu-list">
-                        {#each toc as parent (parent.href)}
-                            <li class="web-references-menu-item">
-                                <a
-                                    href={parent.href}
-                                    class="web-references-menu-link"
-                                    class:is-selected={parent.selected}
-                                >
-                                    {#if parent?.step}
-                                        <span class="web-numeric-badge">{parent.step}</span>
-                                    {/if}
-                                    <span class="text-caption">{parent.title}</span>
-                                </a>
-                                {#if parent.children}
-                                    <ol class="web-references-menu-list mt-4 ml-8">
-                                        {#each parent.children as child}
-                                            <li class="web-references-menu-item">
-                                                <a
-                                                    href={child.href}
-                                                    class="web-references-menu-link"
-                                                >
-                                                    <span class="text-caption">{child.title}</span>
-                                                </a>
-                                            </li>
-                                        {/each}
-                                    </ol>
-                                {/if}
-                            </li>
-                        {/each}
-                    </ol>
-                    <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>
-                        </button>
-                    </div>
+                    <TableOfContents heading="On This Page" {toc} />
                 {/if}
             </div>
         </aside>