Merge pull request #19 from ut-code/TOC

各章の目次表示

Author: Tatsu723

app/[docs_id]/page.tsx

@@ -41,7 +41,9 @@ export default async function Page({
   return (
     <div className="p-4">
       {splitMdContent.map((section, index) => (
-        <Section key={index} section={section} />
+        <div key={index} id={`${index}`}>
+          <Section key={index} section={section} />
+        </div>
       ))}
     </div>
   );

app/[docs_id]/splitMarkdown.ts

@@ -1,5 +1,3 @@
-"use server";
-
 import { unified } from "unified";
 import remarkParse from "remark-parse";
 import remarkGfm from "remark-gfm";
@@ -13,9 +11,9 @@ export interface MarkdownSection {
  * Markdownコンテンツを見出しごとに分割し、
  * 見出しのレベルとタイトル、内容を含むオブジェクトの配列を返す。
  */
-export async function splitMarkdown(
+export function splitMarkdown(
   content: string
-): Promise<MarkdownSection[]> {
+): 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");

app/sidebar.tsx

@@ -1,42 +1,65 @@
+"use client";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+import useSWR, { Fetcher } from 'swr'
+import { splitMarkdown } from "./[docs_id]/splitMarkdown";
+
+const fetcher: Fetcher<string, string> = (url) => fetch(url).then((r) => r.text())
 
 export function Sidebar() {
+  const pathname = usePathname();
+  const docs_id = pathname.replace(/^\//, "");
+  const { data, error, isLoading } = useSWR(
+    `/docs/${docs_id}.md`,
+    fetcher
+  )
+
+  const pages = [
+    { id: "python-1", title: "1. 環境構築と基本思想" },
+    { id: "python-2", title: "2. 基本構文とデータ型" },
+    { id: "python-3", title: "3. リスト、タプル、辞書、セット" },
+    { id: "python-4", title: "4. 制御構文と関数" },
+    { id: "python-5", title: "5. モジュールとパッケージ" },
+    { id: "python-6", title: "6. オブジェクト指向プログラミング" },
+    { id: "python-7", title: "7. ファイルの入出力とコンテキストマネージャ" },
+    { id: "python-8", title: "8. 例外処理" },
+    { id: "python-9", title: "9. ジェネレータとデコレータ" },
+  ];
+
+  if (error) console.error("Sidebar fetch error:", error)
+  
+
+  
+
+  const splitmdcontent = splitMarkdown(data ?? "")
   return (
     <div className="bg-base-200 min-h-full w-80 p-4">
       {/* todo: 背景色ほんとにこれでいい？ */}
       <h2 className="hidden lg:block text-xl font-bold mb-4">
         {/* サイドバーが常時表示されている場合のみ */}
         Navbar Title
       </h2>
-      <ol className="menu w-full list-decimal list-outside">
-        <li>
-          <Link href="/python-1">1. 環境構築と基本思想</Link>
-        </li>
-        <li>
-          <Link href="/python-2">2. 基本構文とデータ型</Link>
-        </li>
-        <li>
-          <Link href="/python-3">3. リスト、タプル、辞書、セット</Link>
-        </li>
-        <li>
-          <Link href="/python-4">4. 制御構文と関数</Link>
-        </li>
-        <li>
-          <Link href="/python-5">5. モジュールとパッケージ</Link>
-        </li>
-        <li>
-          <Link href="/python-6">6. オブジェクト指向プログラミング</Link>
-        </li>
-        <li>
-          <Link href="/python-7">7. ファイルの入出力とコンテキストマネージャ</Link>
-        </li>
-        <li>
-          <Link href="/python-8">8. 例外処理</Link>
-        </li>
-        <li>
-          <Link href="/python-9">9. ジェネレータとデコレータ</Link>
-        </li>
+      
+      <ol className="menu w-full list-outside">
+        {pages.map((page) => (
+          <li key={page.id}>
+            <Link href={`/${page.id}`}>{page.title}</Link>
+            {page.id === docs_id && !isLoading &&(
+              <ul className="ml-4 mt-2 text-sm">
+                {splitmdcontent
+                  .slice(1)
+                  .map((section, idx) => (
+                    <li key={idx} style={{ marginLeft: (section.level - 2) + "em"}}>
+                      <Link href={`#${idx+1}`}>{section.title}</Link>
+                    </li>
+                  ))}
+              </ul>
+            )}
+
+          </li>
+        ))}
       </ol>
     </div>
   );
 }
+

app/terminal/python/pyodide.tsx

@@ -289,7 +289,7 @@ export function PyodideProvider({ children }: { children: ReactNode }) {
         return output;
       });
     },
-    [files]
+    [files, writeFile]
   );
 
   /**

package-lock.json

@@ -31,6 +31,7 @@
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.1",
     "remark-gfm": "^4.0.1",
+    "swr": "^2.3.6",
     "zod": "^4.0.17"
   },
   "devDependencies": {