Quartz sync: May 21, 2025, 10:24 PM

codeyoma · codeyoma · commit de446b8de1cb · 2025-05-21T22:24:22.000+09:00
diff --git a/content/Computer Science/1 Foundations & Theory/Algorithms/index.md b/content/Computer Science/1 Foundations & Theory/Algorithms/index.md
@@ -1,7 +1,7 @@
 ---
 description: 
 created: 2023-10-09
-modified: 2025-05-18
+modified: 2025-05-21
 tags:
   - cs
   - algorithm
diff --git a/content/Computer Science/index.md b/content/Computer Science/index.md
@@ -13,7 +13,7 @@ aliases:
 
 - Foundations & Theory
 	- Data Structures
-	- [[- Algorithms | 🗺️ - Algorithms]]
+	- [[- Algorithms| 🗺️ - Algorithms]]
 	- Theory of Computation
 	- Discrete Mathematics
 	- Probability & Statistics
diff --git a/content/index.md b/content/index.md
@@ -14,7 +14,7 @@ comments: "false"
 # MOC 
 - [[About|About]]
 - [[- Computer Science | 🗺️ - Computer Science]]
-	- [[- Algorithms | 🗺️ - Algorithms]]
+	- [[- Algorithms| 🗺️ - Algorithms]]
 		- [[- PS |🗺️ - PS]]
 	- [[- Frontend| 🗺️ - Frontend]]
 - [[- Note Taking|🗺️ - Note Taking]]
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,6 +59,10 @@
         "is-absolute-url": "^4.0.1",
         "js-yaml": "^4.1.0",
         "lightningcss": "^1.30.1",
+        "markmap-common": "^0.18.9",
+        "markmap-lib": "^0.18.11",
+        "markmap-toolbar": "^0.18.10",
+        "markmap-view": "^0.18.10",
         "mdast-util-find-and-replace": "^3.0.2",
         "mdast-util-to-hast": "^13.2.0",
         "mdast-util-to-string": "^4.0.0",
diff --git a/quartz.config.ts b/quartz.config.ts
@@ -80,6 +80,7 @@ const config: QuartzConfig = {
             Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
             Plugin.Description(),
             Plugin.Latex({ renderEngine: "katex" }),
+            Plugin.MarkmapTransformer(),
         ],
         filters: [
             Plugin.RemoveDrafts(),
diff --git a/quartz.layout.ts b/quartz.layout.ts
@@ -54,6 +54,7 @@ export const defaultContentPageLayout: PageLayout = {
                     grow: true,
                 },
                 { Component: Component.Darkmode() },
+                { Component: Component.MarkmapViewer() },
                 { Component: Component.DesktopOnly(Component.ReaderMode()) },
             ],
         }),
@@ -112,6 +113,7 @@ export const defaultListPageLayout: PageLayout = {
                     grow: true,
                 },
                 { Component: Component.Darkmode() },
+                { Component: Component.MarkmapViewer() },
                 { Component: Component.DesktopOnly(Component.ReaderMode()) },
             ],
         }),
diff --git a/quartz/components/Darkmode.tsx b/quartz/components/Darkmode.tsx
@@ -6,40 +6,40 @@ import { i18n } from "../i18n"
 import { classNames } from "../util/lang"
 
 const Darkmode: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
-  return (
-    <button class={classNames(displayClass, "darkmode")}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        xmlnsXlink="http://www.w3.org/1999/xlink"
-        version="1.1"
-        class="dayIcon"
-        x="0px"
-        y="0px"
-        viewBox="0 0 35 35"
-        style="enable-background:new 0 0 35 35"
-        xmlSpace="preserve"
-        aria-label={i18n(cfg.locale).components.themeToggle.darkMode}
-      >
-        <title>{i18n(cfg.locale).components.themeToggle.darkMode}</title>
-        <path d="M6,17.5C6,16.672,5.328,16,4.5,16h-3C0.672,16,0,16.672,0,17.5    S0.672,19,1.5,19h3C5.328,19,6,18.328,6,17.5z M7.5,26c-0.414,0-0.789,0.168-1.061,0.439l-2,2C4.168,28.711,4,29.086,4,29.5    C4,30.328,4.671,31,5.5,31c0.414,0,0.789-0.168,1.06-0.44l2-2C8.832,28.289,9,27.914,9,27.5C9,26.672,8.329,26,7.5,26z M17.5,6    C18.329,6,19,5.328,19,4.5v-3C19,0.672,18.329,0,17.5,0S16,0.672,16,1.5v3C16,5.328,16.671,6,17.5,6z M27.5,9    c0.414,0,0.789-0.168,1.06-0.439l2-2C30.832,6.289,31,5.914,31,5.5C31,4.672,30.329,4,29.5,4c-0.414,0-0.789,0.168-1.061,0.44    l-2,2C26.168,6.711,26,7.086,26,7.5C26,8.328,26.671,9,27.5,9z M6.439,8.561C6.711,8.832,7.086,9,7.5,9C8.328,9,9,8.328,9,7.5    c0-0.414-0.168-0.789-0.439-1.061l-2-2C6.289,4.168,5.914,4,5.5,4C4.672,4,4,4.672,4,5.5c0,0.414,0.168,0.789,0.439,1.06    L6.439,8.561z M33.5,16h-3c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h3c0.828,0,1.5-0.672,1.5-1.5S34.328,16,33.5,16z     M28.561,26.439C28.289,26.168,27.914,26,27.5,26c-0.828,0-1.5,0.672-1.5,1.5c0,0.414,0.168,0.789,0.439,1.06l2,2    C28.711,30.832,29.086,31,29.5,31c0.828,0,1.5-0.672,1.5-1.5c0-0.414-0.168-0.789-0.439-1.061L28.561,26.439z M17.5,29    c-0.829,0-1.5,0.672-1.5,1.5v3c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5v-3C19,29.672,18.329,29,17.5,29z M17.5,7    C11.71,7,7,11.71,7,17.5S11.71,28,17.5,28S28,23.29,28,17.5S23.29,7,17.5,7z M17.5,25c-4.136,0-7.5-3.364-7.5-7.5    c0-4.136,3.364-7.5,7.5-7.5c4.136,0,7.5,3.364,7.5,7.5C25,21.636,21.636,25,17.5,25z"></path>
-      </svg>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        xmlnsXlink="http://www.w3.org/1999/xlink"
-        version="1.1"
-        class="nightIcon"
-        x="0px"
-        y="0px"
-        viewBox="0 0 100 100"
-        style="enable-background:new 0 0 100 100"
-        xmlSpace="preserve"
-        aria-label={i18n(cfg.locale).components.themeToggle.lightMode}
-      >
-        <title>{i18n(cfg.locale).components.themeToggle.lightMode}</title>
-        <path d="M96.76,66.458c-0.853-0.852-2.15-1.064-3.23-0.534c-6.063,2.991-12.858,4.571-19.655,4.571  C62.022,70.495,50.88,65.88,42.5,57.5C29.043,44.043,25.658,23.536,34.076,6.47c0.532-1.08,0.318-2.379-0.534-3.23  c-0.851-0.852-2.15-1.064-3.23-0.534c-4.918,2.427-9.375,5.619-13.246,9.491c-9.447,9.447-14.65,22.008-14.65,35.369  c0,13.36,5.203,25.921,14.65,35.368s22.008,14.65,35.368,14.65c13.361,0,25.921-5.203,35.369-14.65  c3.872-3.871,7.064-8.328,9.491-13.246C97.826,68.608,97.611,67.309,96.76,66.458z"></path>
-      </svg>
-    </button>
-  )
+    return (
+        <button class={classNames(displayClass, "darkmode")}>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+                version="1.1"
+                class="dayIcon"
+                x="0px"
+                y="0px"
+                viewBox="0 0 35 35"
+                style="enable-background:new 0 0 35 35"
+                xmlSpace="preserve"
+                aria-label={i18n(cfg.locale).components.themeToggle.darkMode}
+            >
+                <title>{i18n(cfg.locale).components.themeToggle.darkMode}</title>
+                <path d="M6,17.5C6,16.672,5.328,16,4.5,16h-3C0.672,16,0,16.672,0,17.5    S0.672,19,1.5,19h3C5.328,19,6,18.328,6,17.5z M7.5,26c-0.414,0-0.789,0.168-1.061,0.439l-2,2C4.168,28.711,4,29.086,4,29.5    C4,30.328,4.671,31,5.5,31c0.414,0,0.789-0.168,1.06-0.44l2-2C8.832,28.289,9,27.914,9,27.5C9,26.672,8.329,26,7.5,26z M17.5,6    C18.329,6,19,5.328,19,4.5v-3C19,0.672,18.329,0,17.5,0S16,0.672,16,1.5v3C16,5.328,16.671,6,17.5,6z M27.5,9    c0.414,0,0.789-0.168,1.06-0.439l2-2C30.832,6.289,31,5.914,31,5.5C31,4.672,30.329,4,29.5,4c-0.414,0-0.789,0.168-1.061,0.44    l-2,2C26.168,6.711,26,7.086,26,7.5C26,8.328,26.671,9,27.5,9z M6.439,8.561C6.711,8.832,7.086,9,7.5,9C8.328,9,9,8.328,9,7.5    c0-0.414-0.168-0.789-0.439-1.061l-2-2C6.289,4.168,5.914,4,5.5,4C4.672,4,4,4.672,4,5.5c0,0.414,0.168,0.789,0.439,1.06    L6.439,8.561z M33.5,16h-3c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h3c0.828,0,1.5-0.672,1.5-1.5S34.328,16,33.5,16z     M28.561,26.439C28.289,26.168,27.914,26,27.5,26c-0.828,0-1.5,0.672-1.5,1.5c0,0.414,0.168,0.789,0.439,1.06l2,2    C28.711,30.832,29.086,31,29.5,31c0.828,0,1.5-0.672,1.5-1.5c0-0.414-0.168-0.789-0.439-1.061L28.561,26.439z M17.5,29    c-0.829,0-1.5,0.672-1.5,1.5v3c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5v-3C19,29.672,18.329,29,17.5,29z M17.5,7    C11.71,7,7,11.71,7,17.5S11.71,28,17.5,28S28,23.29,28,17.5S23.29,7,17.5,7z M17.5,25c-4.136,0-7.5-3.364-7.5-7.5    c0-4.136,3.364-7.5,7.5-7.5c4.136,0,7.5,3.364,7.5,7.5C25,21.636,21.636,25,17.5,25z"></path>
+            </svg>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+                version="1.1"
+                class="nightIcon"
+                x="0px"
+                y="0px"
+                viewBox="0 0 100 100"
+                style="enable-background:new 0 0 100 100"
+                xmlSpace="preserve"
+                aria-label={i18n(cfg.locale).components.themeToggle.lightMode}
+            >
+                <title>{i18n(cfg.locale).components.themeToggle.lightMode}</title>
+                <path d="M96.76,66.458c-0.853-0.852-2.15-1.064-3.23-0.534c-6.063,2.991-12.858,4.571-19.655,4.571  C62.022,70.495,50.88,65.88,42.5,57.5C29.043,44.043,25.658,23.536,34.076,6.47c0.532-1.08,0.318-2.379-0.534-3.23  c-0.851-0.852-2.15-1.064-3.23-0.534c-4.918,2.427-9.375,5.619-13.246,9.491c-9.447,9.447-14.65,22.008-14.65,35.369  c0,13.36,5.203,25.921,14.65,35.368s22.008,14.65,35.368,14.65c13.361,0,25.921-5.203,35.369-14.65  c3.872-3.871,7.064-8.328,9.491-13.246C97.826,68.608,97.611,67.309,96.76,66.458z"></path>
+            </svg>
+        </button>
+    )
 }
 
 Darkmode.beforeDOMLoaded = darkmodeScript
diff --git a/quartz/components/MarkmapViewer.tsx b/quartz/components/MarkmapViewer.tsx
@@ -0,0 +1,115 @@
+// @ts-ignore
+import markmapScript from "./scripts/markmap.inline"
+import style from "./styles/markmap.scss"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"
+
+import { IPureNode } from 'markmap-common'
+
+
+const recurseChildren = (fn: (node: IPureNode) => void) => (node: IPureNode) => {
+    fn(node)
+    node.children?.forEach(recurseChildren(fn))
+}
+
+function* matchRegex(str: string, regex: RegExp) {
+    while (true) {
+        const match = regex.exec(str)
+        if (!match) break
+        yield match
+    }
+}
+
+function replaceMatches(str: string, regex: RegExp, replacer: (match: RegExpExecArray) => string) {
+    let accumulator = str
+    const matches = matchRegex(str, regex)
+    for (const match of matches)
+        accumulator = accumulator.replace(match[0], replacer(match))
+    return accumulator
+}
+
+
+const wikilinkRegex = /\[\[(?<link>[^|\]]+)\|?((?<displayText>[^\]]+))?\]\]/g
+
+function replacement(match) {
+    const { link, displayText } = match.groups!
+    const safeLink = link.trim().replace(/\s+/g, "-")
+    // return `<a href=\"/${safeLink}\">${displayText || link}</a>`
+    return `"${displayText || link}"`
+}
+
+export const parseInternalLinks = recurseChildren(node => {
+    node.content =
+        replaceMatches(node.content, wikilinkRegex, replacement)
+})
+
+
+const MarkmapViewer: QuartzComponent = ({ displayClass, fileData }: QuartzComponentProps) => {
+    const root = fileData.markmap
+    if (!root) {
+        return (
+            <div class={classNames(displayClass, "markmap")}>
+                <button class={classNames(displayClass, "markmapmode")}>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="markmapIcon"
+                        fill="currentColor"
+                        stroke="currentColor"
+                        stroke-width="0.2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        width="64px"
+                        height="64px"
+                        viewBox="0 -960 960 960"
+                        aria-label="mind map"
+                    >
+                        <title>mind map</title>
+                        <path d="M200-80q-50 0-85-35t-35-85q0-39 22.5-70t57.5-43v-87q0-50 35-85t85-35h160v-127q-35-12-57.5-43T360-760q0-50 35-85t85-35q50 0 85 35t35 85q0 39-22.5 70T520-647v127h160q50 0 85 35t35 85v87q35 12 57.5 43t22.5 70q0 50-35 85t-85 35q-50 0-85-35t-35-85q0-39 22.5-70t57.5-43v-87q0-17-11.5-28.5T680-440H520v127q35 12 57.5 43t22.5 70q0 50-35 85t-85 35q-50 0-85-35t-35-85q0-39 22.5-70t57.5-43v-127H280q-17 0-28.5 11.5T240-400v87q35 12 57.5 43t22.5 70q0 50-35 85t-85 35Zm0-80q17 0 28.5-11.5T240-200q0-17-11.5-28.5T200-240q-17 0-28.5 11.5T160-200q0 17 11.5 28.5T200-160Zm280 0q17 0 28.5-11.5T520-200q0-17-11.5-28.5T480-240q-17 0-28.5 11.5T440-200q0 17 11.5 28.5T480-160Zm280 0q17 0 28.5-11.5T800-200q0-17-11.5-28.5T760-240q-17 0-28.5 11.5T720-200q0 17 11.5 28.5T760-160ZM480-720q17 0 28.5-11.5T520-760q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760q0 17 11.5 28.5T480-720Z" />
+                    </svg>
+                </button>
+            </div>
+        )
+    }
+
+    parseInternalLinks(root)
+
+    return (
+        <div class={classNames(displayClass, "markmap")}>
+
+            <button id="show-markmap" class={classNames(displayClass, "markmapmode")}>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="markmapIcon"
+                    fill="currentColor"
+                    stroke="currentColor"
+                    stroke-width="0.2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    width="64px"
+                    height="64px"
+                    viewBox="0 -960 960 960"
+                    aria-label="mind map"
+                >
+                    <title>mind map</title>
+                    <path d="M200-80q-50 0-85-35t-35-85q0-39 22.5-70t57.5-43v-87q0-50 35-85t85-35h160v-127q-35-12-57.5-43T360-760q0-50 35-85t85-35q50 0 85 35t35 85q0 39-22.5 70T520-647v127h160q50 0 85 35t35 85v87q35 12 57.5 43t22.5 70q0 50-35 85t-85 35q-50 0-85-35t-35-85q0-39 22.5-70t57.5-43v-87q0-17-11.5-28.5T680-440H520v127q35 12 57.5 43t22.5 70q0 50-35 85t-85 35q-50 0-85-35t-35-85q0-39 22.5-70t57.5-43v-127H280q-17 0-28.5 11.5T240-400v87q35 12 57.5 43t22.5 70q0 50-35 85t-85 35Zm0-80q17 0 28.5-11.5T240-200q0-17-11.5-28.5T200-240q-17 0-28.5 11.5T160-200q0 17 11.5 28.5T200-160Zm280 0q17 0 28.5-11.5T520-200q0-17-11.5-28.5T480-240q-17 0-28.5 11.5T440-200q0 17 11.5 28.5T480-160Zm280 0q17 0 28.5-11.5T800-200q0-17-11.5-28.5T760-240q-17 0-28.5 11.5T720-200q0 17 11.5 28.5T760-160ZM480-720q17 0 28.5-11.5T520-760q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760q0 17 11.5 28.5T480-720Z" />
+                </svg>
+            </button>
+            <div class="global-markmap-outer">
+                <div class="global-markmap-container">
+                    <svg id="global-markmap" ></svg>
+                    <div id="global-markmap-toolbar"></div>
+                    <script
+                        id="global-markmap-data"
+                        type="application/json"
+                        dangerouslySetInnerHTML={{ __html: JSON.stringify(fileData.markmap) }}
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+MarkmapViewer.afterDOMLoaded = markmapScript
+MarkmapViewer.css = style
+
+export default (() => MarkmapViewer) satisfies QuartzComponentConstructor
diff --git a/quartz/components/index.ts b/quartz/components/index.ts
@@ -24,6 +24,7 @@ import Comments from "./Comments"
 import Flex from "./Flex"
 import ConditionalRender from "./ConditionalRender"
 import ScrollProgress from "./ScrollProgress"
+import MarkmapViewer from './MarkmapViewer'
 
 export {
     ArticleTitle,
@@ -52,4 +53,5 @@ export {
     Flex,
     ConditionalRender,
     ScrollProgress,
+    MarkmapViewer,
 }
diff --git a/quartz/components/scripts/markmap.inline.ts b/quartz/components/scripts/markmap.inline.ts
@@ -0,0 +1,58 @@
+import { Markmap } from "markmap-view"
+import { Toolbar } from "markmap-toolbar"
+import { registerEscapeHandler } from "./util"
+
+function renderGlobalMarkmap() {
+    const container = document.querySelector(".global-markmap-outer") as HTMLElement
+    const svg = container.querySelector("#global-markmap") as SVGSVGElement
+    const dataEl = container.querySelector("#global-markmap-data") as HTMLScriptElement
+    const toolbarEl = container.querySelector("#global-markmap-toolbar") as HTMLElement
+
+    if (!container || !svg || !dataEl || !toolbarEl) {
+        console.warn("❌ Markmap container or elements not found.")
+        return
+    }
+
+    // Reset previous content
+    svg.innerHTML = ""
+    toolbarEl.innerHTML = ""
+
+    const data = JSON.parse(dataEl.textContent ?? "{}")
+    const mm = Markmap.create(svg, { scrollForPan: false }, data)
+    const toolbar = Toolbar.create(mm)
+    toolbarEl.append(toolbar.render())
+
+    mm.fit()
+
+    container.classList.add("active")
+
+    registerEscapeHandler(container, hideGlobalMarkmap)
+}
+
+function hideGlobalMarkmap() {
+    const container = document.querySelector(".global-markmap-outer") as HTMLElement
+    container?.classList.remove("active")
+}
+
+function toggleGlobalMarkmap() {
+    const container = document.querySelector(".global-markmap-outer") as HTMLElement
+    if (container?.classList.contains("active")) {
+        hideGlobalMarkmap()
+    } else {
+        renderGlobalMarkmap()
+    }
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+    const btn = document.getElementById("show-markmap")
+    if (btn) {
+        btn.addEventListener("click", renderGlobalMarkmap)
+    }
+
+    document.addEventListener("keydown", (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "m" && !e.shiftKey) {
+            e.preventDefault()
+            toggleGlobalMarkmap()
+        }
+    })
+})
diff --git a/quartz/components/styles/markmap.scss b/quartz/components/styles/markmap.scss
diff --git a/quartz/plugins/transformers/index.ts b/quartz/plugins/transformers/index.ts
diff --git a/quartz/plugins/transformers/markmap.ts b/quartz/plugins/transformers/markmap.ts
