add toc

moonbitlang · Jan 11, 2025 · f6a9279 · f6a9279
1 parent 40e4d13
commit f6a9279
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 26 deletions.
diff --git a/moonbit-tour/build/scan-tour.ts b/moonbit-tour/build/scan-tour.ts
@@ -76,16 +76,20 @@ function generateTOC(chapters: Chapter[]): { markdown: string; code: string } {
 
 function renderTOC(chapters: Chapter[]): string {
   const lines: string[] = [];
-  lines.push(`<ul>`);
+  lines.push(`<ul class="border-l-4 border-l-purple-100">`);
   for (const c of chapters) {
-    lines.push(`<li>`);
-    lines.push(c.chapter);
-    lines.push(`<ul>`);
+    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><a href="/${slug(l)}/index.html">${l.lesson}</a></li>`);
+      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("</li>");
+    lines.push("</div></li>");
   }
   lines.push(`</ul>`);
   return lines.join("\n");

diff --git a/moonbit-tour/index.html b/moonbit-tour/index.html
@@ -10,7 +10,7 @@
   </head>
   <body class="flex flex-col font-sans md:h-screen">
     <header class="flex h-8 items-center gap-3 bg-purple-200 px-2 py-6 md:px-6">
-      <div class="cursor-pointer" id="toc-button">
+      <button class="cursor-pointer md:block" id="toc-button">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -26,7 +26,7 @@
           <line x1="3" y1="12" x2="21" y2="12" />
           <line x1="3" y1="18" x2="21" y2="18" />
         </svg>
-      </div>
+      </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="cursor-pointer" id="theme">
@@ -49,7 +49,7 @@
     </header>
     <div
       id="toc"
-      class="absolute hidden bg-pink-300 md:bottom-0 md:h-[calc(100vh-3rem)]"
+      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>

diff --git a/moonbit-tour/src/main.ts b/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(),
@@ -18,12 +19,6 @@ self.MonacoEnvironment = {
   },
 };
 
-const tocButton = document.getElementById("toc-button")!;
-const toc = document.getElementById("toc")!;
-tocButton.onclick = () => {
-  toc.classList.toggle("md:block");
-};
-
 const sunSvg = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
   <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
 </svg>

diff --git a/moonbit-tour/src/toc.ts b/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);
+}
diff --git a/moonbit-tour/tailwind.config.js b/moonbit-tour/tailwind.config.js
@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   darkMode: "class",
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}", "./dev/*.ts"],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}", "./build/*.ts"],
   theme: {
     fontFamily: {
       sans: [
@@ -37,27 +37,27 @@ export default {
       typography: {
         DEFAULT: {
           css: {
-            'code::before': {
+            "code::before": {
               content: '""',
             },
-            'code::after': {
+            "code::after": {
               content: '""',
             },
             code: {
-              backgroundColor: '#f7fafc',
-              borderRadius: '0.25rem',
-              padding: '0.125rem 0.25rem',
-              border: '1px solid #e9e9e9',
-              color: '#222',
+              backgroundColor: "#f7fafc",
+              borderRadius: "0.25rem",
+              padding: "0.125rem 0.25rem",
+              border: "1px solid #e9e9e9",
+              color: "#222",
             },
           },
         },
         invert: {
           css: {
             code: {
-              backgroundColor: '#1f2937',
-              border: '1px solid #374151',
-              color: '#d1d5db',
+              backgroundColor: "#1f2937",
+              border: "1px solid #374151",
+              color: "#d1d5db",
             },
           },
         },