init

docs/components/PageTableOfContents.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { computed } from "#imports";
+
+const { toc, page } = useContent();
+const shouldRender = computed(() => page.value.hideToc !== true);
+</script>
+
+<template>
+  <div
+    v-if="shouldRender && toc.links"
+    class="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6"
+  >
+    <nav aria-labelledby="on-this-page-title" class="w-56">
+      <h2
+        id="on-this-page-title"
+        class="font-display text-sm font-medium text-slate-900 dark:text-white"
+      >
+        On this page
+      </h2>
+      <ol role="list" class="mt-4 space-y-3 text-sm">
+        <li v-for="link in toc?.links" :key="link.id">
+          <h3>
+            <a class="text-slate-900 dark:text-white" :href="`#${link.id}`">
+              {{ link.text }}
+            </a>
+          </h3>
+          <ol
+            v-if="link.children"
+            role="list"
+            class="mt-2 space-y-3 pl-5 text-slate-500 dark:text-slate-400"
+          >
+            <li v-for="childLink in link.children" :key="childLink.id">
+              <a
+                class="hover:text-slate-600 dark:hover:text-slate-300"
+                :href="`#${childLink.id}`"
+              >
+                {{ childLink.text }}
+              </a>
+            </li>
+          </ol>
+        </li>
+      </ol>
+    </nav>
+  </div>
+</template>