fix: load mermaid as normal now that inline is safely below bundle size

Jacky Zhao

2025-03-10 b00198b88833b4536dfc1fa3b068a8d1d6e94a86

 quartz/components/scripts/mermaid.inline.ts

@@ -1,5 +1,4 @@
import { removeAllChildren } from "./util"
import mermaid from "mermaid"
import { registerEscapeHandler, removeAllChildren } from "./util"

interface Position {
  x: number
@@ -144,6 +143,7 @@
  "--codeFont",
] as const

let mermaidImport = undefined
document.addEventListener("nav", async () => {
  const center = document.querySelector(".center") as HTMLElement
  const nodes = center.querySelectorAll("code.mermaid") as NodeListOf<HTMLElement>
@@ -157,6 +157,12 @@
    {} as Record<(typeof cssVars)[number], string>,
  )

  mermaidImport ||= await import(
    // @ts-ignore
    "https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.4.0/mermaid.esm.min.mjs"
  )
  const mermaid = mermaidImport.default

  const darkMode = document.documentElement.getAttribute("saved-theme") === "dark"
  mermaid.initialize({
    startOnLoad: false,
@@ -231,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)
    })
  }
})