import path from "path" import fs from "fs" import { PerfTimer } from "../perf" import { ComponentResources, emitComponentResources, getComponentResources, 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 contentFolder = argv.directory const perf = new PerfTimer() const log = new QuartzLogger(ctx.argv.verbose) log.start(`Emitting output files`) const emit: EmitCallback = async ({ slug, ext, content }) => { const pathToPage = path.join(argv.output, slug + ext) as FilePath const dir = path.dirname(pathToPage) await fs.promises.mkdir(dir, { recursive: true }) await fs.promises.writeFile(pathToPage, content) 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 for (const emitter of cfg.plugins.emitters) { try { const emitted = await emitter.emit(ctx, content, staticResources, emit) emittedFiles += emitted.length if (ctx.argv.verbose) { for (const file of emitted) { console.log(`[emit:${emitter.name}] ${file}`) } } } catch (err) { trace(`Failed to emit from plugin \`${emitter.name}\``, err as Error) throw err } } log.end(`Emitted ${emittedFiles} files to \`${argv.output}\` in ${perf.timeSince()}`) }