From b00198b88833b4536dfc1fa3b068a8d1d6e94a86 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 10 Mar 2025 23:42:08 +0000
Subject: [PATCH] fix: load mermaid as normal now that inline is safely below bundle size
---
quartz/components/scripts/mermaid.inline.ts | 6 +++---
quartz/plugins/transformers/ofm.ts | 21 +++++++++++++++++++--
quartz/components/renderPage.tsx | 14 --------------
3 files changed, 22 insertions(+), 19 deletions(-)
diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
index cbf4af4..a43b66c 100644
--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@@ -9,9 +9,6 @@
import { Root, Element, ElementContent } from "hast"
import { GlobalConfiguration } from "../cfg"
import { i18n } from "../i18n"
-// @ts-ignore
-import mermaidScript from "./scripts/mermaid.inline"
-import mermaidStyle from "./styles/mermaid.inline.scss"
import { QuartzPluginData } from "../plugins/vfile"
interface RenderComponents {
@@ -65,17 +62,6 @@
contentType: "external",
})
- // dynamic afterDOMReady must come after postscript.js
- if (fileData.hasMermaidDiagram) {
- resources.js.push({
- script: mermaidScript,
- loadTime: "afterDOMReady",
- moduleType: "module",
- contentType: "inline",
- })
- resources.css.push({ content: mermaidStyle, inline: true })
- }
-
return resources
}
diff --git a/quartz/components/scripts/mermaid.inline.ts b/quartz/components/scripts/mermaid.inline.ts
index 6dd254d..36d384c 100644
--- a/quartz/components/scripts/mermaid.inline.ts
+++ b/quartz/components/scripts/mermaid.inline.ts
@@ -1,4 +1,4 @@
-import { removeAllChildren } from "./util"
+import { registerEscapeHandler, removeAllChildren } from "./util"
interface Position {
x: number
@@ -158,7 +158,7 @@
)
mermaidImport ||= await import(
- //@ts-ignore
+ // @ts-ignore
"https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.4.0/mermaid.esm.min.mjs"
)
const mermaid = mermaidImport.default
@@ -237,12 +237,12 @@
closeBtn.addEventListener("click", hideMermaid)
expandBtn.addEventListener("click", showMermaid)
+ registerEscapeHandler(popupContainer, hideMermaid)
document.addEventListener("keydown", handleEscape)
window.addCleanup(() => {
closeBtn.removeEventListener("click", hideMermaid)
expandBtn.removeEventListener("click", showMermaid)
- document.removeEventListener("keydown", handleEscape)
})
}
})
diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index a39a4db..12baf2f 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -16,9 +16,12 @@
import { splitAnchor } from "../../util/path"
import { JSResource, CSSResource } from "../../util/resources"
// @ts-ignore
-import calloutScript from "../../components/scripts/callout.inline.ts"
+import calloutScript from "../../components/scripts/callout.inline"
// @ts-ignore
-import checkboxScript from "../../components/scripts/checkbox.inline.ts"
+import checkboxScript from "../../components/scripts/checkbox.inline"
+// @ts-ignore
+import mermaidScript from "../../components/scripts/mermaid.inline"
+import mermaidStyle from "../../components/styles/mermaid.inline.scss"
import { FilePath, pathToRoot, slugTag, slugifyFilePath } from "../../util/path"
import { toHast } from "mdast-util-to-hast"
import { toHtml } from "hast-util-to-html"
@@ -806,6 +809,20 @@
})
}
+ if (opts.mermaid) {
+ js.push({
+ script: mermaidScript,
+ loadTime: "afterDOMReady",
+ contentType: "inline",
+ moduleType: "module",
+ })
+
+ css.push({
+ content: mermaidStyle,
+ inline: true,
+ })
+ }
+
return { js, css }
},
}
--
Gitblit v1.10.0