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
 

quartz/components/renderPage.tsx

@@ -9,6 +9,9 @@ import { visit } from "unist-util-visit"
 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 {
@@ -55,6 +58,17 @@ export function pageResources(
     additionalHead: staticResources.additionalHead,
   }
 
+  if (fileData.hasMermaidDiagram) {
+    resources.js.push({
+      script: mermaidScript,
+      loadTime: "afterDOMReady",
+      moduleType: "module",
+      contentType: "inline",
+    })
+    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",

quartz/components/scripts/callout.inline.ts

@@ -28,8 +28,8 @@ 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))
 
@@ -38,5 +38,7 @@ function setupCallout() {
       div.style.maxHeight = height + "px"
     }
   }
+}
 
 document.addEventListener("nav", setupCallout)
+window.addEventListener("resize", setupCallout)

quartz/components/scripts/mermaid.inline.ts

@@ -1,4 +1,4 @@
-import { registerEscapeHandler, removeAllChildren } from "./util"
+import { removeAllChildren } from "./util"
 
 interface Position {
   x: number
@@ -237,12 +237,12 @@ document.addEventListener("nav", async () => {
 
     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)
     })
   }
 })

quartz/components/scripts/spa.inline.ts

@@ -56,10 +56,8 @@ 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)
@@ -130,19 +128,6 @@ 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() {
@@ -160,13 +145,21 @@ function createRouter() {
         return
       }
 
+      try {
         navigate(url, false)
+      } catch (e) {
+        window.location.assign(url)
+      }
     })
 
     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()
+      }
       return
     })
   }

quartz/plugins/transformers/ofm.ts

@@ -16,12 +16,9 @@ import path from "path"
 import { splitAnchor } from "../../util/path"
 import { JSResource, CSSResource } from "../../util/resources"
 // @ts-ignore
-import calloutScript from "../../components/scripts/callout.inline"
+import calloutScript from "../../components/scripts/callout.inline.ts"
 // @ts-ignore
-import checkboxScript from "../../components/scripts/checkbox.inline"
+import checkboxScript from "../../components/scripts/checkbox.inline.ts"
-// @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"
@@ -809,20 +806,6 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
         })
       }
 
-      if (opts.mermaid) {
-        js.push({
-          script: mermaidScript,
-          loadTime: "afterDOMReady",
-          contentType: "inline",
-          moduleType: "module",
-        })
-
-        css.push({
-          content: mermaidStyle,
-          inline: true,
-        })
-      }
-
       return { js, css }
     },
   }