scapegoat/Docs2.git

			@@ -1,63 +1,117 @@
			import { render } from "preact-render-to-string";
			import { QuartzComponent, QuartzComponentProps } from "./types";
			import { render } from "preact-render-to-string"
			import { QuartzComponent, QuartzComponentProps } from "./types"
			import HeaderConstructor from "./Header"
			import BodyConstructor from "./Body"
			import { JSResourceToScriptElement, StaticResources } from "../resources";
			import { resolveToRoot } from "../path";
			import { JSResourceToScriptElement, StaticResources } from "../util/resources"
			import { FullSlug, joinSegments, pathToRoot } from "../util/path"

			interface RenderComponents {
			head: QuartzComponent
			header: QuartzComponent[],
			beforeBody: QuartzComponent[],
			pageBody: QuartzComponent,
			left: QuartzComponent[],
			right: QuartzComponent[],
			footer: QuartzComponent,
			header: QuartzComponent[]
			beforeBody: QuartzComponent[]
			pageBody: QuartzComponent
			left: QuartzComponent[]
			right: QuartzComponent[]
			footer: QuartzComponent
			}

			export function pageResources(slug: string, staticResources: StaticResources): StaticResources {
			const baseDir = resolveToRoot(slug)
			export function pageResources(slug: FullSlug, staticResources: StaticResources): StaticResources {
			const baseDir = pathToRoot(slug)

			const contentIndexPath = joinSegments(baseDir, "static/contentIndex.json")
			const contentIndexScript = `const fetchData = fetch(\`${contentIndexPath}\`).then(data => data.json())`

			return {
			css: [baseDir + "/index.css", ...staticResources.css],
			css: [joinSegments(baseDir, "index.css"), ...staticResources.css],
			js: [
			{ src: baseDir + "/prescript.js", loadTime: "beforeDOMReady", contentType: "external" },
			{
			src: joinSegments(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" }
			]
			{
			src: baseDir + "/postscript.js",
			loadTime: "afterDOMReady",
			moduleType: "module",
			contentType: "external",
			},
			],
			}
			}

			export function renderPage(slug: string, componentData: QuartzComponentProps, components: RenderComponents, pageResources: StaticResources): string {
			const { head: Head, header, beforeBody, pageBody: Content, left, right, footer: Footer } = components
			export function renderPage(
			slug: FullSlug,
			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 doc = <html>
			<Head {...componentData} />
			<body data-slug={slug}>
			<div id="quartz-root" class="page">
			<Header {...componentData} >
			{header.map(HeaderComponent => <HeaderComponent {...componentData} />)}
			</Header>
			<div class="popover-hint">
			{beforeBody.map(BodyComponent => <BodyComponent {...componentData} />)}
			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 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>
			</div>
			<Content {...componentData} />
			</div>
			{RightComponent}
			</Body>
			<Footer {...componentData} />
			</div>
			<Body {...componentData}>
			<div class="left">
			{left.map(BodyComponent => <BodyComponent {...componentData} />)}
			</div>
			<div class="center popover-hint">
			<Content {...componentData} />
			</div>
			<div class="right">
			{right.map(BodyComponent => <BodyComponent {...componentData} />)}
			</div>
			</Body>
			<Footer {...componentData} />
			</div>
			</body>
			{pageResources.js.filter(resource => resource.loadTime === "afterDOMReady").map(res => JSResourceToScriptElement(res))}
			</html>
			</body>
			{pageResources.js
			.filter((resource) => resource.loadTime === "afterDOMReady")
			.map((res) => JSResourceToScriptElement(res))}
			</html>
			)

			return "<!DOCTYPE html>\n" + render(doc)
			}