From 9e3e711646e3db281da11aeb08fc7a10a8dd3be4 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 10 Mar 2025 23:20:08 +0000
Subject: [PATCH] fix: mermaid script load order
---
quartz/components/renderPage.tsx | 37 +++++++++++++++++++++++++++++--------
1 files changed, 29 insertions(+), 8 deletions(-)
diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
index 9c53096..cbf4af4 100644
--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@@ -3,11 +3,16 @@
import HeaderConstructor from "./Header"
import BodyConstructor from "./Body"
import { JSResourceToScriptElement, StaticResources } from "../util/resources"
-import { clone, FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../util/path"
+import { FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../util/path"
+import { clone } from "../util/clone"
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 {
head: QuartzComponent
@@ -23,12 +28,13 @@
const headerRegex = new RegExp(/h[1-6]/)
export function pageResources(
baseDir: FullSlug | RelativeURL,
+ fileData: QuartzPluginData,
staticResources: StaticResources,
): StaticResources {
const contentIndexPath = joinSegments(baseDir, "static/contentIndex.json")
const contentIndexScript = `const fetchData = fetch("${contentIndexPath}").then(data => data.json())`
- return {
+ const resources: StaticResources = {
css: [
{
content: joinSegments(baseDir, "index.css"),
@@ -48,14 +54,29 @@
script: contentIndexScript,
},
...staticResources.js,
- {
- src: joinSegments(baseDir, "postscript.js"),
- loadTime: "afterDOMReady",
- moduleType: "module",
- contentType: "external",
- },
],
+ 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,
+ loadTime: "afterDOMReady",
+ moduleType: "module",
+ contentType: "inline",
+ })
+ resources.css.push({ content: mermaidStyle, inline: true })
+ }
+
+ return resources
}
export function renderPage(
--
Gitblit v1.10.0