chore: prefer unstorage driver for fonts

Author: harlan-zw

src/module.ts

@@ -1,5 +1,5 @@
 import * as fs from 'node:fs'
-import { readFile, writeFile } from 'node:fs/promises'
+import { readFile } from 'node:fs/promises'
 import {
   type AddComponentOptions,
   addComponent,
@@ -19,11 +19,13 @@ import type { SatoriOptions } from 'satori'
 import { installNuxtSiteConfig } from 'nuxt-site-config-kit'
 import { isDevelopment } from 'std-env'
 import { hash } from 'ohash'
-import { basename, join, relative } from 'pathe'
+import { basename, isAbsolute, join, relative } from 'pathe'
 import type { ResvgRenderOptions } from '@resvg/resvg-js'
 import type { SharpOptions } from 'sharp'
 import { defu } from 'defu'
 import { readPackageJSON } from 'pkg-types'
+import { createStorage } from 'unstorage'
+import fsDriver from 'unstorage/drivers/fs'
 import type {
   CompatibilityFlagEnvOverrides,
   FontConfig,
@@ -45,7 +47,7 @@ import { setupGenerateHandler } from './build/generate'
 import { setupPrerenderHandler } from './build/prerender'
 import { setupBuildHandler } from './build/build'
 import { checkLocalChrome, checkPlaywrightDependency, downloadFont, isUndefinedOrTruthy } from './util'
-import { normaliseFontInput } from './runtime/utils.pure'
+import { normaliseFontInput } from './runtime/pure'
 
 export interface ModuleOptions {
   /**
@@ -260,45 +262,48 @@ export default defineNuxtModule<ModuleOptions>({
       addServerPlugin(resolve('./runtime/nitro/plugins/nuxt-content'))
 
     // default font is inter
-    if (!config.fonts.length)
-      config.fonts = ['Inter:400', 'Inter:700']
-
-    if (preset === 'cloudflare' || preset === 'cloudflare-module') {
-      config.fonts = config.fonts.filter((f) => {
-        if (typeof f !== 'string' && f.path) {
-          logger.warn(`The ${f.name}:${f.weight} font was skipped because remote fonts are not available in Cloudflare Workers, please use a Google Font.`)
-          return false
-        }
-        return true
-      })
+    if (!config.fonts.length) {
+      config.fonts = [
+        { name: 'Inter', weight: 400, path: resolve('./assets/Inter-400.ttf.base64') },
+        { name: 'Inter', weight: 700, path: resolve('./assets/Inter-700.ttf.base64') },
+      ]
     }
-    const serverFontsDir = resolve('./runtime/nitro/fonts')
-    config.fonts = await Promise.all(normaliseFontInput(config.fonts)
+
+    const serverFontsDir = resolve(nuxt.options.buildDir, 'cache', `nuxt-og-image@${version}`, '_fonts')
+    // mkdir@
+    const fontStorage = createStorage({
+      driver: fsDriver({
+        base: serverFontsDir,
+      }),
+    })
+    config.fonts = (await Promise.all(normaliseFontInput(config.fonts)
       .map(async (f) => {
         if (!f.key && !f.path) {
-          if (await downloadFont(f, serverFontsDir, config.googleFontMirror)) {
+          if (preset === 'stackblitz') {
+            logger.warn(`The ${f.name}:${f.weight} font was skipped because remote fonts are not available in StackBlitz, please use a local font.`)
+            return false
+          }
+          if (await downloadFont(f, fontStorage, config.googleFontMirror)) {
             // move file to serverFontsDir
             f.key = `nuxt-og-image:fonts:${f.name}-${f.weight}.ttf.base64`
           }
+          else {
+            logger.warn(`Failed to download font ${f.name}:${f.weight}. You may be offline or behind a firewall blocking Google. Consider setting \`googleFontMirror: true\`.`)
+            return false
+          }
         }
         else if (f.path) {
-          // move to assets folder as base64 and set key
-          const fontPath = join(nuxt.options.rootDir, nuxt.options.dir.public, f.path)
-          const fontData = await readFile(fontPath, 'base64')
+          // resolve relative paths from public dir
+          if (!isAbsolute(f.path)) {
+            // move to assets folder as base64 and set key
+            f.path = join(nuxt.options.rootDir, nuxt.options.dir.public, f.path)
+          }
+          const fontData = await readFile(f.path, 'base64')
           f.key = `nuxt-og-image:fonts:${f.name}-${f.weight}.ttf.base64`
-          await writeFile(resolve(serverFontsDir, `${basename(f.path)}.base64`), fontData)
+          await fontStorage.setItem(`${basename(f.path)}.base64`, fontData)
         }
         return f
-      }))
-    config.fonts = config.fonts.map((f) => {
-      if (preset === 'stackblitz') {
-        if (typeof f === 'string' || (!f.path && !f.key)) {
-          logger.warn(`The ${typeof f === 'string' ? f : `${f.name}:${f.weight}`} font was skipped because remote fonts are not available in StackBlitz, please use a local font.`)
-          return false
-        }
-      }
-      return f
-    }).filter(Boolean) as InputFontConfig[]
+      }))).filter(Boolean) as InputFontConfig[]
 
     // bundle fonts within nitro runtime
     nuxt.options.nitro.serverAssets = nuxt.options.nitro.serverAssets || []
@@ -459,6 +464,9 @@ declare module '#nuxt-og-image/components' {
 ${componentImports}
   }
 }
+declare module '#nuxt-og-image/unocss-config' {
+  export type theme = any
+}
 `
     })
 

src/util.ts

@@ -1,10 +1,8 @@
-import { writeFile } from 'node:fs/promises'
-import { existsSync } from 'node:fs'
 import { Launcher } from 'chrome-launcher'
 import { tryResolveModule } from '@nuxt/kit'
 import { isCI } from 'std-env'
 import { $fetch } from 'ofetch'
-import { join } from 'pathe'
+import type { Storage } from 'unstorage'
 import type { ResolvedFontConfig } from './runtime/types'
 
 export const isUndefinedOrTruthy = (v?: any) => typeof v === 'undefined' || v !== false
@@ -26,20 +24,23 @@ export async function checkPlaywrightDependency() {
   return !!(await tryResolveModule('playwright'))
 }
 
-export async function downloadFont(font: ResolvedFontConfig, outputPath: string, mirror?: true | string) {
+export async function downloadFont(font: ResolvedFontConfig, storage: Storage, mirror?: true | string) {
   const { name, weight } = font
-  const fontPath = join(outputPath, `${name}-${weight}.ttf.base64`)
-  if (existsSync(fontPath))
+  const key = `${name}-${weight}.ttf.base64`
+  if (await storage.hasItem(key))
     return true
 
   const host = typeof mirror === 'undefined' ? 'fonts.googleapis.com' : mirror === true ? 'fonts.font.im' : mirror
   // using H3Event $fetch will cause the request headers not to be sent
   const css = await $fetch(`https://${host}/css2?family=${name}:wght@${weight}`, {
+    timeout: 10 * 1000, // 10 second timeout
     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',
     },
+  }).catch(() => {
+    return false
   })
   if (!css)
     return false
@@ -50,7 +51,7 @@ export async function downloadFont(font: ResolvedFontConfig, outputPath: string,
     // need to base 64 the buf
     const base64Font = Buffer.from(buf).toString('base64')
     // output to outputPath
-    await writeFile(fontPath, base64Font)
+    await storage.setItem(key, base64Font)
     return true
   }
   return false