chore: use mermaid and update clipboard content

Signed-off-by: Aaron Pham <contact@aarnphm.xyz>

package.json

@@ -58,6 +58,7 @@
     "mdast-util-find-and-replace": "^3.0.1",
     "mdast-util-to-hast": "^13.2.0",
     "mdast-util-to-string": "^4.0.0",
+    "mermaid": "^11.4.0",
     "micromorph": "^0.4.5",
     "pixi.js": "^8.5.2",
     "preact": "^10.24.3",

quartz/components/scripts/clipboard.inline.ts

@@ -8,7 +8,9 @@ document.addEventListener("nav", () => {
   for (let i = 0; i < els.length; i++) {
     const codeBlock = els[i].getElementsByTagName("code")[0]
     if (codeBlock) {
-      const source = codeBlock.innerText.replace(/\n\n/g, "\n")
+      const source = (
+        codeBlock.dataset.clipboard ? JSON.parse(codeBlock.dataset.clipboard) : codeBlock.innerText
+      ).replace(/\n\n/g, "\n")
       const button = document.createElement("button")
       button.className = "clipboard-button"
       button.type = "button"

quartz/components/scripts/mermaid.inline.ts

@@ -1,7 +1,5 @@
 import { removeAllChildren } from "./util"
-
+import mermaid from "mermaid"
-const svgExpand =
-  '<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 1.06L2.56 7h10.88l-2.22-2.22a.75.75 0 011.06-1.06l3.5 3.5a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 11-1.06-1.06l2.22-2.22H2.56l2.22 2.22a.75.75 0 11-1.06 1.06l-3.5-3.5a.75.75 0 010-1.06l3.5-3.5z"></path></svg>'
 
 interface Position {
   x: number
@@ -59,6 +57,7 @@ class DiagramPanZoom {
     button.textContent = text
     button.className = "mermaid-control-button"
     button.addEventListener("click", onClick)
+    window.addCleanup(() => button.removeEventListener("click", onClick))
     return button
   }
 
@@ -145,9 +144,8 @@ const cssVars = [
   "--codeFont",
 ] as const
 
-let mermaidImport = undefined
 document.addEventListener("nav", async () => {
-  const nodes = document.querySelectorAll("code.mermaid")
+  const nodes = document.querySelectorAll("code.mermaid") as NodeListOf<HTMLElement>
   if (nodes.length === 0) return
 
   const computedStyleMap = cssVars.reduce(
@@ -158,11 +156,6 @@ document.addEventListener("nav", async () => {
     {} as Record<(typeof cssVars)[number], string>,
   )
 
-  mermaidImport ||= await import(
-    // @ts-ignore
-    "https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs"
-  )
-  const mermaid = mermaidImport.default
   const darkMode = document.documentElement.getAttribute("saved-theme") === "dark"
   mermaid.initialize({
     startOnLoad: false,
@@ -186,12 +179,8 @@ document.addEventListener("nav", async () => {
     const codeBlock = nodes[i] as HTMLElement
     const pre = codeBlock.parentElement as HTMLPreElement
     const clipboardBtn = pre.querySelector(".clipboard-button") as HTMLButtonElement
+    const expandBtn = pre.querySelector(".expand-button") as HTMLButtonElement
 
-    const expandBtn = document.createElement("button")
-    expandBtn.className = "expand-button"
-    expandBtn.type = "button"
-    expandBtn.innerHTML = svgExpand
-    expandBtn.ariaLabel = "Expand mermaid diagram"
     const clipboardStyle = window.getComputedStyle(clipboardBtn)
     const clipboardWidth =
       clipboardBtn.offsetWidth +
@@ -202,23 +191,9 @@ document.addEventListener("nav", async () => {
     expandBtn.style.right = `calc(${clipboardWidth}px + 0.3rem)`
     pre.prepend(expandBtn)
 
-    // Create popup container
+    // query popup container
-    const popupContainer = document.createElement("div")
+    const popupContainer = document.querySelector("#mermaid-container") as HTMLElement
-    popupContainer.id = "mermaid-container"
+    if (!popupContainer) return
-    popupContainer.innerHTML = `
-  <div id="mermaid-space">
-    <div class="mermaid-header">
-      <button class="close-button" aria-label="Close">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <line x1="18" y1="6" x2="6" y2="18"></line>
-          <line x1="6" y1="6" x2="18" y2="18"></line>
-        </svg>
-      </button>
-    </div>
-    <div class="mermaid-content"></div>
-  </div>
-  `
-    pre.appendChild(popupContainer)
 
     let panZoom: DiagramPanZoom | null = null
 

quartz/plugins/transformers/ofm.ts

@@ -282,6 +282,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
 
                 // internal link
                 const url = fp + anchor
+
                 return {
                   type: "link",
                   url,
@@ -518,6 +519,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
                 node.data = {
                   hProperties: {
                     className: ["mermaid"],
+                    "data-clipboard": JSON.stringify(node.value),
                   },
                 }
               }
@@ -662,6 +664,133 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
         })
       }
 
+      if (opts.mermaid) {
+        plugins.push(() => {
+          return (tree: HtmlRoot, _file) => {
+            visit(tree, "element", (node: Element, _idx, parent) => {
+              if (
+                node.tagName === "code" &&
+                ((node.properties?.className ?? []) as string[])?.includes("mermaid")
+              ) {
+                parent!.children = [
+                  {
+                    type: "element",
+                    tagName: "button",
+                    properties: {
+                      className: ["expand-button"],
+                      "aria-label": "Expand mermaid diagram",
+                      "aria-hidden": "true",
+                      "data-view-component": true,
+                    },
+                    children: [
+                      {
+                        type: "element",
+                        tagName: "svg",
+                        properties: {
+                          width: 16,
+                          height: 16,
+                          viewBox: "0 0 16 16",
+                          fill: "currentColor",
+                        },
+                        children: [
+                          {
+                            type: "element",
+                            tagName: "path",
+                            properties: {
+                              fillRule: "evenodd",
+                              d: "M3.72 3.72a.75.75 0 011.06 1.06L2.56 7h10.88l-2.22-2.22a.75.75 0 011.06-1.06l3.5 3.5a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 11-1.06-1.06l2.22-2.22H2.56l2.22 2.22a.75.75 0 11-1.06 1.06l-3.5-3.5a.75.75 0 010-1.06l3.5-3.5z",
+                            },
+                            children: [],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  node,
+                  {
+                    type: "element",
+                    tagName: "div",
+                    properties: { id: "mermaid-container" },
+                    children: [
+                      {
+                        type: "element",
+                        tagName: "div",
+                        properties: { id: "mermaid-space" },
+                        children: [
+                          {
+                            type: "element",
+                            tagName: "div",
+                            properties: { className: ["mermaid-header"] },
+                            children: [
+                              {
+                                type: "element",
+                                tagName: "button",
+                                properties: {
+                                  className: ["close-button"],
+                                  "aria-label": "close button",
+                                },
+                                children: [
+                                  {
+                                    type: "element",
+                                    tagName: "svg",
+                                    properties: {
+                                      "aria-hidden": "true",
+                                      xmlns: "http://www.w3.org/2000/svg",
+                                      width: 24,
+                                      height: 24,
+                                      viewBox: "0 0 24 24",
+                                      fill: "none",
+                                      stroke: "currentColor",
+                                      "stroke-width": "2",
+                                      "stroke-linecap": "round",
+                                      "stroke-linejoin": "round",
+                                    },
+                                    children: [
+                                      {
+                                        type: "element",
+                                        tagName: "line",
+                                        properties: {
+                                          x1: 18,
+                                          y1: 6,
+                                          x2: 6,
+                                          y2: 18,
+                                        },
+                                        children: [],
+                                      },
+                                      {
+                                        type: "element",
+                                        tagName: "line",
+                                        properties: {
+                                          x1: 6,
+                                          y1: 6,
+                                          x2: 18,
+                                          y2: 18,
+                                        },
+                                        children: [],
+                                      },
+                                    ],
+                                  },
+                                ],
+                              },
+                            ],
+                          },
+                          {
+                            type: "element",
+                            tagName: "div",
+                            properties: { className: ["mermaid-content"] },
+                            children: [],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ]
+              }
+            })
+          }
+        })
+      }
+
       return plugins
     },
     externalResources() {