fix: correct import mermaid in pages

Signed-off-by: Aaron Pham <contact@aarnphm.xyz>
This commit is contained in:
Aaron Pham 2024-12-29 22:53:47 -08:00
parent 2a7ad84d66
commit 008857d168
No known key found for this signature in database
GPG Key ID: 18974753009D2BFA
3 changed files with 15 additions and 6 deletions

View File

@ -22,6 +22,10 @@ import { getStaticResourcesFromPlugins } from "./plugins"
type Dependencies = Record<string, DepGraph<FilePath> | null>
type ContentPresence = {
hasMermaid: boolean
}
type BuildData = {
ctx: BuildCtx
ignored: GlobbyFilterFunction
@ -34,6 +38,7 @@ type BuildData = {
toRemove: Set<FilePath>
lastBuildMs: number
dependencies: Dependencies
contentPresenceChecks: ContentPresence
}
type FileEvent = "add" | "change" | "delete"
@ -129,6 +134,7 @@ async function startServing(
toRemove: new Set<FilePath>(),
trackedAssets: new Set<FilePath>(),
lastBuildMs: 0,
contentPresenceChecks: { hasMermaid: false },
}
const watcher = chokidar.watch(".", {

View File

@ -1,16 +1,13 @@
// @ts-ignore
import clipboardScript from "./scripts/clipboard.inline"
import clipboardStyle from "./styles/clipboard.scss"
// @ts-ignore
import mermaidScript from "./scripts/mermaid.inline"
import mermaidStyle from "./styles/mermaid.scss"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
const Body: QuartzComponent = ({ children }: QuartzComponentProps) => {
return <div id="quartz-body">{children}</div>
}
Body.afterDOMLoaded = clipboardScript + mermaidScript
Body.css = clipboardStyle + mermaidStyle
Body.afterDOMLoaded = clipboardScript
Body.css = clipboardStyle
export default (() => Body) satisfies QuartzComponentConstructor

View File

@ -1,7 +1,10 @@
import { htmlToJsx } from "../../util/jsx"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
// @ts-ignore
import mermaidScript from "../scripts/mermaid.inline"
import mermaidStyle from "../styles/mermaid.scss"
const Content: QuartzComponent = ({ ctx, fileData, tree }: QuartzComponentProps) => {
const Content: QuartzComponent = ({ fileData, tree }: QuartzComponentProps) => {
const content = htmlToJsx(fileData.filePath!, tree)
const classes: string[] = fileData.frontmatter?.cssclasses ?? []
const classString = ["popover-hint", ...classes].join(" ")
@ -42,4 +45,7 @@ const Content: QuartzComponent = ({ ctx, fileData, tree }: QuartzComponentProps)
)
}
Content.afterDOMLoaded = mermaidScript
Content.css = mermaidStyle
export default (() => Content) satisfies QuartzComponentConstructor