From 9c8fec06d2b58e4e3bbe280ddc665a99fcc4878c Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sun, 09 Mar 2025 22:33:15 +0000
Subject: [PATCH] feat: support non-singleton search

---
 quartz/components/Head.tsx |   30 ++++++++++++++++++------------
 1 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index 1aa8cbe..b6a7e8d 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -1,7 +1,7 @@
 import { i18n } from "../i18n"
 import { FullSlug, joinSegments, pathToRoot } from "../util/path"
 import { CSSResourceToStyleElement, JSResourceToScriptElement } from "../util/resources"
-import { googleFontHref } from "../util/theme"
+import { getFontSpecificationName, googleFontHref } from "../util/theme"
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import satori, { SatoriOptions } from "satori"
 import { loadEmoji, getIconCode } from "../util/emoji"
@@ -29,15 +29,12 @@
     width,
     height,
     fonts,
-    // `code` will be the detected language code, `emoji` if it's an Emoji, or `unknown` if not able to tell.
-    // `segment` will be the content to render.
-    loadAdditionalAsset: async (code: string, segment: string) => {
-      if (code === "emoji") {
-        // if segment is an emoji, load the image.
-        return `data:image/svg+xml;base64,${btoa(await loadEmoji("twemoji", getIconCode(segment)))}`
+    loadAdditionalAsset: async (languageCode: string, segment: string) => {
+      if (languageCode === "emoji") {
+        return `data:image/svg+xml;base64,${btoa(await loadEmoji(getIconCode(segment)))}`
       }
-      // if segment is normal text
-      return code
+
+      return languageCode
     },
   })
 
@@ -80,7 +77,9 @@
 
     // Memoize google fonts
     if (!fontsPromise && cfg.generateSocialImages) {
-      fontsPromise = getSatoriFont(cfg.theme.typography.header, cfg.theme.typography.body)
+      const headerFont = getFontSpecificationName(cfg.theme.typography.header)
+      const bodyFont = getFontSpecificationName(cfg.theme.typography.body)
+      fontsPromise = getSatoriFont(headerFont, bodyFont)
     }
 
     const slug = fileData.filePath
@@ -130,7 +129,7 @@
       }
     }
 
-    const { css, js } = externalResources
+    const { css, js, additionalHead } = externalResources
 
     const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)
     const path = url.pathname as FullSlug
@@ -180,7 +179,7 @@
             <link rel="stylesheet" href={googleFontHref(cfg.theme)} />
           </>
         )}
-        <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossOrigin={"anonymous"} />
+        <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossOrigin="anonymous" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         {/* OG/Twitter meta tags */}
         <meta name="og:site_name" content={cfg.pageTitle}></meta>
@@ -216,6 +215,13 @@
         {js
           .filter((resource) => resource.loadTime === "beforeDOMReady")
           .map((res) => JSResourceToScriptElement(res, true))}
+        {additionalHead.map((resource) => {
+          if (typeof resource === "function") {
+            return resource(fileData)
+          } else {
+            return resource
+          }
+        })}
       </head>
     )
   }

--
Gitblit v1.10.0