From 8dd73704e6e95254d2addf51fede6329f90796b8 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sat, 22 Jul 2023 23:06:36 +0000
Subject: [PATCH] hot content reload

---
 quartz/processors/emit.ts |   42 +++++++++++++++++++++++++++---------------
 1 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/quartz/processors/emit.ts b/quartz/processors/emit.ts
index 59875f5..2b9fe92 100644
--- a/quartz/processors/emit.ts
+++ b/quartz/processors/emit.ts
@@ -5,9 +5,8 @@
 import { ComponentResources, emitComponentResources, getComponentResources, getStaticResourcesFromPlugins } from "../plugins"
 import { EmitCallback } from "../plugins/types"
 import { ProcessedContent } from "../plugins/vfile"
-import { QUARTZ, slugify } from "../path"
+import { FilePath, QUARTZ, slugifyFilePath } from "../path"
 import { globbyStream } from "globby"
-import chalk from "chalk"
 
 // @ts-ignore
 import spaRouterScript from '../components/scripts/spa.inline'
@@ -19,8 +18,9 @@
 import { StaticResources } from "../resources"
 import { QuartzLogger } from "../log"
 import { googleFontHref } from "../theme"
+import { trace } from "../trace"
 
-function addGlobalPageResources(cfg: GlobalConfiguration, staticResources: StaticResources, componentResources: ComponentResources) {
+function addGlobalPageResources(cfg: GlobalConfiguration, reloadScript: boolean, staticResources: StaticResources, componentResources: ComponentResources) {
   staticResources.css.push(googleFontHref(cfg.theme))
 
   // popovers
@@ -63,15 +63,26 @@
       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(contentFolder: string, output: string, cfg: QuartzConfig, content: ProcessedContent[], verbose: boolean) {
+export async function emitContent(contentFolder: string, output: string, cfg: QuartzConfig, content: ProcessedContent[], reloadScript: boolean, verbose: boolean) {
   const perf = new PerfTimer()
   const log = new QuartzLogger(verbose)
 
   log.start(`Emitting output files`)
   const emit: EmitCallback = async ({ slug, ext, content }) => {
-    const pathToPage = path.join(output, slug + ext)
+    const pathToPage = path.join(output, slug + ext) as FilePath
     const dir = path.dirname(pathToPage)
     await fs.promises.mkdir(dir, { recursive: true })
     await fs.promises.writeFile(pathToPage, content)
@@ -87,18 +98,18 @@
   // 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(cfg.configuration, staticResources, componentResources)
+  addGlobalPageResources(cfg.configuration, reloadScript, staticResources, componentResources)
 
-  // emit in one go
+  let emittedFiles = 0
   const emittedResources = await emitComponentResources(cfg.configuration, componentResources, emit)
   if (verbose) {
     for (const file of emittedResources) {
+      emittedFiles += 1
       console.log(`[emit:Resources] ${file}`)
     }
   }
 
   // emitter plugins
-  let emittedFiles = 0
   for (const emitter of cfg.plugins.emitters) {
     try {
       const emitted = await emitter.emit(contentFolder, cfg.configuration, content, staticResources, emit)
@@ -110,7 +121,7 @@
         }
       }
     } catch (err) {
-      console.log(chalk.red(`Failed to emit from plugin \`${emitter.name}\`: `) + err)
+      trace(`Failed to emit from plugin \`${emitter.name}\``, err as Error)
       process.exit(1)
     }
   }
@@ -123,15 +134,16 @@
 
   // glob all non MD/MDX/HTML files in content folder and copy it over
   const assetsPath = path.join(output, "assets")
-  for await (const fp of globbyStream("**", {
+  for await (const rawFp of globbyStream("**", {
     ignore: ["**/*.md"],
     cwd: contentFolder,
   })) {
-    const ext = path.extname(fp as string)
-    const src = path.join(contentFolder, fp as string)
-    const name = slugify(fp as string) + ext
-    const dest = path.join(assetsPath, name)
-    const dir = path.dirname(dest)
+    const fp = rawFp as FilePath
+    const ext = path.extname(fp)
+    const src = path.join(contentFolder, fp) as FilePath
+    const name = slugifyFilePath(fp as FilePath) + ext as FilePath
+    const dest = path.join(assetsPath, name) as FilePath
+    const dir = path.dirname(dest) as FilePath
     await fs.promises.mkdir(dir, { recursive: true }) // ensure dir exists
     await fs.promises.copyFile(src, dest)
     emittedFiles += 1

--
Gitblit v1.10.0