refactor: clean font helpers, rename fonts helper

quartz/components/Head.tsx

@@ -3,7 +3,7 @@ import { JSResourceToScriptElement } from "../util/resources"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import satori, { SatoriOptions } from "satori"
 import * as fs from "fs"
-import { getSatoriFont } from "../util/fonts"
+import { getSatoriFont } from "../util/imageHelper"
 import { GlobalConfiguration } from "../cfg"
 import sharp from "sharp"
 
@@ -19,8 +19,7 @@ export type SocialImageOptions = {
  * @param title what title to use
  * @param description what description to use
  * @param fileName what fileName to use when writing to disk
- * @param headerFontName name of font to use for header (must be google font)
- * @param bodyFontName name of font to use for body (must be google font)
+ * @param fontsPromise header + body font to be used when generating satori image (as promise to work around sync in component)
  * @param cfg `GlobalConfiguration` of quartz
  */
 async function generateSocialImage(

quartz/util/fonts.ts

@@ -1,38 +0,0 @@
-import { FontWeight, SatoriOptions } from "satori/wasm"
-
-/**
- * Get an array of `FontOptions` (for satori) given google font names
- * @param headerFontName name of google font used for header
- * @param bodyFontName name of google font used for body
- * @returns FontOptions for header and body
- */
-export async function getSatoriFont(headerFontName: string, bodyFontName: string) {
-  const headerFont = await fetchTtf(headerFontName, 700)
-  const bodyFont = await fetchTtf(bodyFontName, 400)
-
-  const fonts: SatoriOptions["fonts"] = [headerFont, bodyFont]
-  return fonts
-}
-
-function fetchTtf(
-  fontName: string,
-  weight: FontWeight,
-): Promise<GetElementType<SatoriOptions["fonts"]>> {
-  return new Promise(async (resolve, reject) => {
-    const css = await (
-      await fetch(`https://fonts.googleapis.com/css?family=${fontName}:${weight}`)
-    ).text()
-    const urlRegex = /url\((https:\/\/fonts.gstatic.com\/s\/.*?.ttf)\)/g
-    const match = urlRegex.exec(css)
-    if (match) {
-      // fontData is an ArrayBuffer containing the .ttf file data
-      const fontTtf = await (await fetch(match[1])).arrayBuffer()
-      resolve({ name: fontName, data: fontTtf, weight: weight as FontWeight, style: "normal" })
-    } else {
-      reject("Could not fetch font")
-    }
-  })
-}
-
-// Type helper
-type GetElementType<T extends any[]> = T extends (infer U)[] ? U : never

quartz/util/imageHelper.ts

@@ -0,0 +1,49 @@
+import { FontWeight, SatoriOptions } from "satori/wasm"
+
+/**
+ * Get an array of `FontOptions` (for satori) given google font names
+ * @param headerFontName name of google font used for header
+ * @param bodyFontName name of google font used for body
+ * @returns FontOptions for header and body
+ */
+export async function getSatoriFont(headerFontName: string, bodyFontName: string) {
+  const headerWeight = 700 as FontWeight
+  const bodyWeight = 400 as FontWeight
+
+  // Fetch fonts
+  const headerFont = await fetchTtf(headerFontName, headerWeight)
+  const bodyFont = await fetchTtf(bodyFontName, bodyWeight)
+
+  // Convert fonts to satori font format and return
+  const fonts: SatoriOptions["fonts"] = [
+    { name: headerFontName, data: headerFont, weight: headerWeight, style: "normal" },
+    { name: bodyFontName, data: bodyFont, weight: bodyWeight, style: "normal" },
+  ]
+  return fonts
+}
+
+/**
+ * Get the `.ttf` file of a google font
+ * @param fontName name of google font
+ * @param weight what font weight to fetch font
+ * @returns `.ttf` file of google font
+ */
+function fetchTtf(fontName: string, weight: FontWeight): Promise<ArrayBuffer> {
+  return new Promise(async (resolve, reject) => {
+    // Get css file from google fonts
+    const css = await (
+      await fetch(`https://fonts.googleapis.com/css?family=${fontName}:${weight}`)
+    ).text()
+
+    // Extract .ttf url from css file
+    const urlRegex = /url\((https:\/\/fonts.gstatic.com\/s\/.*?.ttf)\)/g
+    const match = urlRegex.exec(css)
+    if (match) {
+      // fontData is an ArrayBuffer containing the .ttf file data
+      const fontData = await (await fetch(match[1])).arrayBuffer()
+      resolve(fontData)
+    } else {
+      reject("Could not fetch font")
+    }
+  })
+}