From fd7c33c5372dd61283fc44f4dccbff0e71fcbf5b Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sun, 23 Jul 2023 18:19:15 +0000
Subject: [PATCH] style fixes for search bar and title on mobile

---
 quartz/processors/emit.ts |   73 ++++++++++++++++++++++++++----------
 1 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/quartz/processors/emit.ts b/quartz/processors/emit.ts
index 0276ad4..d056732 100644
--- a/quartz/processors/emit.ts
+++ b/quartz/processors/emit.ts
@@ -2,26 +2,35 @@
 import fs from "fs"
 import { GlobalConfiguration, QuartzConfig } from "../cfg"
 import { PerfTimer } from "../perf"
-import { ComponentResources, emitComponentResources, getComponentResources, getStaticResourcesFromPlugins } from "../plugins"
+import {
+  ComponentResources,
+  emitComponentResources,
+  getComponentResources,
+  getStaticResourcesFromPlugins,
+} from "../plugins"
 import { EmitCallback } from "../plugins/types"
 import { ProcessedContent } from "../plugins/vfile"
 import { FilePath, QUARTZ, slugifyFilePath } from "../path"
 import { globbyStream } from "globby"
-import chalk from "chalk"
 
 // @ts-ignore
-import spaRouterScript from '../components/scripts/spa.inline'
+import spaRouterScript from "../components/scripts/spa.inline"
 // @ts-ignore
-import plausibleScript from '../components/scripts/plausible.inline'
+import plausibleScript from "../components/scripts/plausible.inline"
 // @ts-ignore
-import popoverScript from '../components/scripts/popover.inline'
-import popoverStyle from '../components/styles/popover.scss'
+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"
 
-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
@@ -34,8 +43,8 @@
     const tagId = cfg.analytics.tagId
     staticResources.js.push({
       src: `https://www.googletagmanager.com/gtag/js?id=${tagId}`,
-      contentType: 'external',
-      loadTime: 'afterDOMReady',
+      contentType: "external",
+      loadTime: "afterDOMReady",
     })
     componentResources.afterDOMLoaded.push(`
     window.dataLayer = window.dataLayer || [];
@@ -48,8 +57,7 @@
         page_title: document.title,
         page_location: location.href,
       });
-    });`
-    )
+    });`)
   } else if (cfg.analytics?.provider === "plausible") {
     componentResources.afterDOMLoaded.push(plausibleScript)
   }
@@ -61,12 +69,29 @@
     componentResources.afterDOMLoaded.push(`
       window.spaNavigate = (url, _) => window.location.assign(url)
       const event = new CustomEvent("nav", { detail: { slug: document.body.dataset.slug } })
-      document.dispatchEvent(event)`
-    )
+      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)
 
@@ -85,24 +110,30 @@
   // 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 
+  // 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)
+      const emitted = await emitter.emit(
+        contentFolder,
+        cfg.configuration,
+        content,
+        staticResources,
+        emit,
+      )
       emittedFiles += emitted.length
 
       if (verbose) {
@@ -131,7 +162,7 @@
     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 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

--
Gitblit v1.10.0