From 280a35b2975aa9711ada4f1dd2d0f5bef54b45fc Mon Sep 17 00:00:00 2001
From: miyaji255 <84168445+miyaji255@users.noreply.github.com>
Date: Fri, 17 Jan 2025 10:19:20 +0900
Subject: [PATCH] Add table of contents to blog page

---
 src/components/blog/BlogContent.astro     | 13 ++++++++++++-
 src/components/blog/TableOfContents.astro | 23 +++++++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 src/components/blog/TableOfContents.astro

diff --git a/src/components/blog/BlogContent.astro b/src/components/blog/BlogContent.astro
index 832e314..ef85956 100644
--- a/src/components/blog/BlogContent.astro
+++ b/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>
 
diff --git a/src/components/blog/TableOfContents.astro b/src/components/blog/TableOfContents.astro
new file mode 100644
index 0000000..6410274
--- /dev/null
+++ b/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>