| | |
| | | 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 |
| | |
| | | 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") |
| | |
| | | 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", |
| | |
| | | return resources |
| | | } |
| | | |
| | | export function renderPage( |
| | | function renderTranscludes( |
| | | root: Root, |
| | | cfg: GlobalConfiguration, |
| | | slug: FullSlug, |
| | | componentData: QuartzComponentProps, |
| | | components: RenderComponents, |
| | | pageResources: StaticResources, |
| | | ): string { |
| | | // make a deep copy of the tree so we don't remove the transclusion references |
| | | // for the file cached in contentMap in build.ts |
| | | const root = clone(componentData.tree) as Root |
| | | |
| | | ) { |
| | | // process transcludes in componentData |
| | | visit(root, "element", (node, _index, _parent) => { |
| | | if (node.tagName === "blockquote") { |
| | | const classNames = (node.properties?.className ?? []) as string[] |
| | | if (classNames.includes("transclude")) { |
| | | const inner = node.children[0] as Element |
| | | const transcludeTarget = inner.properties["data-slug"] as FullSlug |
| | | const transcludeTarget = (inner.properties["data-slug"] ?? slug) as FullSlug |
| | | const page = componentData.allFiles.find((f) => f.slug === transcludeTarget) |
| | | if (!page) { |
| | | return |
| | |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | export function renderPage( |
| | | cfg: GlobalConfiguration, |
| | | slug: FullSlug, |
| | | componentData: QuartzComponentProps, |
| | | components: RenderComponents, |
| | | pageResources: StaticResources, |
| | | ): string { |
| | | // make a deep copy of the tree so we don't remove the transclusion references |
| | | // for the file cached in contentMap in build.ts |
| | | const root = clone(componentData.tree) as Root |
| | | renderTranscludes(root, cfg, slug, componentData) |
| | | |
| | | // set componentData.tree to the edited html that has transclusions rendered |
| | | componentData.tree = root |
| | |
| | | ) |
| | | |
| | | const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en" |
| | | const direction = i18n(cfg.locale).direction ?? "ltr" |
| | | const doc = ( |
| | | <html lang={lang}> |
| | | <html lang={lang} dir={direction}> |
| | | <Head {...componentData} /> |
| | | <body data-slug={slug}> |
| | | <div id="quartz-root" class="page"> |