PreStyling Layouts & Components

src/components/post/ToC.astro

@@ -0,0 +1,27 @@
+---
+import type { Heading } from '@/lib/markdoc/types'
+
+type Props = {
+  headings: Heading[]
+  min?: number
+  level: number
+}
+
+const { headings, min = 3, level = 3 } = Astro.props
+const entries = headings.filter((heading) => heading.level <= level)
+---
+
+{entries.length >= min && (
+  <nav class="toc" aria-labelledby="toc-title">
+    <h2 class="title" id="toc-title">
+      Contents
+    </h2>
+    <ol>
+      {entries.map((heading) => (
+        <li class:list={['entry', `entry--${heading.level}`]}>
+          <a href={`#${heading.id}`}>{heading.text}</a>
+        </li>
+      ))}
+    </ol>
+  </nav>
+)}