2023-07-23 07:27:41 +07:00
|
|
|
import { render } from "preact-render-to-string"
|
|
|
|
|
import { QuartzComponent, QuartzComponentProps } from "./types"
|
2023-07-01 14:03:01 +07:00
|
|
|
import HeaderConstructor from "./Header"
|
|
|
|
|
import BodyConstructor from "./Body"
|
2023-08-17 12:04:15 +07:00
|
|
|
import { JSResourceToScriptElement, StaticResources } from "../util/resources"
|
2023-08-20 05:52:25 +07:00
|
|
|
import { FullSlug, joinSegments, pathToRoot } from "../util/path"
|
2023-07-01 14:03:01 +07:00
|
|
|
|
|
|
|
|
interface RenderComponents {
|
|
|
|
|
head: QuartzComponent
|
2023-07-23 07:27:41 +07:00
|
|
|
header: QuartzComponent[]
|
|
|
|
|
beforeBody: QuartzComponent[]
|
|
|
|
|
pageBody: QuartzComponent
|
|
|
|
|
left: QuartzComponent[]
|
|
|
|
|
right: QuartzComponent[]
|
|
|
|
|
footer: QuartzComponent
|
2023-07-01 14:03:01 +07:00
|
|
|
}
|
|
|
|
|
|
2023-08-20 05:52:25 +07:00
|
|
|
export function pageResources(slug: FullSlug, staticResources: StaticResources): StaticResources {
|
2023-07-13 14:19:35 +07:00
|
|
|
const baseDir = pathToRoot(slug)
|
2023-07-03 03:08:29 +07:00
|
|
|
|
2023-08-20 05:52:25 +07:00
|
|
|
const contentIndexPath = joinSegments(baseDir, "static/contentIndex.json")
|
2023-07-03 03:08:29 +07:00
|
|
|
const contentIndexScript = `const fetchData = fetch(\`${contentIndexPath}\`).then(data => data.json())`
|
|
|
|
|
|
2023-07-01 14:03:01 +07:00
|
|
|
return {
|
2023-08-20 05:52:25 +07:00
|
|
|
css: [joinSegments(baseDir, "index.css"), ...staticResources.css],
|
2023-07-01 14:03:01 +07:00
|
|
|
js: [
|
2023-08-20 05:52:25 +07:00
|
|
|
{
|
2023-08-20 06:28:44 +07:00
|
|
|
src: joinSegments(baseDir, "prescript.js"),
|
2023-08-20 05:52:25 +07:00
|
|
|
loadTime: "beforeDOMReady",
|
|
|
|
|
contentType: "external",
|
|
|
|
|
},
|
2023-07-23 07:27:41 +07:00
|
|
|
{
|
|
|
|
|
loadTime: "beforeDOMReady",
|
|
|
|
|
contentType: "inline",
|
|
|
|
|
spaPreserve: true,
|
|
|
|
|
script: contentIndexScript,
|
|
|
|
|
},
|
2023-07-01 14:03:01 +07:00
|
|
|
...staticResources.js,
|
2023-07-23 07:27:41 +07:00
|
|
|
{
|
2023-08-20 06:28:44 +07:00
|
|
|
src: joinSegments(baseDir, "postscript.js"),
|
2023-07-23 07:27:41 +07:00
|
|
|
loadTime: "afterDOMReady",
|
|
|
|
|
moduleType: "module",
|
|
|
|
|
contentType: "external",
|
|
|
|
|
},
|
|
|
|
|
],
|
2023-07-01 14:03:01 +07:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-07-23 07:27:41 +07:00
|
|
|
export function renderPage(
|
2023-08-20 05:52:25 +07:00
|
|
|
slug: FullSlug,
|
2023-07-23 07:27:41 +07:00
|
|
|
componentData: QuartzComponentProps,
|
|
|
|
|
components: RenderComponents,
|
|
|
|
|
pageResources: StaticResources,
|
|
|
|
|
): string {
|
|
|
|
|
const {
|
|
|
|
|
head: Head,
|
|
|
|
|
header,
|
|
|
|
|
beforeBody,
|
|
|
|
|
pageBody: Content,
|
|
|
|
|
left,
|
|
|
|
|
right,
|
|
|
|
|
footer: Footer,
|
|
|
|
|
} = components
|
2023-07-01 14:03:01 +07:00
|
|
|
const Header = HeaderConstructor()
|
|
|
|
|
const Body = BodyConstructor()
|
|
|
|
|
|
2023-07-23 07:27:41 +07:00
|
|
|
const LeftComponent = (
|
2023-07-05 07:14:15 +07:00
|
|
|
<div class="left sidebar">
|
2023-07-23 07:27:41 +07:00
|
|
|
{left.map((BodyComponent) => (
|
|
|
|
|
<BodyComponent {...componentData} />
|
|
|
|
|
))}
|
2023-07-03 03:08:29 +07:00
|
|
|
</div>
|
2023-07-23 07:27:41 +07:00
|
|
|
)
|
2023-07-03 03:08:29 +07:00
|
|
|
|
2023-07-23 07:27:41 +07:00
|
|
|
const RightComponent = (
|
2023-07-05 07:14:15 +07:00
|
|
|
<div class="right sidebar">
|
2023-07-23 07:27:41 +07:00
|
|
|
{right.map((BodyComponent) => (
|
|
|
|
|
<BodyComponent {...componentData} />
|
|
|
|
|
))}
|
2023-07-03 03:08:29 +07:00
|
|
|
</div>
|
2023-07-23 07:27:41 +07:00
|
|
|
)
|
2023-07-03 03:08:29 +07:00
|
|
|
|
2023-07-23 07:27:41 +07:00
|
|
|
const doc = (
|
|
|
|
|
<html>
|
|
|
|
|
<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>
|
2023-07-05 06:48:36 +07:00
|
|
|
</div>
|
2023-07-23 07:27:41 +07:00
|
|
|
<Content {...componentData} />
|
2023-07-05 06:48:36 +07:00
|
|
|
</div>
|
2023-07-23 07:27:41 +07:00
|
|
|
{RightComponent}
|
|
|
|
|
</Body>
|
|
|
|
|
<Footer {...componentData} />
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
{pageResources.js
|
|
|
|
|
.filter((resource) => resource.loadTime === "afterDOMReady")
|
|
|
|
|
.map((res) => JSResourceToScriptElement(res))}
|
|
|
|
|
</html>
|
|
|
|
|
)
|
2023-07-01 14:03:01 +07:00
|
|
|
|
|
|
|
|
return "<!DOCTYPE html>\n" + render(doc)
|
|
|
|
|
}
|
