🚧 Add table of contents

Author: CollierCZ

packages/docs/src/lib/components/SiteNav.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { getNavigationItems } from "$lib/utils/getNavigationItems";
   import { MediaQuery } from "svelte/reactivity";
 
+  import { getNavigationItems } from "$lib/utils/getNavigationItems";
+
   const medium = new MediaQuery("min-width: 768px");
 
   let { isOpen = $bindable() }: { isOpen: boolean } = $props();

packages/docs/src/lib/components/TableOfContents.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { MarkdocModule } from "markdoc-svelte"
+  const { headings }: MarkdocModule = $props();
+
+  // Filter only h1 and h2 headings
+  const filteredHeadings = headings?.filter((heading) => heading.level <= 2) ?? [];
+</script>
+
+{#if filteredHeadings.length > 0}
+  <ul>
+    {#each filteredHeadings as heading}
+      <li>
+        <a href={`#${heading.id}`}>{heading.title}</a>
+      </li>
+    {/each}
+  </ul>
+{/if}

packages/docs/src/lib/components/TopNav.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { MediaQuery } from "svelte/reactivity";
+
   import SiteNav from "./SiteNav.svelte";
 
   const medium = new MediaQuery("min-width: 768px");

packages/docs/src/routes/[...slug]/+page.svelte

@@ -2,9 +2,11 @@
   import type { PageProps } from "./$types";
 
   import Sidebar from "$lib/components/Sidebar.svelte";
+  import TableOfContents from "$lib/components/TableOfContents.svelte";
 
   let { data }: PageProps = $props();
   const title = $derived(data.page.frontmatter?.title ?? "A great page");
+  console.log(data.page)
 </script>
 
 <svelte:head>
@@ -20,4 +22,7 @@
     <h1>{title}</h1>
     <data.page.default />
   </div>
+  <div class="hidden md:block">
+    <TableOfContents headings={data.page.headings} />
+  </div>
 </div>