fix: prerender fonts

Author: harlan-zw

src/runtime/core/font/cache.ts

@@ -0,0 +1 @@
+export const fontCache: Record<string, any> = {}

src/runtime/core/font/fetch.ts

@@ -0,0 +1,40 @@
+import { Buffer } from 'node:buffer'
+import type { H3Event } from 'h3'
+import type { FontConfig } from '../../types'
+import { base64ToArrayBuffer } from '../env/assets'
+import { fontCache } from './cache'
+import { useStorage } from '#imports'
+
+export async function loadFont(e: H3Event, font: FontConfig) {
+  const fontKey = `${font.name}:${font.weight}`
+  const storageKey = `assets:nuxt-og-image:font:${fontKey}`
+  if (fontCache[fontKey])
+    return fontCache[fontKey]
+
+  // fetch local inter
+  const [name, weight] = fontKey.split(':')
+
+  let data: ArrayBuffer | undefined
+  // check cache first
+  if (await useStorage().hasItem(storageKey))
+    data = base64ToArrayBuffer(await useStorage().getItem<ArrayBuffer>(storageKey))
+  // fetch local fonts
+  if (!data) {
+    if (font.path) {
+      data = await e.$fetch(font.path, {
+        baseURL: useNitroOrigin(e).replace('https', 'http'),
+        responseType: 'arrayBuffer',
+      })
+    }
+    else {
+      data = await e.$fetch(`/__og-image__/font/${name}/${weight}.ttf`, {
+        responseType: 'arrayBuffer',
+      })
+    }
+  }
+
+  fontCache[fontKey] = { name, weight: Number(weight), data, style: 'normal' }
+  await useStorage().setItem(storageKey, Buffer.from(data).toString('base64'))
+  // convert data to string
+  return fontCache[fontKey]
+}

src/runtime/server/routes/__og-image__/font-[name]-[weight].[extension].ts

@@ -0,0 +1,42 @@
+import { createError, defineEventHandler, proxyRequest, sendRedirect } from 'h3'
+import { parseURL } from 'ufo'
+
+// copied from vercel/satori
+export default defineEventHandler(async (e) => {
+  const path = parseURL(e.path).pathname
+
+  // path will be like this: /__og-image__/font/<name>/<weight>.ttf
+  const [name, weight] = path.split('/font/')[1].split('.')[0].split('/')
+
+  if (!name || !weight)
+    return 'Provide a font name and weight'
+
+  // using H3Event $fetch will cause the request headers not to be sent
+  const css = await globalThis.$fetch(`https://fonts.googleapis.com/css2?family=${name}:wght@${weight}`, {
+    headers: {
+      // Make sure it returns TTF.
+      'User-Agent':
+          'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1',
+    },
+  })
+  if (!css) {
+    return createError({
+      statusCode: 500,
+      statusMessage: `Invalid Google Font ${name}:${weight}`,
+    })
+  }
+
+  const ttfResource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/)
+  if (ttfResource?.[1])
+    return proxyRequest(e, ttfResource[1], {})
+
+  // try woff2
+  const woff2Resource = css.match(/src: url\((.+)\) format\('woff2'\)/)
+  if (woff2Resource?.[1])
+    return sendRedirect(e, woff2Resource[1])
+
+  return createError({
+    statusCode: 500,
+    statusMessage: `Malformed Google Font CSS ${css}`,
+  })
+})