Replace pagesList.ts with reading from public/docs/{lang}/index.yml

Copilot · na-trium-144 · Copilot · commit e50a9f95a3f5 · 2026-02-24T08:09:53.000Z
Co-authored-by: na-trium-144 &lt;100704180+na-trium-144@users.noreply.github.com&gt;
diff --git a/app/[docs_id]/page.tsx b/app/[docs_id]/page.tsx
@@ -7,7 +7,7 @@ import { splitMarkdown } from "./splitMarkdown";
 import { PageContent } from "./pageContent";
 import { ChatHistoryProvider } from "./chatHistory";
 import { getChatFromCache, initContext } from "@/lib/chatHistory";
-import { getLanguageName, pagesList } from "@/pagesList";
+import { getPagesList } from "@/lib/getPagesList";
 import { isCloudflare } from "@/lib/detectCloudflare";
 
 async function getMarkdownContent(docs_id: string): Promise<string> {
@@ -47,10 +47,13 @@ export async function generateMetadata({
 
   const description = splitMdContent[0].content;
 
+  const lang_id = docs_id.split("-")[0];
   const chapter = docs_id.split("-")[1];
+  const pagesList = await getPagesList();
+  const langName = pagesList.find((l) => l.id === lang_id)?.name ?? lang_id;
 
   return {
-    title: `${getLanguageName(docs_id)}-${chapter}. ${title}`,
+    title: `${langName}-${chapter}. ${title}`,
     description,
   };
 }
@@ -61,11 +64,13 @@ export default async function Page({
   params: Promise<{ docs_id: string }>;
 }) {
   const { docs_id } = await params;
-
+  const lang_id = docs_id.split("-")[0];
+  const page_num = parseInt(docs_id.split("-")[1]);
+  const pagesList = await getPagesList();
   if (
     !pagesList
-      .find((lang) => docs_id.startsWith(`${lang.id}-`))
-      ?.pages.find((page) => docs_id.endsWith(`-${page.id}`))
+      .find((lang) => lang.id === lang_id)
+      ?.pages.find((_, idx) => idx + 1 === page_num)
   ) {
     notFound();
   }
diff --git a/app/[lang]/[pageId]/page.tsx b/app/[lang]/[pageId]/page.tsx
@@ -8,7 +8,7 @@ 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 { getPagesList } from "@/lib/getPagesList";
 import { isCloudflare } from "@/lib/detectCloudflare";
 
 async function readDocFile(
@@ -111,14 +111,14 @@ export async function generateMetadata({
   params: Promise<{ lang: string; pageId: string }>;
 }): Promise<Metadata> {
   const { lang, pageId } = await params;
+  const pagesList = await getPagesList();
   const langEntry = pagesList.find((l) => l.id === lang);
-  const pageEntry = langEntry?.pages.find((p) => p.slug === pageId);
+  const pageIndex = langEntry?.pages.findIndex((p) => p.slug === pageId) ?? -1;
+  const pageEntry = pageIndex >= 0 ? langEntry?.pages[pageIndex] : undefined;
   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}`,
+    title: `${langEntry!.name}-${pageIndex + 1}. ${pageEntry!.name}`,
   };
 }
 
@@ -128,13 +128,13 @@ export default async function Page({
   params: Promise<{ lang: string; pageId: string }>;
 }) {
   const { lang, pageId } = await params;
-
+  const pagesList = await getPagesList();
   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);
+  const sections = await getMarkdownSections(lang, pageId, pageEntry!.name);
 
   // AI用のドキュメント全文（見出し付きで結合）
   const documentContent = sections
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -12,6 +12,7 @@ import { EmbedContextProvider } from "./terminal/embedContext";
 import { AutoAnonymousLogin } from "./accountMenu";
 import { SidebarMdProvider } from "./sidebar";
 import { RuntimeProvider } from "./terminal/runtime";
+import { getPagesList } from "@/lib/getPagesList";
 
 export const metadata: Metadata = {
   title: {
@@ -20,9 +21,10 @@ export const metadata: Metadata = {
   },
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{ children: ReactNode }>) {
+  const pagesList = await getPagesList();
   return (
     <html lang="ja">
       <body className="w-screen min-h-screen bg-transparent! text-inherit! m-0!">
@@ -36,7 +38,7 @@ export default function RootLayout({
               className="drawer-toggle"
             />
             <div className="drawer-content flex flex-col">
-              <Navbar />
+              <Navbar pagesList={pagesList} />
               <EmbedContextProvider>
                 <RuntimeProvider>{children}</RuntimeProvider>
               </EmbedContextProvider>
@@ -47,7 +49,7 @@ export default function RootLayout({
                 aria-label="close sidebar"
                 className="drawer-overlay"
               />
-              <Sidebar />
+              <Sidebar pagesList={pagesList} />
             </div>
           </div>
         </SidebarMdProvider>
diff --git a/app/lib/getPagesList.ts b/app/lib/getPagesList.ts
@@ -0,0 +1,64 @@
+import { getCloudflareContext } from "@opennextjs/cloudflare";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import yaml from "js-yaml";
+import { isCloudflare } from "./detectCloudflare";
+
+export interface PageEntry {
+  slug: string;
+  name: string;
+  title: string;
+}
+
+export interface LanguageEntry {
+  id: string;
+  name: string;
+  description: string;
+  pages: PageEntry[];
+}
+
+interface IndexYml {
+  name: string;
+  description: string;
+  pages: PageEntry[];
+}
+
+const LANGUAGE_IDS = [
+  "python",
+  "ruby",
+  "javascript",
+  "typescript",
+  "cpp",
+  "rust",
+] as const;
+
+async function readIndexYml(langId: string): Promise<string> {
+  if (isCloudflare()) {
+    const cfAssets = getCloudflareContext().env.ASSETS;
+    const res = await cfAssets!.fetch(
+      `https://assets.local/docs/${langId}/index.yml`
+    );
+    if (!res.ok) throw new Error(`Failed to fetch index.yml for ${langId}`);
+    return await res.text();
+  } else {
+    return await readFile(
+      join(process.cwd(), "public", "docs", langId, "index.yml"),
+      "utf-8"
+    );
+  }
+}
+
+export async function getPagesList(): Promise<LanguageEntry[]> {
+  return await Promise.all(
+    LANGUAGE_IDS.map(async (langId) => {
+      const raw = await readIndexYml(langId);
+      const data = yaml.load(raw) as IndexYml;
+      return {
+        id: langId,
+        name: data.name,
+        description: data.description,
+        pages: data.pages,
+      };
+    })
+  );
+}
diff --git a/app/navbar.tsx b/app/navbar.tsx
@@ -4,9 +4,9 @@ import Link from "next/link";
 import { AccountMenu } from "./accountMenu";
 import { ThemeToggle } from "./[docs_id]/themeToggle";
 import { usePathname } from "next/navigation";
-import { pagesList } from "./pagesList";
+import { LanguageEntry } from "@/lib/getPagesList";
 
-function PageTitle() {
+function PageTitle({ pagesList }: { pagesList: LanguageEntry[] }) {
   const pathname = usePathname();
 
   if(pathname === "/"){
@@ -19,15 +19,15 @@ function PageTitle() {
   const currentPage = pageIndex >= 0 ? currentGroup?.pages[pageIndex] : undefined;
   if(currentPage){
     return <>
-      <span className="text-base mr-2">{currentGroup?.lang}-{pageIndex + 1}.</span>
-      <span>{currentPage.title}</span>
+      <span className="text-base mr-2">{currentGroup?.name}-{pageIndex + 1}.</span>
+      <span>{currentPage.name}</span>
     </>
   }
 
   console.warn(`navbar page name is not defined for pathname ${pathname}`);
   return null;
 }
-export function Navbar() {
+export function Navbar({ pagesList }: { pagesList: LanguageEntry[] }) {
 
   return (
     <>
@@ -67,7 +67,7 @@ export function Navbar() {
           <span className="font-bold text-xl font-mono">my.code();</span>
         </Link>
         <div className="flex-1 hidden md:inline text-nowrap overflow-hidden text-ellipsis font-bold text-xl">
-          <PageTitle />
+          <PageTitle pagesList={pagesList} />
         </div>
         <div className="flex-1 md:hidden" />
         <ThemeToggle />
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,6 @@
 import { Metadata } from "next";
 import Link from "next/link";
-import { pagesList } from "./pagesList";
+import { getPagesList } from "@/lib/getPagesList";
 import clsx from "clsx";
 
 export const metadata: Metadata = {
@@ -9,7 +9,8 @@ export const metadata: Metadata = {
     "環境構築不要、その場で実践。AIアシスタントとの対話履歴があなただけの教材へと進化する、新しいプログラミング学習サイトです。",
 };
 
-export default function Home() {
+export default async function Home() {
+  const pagesList = await getPagesList();
   return (
     <div className="p-4">
       <div className="hero bg-gradient-to-br from-primary/30 via-secondary/15 to-accent/30 rounded-lg my-6 py-8 sm:px-4">
@@ -41,14 +42,14 @@ export default function Home() {
           return (
             <Link
               key={group.id}
-              href={`${group.id}-${group.pages[0].id}`}
+              href={`${group.id}/${group.pages[0].slug}`}
               className={clsx(
                 "card card-border card-md bg-base-200 shadow-lg",
                 "hover:shadow-xl transition-all hover:-translate-y-1",
               )}
             >
               <div className="card-body">
-                <h2 className="card-title">{group.lang}</h2>
+                <h2 className="card-title">{group.name}</h2>
                 <p>{group.description}</p>
                 <div className="justify-end card-actions">
                   <div className="btn btn-primary">はじめる</div>
diff --git a/app/pagesList.ts b/app/pagesList.ts
diff --git a/app/sidebar.tsx b/app/sidebar.tsx
