From b9dee0775cda4bb29da1a5fb5b000ddcd4dc1f6e Mon Sep 17 00:00:00 2001
From: kon-foo <25391223+kon-foo@users.noreply.github.com>
Date: Mon, 26 Feb 2024 21:55:47 +0000
Subject: [PATCH] docs: Clarifications in the Explorer Docs (#938)

---
 quartz/plugins/emitters/componentResources.ts |   44 +++++++++++++++++++++++++++++++++-----------
 1 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/quartz/plugins/emitters/componentResources.ts b/quartz/plugins/emitters/componentResources.ts
index 4033bdf..0468416 100644
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/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([

--
Gitblit v1.10.0