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 { CanonicalSlug, pathToRoot } from "../util/path" interface RenderComponents { head: QuartzComponent header: QuartzComponent[] beforeBody: QuartzComponent[] pageBody: QuartzComponent left: QuartzComponent[] right: QuartzComponent[] footer: QuartzComponent } export function pageResources( slug: CanonicalSlug, staticResources: StaticResources, ): StaticResources { const baseDir = pathToRoot(slug) const contentIndexPath = baseDir + "/static/contentIndex.json" const contentIndexScript = `const fetchData = fetch(\`${contentIndexPath}\`).then(data => data.json())` return { css: [baseDir + "/index.css", ...staticResources.css], js: [ { src: baseDir + "/prescript.js", loadTime: "beforeDOMReady", contentType: "external" }, { loadTime: "beforeDOMReady", contentType: "inline", spaPreserve: true, script: contentIndexScript, }, ...staticResources.js, { src: baseDir + "/postscript.js", loadTime: "afterDOMReady", moduleType: "module", contentType: "external", }, ], } } export function renderPage( slug: CanonicalSlug, componentData: QuartzComponentProps, components: RenderComponents, pageResources: StaticResources, ): string { const { head: Head, header, beforeBody, pageBody: Content, left, right, footer: Footer, } = components const Header = HeaderConstructor() const Body = BodyConstructor() const LeftComponent = ( ) const RightComponent = ( ) const doc = (
{LeftComponent}
{RightComponent}
{pageResources.js .filter((resource) => resource.loadTime === "afterDOMReady") .map((res) => JSResourceToScriptElement(res))} ) return "\n" + render(doc) }