rendering, link resolution, asset copying

2023-05-31 17:01:23 -04:00
parent ad6ce0d73f
commit 21c007e2fc
19 changed files with 564 additions and 274 deletions
--- a/quartz/plugins/emitters/contentPage.ts
+++ b/quartz/plugins/emitters/contentPage.ts
@@ -1,26 +0,0 @@
-import { resolveToRoot } from "../../path"
-import { EmitCallback, QuartzEmitterPlugin } from "../types"
-import { ProcessedContent } from "../vfile"
-
-export class ContentPage extends QuartzEmitterPlugin {
-  name = "ContentPage"
-  async emit(content: ProcessedContent[], emit: EmitCallback): Promise<string[]> {
-    const fps: string[] = []
-    for (const [tree, file] of content) {
-      const pathToRoot = resolveToRoot(file.data.slug!)
-
-      const fp = file.data.slug + ".html"
-      await emit({
-        title: file.data.frontmatter?.title ?? "Untitled",
-        description: file.data.description ?? "",
-        slug: file.data.slug!,
-        ext: ".html",
-      })
-
-      // TODO: process aliases
-
-      fps.push(fp)
-    }
-    return fps
-  }
-}
--- a/quartz/plugins/emitters/contentPage.tsx
+++ b/quartz/plugins/emitters/contentPage.tsx
@@ -0,0 +1,62 @@
+import { toJsxRuntime } from "hast-util-to-jsx-runtime"
+import { resolveToRoot } from "../../path"
+import { StaticResources } from "../../resources"
+import { EmitCallback, QuartzEmitterPlugin } from "../types"
+import { ProcessedContent } from "../vfile"
+import { Fragment, jsx, jsxs } from 'preact/jsx-runtime'
+import { render } from "preact-render-to-string"
+import { ComponentType } from "preact"
+import { HeadProps } from "../../components/Head"
+
+interface Options {
+  Head: ComponentType<HeadProps>
+}
+
+export class ContentPage extends QuartzEmitterPlugin {
+  name = "ContentPage"
+  opts: Options
+
+  constructor(opts: Options) {
+    super()
+    this.opts = opts
+  }
+
+  async emit(content: ProcessedContent[], resources: StaticResources, emit: EmitCallback): Promise<string[]> {
+    const fps: string[] = []
+    for (const [tree, file] of content) {
+
+      // @ts-ignore (preact makes it angry)
+      const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
+
+      const { Head } = this.opts
+      const doc = <html>
+        <Head
+          title={file.data.frontmatter?.title ?? "Untitled"}
+          description={file.data.description ?? "No description provided"}
+          slug={file.data.slug!}
+          externalResources={resources} />
+        <body>
+          <div id="quartz-root">
+            <header>
+              <h1>{file.data.frontmatter?.title}</h1>
+            </header>
+            <article>
+              {content}
+            </article>
+          </div>
+        </body>
+        {resources.js.filter(resource => resource.loadTime === "afterDOMReady").map(resource => <script key={resource.src} src={resource.src} />)}
+      </html>
+
+      const fp = file.data.slug + ".html"
+      await emit({
+        content: "<!DOCTYPE html>\n" + render(doc),
+        slug: file.data.slug!,
+        ext: ".html",
+      })
+
+      fps.push(fp)
+    }
+    return fps
+  }
+}