nuxt-og-image 7.0.3 → 7.0.4

package/dist/chunks/tw4.mjs

@@ -2,7 +2,7 @@ import { readFile } from 'node:fs/promises';
 import { pathToFileURL } from 'node:url';
 import { resolveModulePath } from 'exsolve';
 import { dirname, join } from 'pathe';
-import { e as extractVariantBaseClasses, r as resolveVariantPrefixes, h as resolveExtractedVars, l as resolveVarsDeep, s as simplifyCss, p as postProcessStyles, m as loadLightningCss, a as extractCssVars, c as extractUniversalVars, d as extractPerClassVars, g as extractVarsFromCss, f as extractClassStyles } from '../shared/nuxt-og-image.B5ZhjIiR.mjs';
+import { e as extractVariantBaseClasses, r as resolveVariantPrefixes, h as resolveExtractedVars, l as resolveVarsDeep, s as simplifyCss, p as postProcessStyles, m as loadLightningCss, a as extractCssVars, c as extractUniversalVars, d as extractPerClassVars, g as extractVarsFromCss, f as extractClassStyles } from '../shared/nuxt-og-image.C4hc520M.mjs';
 import 'node:fs';
 import 'node:module';
 import '@nuxt/kit';

package/dist/chunks/uno.mjs

@@ -1,8 +1,8 @@
 import { readFile } from 'node:fs/promises';
 import { defu } from 'defu';
 import { logger } from '../../dist/runtime/logger.js';
-import { e as extractVariantBaseClasses, s as simplifyCss, a as extractCssVars, b as extractPropertyInitialValues, c as extractUniversalVars, d as extractPerClassVars, f as extractClassStyles, p as postProcessStyles, r as resolveVariantPrefixes, i as importOptionalPeer, g as extractVarsFromCss, h as resolveExtractedVars } from '../shared/nuxt-og-image.B5ZhjIiR.mjs';
-export { j as importResolvedModule, k as resolveOptionalModulePath } from '../shared/nuxt-og-image.B5ZhjIiR.mjs';
+import { e as extractVariantBaseClasses, s as simplifyCss, a as extractCssVars, b as extractPropertyInitialValues, c as extractUniversalVars, d as extractPerClassVars, f as extractClassStyles, p as postProcessStyles, r as resolveVariantPrefixes, i as importOptionalPeer, g as extractVarsFromCss, h as resolveExtractedVars } from '../shared/nuxt-og-image.C4hc520M.mjs';
+export { j as importResolvedModule, k as resolveOptionalModulePath } from '../shared/nuxt-og-image.C4hc520M.mjs';
 import 'node:fs';
 import 'node:module';
 import 'node:url';

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": "^4.6.1 || ^5.0.0-0"
   },
   "configKey": "ogImage",
-  "version": "7.0.3",
+  "version": "7.0.4",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -7,7 +7,7 @@ import 'defu';
 import 'fnv1a-64';
 import 'nuxtseo-shared/kit';
 import 'pathe';
-export { n as default } from './shared/nuxt-og-image.B5ZhjIiR.mjs';
+export { n as default } from './shared/nuxt-og-image.C4hc520M.mjs';
 import '../dist/runtime/logger.js';
 import '../dist/runtime/shared/publish.js';
 import 'node:crypto';

package/dist/runtime/server/og-image/font-binary.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Font binaries as renderers receive them.
+ *
+ * Takumi's WASM build rejects WOFF, and one bad font fails the whole render.
+ * The loader inflates WOFF to the TTF or OTF it wraps and rejects bytes that are no font.
+ * The decoder only needs `DecompressionStream`, so it runs on Node and edge runtimes.
+ */
+export type FontBinaryResult = {
+    _tag: 'Ok';
+    data: Uint8Array<ArrayBuffer>;
+} | {
+    _tag: 'Err';
+    reason: string;
+};
+/** Whether the bytes are WOFF2, which Satori cannot read. WOFF2 needs Brotli, so the loader never inflates it. */
+export declare function isWoff2Binary(source: BufferSource): boolean;
+/**
+ * Parse loaded font bytes into a binary that every Takumi build accepts.
+ * TTF, OTF, font collections and WOFF2 pass through; WOFF inflates to TTF or OTF.
+ */
+export declare function parseFontBinary(source: BufferSource): Promise<FontBinaryResult>;

package/dist/runtime/server/og-image/font-binary.js

@@ -0,0 +1,123 @@
+const WOFF_HEADER_SIZE = 44;
+const WOFF_TABLE_ENTRY_SIZE = 20;
+const SFNT_TABLE_RECORD_SIZE = 16;
+const MAX_SFNT_SIZE = 64 * 1024 * 1024;
+const SIGNATURES = {
+  truetype: 65536,
+  appleTrueType: 1953658213,
+  // 'true'
+  openType: 1330926671,
+  // 'OTTO'
+  collection: 1953784678,
+  // 'ttcf'
+  woff: 2001684038,
+  // 'wOFF'
+  woff2: 2001684018
+  // 'wOF2'
+};
+function toBytes(source) {
+  if (ArrayBuffer.isView(source))
+    return new Uint8Array(source.buffer, source.byteOffset, source.byteLength);
+  return new Uint8Array(source);
+}
+function readSignature(data) {
+  if (data.byteLength < 4)
+    return void 0;
+  return new DataView(data.buffer, data.byteOffset, data.byteLength).getUint32(0);
+}
+async function inflate(data, size) {
+  const output = new Uint8Array(size);
+  const reader = new Blob([data]).stream().pipeThrough(new DecompressionStream("deflate")).getReader();
+  let written = 0;
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done)
+      break;
+    if (written + value.byteLength > size) {
+      await reader.cancel();
+      throw new Error("a table inflates past its declared size");
+    }
+    output.set(value, written);
+    written += value.byteLength;
+  }
+  if (written !== size)
+    throw new Error("a table inflates short of its declared size");
+  return output;
+}
+async function decodeWoff(woff) {
+  if (woff.byteLength < WOFF_HEADER_SIZE)
+    throw new Error("the WOFF header is truncated");
+  const view = new DataView(woff.buffer, woff.byteOffset, woff.byteLength);
+  const flavor = view.getUint32(4);
+  const numTables = view.getUint16(12);
+  if (numTables === 0)
+    throw new Error("the WOFF file has no tables");
+  if (WOFF_HEADER_SIZE + numTables * WOFF_TABLE_ENTRY_SIZE > woff.byteLength)
+    throw new Error("the WOFF table directory is truncated");
+  const tables = Array.from({ length: numTables }, (_, index) => {
+    const entry = WOFF_HEADER_SIZE + index * WOFF_TABLE_ENTRY_SIZE;
+    return {
+      tag: view.getUint32(entry),
+      offset: view.getUint32(entry + 4),
+      compLength: view.getUint32(entry + 8),
+      origLength: view.getUint32(entry + 12),
+      checksum: view.getUint32(entry + 16)
+    };
+  });
+  const headerSize = 12 + numTables * SFNT_TABLE_RECORD_SIZE;
+  let sfntSize = headerSize;
+  for (const table of tables) {
+    if (table.offset + table.compLength > woff.byteLength)
+      throw new Error("a WOFF table runs past the end of the file");
+    if (table.compLength > table.origLength)
+      throw new Error("a WOFF table is larger than its decoded size");
+    sfntSize += table.origLength + 3 & ~3;
+  }
+  if (sfntSize > MAX_SFNT_SIZE)
+    throw new Error(`the decoded font exceeds ${MAX_SFNT_SIZE} bytes`);
+  const tableData = await Promise.all(tables.map((table) => {
+    const stored = woff.subarray(table.offset, table.offset + table.compLength);
+    return table.compLength < table.origLength ? inflate(stored, table.origLength) : stored;
+  }));
+  const sfnt = new Uint8Array(sfntSize);
+  const out = new DataView(sfnt.buffer);
+  const entrySelector = Math.floor(Math.log2(numTables));
+  const searchRange = 2 ** entrySelector * SFNT_TABLE_RECORD_SIZE;
+  out.setUint32(0, flavor);
+  out.setUint16(4, numTables);
+  out.setUint16(6, searchRange);
+  out.setUint16(8, entrySelector);
+  out.setUint16(10, numTables * SFNT_TABLE_RECORD_SIZE - searchRange);
+  let offset = headerSize;
+  tables.forEach((table, index) => {
+    const record = 12 + index * SFNT_TABLE_RECORD_SIZE;
+    out.setUint32(record, table.tag);
+    out.setUint32(record + 4, table.checksum);
+    out.setUint32(record + 8, offset);
+    out.setUint32(record + 12, table.origLength);
+    sfnt.set(tableData[index], offset);
+    offset += table.origLength + 3 & ~3;
+  });
+  return sfnt;
+}
+export function isWoff2Binary(source) {
+  return readSignature(toBytes(source)) === SIGNATURES.woff2;
+}
+export async function parseFontBinary(source) {
+  const data = toBytes(source);
+  switch (readSignature(data)) {
+    case SIGNATURES.truetype:
+    case SIGNATURES.appleTrueType:
+    case SIGNATURES.openType:
+    case SIGNATURES.collection:
+    case SIGNATURES.woff2:
+      return { _tag: "Ok", data };
+    case SIGNATURES.woff:
+      return decodeWoff(data).then(
+        (sfnt) => ({ _tag: "Ok", data: sfnt }),
+        (error) => ({ _tag: "Err", reason: `it is a WOFF file that could not be decoded: ${error.message}` })
+      );
+    default:
+      return { _tag: "Err", reason: "it is not a TTF, OTF, WOFF or WOFF2 file" };
+  }
+}

package/dist/runtime/server/og-image/fonts.d.ts

@@ -5,9 +5,9 @@ export { buildSubsetFamilyChain, renameSubsetFonts, resolveSubsetChain } from '.
 export { codepointsIntersectRanges, extractCodepoints, parseUnicodeRange } from './unicode-range.js';
 export interface LoadFontsOptions {
     /**
-     * Font formats the renderer can parse.
+     * Font source formats the renderer can take.
      * Satori: ttf, otf, woff
-     * Takumi: ttf, otf, woff, woff2
+     * Takumi: ttf, otf, woff, woff2. The loader inflates WOFF, which Takumi's WASM build rejects.
      */
     supportedFormats: Set<FontFormat>;
     /** Component pascalName — filters fonts to only what this component needs */
@@ -40,7 +40,7 @@ export declare function loadAllFonts(event: H3Event, options: LoadFontsOptions):
  * parsed at this boundary (require string name/path, coerce weight) and the
  * array is bounded before any font is fetched.
  */
-export declare function loadDefinedFonts(event: OgImageRenderEventContext, fontDefs: any[]): Promise<RuntimeFontConfig[]>;
+export declare function loadDefinedFonts(event: OgImageRenderEventContext, fontDefs: any[], supportedFormats: Set<FontFormat>): Promise<RuntimeFontConfig[]>;
 export interface LoadFontsForRendererOptions extends LoadFontsOptions {
     /** Custom font definitions from defineOgImage({ fonts: [...] }) — satori only */
     fontDefs?: any[];

package/dist/runtime/server/og-image/fonts.js

@@ -4,11 +4,21 @@ import resolvedFonts from "#og-image/fonts";
 import availableFonts from "#og-image/fonts-available";
 import { logger } from "../../logger.js";
 import { fontArrayCache, fontCache } from "./cache/lru.js";
+import { isWoff2Binary, parseFontBinary } from "./font-binary.js";
 import { fontFormat, selectFontSource } from "./font-source.js";
 import { renameSubsetFonts } from "./font-subsets.js";
 import { codepointsIntersectRanges, parseUnicodeRange } from "./unicode-range.js";
 export { buildSubsetFamilyChain, renameSubsetFonts, resolveSubsetChain } from "./font-subsets.js";
 export { codepointsIntersectRanges, extractCodepoints, parseUnicodeRange } from "./unicode-range.js";
+const _warnedFontKeys = /* @__PURE__ */ new Set();
+function warnOnce(key, message) {
+  if (_warnedFontKeys.has(key))
+    return;
+  if (_warnedFontKeys.size >= 100)
+    _warnedFontKeys.clear();
+  _warnedFontKeys.add(key);
+  logger.warn(message);
+}
 async function loadFont(event, font, src) {
   const cacheKey = `${font.family}-${font.weight}-${font.style}-${src}`;
   const cached = fontCache.get(cacheKey);
@@ -20,8 +30,13 @@ async function loadFont(event, font, src) {
   });
   if (!data)
     return null;
-  fontCache.set(cacheKey, data);
-  return data;
+  const binary = await parseFontBinary(data);
+  if (binary._tag === "Err") {
+    warnOnce(`binary-${src}`, `OG images skip font "${font.family}" (${src}) because ${binary.reason}. Serve it as TTF, OTF, WOFF or WOFF2.`);
+    return null;
+  }
+  fontCache.set(cacheKey, binary.data);
+  return binary.data;
 }
 function findClosestWeight(target, available) {
   return available.reduce(
@@ -65,7 +80,6 @@ function selectFontsForRequirements(allFonts, requirements) {
   selected.push(...fallbackFonts);
   return selected;
 }
-const _warnedFontKeys = /* @__PURE__ */ new Set();
 export function loadAllFontsDebug(component) {
   const map = getComponentFontMap();
   const componentReqs = component ? map[component] : null;
@@ -122,6 +136,10 @@ export async function loadAllFonts(event, options) {
       }
       if (!data)
         return null;
+      if (!options.supportedFormats.has("woff2") && isWoff2Binary(data)) {
+        warnOnce(`woff2-${src}`, `OG images skip font "${f.family}" (${src}) for this renderer because it is a WOFF2 file. Satori reads TTF, OTF and WOFF.`);
+        return null;
+      }
       return {
         ...f,
         src,
@@ -183,7 +201,7 @@ function normalizeFontWeight(weight) {
     return 400;
   return Math.min(Math.max(Math.round(n), 1), 1e3);
 }
-export async function loadDefinedFonts(event, fontDefs) {
+export async function loadDefinedFonts(event, fontDefs, supportedFormats) {
   const results = [];
   const defs = Array.isArray(fontDefs) ? fontDefs : [];
   if (import.meta.dev && defs.length > MAX_DEFINED_FONTS)
@@ -201,19 +219,30 @@ export async function loadDefinedFonts(event, fontDefs) {
     const data = await resolve(event.e, fontConfig).catch(() => {
       return null;
     });
-    if (data) {
-      results.push({
-        ...fontConfig,
-        cacheKey: `custom-${name}-${weight}-${style}-${path}`,
-        data
-      });
+    if (!data)
+      continue;
+    const binary = await parseFontBinary(data);
+    if (binary._tag === "Err") {
+      if (import.meta.dev)
+        warnOnce(`binary-${path}`, `defineOgImage() font "${name}" is skipped because ${binary.reason}. Use a TTF, OTF, WOFF or WOFF2 file.`);
+      continue;
     }
+    if (!supportedFormats.has("woff2") && isWoff2Binary(binary.data)) {
+      if (import.meta.dev)
+        warnOnce(`woff2-${path}`, `defineOgImage() font "${name}" is skipped because Satori cannot read WOFF2. Use a TTF, OTF or WOFF file.`);
+      continue;
+    }
+    results.push({
+      ...fontConfig,
+      cacheKey: `custom-${name}-${weight}-${style}-${path}`,
+      data: binary.data
+    });
   }
   return results;
 }
 export async function loadFontsForRenderer(event, options) {
   const baseFonts = await loadAllFonts(event.e, options);
-  const customFonts = Array.isArray(options.fontDefs) && options.fontDefs.length > 0 ? await loadDefinedFonts(event, options.fontDefs) : [];
+  const customFonts = Array.isArray(options.fontDefs) && options.fontDefs.length > 0 ? await loadDefinedFonts(event, options.fontDefs, options.supportedFormats) : [];
   const allFonts = customFonts.length > 0 ? [...baseFonts, ...customFonts] : baseFonts;
   return renameSubsetFonts(allFonts);
 }

package/dist/shared/{nuxt-og-image.B5ZhjIiR.mjs → nuxt-og-image.C4hc520M.mjs}

@@ -2553,7 +2553,12 @@ async function resolveAndDownloadFamily(options) {
     const resolution = await options.resolver(family, override);
     if (!resolution?.fonts?.length)
       return results;
+    const candidates = /* @__PURE__ */ new Map();
     for (const font of resolution.fonts) {
+      const style = font.style || "normal";
+      if (!styles.includes(style))
+        continue;
+      const resolvedWeights = resolveWeightsFromFontEntry(font.weight, weights);
       for (const src of font.src) {
         if (!("url" in src))
           continue;
@@ -2562,23 +2567,22 @@ async function resolveAndDownloadFamily(options) {
         const isTtf = format === "truetype" || format === "ttf";
         if (!isTtf && format !== "woff")
           continue;
-        const style = font.style || "normal";
-        if (!styles.includes(style))
-          continue;
-        const resolvedWeights = resolveWeightsFromFontEntry(font.weight, weights);
-        if (resolvedWeights.length === 0)
-          continue;
-        const ext = isTtf ? "ttf" : "woff";
         for (const weight of resolvedWeights) {
-          const filename = `${family.replace(RE_NON_ALPHANUMERIC, "_")}-${weight}-${style}.${ext}`;
-          const destPath = join(staticFontDir, filename);
-          if (!await downloadFontFile(url, destPath))
-            continue;
-          results.push({ family, weight, style, format, filename, url });
-          logger.debug(`Resolved static font: ${family} ${weight}`);
+          const key = `${weight}-${style}`;
+          candidates.set(key, [...candidates.get(key) || [], { weight, style, url, isTtf }]);
         }
       }
     }
+    for (const sources of candidates.values()) {
+      for (const { weight, style, url, isTtf } of sources.toSorted((a, b) => Number(b.isTtf) - Number(a.isTtf))) {
+        const filename = `${family.replace(RE_NON_ALPHANUMERIC, "_")}-${weight}-${style}.${isTtf ? "ttf" : "woff"}`;
+        if (!await downloadFontFile(url, join(staticFontDir, filename)))
+          continue;
+        results.push({ family, weight, style, format: isTtf ? "truetype" : "woff", filename, url });
+        logger.debug(`Resolved static font: ${family} ${weight}`);
+        break;
+      }
+    }
   } catch (err) {
     options.logger.debug(`Failed to resolve fallback font for ${family}:`, err);
   }
@@ -6121,7 +6125,7 @@ export const resolve = (import.meta.dev || import.meta.prerender) ? devResolve :
         });
       });
     }
-    nuxt.options.nitro.virtual["#og-image/fonts"] = async () => {
+    async function resolveFontList() {
       builtFontKey = currentFontKey();
       await loadCssMetadata();
       if (!fontProcessingDone && hasSatoriRenderer() && hasNuxtFonts) {
@@ -6138,7 +6142,7 @@ export const resolve = (import.meta.dev || import.meta.prerender) ? devResolve :
         });
         fontProcessingDone = true;
       }
-      const fonts = await resolveOgImageFonts({
+      return await resolveOgImageFonts({
         nuxt,
         hasNuxtFonts,
         hasSatoriRenderer: hasSatoriRenderer(),
@@ -6150,8 +6154,15 @@ export const resolve = (import.meta.dev || import.meta.prerender) ? devResolve :
         logger,
         ogFontsDir: resolve("./runtime/public/_og-fonts")
       });
-      return `export default ${JSON.stringify(fonts)}`;
-    };
+    }
+    let builtFontList;
+    function getFontList() {
+      const key = currentFontKey();
+      if (nuxt.options.dev || builtFontList?.key !== key)
+        builtFontList = { key, fonts: resolveFontList() };
+      return builtFontList.fonts;
+    }
+    nuxt.options.nitro.virtual["#og-image/fonts"] = async () => `export default ${JSON.stringify(await getFontList())}`;
     nuxt.options.nitro.virtual["#og-image/fonts-available"] = async () => {
       const fonts = hasNuxtFonts ? await getResolvedNuxtFonts(nuxt, { fontState, requiredWeights: fontRequirementsState.weights }) : [];
       return `export default ${JSON.stringify(fonts)}`;
@@ -6231,7 +6242,8 @@ export const staticFontCacheDir = ${JSON.stringify(getStaticFontCacheDir(nuxt.op
         });
         fontProcessingDone = true;
       });
-      nuxt.hook("nitro:build:public-assets", (nitro) => {
+      nuxt.hook("nitro:build:public-assets", async (nitro) => {
+        await getFontList();
         copyStaticFontsToOutput({
           buildDir: nuxt.options.buildDir,
           bundledFontsDir: resolve("./runtime/public/_og-fonts"),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "7.0.3",
+  "version": "7.0.4",
   "description": "Enlightened OG Image generation for Nuxt.",
   "author": {
     "website": "https://harlanzw.com",

package/skills/nuxt-og-image/SKILL.md

@@ -88,7 +88,7 @@ To use an existing image, call `useSeoMeta({ ogImage: '/cover.png' })`. The v5 `
 
 ## Fonts
 
-Custom fonts load only through `@nuxt/fonts`, and each family needs `global: true`. CSS `@font-face` rules and font CDN links do not reach the renderer. Local fonts: Takumi reads woff2 and ttf; Satori reads woff, ttf, and otf.
+Custom fonts load only through `@nuxt/fonts`, and each family needs `global: true`. CSS `@font-face` rules and font CDN links do not reach the renderer. Local fonts: Takumi reads woff2, woff, ttf, and otf; Satori reads woff, ttf, and otf.
 
 ```ts
 export default defineNuxtConfig({