make component resources a proper emitter

Jacky Zhao

2023-07-24 4811500b1b9c169aac82254d771677cd6dc2a86c

 quartz/processors/emit.ts

@@ -1,89 +1,14 @@
import path from "path"
import fs from "fs"
import { PerfTimer } from "../perf"
import {
  ComponentResources,
  emitComponentResources,
  getComponentResources,
  getStaticResourcesFromPlugins,
} from "../plugins"
import { getStaticResourcesFromPlugins } from "../plugins"
import { EmitCallback } from "../plugins/types"
import { ProcessedContent } from "../plugins/vfile"
import { FilePath } from "../path"

// @ts-ignore
import spaRouterScript from "../components/scripts/spa.inline"
// @ts-ignore
import plausibleScript from "../components/scripts/plausible.inline"
// @ts-ignore
import popoverScript from "../components/scripts/popover.inline"
import popoverStyle from "../components/styles/popover.scss"
import { StaticResources } from "../resources"
import { QuartzLogger } from "../log"
import { googleFontHref } from "../theme"
import { trace } from "../trace"
import { BuildCtx } from "../ctx"

function addGlobalPageResources(
  ctx: BuildCtx,
  staticResources: StaticResources,
  componentResources: ComponentResources,
) {
  const cfg = ctx.cfg.configuration
  const reloadScript = ctx.argv.serve
  staticResources.css.push(googleFontHref(cfg.theme))

  // popovers
  if (cfg.enablePopovers) {
    componentResources.afterDOMLoaded.push(popoverScript)
    componentResources.css.push(popoverStyle)
  }

  if (cfg.analytics?.provider === "google") {
    const tagId = cfg.analytics.tagId
    staticResources.js.push({
      src: `https://www.googletagmanager.com/gtag/js?id=${tagId}`,
      contentType: "external",
      loadTime: "afterDOMReady",
    })
    componentResources.afterDOMLoaded.push(`
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag(\`js\`, new Date());
    gtag(\`config\`, \`${tagId}\`, { send_page_view: false });

    document.addEventListener(\`nav\`, () => {
      gtag(\`event\`, \`page_view\`, {
        page_title: document.title,
        page_location: location.href,
      });
    });`)
  } else if (cfg.analytics?.provider === "plausible") {
    componentResources.afterDOMLoaded.push(plausibleScript)
  }

  // spa
  if (cfg.enableSPA) {
    componentResources.afterDOMLoaded.push(spaRouterScript)
  } else {
    componentResources.afterDOMLoaded.push(`
      window.spaNavigate = (url, _) => window.location.assign(url)
      const event = new CustomEvent("nav", { detail: { slug: document.body.dataset.slug } })
      document.dispatchEvent(event)`)
  }

  if (reloadScript) {
    staticResources.js.push({
      loadTime: "afterDOMReady",
      contentType: "inline",
      script: `
        const socket = new WebSocket('ws://localhost:3001')
        socket.addEventListener('message', () => document.location.reload())
      `,
    })
  }
}

export async function emitContent(ctx: BuildCtx, content: ProcessedContent[]) {
  const { argv, cfg } = ctx
  const perf = new PerfTimer()
@@ -98,27 +23,8 @@
    return pathToPage
  }

  // initialize from plugins
  const staticResources = getStaticResourcesFromPlugins(cfg.plugins)

  // component specific scripts and styles
  const componentResources = getComponentResources(cfg.plugins)

  // important that this goes *after* component scripts
  // as the "nav" event gets triggered here and we should make sure
  // that everyone else had the chance to register a listener for it
  addGlobalPageResources(ctx, staticResources, componentResources)

  let emittedFiles = 0
  const emittedResources = await emitComponentResources(cfg.configuration, componentResources, emit)
  if (argv.verbose) {
    for (const file of emittedResources) {
      emittedFiles += 1
      console.log(`[emit:Resources] ${file}`)
    }
  }

  // emitter plugins
  const staticResources = getStaticResourcesFromPlugins(cfg.plugins)
  for (const emitter of cfg.plugins.emitters) {
    try {
      const emitted = await emitter.emit(ctx, content, staticResources, emit)