Quartz sync: May 22, 2025, 4:35 PM

Author: codeyoma

quartz/components/MarkmapViewer.tsx

@@ -3,6 +3,7 @@ import markmapScript from "./scripts/markmap.inline"
 import style from "./styles/markmap.scss"
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { classNames } from "../util/lang"
+import { FullSlug } from "../util/path"
 
 import { IPureNode } from 'markmap-common'
 
@@ -28,18 +29,26 @@ function replaceMatches(str: string, regex: RegExp, replacer: (match: RegExpExec
     return accumulator
 }
 
-const wikilinkRegex = /\[\[(?<link>[^|\]]+)\|?((?<displayText>[^\]]+))?\]\]/g
+const wikilinkRegex = /(!)?\[\[(?<link>[^|\]]+)\|?(?<displayText>[^\]]*)\]\]/g
+function replacement(currentPath: FullSlug) {
+    return (match: RegExpExecArray) => {
+        const { link, displayText } = match.groups!
+        const isImage = /\.(png|jpg|jpeg|gif|svg)$/.test(link)
 
-function replacement(match) {
-    const { link, displayText } = match.groups!
-    const safeLink = `quartz-${link.trim().replace(/\s+/g, "-")}`
-    return `<a href=\"/${safeLink}\">${displayText || link}</a>`
+        if (isImage) {
+            return `<img src="../../../${currentPath}/../attachments/${link}" alt="${displayText || link}" />`
+        }
+
+        const safeLink = `quartz-${link.trim().replace(/\s+/g, "-")}`
+        return `<a href="/${safeLink}">${displayText || link}</a>`
+    }
 }
 
-export const parseInternalLinks = recurseChildren(node => {
-    node.content =
-        replaceMatches(node.content, wikilinkRegex, replacement)
-})
+export const parseInternalLinks = (slug: FullSlug) =>
+    recurseChildren((node) => {
+        node.content =
+            replaceMatches(node.content, wikilinkRegex, replacement(slug))
+    })
 
 
 const MarkmapViewer: QuartzComponent = ({ displayClass, fileData }: QuartzComponentProps) => {
@@ -70,7 +79,7 @@ const MarkmapViewer: QuartzComponent = ({ displayClass, fileData }: QuartzCompon
         )
     }
 
-    parseInternalLinks(root)
+    parseInternalLinks(fileData.slug!)(root)
 
     return (
         <div class={classNames(displayClass, "markmap")}>
@@ -98,7 +107,12 @@ const MarkmapViewer: QuartzComponent = ({ displayClass, fileData }: QuartzCompon
                 data-markmap={encodeURIComponent(JSON.stringify(fileData.markmap))}
             >
                 <div class="global-markmap-container" >
-                    <svg id="global-markmap" ></svg>
+                    <svg
+                        id="global-markmap"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="1240px"
+                        height="1240px"
+                    ></svg>
                     <div id="global-markmap-toolbar"></div>
                 </div>
             </div>

quartz/components/scripts/markmap.inline.ts

@@ -1,11 +1,18 @@
-import { Markmap, deriveOptions } from "markmap-view"
+import { Markmap, deriveOptions, loadCSS } from "markmap-view"
+import { Transformer } from "markmap-lib"
 import { Toolbar } from "markmap-toolbar"
 import { registerEscapeHandler } from "./util"
 
-
 function renderGlobalMarkmap() {
+    const transformer = new Transformer()
+    const { styles } = transformer.getAssets();
+    if (styles)
+        loadCSS(styles)
+
     const jsonOptions = {
         colorFreezeLevel: 2,
+        spacingHorizontal: 100,
+        spacingVertical: 10,
     }
     const markmapOptions = deriveOptions(jsonOptions);
     markmapOptions.scrollForPan = false
@@ -33,7 +40,6 @@ function renderGlobalMarkmap() {
     toolbarEl.append(toolbar.render())
 
     mm.fit()
-
     container.classList.add("active")
 
     registerEscapeHandler(container, hideGlobalMarkmap)

quartz/components/styles/markmap.scss

@@ -21,13 +21,12 @@
             background-color: var(--light);
             border-radius: 5px;
             box-sizing: border-box;
+            position: fixed;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             height: 80vh;
             width: 80vw;
-            overflow: hidden;
-            position: relative;
 
             @media all and not ($desktop) {
                 width: 90%;
@@ -38,10 +37,17 @@
                 width: 100%;
                 height: 100%;
                 z-index: 0;
-                overflow: hidden;
                 color: var(--darkgray);
 
-                .language-frontmatter {}
+                code {
+                    border-radius: 5px;
+                    padding: 0.12em;
+                }
+
+                img {
+                    margin-top: 1em;
+                    margin-bottom: 0;
+                }
             }
 
             #global-markmap-toolbar {
@@ -51,7 +57,7 @@
                 right: 0;
                 width: 100%;
                 z-index: 10;
-                color: var(--darkgray);
+                color: var(--italic);
 
                 .mm-toolbar-brand {
                     display: none;