From 9e3e711646e3db281da11aeb08fc7a10a8dd3be4 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 10 Mar 2025 16:20:08 -0700
Subject: [PATCH] fix: mermaid script load order

---
 docs/index.md                               |  4 +--
 quartz/components/renderPage.tsx            | 16 ++++++------
 quartz/components/scripts/callout.inline.ts | 14 +++++-----
 quartz/components/scripts/spa.inline.ts     | 29 +++++++++++++--------
 4 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index e41c171..d4a751a 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -31,13 +31,13 @@ If you prefer instructions in a video format you can try following Nicole van de
 
 ## 🔧 Features
 
-- [[Obsidian compatibility]], [[full-text search]], [[graph view]], note transclusion, [[wikilinks]], [[backlinks]], [[features/Latex|Latex]], [[syntax highlighting]], [[popover previews]], [[Docker Support]], [[i18n|internationalization]], [[comments]] and [many more](./features) right out of the box
+- [[Obsidian compatibility]], [[full-text search]], [[graph view]], note transclusion, [[wikilinks]], [[backlinks]], [[features/Latex|Latex]], [[syntax highlighting]], [[popover previews]], [[Docker Support]], [[i18n|internationalization]], [[comments]] and [many more](./features/) right out of the box
 - Hot-reload for both configuration and content
 - Simple JSX layouts and [[creating components|page components]]
 - [[SPA Routing|Ridiculously fast page loads]] and tiny bundle sizes
 - Fully-customizable parsing, filtering, and page generation through [[making plugins|plugins]]
 
-For a comprehensive list of features, visit the [features page](/features). You can read more about the _why_ behind these features on the [[philosophy]] page and a technical overview on the [[architecture]] page.
+For a comprehensive list of features, visit the [features page](./features/). You can read more about the _why_ behind these features on the [[philosophy]] page and a technical overview on the [[architecture]] page.
 
 ### 🚧 Troubleshooting + Updating
 
diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
index 75ef82b..cbf4af4 100644
--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@@ -58,6 +58,14 @@ export function pageResources(
     additionalHead: staticResources.additionalHead,
   }
 
+  resources.js.push({
+    src: joinSegments(baseDir, "postscript.js"),
+    loadTime: "afterDOMReady",
+    moduleType: "module",
+    contentType: "external",
+  })
+
+  // dynamic afterDOMReady must come after postscript.js
   if (fileData.hasMermaidDiagram) {
     resources.js.push({
       script: mermaidScript,
@@ -68,14 +76,6 @@ export function pageResources(
     resources.css.push({ content: mermaidStyle, inline: true })
   }
 
-  // NOTE: we have to put this last to make sure spa.inline.ts is the last item.
-  resources.js.push({
-    src: joinSegments(baseDir, "postscript.js"),
-    loadTime: "afterDOMReady",
-    moduleType: "module",
-    contentType: "external",
-  })
-
   return resources
 }
 
diff --git a/quartz/components/scripts/callout.inline.ts b/quartz/components/scripts/callout.inline.ts
index 8f63df3..3b7e16d 100644
--- a/quartz/components/scripts/callout.inline.ts
+++ b/quartz/components/scripts/callout.inline.ts
@@ -28,17 +28,15 @@ function setupCallout() {
   ) as HTMLCollectionOf<HTMLElement>
   for (const div of collapsible) {
     const title = div.firstElementChild
+    if (!title) continue
 
-    if (title) {
-      title.addEventListener("click", toggleCallout)
-      window.addCleanup(() => title.removeEventListener("click", toggleCallout))
+    title.addEventListener("click", toggleCallout)
+    window.addCleanup(() => title.removeEventListener("click", toggleCallout))
 
-      const collapsed = div.classList.contains("is-collapsed")
-      const height = collapsed ? title.scrollHeight : div.scrollHeight
-      div.style.maxHeight = height + "px"
-    }
+    const collapsed = div.classList.contains("is-collapsed")
+    const height = collapsed ? title.scrollHeight : div.scrollHeight
+    div.style.maxHeight = height + "px"
   }
 }
 
 document.addEventListener("nav", setupCallout)
-window.addEventListener("resize", setupCallout)
diff --git a/quartz/components/scripts/spa.inline.ts b/quartz/components/scripts/spa.inline.ts
index 77900a6..22fcd72 100644
--- a/quartz/components/scripts/spa.inline.ts
+++ b/quartz/components/scripts/spa.inline.ts
@@ -56,8 +56,10 @@ function startLoading() {
   }, 100)
 }
 
+let isNavigating = false
 let p: DOMParser
-async function navigate(url: URL, isBack: boolean = false) {
+async function _navigate(url: URL, isBack: boolean = false) {
+  isNavigating = true
   startLoading()
   p = p || new DOMParser()
   const contents = await fetchCanonical(url)
@@ -128,6 +130,19 @@ async function navigate(url: URL, isBack: boolean = false) {
   delete announcer.dataset.persist
 }
 
+async function navigate(url: URL, isBack: boolean = false) {
+  if (isNavigating) return
+  isNavigating = true
+  try {
+    await _navigate(url, isBack)
+  } catch (e) {
+    console.error(e)
+    window.location.assign(url)
+  } finally {
+    isNavigating = false
+  }
+}
+
 window.spaNavigate = navigate
 
 function createRouter() {
@@ -145,21 +160,13 @@ function createRouter() {
         return
       }
 
-      try {
-        navigate(url, false)
-      } catch (e) {
-        window.location.assign(url)
-      }
+      navigate(url, false)
     })
 
     window.addEventListener("popstate", (event) => {
       const { url } = getOpts(event) ?? {}
       if (window.location.hash && window.location.pathname === url?.pathname) return
-      try {
-        navigate(new URL(window.location.toString()), true)
-      } catch (e) {
-        window.location.reload()
-      }
+      navigate(new URL(window.location.toString()), true)
       return
     })
   }