From fa6c02d3213dfd4e6da8e78bd3a2e7004555fd01 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Wed, 24 Jan 2024 01:08:56 +0000
Subject: [PATCH] fix: make search result card block

---
 quartz/plugins/emitters/componentResources.ts |   71 ++++++++++++++++++++++++++---------
 1 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/quartz/plugins/emitters/componentResources.ts b/quartz/plugins/emitters/componentResources.ts
index c52a3a2..f92c0a9 100644
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/quartz/plugins/emitters/componentResources.ts
@@ -4,16 +4,16 @@
 // @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 styles from "../../styles/base.scss"
+import styles from "../../styles/custom.scss"
 import popoverStyle from "../../components/styles/popover.scss"
 import { BuildCtx } from "../../util/ctx"
 import { StaticResources } from "../../util/resources"
 import { QuartzComponent } from "../../components/types"
 import { googleFontHref, joinStyles } from "../../util/theme"
 import { Features, transform } from "lightningcss"
+import { transform as transpile } from "esbuild"
+import { write } from "./helpers"
 
 type ComponentResources = {
   css: string[]
@@ -56,9 +56,16 @@
   }
 }
 
-function joinScripts(scripts: string[]): string {
+async function joinScripts(scripts: string[]): Promise<string> {
   // wrap with iife to prevent scope collision
-  return scripts.map((script) => `(function () {${script}})();`).join("\n")
+  const script = scripts.map((script) => `(function () {${script}})();`).join("\n")
+
+  // minify with esbuild
+  const res = await transpile(script, {
+    minify: true,
+  })
+
+  return res.code
 }
 
 function addGlobalPageResources(
@@ -85,17 +92,39 @@
     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\`, {
+      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)
+    const plausibleHost = cfg.analytics.host ?? "https://plausible.io"
+    componentResources.afterDOMLoaded.push(`
+      const plausibleScript = document.createElement("script")
+      plausibleScript.src = "${plausibleHost}/js/script.manual.js"
+      plausibleScript.setAttribute("data-domain", location.hostname)
+      plausibleScript.defer = true
+      document.head.appendChild(plausibleScript)
+
+      window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }
+
+      document.addEventListener("nav", () => {
+        plausible("pageview")
+      })
+    `)
+  } else if (cfg.analytics?.provider === "umami") {
+    componentResources.afterDOMLoaded.push(`
+      const umamiScript = document.createElement("script")
+      umamiScript.src = "https://analytics.umami.is/script.js"
+      umamiScript.setAttribute("data-website-id", "${cfg.analytics.websiteId}")
+      umamiScript.async = true
+
+      document.head.appendChild(umamiScript)
+    `)
   }
 
   if (cfg.enableSPA) {
@@ -140,7 +169,7 @@
     getQuartzComponents() {
       return []
     },
-    async emit(ctx, _content, resources, emit): Promise<FilePath[]> {
+    async emit(ctx, _content, resources): Promise<FilePath[]> {
       // component specific scripts and styles
       const componentResources = getComponentResources(ctx)
       // important that this goes *after* component scripts
@@ -155,11 +184,15 @@
 
       addGlobalPageResources(ctx, resources, componentResources)
 
-      const stylesheet = joinStyles(ctx.cfg.configuration.theme, styles, ...componentResources.css)
-      const prescript = joinScripts(componentResources.beforeDOMLoaded)
-      const postscript = joinScripts(componentResources.afterDOMLoaded)
+      const stylesheet = joinStyles(ctx.cfg.configuration.theme, ...componentResources.css, styles)
+      const [prescript, postscript] = await Promise.all([
+        joinScripts(componentResources.beforeDOMLoaded),
+        joinScripts(componentResources.afterDOMLoaded),
+      ])
+
       const fps = await Promise.all([
-        emit({
+        write({
+          ctx,
           slug: "index" as FullSlug,
           ext: ".css",
           content: transform({
@@ -176,12 +209,14 @@
             include: Features.MediaQueries,
           }).code.toString(),
         }),
-        emit({
+        write({
+          ctx,
           slug: "prescript" as FullSlug,
           ext: ".js",
           content: prescript,
         }),
-        emit({
+        write({
+          ctx,
           slug: "postscript" as FullSlug,
           ext: ".js",
           content: postscript,

--
Gitblit v1.10.0