docs: Clarifications in the Explorer Docs (#938)

kon-foo

2024-02-26 b9dee0775cda4bb29da1a5fb5b000ddcd4dc1f6e

 quartz/plugins/emitters/componentResources.ts

@@ -14,6 +14,7 @@
import { Features, transform } from "lightningcss"
import { transform as transpile } from "esbuild"
import { write } from "./helpers"
import DepGraph from "../../depgraph"

type ComponentResources = {
  css: string[]
@@ -119,7 +120,7 @@
  } else if (cfg.analytics?.provider === "umami") {
    componentResources.afterDOMLoaded.push(`
      const umamiScript = document.createElement("script")
      umamiScript.src = ${cfg.analytics.host} ?? "https://analytics.umami.is/script.js"
      umamiScript.src = "${cfg.analytics.host}" ?? "https://analytics.umami.is/script.js"
      umamiScript.setAttribute("data-website-id", "${cfg.analytics.websiteId}")
      umamiScript.async = true

@@ -149,9 +150,10 @@
      loadTime: "afterDOMReady",
      contentType: "inline",
      script: `
        const socket = new WebSocket('${wsUrl}')
        socket.addEventListener('message', () => document.location.reload())
      `,
          const socket = new WebSocket('${wsUrl}')
          // reload(true) ensures resources like images and scripts are fetched again in firefox
          socket.addEventListener('message', () => document.location.reload(true))
        `,
    })
  }
}
@@ -171,15 +173,29 @@
    getQuartzComponents() {
      return []
    },
    async getDependencyGraph(ctx, content, _resources) {
      // This emitter adds static resources to the `resources` parameter. One
      // important resource this emitter adds is the code to start a websocket
      // connection and listen to rebuild messages, which triggers a page reload.
      // The resources parameter with the reload logic is later used by the
      // ContentPage emitter while creating the final html page. In order for
      // the reload logic to be included, and so for partial rebuilds to work,
      // we need to run this emitter for all markdown files.
      const graph = new DepGraph<FilePath>()

      for (const [_tree, file] of content) {
        const sourcePath = file.data.filePath!
        const slug = file.data.slug!
        graph.addEdge(sourcePath, joinSegments(ctx.argv.output, slug + ".html") as FilePath)
      }

      return graph
    },
    async emit(ctx, _content, resources): Promise<FilePath[]> {
      const promises: Promise<FilePath>[] = []
      const cfg = ctx.cfg.configuration
      // component specific scripts and styles
      const componentResources = getComponentResources(ctx)
      // 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

      let googleFontsStyleSheet = ""
      if (fontOrigin === "local") {
        // let the user do it themselves in css
@@ -201,7 +217,10 @@
            // the static name of this file.
            const [filename, ext] = url.split("/").pop()!.split(".")

            googleFontsStyleSheet = googleFontsStyleSheet.replace(url, `/fonts/${filename}.ttf`)
            googleFontsStyleSheet = googleFontsStyleSheet.replace(
              url,
              `/static/fonts/${filename}.ttf`,
            )

            promises.push(
              fetch(url)
@@ -214,7 +233,7 @@
                .then((buf) =>
                  write({
                    ctx,
                    slug: joinSegments("fonts", filename) as FullSlug,
                    slug: joinSegments("static", "fonts", filename) as FullSlug,
                    ext: `.${ext}`,
                    content: Buffer.from(buf),
                  }),
@@ -224,12 +243,15 @@
        }
      }

      // 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, resources, componentResources)

      const stylesheet = joinStyles(
        ctx.cfg.configuration.theme,
        ...componentResources.css,
        googleFontsStyleSheet,
        ...componentResources.css,
        styles,
      )
      const [prescript, postscript] = await Promise.all([