add toc

moonbit-tour/README.md

@@ -23,6 +23,8 @@ open <http://localhost:3000> to view the tour.
    pnpm dev
    ```
 
+1. open <http://localhost:8080> to view the tour.
+
 1. Create a new folder under the chapter folder following the naming convention `lesson<n>_<lesson-name>` (count start from 1).
 
 1. Write the lesson content in `index.md` and lesson code in `index.mbt` under the created folder.

moonbit-tour/build/build.mts

@@ -7,7 +7,25 @@ import * as page from "./page";
 
 const isDev = process.env["DEV"] === "true";
 const isWatch = process.argv.includes("--watch");
-const isBuild = process.argv.includes("--build");
+
+async function exists(path: string) {
+  try {
+    await fs.access(path);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function clearDirectory(dir: string) {
+  if (!(await exists(dir))) return;
+  const items = await fs.readdir(dir);
+  await Promise.all(
+    items.map((i) =>
+      fs.rm(path.join(dir, i), { recursive: true, force: true }),
+    ),
+  );
+}
 
 const plugin = (): esbuild.Plugin => {
   return {
@@ -16,10 +34,7 @@ const plugin = (): esbuild.Plugin => {
       build.onStart(async () => {
         console.log("start build");
         build.initialOptions.outdir &&
-          (await fs.rm(build.initialOptions.outdir, {
-            recursive: true,
-            force: true,
-          }));
+          (await clearDirectory(build.initialOptions.outdir));
       });
       build.onEnd(async () => {
         console.log("end build");
@@ -76,7 +91,7 @@ const ctx = await esbuild.context({
 
 await ctx.rebuild();
 
-if (isBuild) {
+if (!isDev) {
   process.exit(0);
 }
 

moonbit-tour/build/page.ts

@@ -5,6 +5,7 @@ import * as shiki from "./shiki";
 
 type Page = {
   title: string;
+  toc: string;
   markdown: string;
   code: string;
   back: string;
@@ -19,18 +20,21 @@ export async function collectTourPage(): Promise<Page[]> {
 
   const indexMd = await fs.readFile("tour/index.md", "utf8");
   const indexMbt = await fs.readFile("tour/index.mbt", "utf8");
+  const toc = scan.renderTOC(chapters);
   pages.push({
     title: "MoonBit Language Tour",
     markdown: indexMd,
     code: indexMbt,
     back: `<span class="text-zinc-500">Back</span>`,
     next: `<a href="/${scan.slug(lessons[0])}/index.html">Next</a>`,
     path: "index.html",
+    toc,
   });
 
   for (const [i, l] of lessons.entries()) {
     const p: Page = {
       title: `${l.lesson} - MoonBit Language Tour`,
+      toc,
       markdown: l.markdown,
       code: l.code,
       back:
@@ -46,11 +50,12 @@ export async function collectTourPage(): Promise<Page[]> {
     pages.push(p);
   }
 
-  const toc = scan.generateTOC(chapters);
+  const tocPage = scan.generateTOC(chapters);
   pages.push({
     title: `Table of Contents - MoonBit Language Tour`,
-    markdown: toc.markdown,
-    code: toc.code,
+    toc,
+    markdown: tocPage.markdown,
+    code: tocPage.code,
     back: `<span class="text-zinc-500">Back</span>`,
     next: `<span class="text-zinc-500">Next</span>`,
     path: "table-of-contents/index.html",
@@ -61,6 +66,7 @@ export async function collectTourPage(): Promise<Page[]> {
 export function render(template: string, page: Page): string {
   return template
     .replace("%TITLE%", page.title)
+    .replace("%TOC%", page.toc)
     .replace("%MARKDOWN%", remark.mdToHtml(page.markdown))
     .replace("%CODE%", shiki.renderMoonBitCode(page.code))
     .replace("%BACK%", page.back)

moonbit-tour/build/scan-tour.ts

@@ -74,4 +74,25 @@ function generateTOC(chapters: Chapter[]): { markdown: string; code: string } {
   };
 }
 
-export { generateTOC, scanTour, slug };
+function renderTOC(chapters: Chapter[]): string {
+  const lines: string[] = [];
+  lines.push(`<ul class="border-l-4 border-l-purple-100">`);
+  for (const c of chapters) {
+    lines.push(`<li><div class="toc-chapter pl-1">`);
+    lines.push(
+      `<button class="toc-chapter-title cursor-pointer capitalize py-1">${c.chapter}</button>`,
+    );
+    lines.push(`<ul class="toc-sections bg-gray-50">`);
+    for (const l of c.lessons) {
+      lines.push(
+        `<li class="text-base capitalize pl-2 py-[2px]"><a href="/${slug(l)}/index.html">${l.lesson}</a></li>`,
+      );
+    }
+    lines.push(`</ul>`);
+    lines.push("</div></li>");
+  }
+  lines.push(`</ul>`);
+  return lines.join("\n");
+}
+
+export { generateTOC, renderTOC, scanTour, slug };

moonbit-tour/index.html

@@ -9,17 +9,35 @@
     <link rel="stylesheet" crossorigin href="/main.css" />
   </head>
   <body class="flex flex-col font-sans md:h-screen">
-    <header class="flex h-8 items-center gap-2 bg-purple-200 px-2 py-6 md:px-6">
+    <header class="flex h-8 items-center gap-3 bg-purple-200 px-2 py-6 md:px-6">
+      <button class="cursor-pointer md:block" id="toc-button">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="#000000"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <line x1="3" y1="6" x2="21" y2="6" />
+          <line x1="3" y1="12" x2="21" y2="12" />
+          <line x1="3" y1="18" x2="21" y2="18" />
+        </svg>
+      </button>
       <a class="text-base" href="/index.html">MoonBit Language Tour</a>
       <a class="ml-auto" href="https://www.moonbitlang.com">MoonBit</a>
-      <div class="ml-2 cursor-pointer" id="theme">
+      <div class="cursor-pointer" id="theme">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
           stroke-width="1.5"
           stroke="currentColor"
-          class="size-6"
+          width="24"
+          height="24"
         >
           <path
             stroke-linecap="round"
@@ -29,6 +47,12 @@
         </svg>
       </div>
     </header>
+    <div
+      id="toc"
+      class="fixed bottom-0 z-50 hidden h-[calc(100vh-3rem)] w-screen overflow-auto bg-purple-100 text-lg md:w-[500px]"
+    >
+      %TOC%
+    </div>
     <main
       class="flex flex-grow flex-col bg-gray-100 dark:bg-zinc-800 md:h-[calc(100vh-4rem)] md:flex-row"
     >

moonbit-tour/package.json

@@ -5,9 +5,9 @@
   "type": "module",
   "scripts": {
     "dev:build": "DEV=true tsx ./build/build.mts --watch",
-    "dev:serve": "vite -l silent dist --open",
+    "dev:serve": "live-server --no-browser --verbose dist",
     "dev": "run-p dev:build dev:serve",
-    "build": "tsc && DEV=false tsx ./build/build.mts --build",
+    "build": "tsc && DEV=false tsx ./build/build.mts",
     "preview": "serve dist",
     "format": "prettier --write ."
   },
@@ -18,6 +18,7 @@
     "chokidar": "^4.0.3",
     "esbuild": "^0.24.2",
     "esbuild-plugin-tailwindcss": "^1.2.1",
+    "live-server": "^1.2.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
@@ -31,8 +32,7 @@
     "tailwindcss": "^3.4.16",
     "tsx": "^4.19.2",
     "typescript": "~5.6.2",
-    "unified": "^11.0.5",
-    "vite": "^6.0.7"
+    "unified": "^11.0.5"
   },
   "dependencies": {
     "@moonbit/moonpad-monaco": "^0.1.202501070",

moonbit-tour/src/main.ts

@@ -1,6 +1,7 @@
 import * as moonbitMode from "@moonbit/moonpad-monaco";
 import * as monaco from "monaco-editor-core";
 import "./style.css";
+import "./toc";
 
 const moon = moonbitMode.init({
   onigWasmUrl: new URL("./onig.wasm", import.meta.url).toString(),

moonbit-tour/src/toc.ts

@@ -0,0 +1,17 @@
+function tocChapter(div: HTMLDivElement) {
+  const title = div.querySelector<HTMLButtonElement>(".toc-chapter-title")!;
+  const sections = div.querySelector<HTMLUListElement>(".toc-sections")!;
+  title.onclick = () => {
+    sections.classList.toggle("hidden");
+  };
+}
+
+const tocButton = document.getElementById("toc-button")!;
+const toc = document.getElementById("toc")!;
+tocButton.onclick = () => {
+  toc.classList.toggle("hidden");
+};
+
+for (const div of document.querySelectorAll<HTMLDivElement>(".toc-chapter")) {
+  tocChapter(div);
+}