adjust darkmode of toc

moonbitlang · Jan 13, 2025 · bed09d2 · bed09d2
1 parent f5765cc
commit bed09d2
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 17 deletions.
diff --git a/moonbit-tour/build/scan-tour.ts b/moonbit-tour/build/scan-tour.ts
@@ -76,16 +76,18 @@ function generateTOC(chapters: Chapter[]): { markdown: string; code: string } {
 
 function renderTOC(chapters: Chapter[]): string {
   const lines: string[] = [];
-  lines.push(`<ul class="border-l-4 border-l-purple-100">`);
+  lines.push(
+    `<ul class="border-l-4 border-l-purple-100 dark:border-l-zinc-800">`,
+  );
   for (const c of chapters) {
     lines.push(`<li><div class="toc-chapter pl-1">`);
     lines.push(
       `<button class="toc-chapter-title block w-full text-start cursor-pointer capitalize py-1">${c.chapter}</button>`,
     );
-    lines.push(`<ul class="toc-sections bg-gray-50">`);
+    lines.push(`<ul class="toc-sections bg-gray-50 dark:bg-zinc-700">`);
     for (const l of c.lessons) {
       lines.push(
-        `<li><a class="text-base capitalize pl-2 py-[2px] block" href="/${slug(l)}/index.html">${l.lesson}</a></li>`,
+        `<li><a class="toc-link text-base capitalize pl-2 py-1 block" href="/${slug(l)}/index.html">${l.lesson}</a></li>`,
       );
     }
     lines.push(`</ul>`);

diff --git a/moonbit-tour/index.html b/moonbit-tour/index.html
@@ -10,7 +10,11 @@
   </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">
-      <button class="cursor-pointer md:block" id="toc-button">
+      <a class="text-base" href="/index.html">MoonBit Language Tour</a>
+      <a class="ml-auto" href="https://www.moonbitlang.com" target="_blank"
+        >MoonBit</a
+      >
+      <button class="cursor-pointer" id="toc-button">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -27,10 +31,6 @@
           <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" target="_blank"
-        >MoonBit</a
-      >
       <button class="cursor-pointer" id="theme">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -51,7 +51,7 @@
     </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]"
+      class="fixed bottom-0 right-0 z-50 hidden h-[calc(100vh-3rem)] w-screen overflow-auto bg-purple-100 text-lg dark:bg-zinc-800 dark:text-gray-100 md:w-[400px]"
     >
       %TOC%
     </div>

diff --git a/moonbit-tour/src/router.ts b/moonbit-tour/src/router.ts
@@ -30,7 +30,7 @@ export async function init() {
     if (url.origin !== location.origin) return;
     e.preventDefault();
     const data = await getRouteData(url.toString());
-    window.dispatchEvent(new CustomEvent("route-change", { detail: data }));
     history.pushState(data, "", url.toString());
+    window.dispatchEvent(new CustomEvent("route-change", { detail: data }));
   });
 }
diff --git a/moonbit-tour/src/toc.ts b/moonbit-tour/src/toc.ts
@@ -6,9 +6,41 @@ function tocChapter(div: HTMLDivElement) {
   };
 }
 
+function highlightCurrent() {
+  const sections =
+    document.querySelectorAll<HTMLUListElement>(".toc-sections")!;
+  let openSectionIndex = -1;
+  for (const [i, section] of sections.entries()) {
+    const links = section.querySelectorAll<HTMLAnchorElement>(".toc-link")!;
+    for (const link of links) {
+      if (link.href === location.href) {
+        openSectionIndex = i;
+        link.classList.add("font-bold");
+      } else {
+        link.classList.remove("font-bold");
+      }
+    }
+  }
+  if (openSectionIndex === -1) {
+    for (const section of sections) {
+      section.classList.remove("hidden");
+    }
+  } else {
+    for (const [i, section] of sections.entries()) {
+      if (i === openSectionIndex) {
+        section.classList.remove("hidden");
+      } else {
+        section.classList.add("hidden");
+      }
+    }
+  }
+}
+
+const tocButton = document.getElementById("toc-button")!;
+const toc = document.getElementById("toc")!;
+const themeButton = document.querySelector<HTMLButtonElement>("#theme")!;
+
 export function init() {
-  const tocButton = document.getElementById("toc-button")!;
-  const toc = document.getElementById("toc")!;
   tocButton.onclick = () => {
     toc.classList.toggle("hidden");
   };
@@ -17,10 +49,23 @@ export function init() {
     tocChapter(div);
   }
 
-  document.addEventListener("click", (e) => {
-    if (!(e.target instanceof Node)) return;
-    if (toc.contains(e.target) || tocButton.contains(e.target)) return;
-    if (toc.classList.contains("hidden")) return;
-    toc.classList.add("hidden");
+  window.addEventListener(
+    "click",
+    (e) => {
+      if (!(e.target instanceof Node)) return;
+      if (
+        toc.contains(e.target) ||
+        tocButton.contains(e.target) ||
+        themeButton.contains(e.target)
+      )
+        return;
+      if (toc.classList.contains("hidden")) return;
+      toc.classList.add("hidden");
+    },
+    { capture: true },
+  );
+  window.addEventListener("route-change", () => {
+    highlightCurrent();
   });
+  highlightCurrent();
 }