perf: don't load mermaid if its not on the page

This commit is contained in:
Jacky Zhao 2024-02-05 20:36:31 -08:00
parent bec726b666
commit 34334eabed

View file

@ -600,17 +600,22 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
if (opts.mermaid) { if (opts.mermaid) {
js.push({ js.push({
script: ` script: `
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs'; let mermaidImport = undefined
document.addEventListener('nav', async () => {
if (document.querySelector("code.mermaid")) {
mermaidImport ||= await import('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs')
const mermaid = mermaidImport.default
const darkMode = document.documentElement.getAttribute('saved-theme') === 'dark' const darkMode = document.documentElement.getAttribute('saved-theme') === 'dark'
mermaid.initialize({ mermaid.initialize({
startOnLoad: false, startOnLoad: false,
securityLevel: 'loose', securityLevel: 'loose',
theme: darkMode ? 'dark' : 'default' theme: darkMode ? 'dark' : 'default'
}); })
document.addEventListener('nav', async () => {
await mermaid.run({ await mermaid.run({
querySelector: '.mermaid' querySelector: '.mermaid'
}) })
}
}); });
`, `,
loadTime: "afterDOMReady", loadTime: "afterDOMReady",