The Trans Directory
fix: load mermaid as normal now that inline is safely below bundle size
+22
-19
-14
quartz/components/renderPage.tsx
-14
quartz/components/renderPage.tsx
···
9
9
import { Root, Element, ElementContent } from "hast"
10
10
import { GlobalConfiguration } from "../cfg"
11
11
import { i18n } from "../i18n"
12
-
// @ts-ignore
13
-
import mermaidScript from "./scripts/mermaid.inline"
14
-
import mermaidStyle from "./styles/mermaid.inline.scss"
15
12
import { QuartzPluginData } from "../plugins/vfile"
16
13
17
14
interface RenderComponents {
···
64
61
moduleType: "module",
65
62
contentType: "external",
66
63
})
67
-
68
-
// dynamic afterDOMReady must come after postscript.js
69
-
if (fileData.hasMermaidDiagram) {
70
-
resources.js.push({
71
-
script: mermaidScript,
72
-
loadTime: "afterDOMReady",
73
-
moduleType: "module",
74
-
contentType: "inline",
75
-
})
76
-
resources.css.push({ content: mermaidStyle, inline: true })
77
-
}
78
64
79
65
return resources
80
66
}
+3
-3
quartz/components/scripts/mermaid.inline.ts
+3
-3
quartz/components/scripts/mermaid.inline.ts
···
1
-
import { removeAllChildren } from "./util"
1
+
import { registerEscapeHandler, removeAllChildren } from "./util"
2
2
3
3
interface Position {
4
4
x: number
···
158
158
)
159
159
160
160
mermaidImport ||= await import(
161
-
//@ts-ignore
161
+
// @ts-ignore
162
162
"https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.4.0/mermaid.esm.min.mjs"
163
163
)
164
164
const mermaid = mermaidImport.default
···
237
237
238
238
closeBtn.addEventListener("click", hideMermaid)
239
239
expandBtn.addEventListener("click", showMermaid)
240
+
registerEscapeHandler(popupContainer, hideMermaid)
240
241
document.addEventListener("keydown", handleEscape)
241
242
242
243
window.addCleanup(() => {
243
244
closeBtn.removeEventListener("click", hideMermaid)
244
245
expandBtn.removeEventListener("click", showMermaid)
245
-
document.removeEventListener("keydown", handleEscape)
246
246
})
247
247
}
248
248
})
+19
-2
quartz/plugins/transformers/ofm.ts
+19
-2
quartz/plugins/transformers/ofm.ts
···
16
16
import { splitAnchor } from "../../util/path"
17
17
import { JSResource, CSSResource } from "../../util/resources"
18
18
// @ts-ignore
19
-
import calloutScript from "../../components/scripts/callout.inline.ts"
19
+
import calloutScript from "../../components/scripts/callout.inline"
20
+
// @ts-ignore
21
+
import checkboxScript from "../../components/scripts/checkbox.inline"
20
22
// @ts-ignore
21
-
import checkboxScript from "../../components/scripts/checkbox.inline.ts"
23
+
import mermaidScript from "../../components/scripts/mermaid.inline"
24
+
import mermaidStyle from "../../components/styles/mermaid.inline.scss"
22
25
import { FilePath, pathToRoot, slugTag, slugifyFilePath } from "../../util/path"
23
26
import { toHast } from "mdast-util-to-hast"
24
27
import { toHtml } from "hast-util-to-html"
···
803
806
script: calloutScript,
804
807
loadTime: "afterDOMReady",
805
808
contentType: "inline",
809
+
})
810
+
}
811
+
812
+
if (opts.mermaid) {
813
+
js.push({
814
+
script: mermaidScript,
815
+
loadTime: "afterDOMReady",
816
+
contentType: "inline",
817
+
moduleType: "module",
818
+
})
819
+
820
+
css.push({
821
+
content: mermaidStyle,
822
+
inline: true,
806
823
})
807
824
}
808
825