Add sections.yml script and new [lang]/[pageId] route

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

Author: Copilot

app/[docs_id]/markdown.tsx

@@ -64,6 +64,8 @@ export function Heading({
   children: ReactNode;
 }) {
   switch (level) {
+    case 0:
+      return null;
     case 1:
       return <h1 className="text-2xl font-bold my-4">{children}</h1>;
     case 2:

app/[docs_id]/pageContent.tsx

@@ -29,7 +29,7 @@ export function PageContent(props: PageContentProps) {
     props.splitMdContent.map((section, i) => ({
       ...section,
       inView: false,
-      sectionId: `${props.docs_id}-${i}`,
+      sectionId: section.id || `${props.docs_id}-${i}`,
     }))
   );
 
@@ -38,7 +38,7 @@ export function PageContent(props: PageContentProps) {
     const newContent = props.splitMdContent.map((section, i) => ({
       ...section,
       inView: false,
-      sectionId: `${props.docs_id}-${i}`,
+      sectionId: section.id || `${props.docs_id}-${i}`,
     }));
     setDynamicMdContent(newContent);
     setSidebarMdContent(props.docs_id, newContent);

app/[docs_id]/splitMarkdown.ts

@@ -3,6 +3,7 @@ import remarkParse from "remark-parse";
 import remarkGfm from "remark-gfm";
 
 export interface MarkdownSection {
+  id: string;
   level: number;
   title: string;
   content: string;
@@ -31,6 +32,7 @@ export function splitMarkdown(content: string): MarkdownSection[] {
       }
     }
     sections.push({
+      id: "",
       title: splitContent[startLine - 1].replace(/#+\s*/, "").trim(),
       content: splitContent
         .slice(startLine - 1 + 1, endLine ? endLine - 1 : undefined)

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

@@ -0,0 +1,166 @@
+import { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { getCloudflareContext } from "@opennextjs/cloudflare";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { MarkdownSection } from "../[docs_id]/splitMarkdown";
+import { PageContent } from "../[docs_id]/pageContent";
+import { ChatHistoryProvider } from "../[docs_id]/chatHistory";
+import { getChatFromCache, initContext } from "@/lib/chatHistory";
+import { pagesList } from "@/pagesList";
+import { isCloudflare } from "@/lib/detectCloudflare";
+
+async function readDocFile(
+  lang: string,
+  pageId: string,
+  filename: string
+): Promise<string> {
+  try {
+    if (isCloudflare()) {
+      const cfAssets = getCloudflareContext().env.ASSETS;
+      const res = await cfAssets!.fetch(
+        `https://assets.local/docs/${lang}/${pageId}/${filename}`
+      );
+      if (!res.ok) notFound();
+      return await res.text();
+    } else {
+      return await readFile(
+        join(process.cwd(), "public", "docs", lang, pageId, filename),
+        "utf-8"
+      );
+    }
+  } catch {
+    notFound();
+  }
+}
+
+/**
+ * YAMLフロントマターをパースしてid, title, level, bodyを返す。
+ * フロントマターがない場合はid/titleを空文字、levelを0で返す。
+ */
+function parseFrontmatter(content: string): {
+  id: string;
+  title: string;
+  level: number;
+  body: string;
+} {
+  if (!content.startsWith("---\n")) {
+    return { id: "", title: "", level: 0, body: content };
+  }
+  const endIdx = content.indexOf("\n---\n", 4);
+  if (endIdx === -1) {
+    return { id: "", title: "", level: 0, body: content };
+  }
+  const fm = content.slice(4, endIdx);
+  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 };
+}
+
+/**
+ * public/docs/{lang}/{pageId}/ 以下のmdファイルを結合して MarkdownSection[] を返す。
+ */
+async function getMarkdownSections(
+  lang: string,
+  pageId: string,
+  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 sections: MarkdownSection[] = [];
+  for (const file of files) {
+    const raw = await readDocFile(lang, pageId, file);
+    if (file === "-intro.md") {
+      // イントロセクションはフロントマターなし・見出しなし
+      sections.push({
+        id: `${lang}-${pageId}-intro`,
+        level: 1,
+        title: pageTitle,
+        content: raw.trim(),
+        rawContent: raw.trim(),
+      });
+    } else {
+      const { id, title, level, body } = parseFrontmatter(raw);
+      // bodyには見出し行が含まれるので、contentとしては見出しを除いた本文のみを渡す
+      const content = body.replace(/^#{1,6} [^\n]*\n?/, "").trim();
+      sections.push({
+        id,
+        level,
+        title,
+        content,
+        rawContent: body.trim(),
+      });
+    }
+  }
+  return sections;
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ lang: string; pageId: string }>;
+}): Promise<Metadata> {
+  const { lang, pageId } = await params;
+  const langEntry = pagesList.find((l) => l.id === lang);
+  const pageEntry = langEntry?.pages.find((p) => p.slug === pageId);
+  if (!langEntry || !pageEntry) notFound();
+
+  const pageIndex = langEntry!.pages.findIndex((p) => p.slug === pageId);
+  // pageIndex will be >= 0 since pageEntry was found via the same pages array
+  return {
+    title: `${langEntry!.lang}-${pageIndex + 1}. ${pageEntry!.title}`,
+  };
+}
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ lang: string; pageId: string }>;
+}) {
+  const { lang, pageId } = await params;
+
+  const langEntry = pagesList.find((l) => l.id === lang);
+  const pageEntry = langEntry?.pages.find((p) => p.slug === pageId);
+  if (!langEntry || !pageEntry) notFound();
+
+  const docsId = `${lang}/${pageId}`;
+  const sections = await getMarkdownSections(lang, pageId, pageEntry!.title);
+
+  // AI用のドキュメント全文（見出し付きで結合）
+  const documentContent = sections
+    .map((s) =>
+      s.level > 0 ? `${"#".repeat(s.level)} ${s.title}\n\n${s.content}` : s.content
+    )
+    .join("\n\n");
+
+  const context = await initContext();
+  const initialChatHistories = await getChatFromCache(docsId, context);
+
+  return (
+    <ChatHistoryProvider
+      initialChatHistories={initialChatHistories}
+      docs_id={docsId}
+    >
+      <PageContent
+        documentContent={documentContent}
+        splitMdContent={sections}
+        docs_id={docsId}
+      />
+    </ChatHistoryProvider>
+  );
+}

app/navbar.tsx

@@ -14,11 +14,12 @@ function PageTitle() {
   }
 
   const currentDocsId = pathname.replace(/^\//, "");
-  const currentGroup = pagesList.find((group) => currentDocsId.startsWith(group.id));
-  const currentPage = currentGroup?.pages.find((page) => `${currentGroup.id}-${page.id}` === currentDocsId);
+  const currentGroup = pagesList.find((group) => currentDocsId.startsWith(`${group.id}/`));
+  const pageIndex = currentGroup?.pages.findIndex((page) => `${currentGroup.id}/${page.slug}` === currentDocsId) ?? -1;
+  const currentPage = pageIndex >= 0 ? currentGroup?.pages[pageIndex] : undefined;
   if(currentPage){
     return <>
-      <span className="text-base mr-2">{currentGroup?.lang}-{currentPage.id}.</span>
+      <span className="text-base mr-2">{currentGroup?.lang}-{pageIndex + 1}.</span>
       <span>{currentPage.title}</span>
     </>
   }

app/pagesList.ts

@@ -6,108 +6,109 @@ export const pagesList = [
     // TODO: これをいい感じの文章に変える↓
     description: "Pythonの基礎から応用までを学べるチュートリアル",
     pages: [
-      { id: 1, title: "環境構築と基本思想" },
-      { id: 2, title: "基本構文とデータ型" },
-      { id: 3, title: "リスト、タプル、辞書、セット" },
-      { id: 4, title: "制御構文と関数" },
-      { id: 5, title: "モジュールとパッケージ" },
-      { id: 6, title: "オブジェクト指向プログラミング" },
+      { id: 1, slug: "0-intro", title: "環境構築と基本思想" },
+      { id: 2, slug: "1-basics", title: "基本構文とデータ型" },
+      { id: 3, slug: "2-collections", title: "リスト、タプル、辞書、セット" },
+      { id: 4, slug: "3-control-functions", title: "制御構文と関数" },
+      { id: 5, slug: "4-modules", title: "モジュールとパッケージ" },
+      { id: 6, slug: "5-oop", title: "オブジェクト指向プログラミング" },
       {
         id: 7,
+        slug: "6-file-io",
         title: "ファイルの入出力とコンテキストマネージャ",
       },
-      { id: 8, title: "例外処理" },
-      { id: 9, title: "ジェネレータとデコレータ" },
+      { id: 8, slug: "7-exceptions", title: "例外処理" },
+      { id: 9, slug: "8-generators-decorators", title: "ジェネレータとデコレータ" },
     ],
   },
   {
     id: "ruby",
     lang: "Ruby",
     description: "hoge",
     pages: [
-      { id: 1, title: "rubyの世界へようこそ" },
-      { id: 2, title: "基本構文とデータ型" },
-      { id: 3, title: "制御構造とメソッド定義" },
-      { id: 4, title: "すべてがオブジェクト" },
-      { id: 5, title: "コレクション (Array, Hash, Range)" },
-      { id: 6, title: "ブロックとイテレータ" },
-      { id: 7, title: "クラスとオブジェクト" },
-      { id: 8, title: "モジュールとMix-in" },
-      { id: 9, title: "Proc, Lambda, クロージャ" },
-      { id: 10, title: "標準ライブラリの活用" },
-      { id: 11, title: "テスト文化入門" },
-      { id: 12, title: "メタプログラミング入門" },
+      { id: 1, slug: "0-intro", title: "rubyの世界へようこそ" },
+      { id: 2, slug: "1-basics", title: "基本構文とデータ型" },
+      { id: 3, slug: "2-control-methods", title: "制御構造とメソッド定義" },
+      { id: 4, slug: "3-everything-object", title: "すべてがオブジェクト" },
+      { id: 5, slug: "4-collections", title: "コレクション (Array, Hash, Range)" },
+      { id: 6, slug: "5-blocks-iterators", title: "ブロックとイテレータ" },
+      { id: 7, slug: "6-classes", title: "クラスとオブジェクト" },
+      { id: 8, slug: "7-modules", title: "モジュールとMix-in" },
+      { id: 9, slug: "8-proc-lambda", title: "Proc, Lambda, クロージャ" },
+      { id: 10, slug: "9-stdlib", title: "標準ライブラリの活用" },
+      { id: 11, slug: "10-testing", title: "テスト文化入門" },
+      { id: 12, slug: "11-metaprogramming", title: "メタプログラミング入門" },
     ],
   },
   {
     id: "javascript",
     lang: "JavaScript",
     description: "hoge",
     pages: [
-      { id: 1, title: "JavaScriptへようこそ" },
-      { id: 2, title: "基本構文とデータ型" },
-      { id: 3, title: "制御構文" },
-      { id: 4, title: "関数とクロージャ" },
-      { id: 5, title: "'this'の正体" },
-      { id: 6, title: "オブジェクトとプロトタイプ" },
-      { id: 7, title: "クラス構文" },
-      { id: 8, title: "配列とイテレーション" },
-      { id: 9, title: "非同期処理①: Promise" },
-      { id: 10, title: "非同期処理②: Async/Await" },
+      { id: 1, slug: "0-intro", title: "JavaScriptへようこそ" },
+      { id: 2, slug: "1-basics", title: "基本構文とデータ型" },
+      { id: 3, slug: "2-control", title: "制御構文" },
+      { id: 4, slug: "3-functions-closures", title: "関数とクロージャ" },
+      { id: 5, slug: "4-this", title: "'this'の正体" },
+      { id: 6, slug: "5-objects-prototype", title: "オブジェクトとプロトタイプ" },
+      { id: 7, slug: "6-classes", title: "クラス構文" },
+      { id: 8, slug: "7-arrays", title: "配列とイテレーション" },
+      { id: 9, slug: "8-promise", title: "非同期処理①: Promise" },
+      { id: 10, slug: "9-async-await", title: "非同期処理②: Async/Await" },
     ],
   },
   {
     id: "typescript",
     lang: "TypeScript",
     description: "にゃー",
     pages: [
-      { id: 1, title: "TypeScriptへようこそ" },
-      { id: 2, title: "基本的な型と型推論" },
-      { id: 3, title: "オブジェクト、インターフェース、型エイリアス" },
-      { id: 4, title: "関数の型定義" },
-      { id: 5, title: "型を組み合わせる" },
-      { id: 6, title: "ジェネリクス" },
-      { id: 7, title: "クラスとアクセス修飾子" },
-      { id: 8, title: "非同期処理とユーティリティ型" },
+      { id: 1, slug: "0-intro", title: "TypeScriptへようこそ" },
+      { id: 2, slug: "1-types", title: "基本的な型と型推論" },
+      { id: 3, slug: "2-objects-interfaces", title: "オブジェクト、インターフェース、型エイリアス" },
+      { id: 4, slug: "3-function-types", title: "関数の型定義" },
+      { id: 5, slug: "4-combining-types", title: "型を組み合わせる" },
+      { id: 6, slug: "5-generics", title: "ジェネリクス" },
+      { id: 7, slug: "6-classes", title: "クラスとアクセス修飾子" },
+      { id: 8, slug: "7-async-utilities", title: "非同期処理とユーティリティ型" },
     ],
   },
   {
     id: "cpp",
     lang: "C++",
     description: "C++の基本から高度な機能までを学べるチュートリアル",
     pages: [
-      { id: 1, title: "C++の世界へようこそ" },
-      { id: 2, title: "型システムと制御構造" },
-      { id: 3, title: "データ集合とモダンな操作" },
-      { id: 4, title: "ポインタとメモリ管理" },
-      { id: 5, title: "関数と参照渡し" },
-      { id: 6, title: "プロジェクトの分割とビルド" },
-      { id: 7, title: "クラスの基礎" },
-      { id: 8, title: "クラスを使いこなす" },
-      { id: 9, title: "継承とポリモーフィズム" },
-      { id: 10, title: "テンプレート" },
-      { id: 11, title: "STL ①:コンテナ" },
-      { id: 12, title: "STL ②:アルゴリズムとラムダ式" },
-      { id: 13, title: "RAIIとスマートポインタ" },
+      { id: 1, slug: "0-intro", title: "C++の世界へようこそ" },
+      { id: 2, slug: "1-types-control", title: "型システムと制御構造" },
+      { id: 3, slug: "2-data-containers", title: "データ集合とモダンな操作" },
+      { id: 4, slug: "3-pointers", title: "ポインタとメモリ管理" },
+      { id: 5, slug: "4-functions", title: "関数と参照渡し" },
+      { id: 6, slug: "5-project-build", title: "プロジェクトの分割とビルド" },
+      { id: 7, slug: "6-classes-basics", title: "クラスの基礎" },
+      { id: 8, slug: "7-classes-advanced", title: "クラスを使いこなす" },
+      { id: 9, slug: "8-inheritance", title: "継承とポリモーフィズム" },
+      { id: 10, slug: "9-templates", title: "テンプレート" },
+      { id: 11, slug: "10-stl-containers", title: "STL ①:コンテナ" },
+      { id: 12, slug: "11-stl-algorithms", title: "STL ②:アルゴリズムとラムダ式" },
+      { id: 13, slug: "12-raii-smart-ptrs", title: "RAIIとスマートポインタ" },
     ],
   },
   {
     id: "rust",
     lang: "Rust",
     description: "a",
     pages: [
-      { id: 1, title: "Rustの世界へようこそ" },
-      { id: 2, title: "基本構文と「不変性」" },
-      { id: 3, title: "関数と制御フロー" },
-      { id: 4, title: "所有権" },
-      { id: 5, title: "借用とスライス" },
-      { id: 6, title: "構造体とメソッド構文" },
-      { id: 7, title: "列挙型とパターンマッチ" },
-      { id: 8, title: "モジュールシステムとパッケージ管理" },
-      { id: 9, title: "コレクションと文字列" },
-      { id: 10, title: "エラーハンドリング" },
-      { id: 11, title: "ジェネリクスとトレイト" },
-      { id: 12, title: "ライフタイム" },
+      { id: 1, slug: "0-intro", title: "Rustの世界へようこそ" },
+      { id: 2, slug: "1-basics", title: "基本構文と「不変性」" },
+      { id: 3, slug: "2-functions-control", title: "関数と制御フロー" },
+      { id: 4, slug: "3-ownership", title: "所有権" },
+      { id: 5, slug: "4-borrowing-slices", title: "借用とスライス" },
+      { id: 6, slug: "5-structs-methods", title: "構造体とメソッド構文" },
+      { id: 7, slug: "6-enums-pattern", title: "列挙型とパターンマッチ" },
+      { id: 8, slug: "7-modules", title: "モジュールシステムとパッケージ管理" },
+      { id: 9, slug: "8-collections-strings", title: "コレクションと文字列" },
+      { id: 10, slug: "9-error-handling", title: "エラーハンドリング" },
+      { id: 11, slug: "10-generics-traits", title: "ジェネリクスとトレイト" },
+      { id: 12, slug: "11-lifetimes", title: "ライフタイム" },
     ],
   },
 ] as const;