From 91a0c3e0b4cbf6db0c6addd8e8d6b498d16af433 Mon Sep 17 00:00:00 2001
From: Ben Schlegel <ben5.schlegel@gmail.com>
Date: Fri, 22 Sep 2023 17:00:17 +0200
Subject: [PATCH] perf: memoize fonts

---
 quartz/components/Head.tsx | 24 ++++++++----------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index 4bca972f7..946231ffe 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -1,7 +1,7 @@
 import { FullSlug, _stripSlashes, joinSegments, pathToRoot } from "../util/path"
 import { JSResourceToScriptElement } from "../util/resources"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
-import satori from "satori"
+import satori, { SatoriOptions } from "satori"
 import * as fs from "fs"
 import { getSatoriFont } from "../util/fonts"
 import { GlobalConfiguration } from "../cfg"
@@ -20,12 +20,12 @@ async function generateSocialImage(
   title: string,
   description: string,
   fileName: string,
-  headerFontName: string,
-  bodyFontName: string,
+  fontsPromise: Promise<SatoriOptions["fonts"]>,
   cfg: GlobalConfiguration,
   colorScheme: "lightMode" | "darkMode",
 ) {
-  const fonts = await getSatoriFont(headerFontName, bodyFontName)
+  const fonts = await fontsPromise
+
   // How many characters are allowed before switching to smaller font
   const fontBreakPoint = 22
   const useSmallerFont = title.length > fontBreakPoint
@@ -109,25 +109,17 @@ const extension = "webp"
 
 const imageDir = "public/static/social-images"
 export default (() => {
-  let font: Promise<ArrayBuffer | undefined>
+  let fontsPromise: Promise<SatoriOptions["fonts"]>
   function Head({ cfg, fileData, externalResources }: QuartzComponentProps) {
-    if (!font) {
-      // font = getSatoriFont(cfg.theme.typography.header)
+    if (!fontsPromise) {
+      fontsPromise = getSatoriFont(cfg.theme.typography.header, cfg.theme.typography.body)
     }
     const slug = fileData.filePath
     const filePath = slug?.replaceAll("/", "-")
     const title = fileData.frontmatter?.title ?? "Untitled"
     const description = fileData.description?.trim() ?? "No description provided"
 
-    generateSocialImage(
-      title,
-      description,
-      filePath as string,
-      cfg.theme.typography.header,
-      cfg.theme.typography.body,
-      cfg,
-      "lightMode",
-    )
+    generateSocialImage(title, description, filePath as string, fontsPromise, cfg, "lightMode")
 
     if (!fs.existsSync(imageDir)) {
       fs.mkdirSync(imageDir, { recursive: true })