import { render } from "preact-render-to-string"
|
import { QuartzComponent, QuartzComponentProps } from "./types"
|
import HeaderConstructor from "./Header"
|
import BodyConstructor from "./Body"
|
import { JSResourceToScriptElement, StaticResources } from "../util/resources"
|
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
|
header: QuartzComponent[]
|
beforeBody: QuartzComponent[]
|
pageBody: QuartzComponent
|
afterBody: QuartzComponent[]
|
left: QuartzComponent[]
|
right: QuartzComponent[]
|
footer: 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")
|
const contentIndexScript = `const fetchData = fetch("${contentIndexPath}").then(data => data.json())`
|
|
const resources: StaticResources = {
|
css: [
|
{
|
content: joinSegments(baseDir, "index.css"),
|
},
|
...staticResources.css,
|
],
|
js: [
|
{
|
src: joinSegments(baseDir, "prescript.js"),
|
loadTime: "beforeDOMReady",
|
contentType: "external",
|
},
|
{
|
loadTime: "beforeDOMReady",
|
contentType: "inline",
|
spaPreserve: true,
|
script: contentIndexScript,
|
},
|
...staticResources.js,
|
],
|
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",
|
moduleType: "module",
|
contentType: "external",
|
})
|
|
return resources
|
}
|
|
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
|
|
// 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 page = componentData.allFiles.find((f) => f.slug === transcludeTarget)
|
if (!page) {
|
return
|
}
|
|
let blockRef = node.properties.dataBlock as string | undefined
|
if (blockRef?.startsWith("#^")) {
|
// block transclude
|
blockRef = blockRef.slice("#^".length)
|
let blockNode = page.blocks?.[blockRef]
|
if (blockNode) {
|
if (blockNode.tagName === "li") {
|
blockNode = {
|
type: "element",
|
tagName: "ul",
|
properties: {},
|
children: [blockNode],
|
}
|
}
|
|
node.children = [
|
normalizeHastElement(blockNode, slug, transcludeTarget),
|
{
|
type: "element",
|
tagName: "a",
|
properties: { href: inner.properties?.href, class: ["internal", "transclude-src"] },
|
children: [
|
{ type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
|
],
|
},
|
]
|
}
|
} else if (blockRef?.startsWith("#") && page.htmlAst) {
|
// header transclude
|
blockRef = blockRef.slice(1)
|
let startIdx = undefined
|
let startDepth = undefined
|
let endIdx = undefined
|
for (const [i, el] of page.htmlAst.children.entries()) {
|
// skip non-headers
|
if (!(el.type === "element" && el.tagName.match(headerRegex))) continue
|
const depth = Number(el.tagName.substring(1))
|
|
// lookin for our blockref
|
if (startIdx === undefined || startDepth === undefined) {
|
// skip until we find the blockref that matches
|
if (el.properties?.id === blockRef) {
|
startIdx = i
|
startDepth = depth
|
}
|
} else if (depth <= startDepth) {
|
// looking for new header that is same level or higher
|
endIdx = i
|
break
|
}
|
}
|
|
if (startIdx === undefined) {
|
return
|
}
|
|
node.children = [
|
...(page.htmlAst.children.slice(startIdx, endIdx) as ElementContent[]).map((child) =>
|
normalizeHastElement(child as Element, slug, transcludeTarget),
|
),
|
{
|
type: "element",
|
tagName: "a",
|
properties: { href: inner.properties?.href, class: ["internal", "transclude-src"] },
|
children: [
|
{ type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
|
],
|
},
|
]
|
} else if (page.htmlAst) {
|
// page transclude
|
node.children = [
|
{
|
type: "element",
|
tagName: "h1",
|
properties: {},
|
children: [
|
{
|
type: "text",
|
value:
|
page.frontmatter?.title ??
|
i18n(cfg.locale).components.transcludes.transcludeOf({
|
targetSlug: page.slug!,
|
}),
|
},
|
],
|
},
|
...(page.htmlAst.children as ElementContent[]).map((child) =>
|
normalizeHastElement(child as Element, slug, transcludeTarget),
|
),
|
{
|
type: "element",
|
tagName: "a",
|
properties: { href: inner.properties?.href, class: ["internal", "transclude-src"] },
|
children: [
|
{ type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
|
],
|
},
|
]
|
}
|
}
|
}
|
})
|
|
// set componentData.tree to the edited html that has transclusions rendered
|
componentData.tree = root
|
|
const {
|
head: Head,
|
header,
|
beforeBody,
|
pageBody: Content,
|
afterBody,
|
left,
|
right,
|
footer: Footer,
|
} = components
|
const Header = HeaderConstructor()
|
const Body = BodyConstructor()
|
|
const LeftComponent = (
|
<div class="left sidebar">
|
{left.map((BodyComponent) => (
|
<BodyComponent {...componentData} />
|
))}
|
</div>
|
)
|
|
const RightComponent = (
|
<div class="right sidebar">
|
{right.map((BodyComponent) => (
|
<BodyComponent {...componentData} />
|
))}
|
</div>
|
)
|
|
const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"
|
const doc = (
|
<html lang={lang}>
|
<Head {...componentData} />
|
<body data-slug={slug}>
|
<div id="quartz-root" class="page">
|
<Body {...componentData}>
|
{LeftComponent}
|
<div class="center">
|
<div class="page-header">
|
<Header {...componentData}>
|
{header.map((HeaderComponent) => (
|
<HeaderComponent {...componentData} />
|
))}
|
</Header>
|
<div class="popover-hint">
|
{beforeBody.map((BodyComponent) => (
|
<BodyComponent {...componentData} />
|
))}
|
</div>
|
</div>
|
<Content {...componentData} />
|
<hr />
|
<div class="page-footer">
|
{afterBody.map((BodyComponent) => (
|
<BodyComponent {...componentData} />
|
))}
|
</div>
|
</div>
|
{RightComponent}
|
<Footer {...componentData} />
|
</Body>
|
</div>
|
</body>
|
{pageResources.js
|
.filter((resource) => resource.loadTime === "afterDOMReady")
|
.map((res) => JSResourceToScriptElement(res))}
|
</html>
|
)
|
|
return "<!DOCTYPE html>\n" + render(doc)
|
}
|
