Add table of contents to blog page

src/components/blog/BlogContent.astro

@@ -9,6 +9,8 @@ import TagSmallList from './tag/TagSmallList.astro'
 import AuthorIcon from './icon/AuthorIcon.astro'
 import { formatDate } from '@/utils/format-date'
 import '@/styles/remark-link-card.css'
+import TableOfContents from './TableOfContents.astro'
+
 interface Props {
   blog: CollectionEntry<'blogs'>
 }
@@ -20,7 +22,15 @@ const { data: blogMeta } = (await getEntry({
 })) ?? { data: { postDate: new Date(), updateDate: undefined } }
 const tags = await getEntries(blog.data.tags)
 const author = await getEntry(blog.data.author)
-const { Content } = await render(blog)
+const { Content, headings } = await render(blog)
+
+const hasH1 = headings.some((heading) => heading.depth === 1)
+const tocHeadings = hasH1
+  ? headings.filter((heading) => heading.depth <= 2)
+  : headings.filter((heading) => heading.depth <= 3).map((heading) => ({
+      ...heading,
+      depth: heading.depth - 1,
+    }))
 ---
 
 <div class="flex flex-col items-center py-4">
@@ -62,6 +72,7 @@ const { Content } = await render(blog)
     <div class="prose w-full max-w-none break-words pt-6" data-pagefind-body>
       <Content />
     </div>
+    <TableOfContents headings={tocHeadings} />
   </article>
 </div>
 

src/components/blog/TableOfContents.astro

@@ -0,0 +1,23 @@
+---
+interface Heading {
+  depth: number
+  slug: string
+  text: string
+}
+
+interface Props {
+  headings: Heading[]
+}
+
+const { headings } = Astro.props
+---
+
+<nav class="fixed top-24 right-5 w-48 bg-gray-100 p-4 border border-gray-300 rounded-lg">
+  <ul>
+    {headings.map((heading) => (
+      <li class={`ml-${heading.depth * 2}`}>
+        <a href={`#${heading.slug}`} class="text-blue-600 hover:underline">{heading.text}</a>
+      </li>
+    ))}
+  </ul>
+</nav>