feat(blog/nuldoc): implement TOC

1 files changed, 33 insertions, 0 deletions

diff --git a/services/blog/nuldoc-src/components/TableOfContents.tsx b/services/blog/nuldoc-src/components/TableOfContents.tsx
new file mode 100644
index 00000000..29907d08
--- /dev/null
+++ b/services/blog/nuldoc-src/components/TableOfContents.tsx
@@ -0,0 +1,33 @@
+import { TocEntry, TocRoot } from "../djot/document.ts";
+
+type Props = {
+  toc: TocRoot;
+};
+
+export default function TableOfContents({ toc }: Props) {
+  return (
+    <nav className="toc">
+      <h2>目次</h2>
+      <ul>
+        {toc.entries.map((entry, index) => (
+          <TocEntryComponent key={String(index)} entry={entry} />
+        ))}
+      </ul>
+    </nav>
+  );
+}
+
+function TocEntryComponent({ entry }: { entry: TocEntry }) {
+  return (
+    <li>
+      <a href={`#${entry.id}`}>{entry.text}</a>
+      {entry.children.length > 0 && (
+        <ul>
+          {entry.children.map((child, index) => (
+            <TocEntryComponent key={String(index)} entry={child} />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+}