Use js-yaml for YAML parsing in page route and generateSections script

Co-authored-by: na-trium-144 <100704180+na-trium-144@users.noreply.github.com>

Author: Copilot

app/[lang]/[pageId]/page.tsx

@@ -3,6 +3,7 @@ import { notFound } from "next/navigation";
 import { getCloudflareContext } from "@opennextjs/cloudflare";
 import { readFile } from "node:fs/promises";
 import { join } from "node:path";
+import yaml from "js-yaml";
 import { MarkdownSection } from "../[docs_id]/splitMarkdown";
 import { PageContent } from "../[docs_id]/pageContent";
 import { ChatHistoryProvider } from "../[docs_id]/chatHistory";
@@ -51,20 +52,18 @@ function parseFrontmatter(content: string): {
   if (endIdx === -1) {
     return { id: "", title: "", level: 0, body: content };
   }
-  const fm = content.slice(4, endIdx);
+  const fm = yaml.load(content.slice(4, endIdx)) as {
+    id?: string;
+    title?: string;
+    level?: number;
+  };
   const body = content.slice(endIdx + 5);
-
-  const id = fm.match(/^id:\s*(.+)$/m)?.[1]?.trim() ?? "";
-  let title = fm.match(/^title:\s*(.+)$/m)?.[1]?.trim() ?? "";
-  // YAMLクォートを除去
-  if (
-    (title.startsWith("'") && title.endsWith("'")) ||
-    (title.startsWith('"') && title.endsWith('"'))
-  ) {
-    title = title.slice(1, -1);
-  }
-  const level = parseInt(fm.match(/^level:\s*(\d+)$/m)?.[1] ?? "2");
-  return { id, title, level, body };
+  return {
+    id: fm?.id ?? "",
+    title: fm?.title ?? "",
+    level: fm?.level ?? 2,
+    body,
+  };
 }
 
 /**
@@ -76,11 +75,7 @@ async function getMarkdownSections(
   pageTitle: string
 ): Promise<MarkdownSection[]> {
   const sectionsYml = await readDocFile(lang, pageId, "sections.yml");
-  const files = sectionsYml
-    .split("\n")
-    .filter((l) => l.trim().startsWith("- "))
-    .map((l) => l.trim().slice(2).trim())
-    .filter(Boolean);
+  const files = yaml.load(sectionsYml) as string[];
 
   const sections: MarkdownSection[] = [];
   for (const file of files) {

package.json

@@ -35,6 +35,7 @@
     "comlink": "^4.4.2",
     "dotenv": "^17.2.3",
     "drizzle-orm": "^0.44.7",
+    "js-yaml": "^4.1.1",
     "mocha": "^11.7.4",
     "next": "^15.5.11",
     "object-inspect": "^1.13.4",
@@ -56,6 +57,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
+    "@types/js-yaml": "^4.0.9",
     "@types/chai": "^5.2.3",
     "@types/mocha": "^10.0.10",
     "@types/node": "^20",

scripts/generateSectionsList.ts

@@ -3,6 +3,7 @@
 
 import { readdir, writeFile, stat } from "node:fs/promises";
 import { join } from "node:path";
+import yaml from "js-yaml";
 
 const docsDir = join(process.cwd(), "public", "docs");
 
@@ -37,7 +38,7 @@ for (const langId of langEntries) {
       .filter((f) => f.endsWith(".md"))
       .sort(naturalSortMdFiles);
 
-    const yamlContent = files.map((f) => `- ${f}`).join("\n") + "\n";
+    const yamlContent = yaml.dump(files);
     await writeFile(join(pageDir, "sections.yml"), yamlContent, "utf-8");
     console.log(
       `Generated ${langId}/${pageId}/sections.yml (${files.length} files)`