feat: cursor chat

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

quartz.config.ts

@@ -6,6 +6,7 @@ const config: QuartzConfig = {
     pageTitle: "🪴 Quartz 4.0",
     enableSPA: true,
     enablePopovers: true,
+    enableCursorChat: false,
     analytics: {
       provider: "plausible",
     },

quartz/cfg.ts

@@ -26,6 +26,8 @@ export interface GlobalConfiguration {
   enableSPA: boolean
   /** Whether to display Wikipedia-style popovers when hovering over links */
   enablePopovers: boolean
+  /** Whether to enable cursor-chat */
+  enableCursorChat: boolean
   /** Analytics mode */
   analytics: Analytics
   /** Glob patterns to not search */

quartz/components/renderPage.tsx

@@ -235,6 +235,11 @@ export function renderPage(
           </Body>
           <Footer {...componentData} />
         </div>
+        {cfg.enableCursorChat && (
+          <div id="cursor-chat-layer">
+            <input type="text" id="cursor-chat-box" />
+          </div>
+        )}
       </body>
       {pageResources.js
         .filter((resource) => resource.loadTime === "afterDOMReady")

quartz/plugins/emitters/componentResources.ts

@@ -138,6 +138,21 @@ function addGlobalPageResources(
     `)
   }
 
+  if (cfg.enableCursorChat) {
+    staticResources.css.push("https://unpkg.com/cursor-chat/dist/style.css")
+    staticResources.js.push({
+      script: `
+      document.addEventListener('nav', async () => {
+      const chat = await import('https://esm.sh/cursor-chat')
+      chat.initCursorChat("quartz-room")
+      })
+    `,
+      loadTime: "afterDOMReady",
+      moduleType: "module",
+      contentType: "inline",
+    })
+  }
+
   let wsUrl = `ws://localhost:${ctx.argv.wsPort}`
 
   if (ctx.argv.remoteDevHost) {
@@ -186,7 +201,7 @@ export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<
 
       addGlobalPageResources(ctx, resources, componentResources)
 
-      const stylesheet = joinStyles(ctx.cfg.configuration.theme, ...componentResources.css, styles)
+      const stylesheet = joinStyles(ctx.cfg.configuration, ...componentResources.css, styles)
       const [prescript, postscript] = await Promise.all([
         joinScripts(componentResources.beforeDOMLoaded),
         joinScripts(componentResources.afterDOMLoaded),

quartz/util/theme.ts

@@ -1,3 +1,5 @@
+import { GlobalConfiguration } from "../cfg"
+
 export interface ColorScheme {
   light: string
   lightgray: string
@@ -30,8 +32,20 @@ export function googleFontHref(theme: Theme) {
   return `https://fonts.googleapis.com/css2?family=${code}&family=${header}:wght@400;700&family=${body}:ital,wght@0,400;0,600;1,400;1,600&display=swap`
 }
 
-export function joinStyles(theme: Theme, ...stylesheet: string[]) {
+export function joinStyles(cfg: GlobalConfiguration, ...stylesheet: string[]) {
+  const theme = cfg.theme
   return `
+${
+  cfg.enableCursorChat &&
+  `
+input#cursor-chat-box {
+  outline: none;
+  background-color: var(--light);
+  font-family: "${cfg.theme.typography.body}", ${DEFAULT_SANS_SERIF} !important;
+}
+`
+}
+
 ${stylesheet.join("\n\n")}
 
 :root {