inline scripts

2023-06-03 15:07:19 -04:00
parent 894c7ff4e7
commit 7b5df46f1c
19 changed files with 187 additions and 69 deletions
--- a/quartz/plugins/emitters/contentPage.tsx
+++ b/quartz/plugins/emitters/contentPage.tsx
@@ -4,17 +4,15 @@ 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"
-import { googleFontHref, templateThemeStyles } from "../../theme"
 import { GlobalConfiguration } from "../../cfg"
 import { HeaderProps } from "../../components/Header"
-
-import styles from '../../styles/base.scss'
+import { QuartzComponent } from "../../components/types"
+import { resolveToRoot } from "../../path"

 interface Options {
-  Head: ComponentType<HeadProps>
-  Header: ComponentType<HeaderProps>
+  Head: QuartzComponent<HeadProps>
+  Header: QuartzComponent<HeaderProps>
 }

 export class ContentPage extends QuartzEmitterPlugin {
@@ -26,40 +24,45 @@ export class ContentPage extends QuartzEmitterPlugin {
    this.opts = opts
  }

+  getQuartzComponents(): QuartzComponent<any>[] {
+    return [...Object.values(this.opts)]
+  }
+
  async emit(cfg: GlobalConfiguration, content: ProcessedContent[], resources: StaticResources, emit: EmitCallback): Promise<string[]> {
    const fps: string[] = []

-    // emit styles
-    emit({
-      slug: "index",
-      ext: ".css",
-      content: templateThemeStyles(cfg.theme, styles)
-    })
-    fps.push("index.css")
-    resources.css.push(googleFontHref(cfg.theme))
-
+    const { Head, Header } = this.opts
    for (const [tree, file] of content) {
      // @ts-ignore (preact makes it angry)
      const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })

+      const baseDir = resolveToRoot(file.data.slug!)
+      const pageResources: StaticResources = {
+        css: [baseDir + "/index.css", ...resources.css,],
+        js: [
+          { src: baseDir + "/prescript.js", loadTime: "beforeDOMReady", type: 'module' },
+          ...resources.js,
+          { src: baseDir + "/postscript.js", loadTime: "afterDOMReady", type: 'module' }
+        ]
+      }
+
      const title = file.data.frontmatter?.title
-      const { Head, Header } = this.opts
      const doc = <html>
-        <Head
+        <Head.Component
          title={title ?? "Untitled"}
          description={file.data.description ?? "No description provided"}
          slug={file.data.slug!}
-          externalResources={resources} />
+          externalResources={pageResources} />
        <body>
          <div id="quartz-root" class="page">
-            <Header title={cfg.siteTitle} slug={file.data.slug!} />
+            <Header.Component title={cfg.siteTitle} slug={file.data.slug!} />
            <article>
              {file.data.slug !== "index" && <h1>{title}</h1>}
              {content}
            </article>
          </div>
        </body>
-        {resources.js.filter(resource => resource.loadTime === "afterDOMReady").map(resource => <script key={resource.src} src={resource.src} />)}
+        {pageResources.js.filter(resource => resource.loadTime === "afterDOMReady").map(resource => <script key={resource.src} {...resource} />)}
      </html>

      const fp = file.data.slug + ".html"
--- a/quartz/plugins/index.ts
+++ b/quartz/plugins/index.ts
@@ -1,5 +1,69 @@
+import { GlobalConfiguration } from '../cfg'
+import { QuartzComponent } from '../components/types'
 import { StaticResources } from '../resources'
-import { PluginTypes } from './types'
+import { googleFontHref, joinStyles } from '../theme'
+import { EmitCallback, PluginTypes } from './types'
+import styles from '../styles/base.scss'
+
+export type ComponentResources = {
+  css: string[],
+  beforeDOMLoaded: string[],
+  afterDOMLoaded: string[]
+}
+
+function joinScripts(scripts: string[]): string {
+  return scripts.join("\n")
+}
+
+export function emitComponentResources(cfg: GlobalConfiguration, resources: StaticResources, plugins: PluginTypes, emit: EmitCallback) {
+  const fps: string[] = []
+  const allComponents: Set<QuartzComponent<any>> = new Set()
+  for (const emitter of plugins.emitters) {
+    const components = emitter.getQuartzComponents()
+    for (const component of components) {
+      allComponents.add(component)
+    }
+  }
+
+  const componentResources: ComponentResources = {
+    css: [],
+    beforeDOMLoaded: [],
+    afterDOMLoaded: []
+  }
+
+  for (const component of allComponents) {
+    const { css, beforeDOMLoaded, afterDOMLoaded } = component
+    if (css) {
+      componentResources.css.push(css)
+    }
+    if (beforeDOMLoaded) {
+      componentResources.beforeDOMLoaded.push(beforeDOMLoaded)
+    }
+    if (afterDOMLoaded) {
+      componentResources.beforeDOMLoaded.push(afterDOMLoaded)
+    }
+  }
+
+  emit({
+    slug: "index",
+    ext: ".css",
+    content: joinStyles(cfg.theme, styles, ...componentResources.css)
+  })
+  emit({
+    slug: "prescript",
+    ext: ".js",
+    content: joinScripts(componentResources.beforeDOMLoaded)
+  })
+  emit({
+    slug: "postscript",
+    ext: ".js",
+    content: joinScripts(componentResources.afterDOMLoaded)
+  })
+
+  fps.push("index.css", "prescript.js", "postscript.js")
+  resources.css.push(googleFontHref(cfg.theme))
+  return fps
+}

 export function getStaticResourcesFromPlugins(plugins: PluginTypes) {
  const staticResources: StaticResources = {
@@ -7,8 +71,8 @@ export function getStaticResourcesFromPlugins(plugins: PluginTypes) {
    js: [],
  }

-  for (const plugin of plugins.transformers) {
-    const res = plugin.externalResources
+  for (const transformer of plugins.transformers) {
+    const res = transformer.externalResources
    if (res?.js) {
      staticResources.js = staticResources.js.concat(res.js)
    }
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -12,7 +12,7 @@ export interface Options {

 const defaultOptions: Options = {
  highlight: true,
-  wikilinks: true
+  wikilinks: true,
 }

 export class ObsidianFlavoredMarkdown extends QuartzTransformerPlugin {
@@ -39,10 +39,10 @@ export class ObsidianFlavoredMarkdown extends QuartzTransformerPlugin {
        return (tree: Root, _file) => {
          findAndReplace(tree, backlinkRegex, (value: string, ...capture: string[]) => {
            if (value.startsWith("!")) {
-
+              // TODO: handle embeds
            } else {
              const [path, rawHeader, rawAlias] = capture
-              const anchor = rawHeader?.slice(1).trim() ?? ""
+              const anchor = rawHeader?.trim() ?? ""
              const alias = rawAlias?.slice(1).trim() ?? path
              const url = slugify(path.trim() + anchor)
              return {
--- a/quartz/plugins/types.ts
+++ b/quartz/plugins/types.ts
@@ -2,6 +2,7 @@ import { PluggableList } from "unified"
 import { StaticResources } from "../resources"
 import { ProcessedContent } from "./vfile"
 import { GlobalConfiguration } from "../cfg"
+import { QuartzComponent } from "../components/types"

 export abstract class QuartzTransformerPlugin {
  abstract name: string
@@ -25,6 +26,7 @@ export type EmitCallback = (data: EmitOptions) => Promise<string>
 export abstract class QuartzEmitterPlugin {
  abstract name: string
  abstract emit(cfg: GlobalConfiguration, content: ProcessedContent[], resources: StaticResources, emitCallback: EmitCallback): Promise<string[]>
+  abstract getQuartzComponents(): QuartzComponent<any>[]
 }

 export interface PluginTypes {