1章の記述修正、ファイルエディターの改善など

Author: na-trium-144

app/[docs_id]/markdown.tsx

@@ -86,7 +86,7 @@ const components: Components = {
         switch (match[1]) {
           case "python":
             return (
-              <div className="bg-base-300 border border-primary m-2 p-4 rounded-lg">
+              <div className="bg-base-300 border border-primary m-2 p-4 pr-1 rounded-lg">
                 <PythonEmbeddedTerminal
                   content={String(props.children).replace(/\n$/, "")}
                 />

app/[docs_id]/page.tsx

@@ -4,6 +4,7 @@ import { readFile } from "node:fs/promises";
 import { join } from "node:path";
 import { MarkdownSection, splitMarkdown } from "./splitMarkdown";
 import { Section } from "./section";
+import * as pyodideLock from "pyodide/pyodide-lock.json";
 
 export default async function Page({
   params,
@@ -30,6 +31,11 @@ export default async function Page({
     notFound();
   }
 
+  mdContent = mdContent.replaceAll(
+    "{process.env.PYODIDE_PYTHON_VERSION}",
+    String(pyodideLock.info.python)
+  );
+
   const splitMdContent: MarkdownSection[] = await splitMarkdown(mdContent);
 
   return (

app/terminal/editor.css

@@ -8,5 +8,4 @@
 .embedded-editor > .ace_editor {
     border-bottom-left-radius: 0.5rem;
     border-bottom-right-radius: 0.5rem;
-    border-top-right-radius: 0.5rem;
 }

app/terminal/editor.tsx

@@ -11,6 +11,7 @@ import "ace-builds/src-min-noconflict/ext-searchbox";
 import "ace-builds/src-min-noconflict/mode-python";
 import { useEffect } from "react";
 import { useSectionCode } from "../[docs_id]/section";
+import clsx from "clsx";
 // snippetを有効化するにはsnippetもimportする必要がある: import "ace-builds/src-min-noconflict/snippets/python";
 
 interface EditorProps {
@@ -33,7 +34,41 @@ export function EditorComponent(props: EditorProps) {
 
   return (
     <div className="embedded-editor">
-      <div className="font-mono text-sm mt-2 mb-1 ml-4 ">{props.filename}</div>
+      <div className="flex flex-row items-center">
+        <div className="font-mono text-sm mt-2 mb-1 ml-4 mr-2">
+          {props.filename}
+        </div>
+        <button
+          className={clsx(
+            "btn btn-xs btn-soft btn-warning mt-1 mb-1",
+            // btn-warning は文字色を変えるがsvgの色は変えてくれないので、 stroke-warning を追加指定している
+            "stroke-warning hover:stroke-warning-content active:stroke-warning-content",
+            // codeの内容が変更された場合のみ表示する
+            code == props.initContent && "invisible"
+          )}
+          onClick={() => writeFile(props.filename, props.initContent)}
+        >
+          {/*<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->*/}
+          <svg
+            className="w-3 h-3"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g id="Edit / Undo">
+              <path
+                id="Vector"
+                d="M10 8H5V3M5.29102 16.3569C6.22284 17.7918 7.59014 18.8902 9.19218 19.4907C10.7942 20.0913 12.547 20.1624 14.1925 19.6937C15.8379 19.225 17.2893 18.2413 18.3344 16.8867C19.3795 15.5321 19.963 13.878 19.9989 12.1675C20.0347 10.4569 19.5211 8.78001 18.5337 7.38281C17.5462 5.98561 16.1366 4.942 14.5122 4.40479C12.8878 3.86757 11.1341 3.86499 9.5083 4.39795C7.88252 4.93091 6.47059 5.97095 5.47949 7.36556"
+                // stroke="#000000"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </g>
+          </svg>
+          元の内容に戻す
+        </button>
+      </div>
       <AceEditor
         name={`ace-editor-${props.filename}`}
         mode={props.language}

app/terminal/file.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { usePathname } from "next/navigation";
 import {
   createContext,
   ReactNode,
@@ -16,6 +17,8 @@ import {
   files["ファイル名"]
 でどこからでも同じファイルの中身を取得でき、
 writeFile() で書き込むこともできる。
+
+ファイルはページのURLごとに独立して管理している。
 */
 interface IFileContext {
   files: Record<string, string | undefined>;
@@ -26,16 +29,25 @@ const FileContext = createContext<IFileContext>(null!);
 export const useFile = () => useContext(FileContext);
 
 export function FileProvider({ children }: { children: ReactNode }) {
-  const [files, setFiles] = useState<Record<string, string>>({});
-  const writeFile = useCallback((name: string, content: string) => {
-    setFiles((files) => {
-      files[name] = content;
-      return { ...files };
-    });
-  }, []);
+  const [files, setFiles] = useState<Record<string, Record<string, string>>>(
+    {}
+  );
+  const pathname = usePathname();
+  if (!(pathname in files)) {
+    files[pathname] = {};
+  }
+  const writeFile = useCallback(
+    (name: string, content: string) => {
+      setFiles((files) => {
+        files[pathname][name] = content;
+        return { ...files };
+      });
+    },
+    [pathname]
+  );
 
   return (
-    <FileContext.Provider value={{ files, writeFile }}>
+    <FileContext.Provider value={{ files: files[pathname], writeFile }}>
       {children}
     </FileContext.Provider>
   );

app/terminal/repl.tsx

@@ -80,6 +80,7 @@ export function ReplTerminal(props: ReplComponentProps) {
           onOutput(cmd.output);
         }
       }
+      terminalInstanceRef.current!.scrollToTop();
     },
   });
 
@@ -180,6 +181,8 @@ export function ReplTerminal(props: ReplComponentProps) {
           }
         }
         updateBuffer(() => [""]);
+        // なぜかそのままscrollToTop()を呼ぶとスクロールせず、setTimeoutを入れるとscrollする(治安bad)
+        setTimeout(() => terminalInstanceRef.current!.scrollToTop());
       })();
     }
   }, [

package-lock.json

@@ -21,6 +21,7 @@
     "ace-builds": "^1.43.2",
     "async-mutex": "^0.5.0",
     "chalk": "^5.5.0",
+    "clsx": "^2.1.1",
     "next": "<15.4",
     "prismjs": "^1.30.0",
     "pyodide": "^0.28.1",