ページのタイトルを設定

Author: na-trium-144

app/[docs_id]/page.tsx

@@ -1,52 +1,75 @@
+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, splitMarkdown } from "./splitMarkdown";
+import { splitMarkdown } from "./splitMarkdown";
 import { PageContent } from "./pageContent";
 import { ChatHistoryProvider } from "./chatHistory";
 import { getChatFromCache } from "@/lib/chatHistory";
+import { getLanguageName } from "@/pagesList";
+
+async function getMarkdownContent(docs_id: string): Promise<string> {
+  try {
+    if (process.env.NODE_ENV === "development") {
+      return await readFile(
+        join(process.cwd(), "public", "docs", `${docs_id}.md`),
+        "utf-8"
+      );
+    } else {
+      const cfAssets = getCloudflareContext().env.ASSETS;
+      const res = await cfAssets!.fetch(
+        `https://assets.local/docs/${docs_id}.md`
+      );
+      if (!res.ok) {
+        notFound();
+      }
+      return await res.text();
+    }
+  } catch (e) {
+    console.error(e);
+    notFound();
+  }
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { docs_id: string };
+}): Promise<Metadata> {
+  const { docs_id } = params;
+  const mdContent = await getMarkdownContent(docs_id);
+  const splitMdContent = splitMarkdown(mdContent);
+
+  // 先頭の 第n章: を除いたものをタイトルとする
+  const title = splitMdContent[0]?.title?.split(" ").slice(1).join(" ");
+
+  const description = splitMdContent[0].content;
+
+  const chapter = docs_id.split("-")[1];
+
+  return {
+    title: `${getLanguageName(docs_id)}-${chapter}. ${title}`,
+    description,
+  };
+}
 
 export default async function Page({
   params,
 }: {
-  params: Promise<{ docs_id: string }>;
+  params: { docs_id: string };
 }) {
-  const { docs_id } = await params;
-
-  let mdContent: Promise<string>;
-  if (process.env.NODE_ENV === "development") {
-    mdContent = readFile(
-      join(process.cwd(), "public", "docs", `${docs_id}.md`),
-      "utf-8"
-    ).catch((e) => {
-      console.error(e);
-      notFound();
-    });
-  } else {
-    const cfAssets = getCloudflareContext().env.ASSETS;
-    mdContent = cfAssets!
-      .fetch(`https://assets.local/docs/${docs_id}.md`)
-      .then(async (res) => {
-        if (!res.ok) {
-          notFound();
-        }
-        return res.text();
-      })
-      .catch((e) => {
-        console.error(e);
-        notFound();
-      });
-  }
-
-  const splitMdContent: Promise<MarkdownSection[]> = mdContent.then((text) =>
-    splitMarkdown(text)
-  );
+  const { docs_id } = params;
 
+  const mdContent = getMarkdownContent(docs_id);
+  const splitMdContent = mdContent.then((text) => splitMarkdown(text));
   const initialChatHistories = getChatFromCache(docs_id);
 
   return (
-    <ChatHistoryProvider initialChatHistories={await initialChatHistories} docs_id={docs_id}>
+    <ChatHistoryProvider
+      initialChatHistories={await initialChatHistories}
+      docs_id={docs_id}
+    >
       <PageContent
         documentContent={await mdContent}
         splitMdContent={await splitMdContent}

app/layout.tsx

@@ -11,8 +11,10 @@ import { SidebarMdProvider } from "./sidebar";
 import { RuntimeProvider } from "./terminal/runtime";
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: {
+    template: "%s - my.code();",
+    default: "my.code();",
+  },
 };
 
 export default function RootLayout({

app/page.tsx

@@ -1,6 +1,13 @@
+import { Metadata } from "next";
 import Link from "next/link";
 import { pagesList } from "./pagesList";
 
+export const metadata: Metadata = {
+  title: "my.code(); へようこそ",
+  description:
+    "環境構築不要、その場で実践。AIアシスタントとの対話履歴があなただけの教材へと進化する、新しいプログラミング学習サイトです。",
+};
+
 export default function Home() {
   return (
     <div className="p-4">

app/terminal/layout.tsx

@@ -0,0 +1,17 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Runtime Test Page",
+  robots: {
+    index: false,
+    follow: false,
+  },
+};
+
+export default function TerminalLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div>{children}</div>;
+}

app/terminal/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import { Heading } from "@/[docs_id]/markdown";
 import "mocha/mocha.css";
 import { Fragment, useEffect, useRef, useState } from "react";