markdownをセクションごとに分割

Author: na-trium-144

app/[docs_id]/markdown.tsx

@@ -12,18 +12,25 @@ export function StyledMarkdown({ content }: { content: string }) {
 
 // TailwindCSSがh1などのタグのスタイルを消してしまうので、手動でスタイルを指定する必要がある
 const components: Components = {
-  h1: ({ node, ...props }) => (
-    <h1 className="text-2xl font-bold my-4" {...props} />
-  ),
-  h2: ({ node, ...props }) => (
-    <h2 className="text-xl font-bold mt-4 mb-3 " {...props} />
-  ),
-  h3: ({ node, ...props }) => (
-    <h3 className="text-lg font-bold mt-4 mb-2" {...props} />
-  ),
-  h4: ({ node, ...props }) => (
-    <h4 className="text-base font-bold mt-3 mb-2" {...props} />
-  ),
+  // Headingはすべて事前にパースされているはずなので、ここでレンダリングはしない
+  h1: ({ node }) => {
+    throw new Error(`Heading 1 not parsed: ${JSON.stringify(node)}`);
+  },
+  h2: ({ node }) => {
+    throw new Error(`Heading 2 not parsed: ${JSON.stringify(node)}`);
+  },
+  h3: ({ node }) => {
+    throw new Error(`Heading 3 not parsed: ${JSON.stringify(node)}`);
+  },
+  h4: ({ node }) => {
+    throw new Error(`Heading 4 not parsed: ${JSON.stringify(node)}`);
+  },
+  h5: ({ node }) => {
+    throw new Error(`Heading 5 not parsed: ${JSON.stringify(node)}`);
+  },
+  h6: ({ node }) => {
+    throw new Error(`Heading 6 not parsed: ${JSON.stringify(node)}`);
+  },
   p: ({ node, ...props }) => <p className="mx-2 my-2" {...props} />,
   ul: ({ node, ...props }) => (
     <ul className="list-disc list-outside ml-6 my-2" {...props} />

app/[docs_id]/page.tsx

@@ -1,9 +1,10 @@
 import { notFound } from "next/navigation";
 import { ChatForm } from "./chatForm";
-import { StyledMarkdown } from "./markdown";
 import { getCloudflareContext } from "@opennextjs/cloudflare";
-import { readFile } from "node:fs/promises"; 
+import { readFile } from "node:fs/promises";
 import { join } from "node:path";
+import { MarkdownSection, splitMarkdown } from "./splitMarkdown";
+import { Section } from "./section";
 
 export default async function Page({
   params,
@@ -14,13 +15,13 @@ export default async function Page({
 
   let mdContent: string;
   try {
-    if (process.env.NODE_ENV === 'development') {
+    if (process.env.NODE_ENV === "development") {
       mdContent = await readFile(
         join(process.cwd(), "public", "docs", `${docs_id}.md`),
         "utf-8"
       );
     } else {
-	  const cfAssets = getCloudflareContext().env.ASSETS;
+      const cfAssets = getCloudflareContext().env.ASSETS;
       mdContent = await cfAssets!
         .fetch(`https://assets.local/docs/${docs_id}.md`)
         .then((res) => res.text());
@@ -30,9 +31,13 @@ export default async function Page({
     notFound();
   }
 
+  const splitMdContent: MarkdownSection[] = await splitMarkdown(mdContent);
+
   return (
     <div className="p-4">
-      <StyledMarkdown content={mdContent} />
+      {splitMdContent.map((section, index) => (
+        <Section key={index} section={section} />
+      ))}
       <ChatForm />
     </div>
   );

app/[docs_id]/section.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { ReactNode } from "react";
+import { type MarkdownSection } from "./splitMarkdown";
+import { StyledMarkdown } from "./markdown";
+
+export function Section({ section }: { section: MarkdownSection }) {
+  return (
+    <>
+      <Heading level={section.level}>{section.title}</Heading>
+      <StyledMarkdown content={section.content} />
+    </>
+  );
+}
+
+function Heading({ level, children }: { level: number; children: ReactNode }) {
+  switch (level) {
+    case 1:
+      return <h1 className="text-2xl font-bold my-4">{children}</h1>;
+    case 2:
+      return <h2 className="text-xl font-bold mt-4 mb-3 ">{children}</h2>;
+    case 3:
+      return <h3 className="text-lg font-bold mt-4 mb-2">{children}</h3>;
+    case 4:
+      return <h4 className="text-base font-bold mt-3 mb-2">{children}</h4>;
+    default:
+      throw new Error(`Unsupported heading level: ${level}`);
+  }
+}

app/[docs_id]/splitMarkdown.ts

@@ -0,0 +1,42 @@
+"use server";
+
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkGfm from "remark-gfm";
+
+export interface MarkdownSection {
+  level: number;
+  title: string;
+  content: string;
+}
+export async function splitMarkdown(
+  content: string
+): Promise<MarkdownSection[]> {
+  const tree = unified().use(remarkParse).use(remarkGfm).parse(content);
+  // console.log(tree.children.map(({ type, position }) => ({ type, position: JSON.stringify(position) })));
+  const headingNodes = tree.children.filter((node) => node.type === "heading");
+  const splitContent = content.split("\n");
+  const sections: MarkdownSection[] = [];
+  for (let i = 0; i < headingNodes.length; i++) {
+    const startLine = headingNodes.at(i)?.position?.start.line;
+    if (startLine === undefined) {
+      continue;
+    }
+    let endLine: number | undefined = undefined;
+    for (let j = i + 1; j < headingNodes.length; j++) {
+      if (headingNodes.at(j)?.position?.start.line !== undefined) {
+        endLine = headingNodes.at(j)!.position!.start.line;
+        break;
+      }
+    }
+    sections.push({
+      title: splitContent[startLine - 1].replace(/#+\s*/, "").trim(),
+      content: splitContent
+        .slice(startLine - 1 + 1, endLine ? endLine - 1 : undefined)
+        .join("\n")
+        .trim(),
+      level: headingNodes.at(i)!.depth,
+    });
+  }
+  return sections;
+}