nuxt-og-image 5.1.13 → 6.0.0-beta.2

package/dist/runtime/server/og-image/satori/transforms/emojis/index.js

@@ -0,0 +1,64 @@
+import { getEmojiSvg } from "#og-image/emoji-transform";
+import { RE_MATCH_EMOJIS } from "./emoji-utils.js";
+let emojiCounter = 0;
+function wrapDefsElements(svg) {
+  const defsElements = ["linearGradient", "radialGradient", "filter", "clipPath", "mask", "pattern"];
+  const defsRegex = new RegExp(`<(${defsElements.join("|")})[\\s\\S]*?<\\/\\1>`, "g");
+  if (svg.includes("<defs>") || svg.includes("<defs ")) {
+    return svg;
+  }
+  const foundDefs = [];
+  let result = svg.replace(defsRegex, (match) => {
+    foundDefs.push(match);
+    return "";
+  });
+  if (foundDefs.length > 0) {
+    const svgTagEnd = result.indexOf(">") + 1;
+    result = `${result.slice(0, svgTagEnd)}<defs>${foundDefs.join("")}</defs>${result.slice(svgTagEnd)}`;
+  }
+  return result;
+}
+function makeIdsUnique(svg) {
+  const prefix = `e${emojiCounter++}_`;
+  const ids = /* @__PURE__ */ new Set();
+  svg.replace(/\bid="([^"]+)"/g, (_, id) => {
+    ids.add(id);
+    return "";
+  });
+  let result = svg;
+  for (const id of ids) {
+    result = result.replace(new RegExp(`id="${id}"`, "g"), `id="${prefix}${id}"`).replace(new RegExp(`url\\(#${id}\\)`, "g"), `url(#${prefix}${id})`).replace(new RegExp(`href="#${id}"`, "g"), `href="#${prefix}${id}"`);
+  }
+  return result;
+}
+export async function applyEmojis(ctx, island) {
+  if (!island.html || !ctx.options.emojis)
+    return;
+  const matches = [...island.html.matchAll(RE_MATCH_EMOJIS)];
+  if (!matches.length)
+    return;
+  const emojiToSvg = /* @__PURE__ */ new Map();
+  const uniqueEmojis = [...new Set(matches.map((m) => m[0]))];
+  await Promise.all(uniqueEmojis.map(async (emoji) => {
+    let svg = await getEmojiSvg(ctx, emoji);
+    if (svg) {
+      svg = makeIdsUnique(svg);
+      svg = wrapDefsElements(svg);
+    }
+    emojiToSvg.set(emoji, svg ?? null);
+  }));
+  let html = island.html;
+  html = html.replace(/>([^<]*)</g, (fullMatch, textContent) => {
+    if (!textContent)
+      return fullMatch;
+    let newTextContent = textContent;
+    for (const [emoji, svg] of emojiToSvg) {
+      if (svg) {
+        const escaped = emoji.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+        newTextContent = newTextContent.replace(new RegExp(escaped, "g"), svg);
+      }
+    }
+    return `>${newTextContent}<`;
+  });
+  island.html = html;
+}

package/dist/runtime/server/og-image/satori/transforms/emojis/local.d.ts

@@ -0,0 +1,7 @@
+import type { OgImageRenderEventContext } from '../../../../../types.js';
+/**
+ * Service function to get emoji SVGs from local iconify JSON files
+ * This does not perform HTML replacement - that's handled by the AST plugin
+ * This implementation prioritizes local deps over API calls (addresses issue #354)
+ */
+export declare function getEmojiSvg(ctx: OgImageRenderEventContext, emojiChar: string): Promise<string | null>;

package/dist/runtime/server/og-image/satori/transforms/emojis/local.js

@@ -0,0 +1,32 @@
+import { icons, height as pkgHeight, width as pkgWidth } from "#og-image-virtual/iconify-json-icons.mjs";
+import { getEmojiCodePoint, getEmojiIconNames } from "./emoji-utils.js";
+function wrapDefsElements(body) {
+  const defsElements = ["linearGradient", "radialGradient", "filter", "clipPath", "mask", "pattern"];
+  const defsRegex = new RegExp(`<(${defsElements.join("|")})[\\s\\S]*?<\\/\\1>`, "g");
+  if (body.includes("<defs>") || body.includes("<defs ")) {
+    return body;
+  }
+  const foundDefs = [];
+  const result = body.replace(defsRegex, (match) => {
+    foundDefs.push(match);
+    return "";
+  });
+  if (foundDefs.length > 0) {
+    return `<defs>${foundDefs.join("")}</defs>${result}`;
+  }
+  return body;
+}
+export async function getEmojiSvg(ctx, emojiChar) {
+  const codePoint = getEmojiCodePoint(emojiChar);
+  const possibleNames = getEmojiIconNames(codePoint, ctx.options.emojis);
+  for (const iconName of possibleNames) {
+    if (icons[iconName]) {
+      const iconData = icons[iconName];
+      const body = wrapDefsElements(iconData.body || "");
+      const width = iconData.width || pkgWidth || 128;
+      const height = iconData.height || pkgHeight || 128;
+      return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="1em" height="1em" style="display:inline-block;vertical-align:middle">${body}</svg>`;
+    }
+  }
+  return null;
+}

package/dist/runtime/server/og-image/satori/utils.js

@@ -1,5 +1,10 @@
 export function walkSatoriTree(e, node, plugins) {
   const promises = [];
+  for (const plugin of plugins.flat()) {
+    if (plugin.filter(node)) {
+      promises.push(plugin.transform(node, e));
+    }
+  }
   if (!node.props?.children || !Array.isArray(node.props.children))
     return promises;
   if (node.props.children.length === 0) {
@@ -8,10 +13,6 @@ export function walkSatoriTree(e, node, plugins) {
   }
   for (const child of node.props.children || []) {
     if (child) {
-      for (const plugin of plugins.flat()) {
-        if (plugin.filter(child))
-          promises.push(plugin.transform(child, e));
-      }
       promises.push(
         ...walkSatoriTree(e, child, plugins)
       );

package/dist/runtime/server/og-image/satori/vnodes.js

@@ -7,8 +7,8 @@ import encoding from "./plugins/encoding.js";
 import flex from "./plugins/flex.js";
 import imageSrc from "./plugins/imageSrc.js";
 import nuxtIcon from "./plugins/nuxt-icon.js";
-import unocss from "./plugins/unocss.js";
-import { applyEmojis } from "./transforms/emojis.js";
+import twClasses from "./plugins/twClasses.js";
+import { applyEmojis } from "./transforms/emojis/index.js";
 import { applyInlineCss } from "./transforms/inlineCss.js";
 import { walkSatoriTree } from "./utils.js";
 export async function createVNodes(ctx) {
@@ -16,8 +16,8 @@ export async function createVNodes(ctx) {
   if (!html) {
     const island = await fetchIsland(ctx.e, ctx.options.component, typeof ctx.options.props !== "undefined" ? ctx.options.props : ctx.options);
     island.html = htmlDecodeQuotes(island.html);
-    await applyInlineCss(ctx, island);
     await applyEmojis(ctx, island);
+    await applyInlineCss(ctx, island);
     html = island.html;
     if (html?.includes("<body>")) {
       html = html.match(/<body>([\s\S]*)<\/body>/)?.[1] || "";
@@ -26,14 +26,15 @@ export async function createVNodes(ctx) {
   const template = `<div style="position: relative; display: flex; margin: 0 auto; width: ${ctx.options.width}px; height: ${ctx.options.height}px; overflow: hidden;">${html}</div>`;
   const satoriTree = convertHtmlToSatori(template);
   walkSatoriTree(ctx, satoriTree, [
-    emojis,
     classes,
     flex,
     encoding,
-    nuxtIcon
+    nuxtIcon,
+    twClasses
+    // Convert class -> tw and handle breakpoints
   ]);
   await Promise.all(walkSatoriTree(ctx, satoriTree, [
-    unocss,
+    emojis,
     imageSrc
   ]));
   return satoriTree;

package/dist/runtime/server/og-image/takumi/instances.d.ts

@@ -0,0 +1 @@
+export declare function useTakumi(): Promise<any>;

package/dist/runtime/server/og-image/takumi/instances.js

@@ -0,0 +1,6 @@
+const takumiInstance = { instance: void 0 };
+export async function useTakumi() {
+  takumiInstance.instance = takumiInstance.instance || await import("#og-image/bindings/takumi").then((m) => m.default);
+  await takumiInstance.instance.initWasmPromise;
+  return takumiInstance.instance.Renderer;
+}

package/dist/runtime/server/og-image/takumi/nodes.d.ts

@@ -0,0 +1,12 @@
+import type { OgImageRenderEventContext } from '../../../types.js';
+export interface TakumiNode {
+    type: 'container' | 'image' | 'text';
+    children?: TakumiNode[];
+    text?: string;
+    src?: string;
+    width?: number;
+    height?: number;
+    style?: Record<string, any>;
+    tw?: string;
+}
+export declare function createTakumiNodes(ctx: OgImageRenderEventContext): Promise<TakumiNode>;

package/dist/runtime/server/og-image/takumi/nodes.js

@@ -0,0 +1,86 @@
+import { parseHTML } from "linkedom";
+import { htmlDecodeQuotes } from "../../util/encoding.js";
+import { fetchIsland } from "../../util/kit.js";
+import { applyEmojis } from "../satori/transforms/emojis/index.js";
+import { applyInlineCss } from "../satori/transforms/inlineCss.js";
+export async function createTakumiNodes(ctx) {
+  let html = ctx.options.html;
+  if (!html) {
+    const island = await fetchIsland(ctx.e, ctx.options.component, typeof ctx.options.props !== "undefined" ? ctx.options.props : ctx.options);
+    island.html = htmlDecodeQuotes(island.html);
+    await applyInlineCss(ctx, island);
+    await applyEmojis(ctx, island);
+    html = island.html;
+    if (html?.includes("<body>"))
+      html = html.match(/<body>([\s\S]*)<\/body>/)?.[1] || "";
+  }
+  const template = `<div style="position: relative; display: flex; margin: 0 auto; width: ${ctx.options.width}px; height: ${ctx.options.height}px; overflow: hidden;">${html}</div>`;
+  const { document } = parseHTML(template);
+  const root = document.documentElement;
+  return elementToNode(root, ctx);
+}
+function elementToNode(el, ctx) {
+  const tagName = el.tagName.toLowerCase();
+  if (tagName === "img") {
+    return {
+      type: "image",
+      src: resolveImageSrc(el.getAttribute("src") || "", ctx),
+      width: Number(el.getAttribute("width")) || void 0,
+      height: Number(el.getAttribute("height")) || void 0,
+      tw: el.getAttribute("class") || void 0,
+      style: parseStyleAttr(el.getAttribute("style"))
+    };
+  }
+  if (tagName === "svg") {
+    const svgString = el.outerHTML;
+    const dataUri = `data:image/svg+xml;base64,${Buffer.from(svgString).toString("base64")}`;
+    return {
+      type: "image",
+      src: dataUri,
+      width: Number(el.getAttribute("width")) || void 0,
+      height: Number(el.getAttribute("height")) || void 0
+    };
+  }
+  const firstChild = el.childNodes[0];
+  if (el.childNodes.length === 1 && firstChild?.nodeType === 3) {
+    return {
+      type: "text",
+      text: el.textContent || "",
+      tw: el.getAttribute("class") || void 0,
+      style: parseStyleAttr(el.getAttribute("style"))
+    };
+  }
+  const children = [];
+  for (const child of el.childNodes) {
+    if (child.nodeType === 1)
+      children.push(elementToNode(child, ctx));
+    else if (child.nodeType === 3 && child.textContent?.trim())
+      children.push({ type: "text", text: child.textContent.trim() });
+  }
+  return {
+    type: "container",
+    children: children.length ? children : void 0,
+    tw: el.getAttribute("class") || void 0,
+    style: parseStyleAttr(el.getAttribute("style"))
+  };
+}
+function resolveImageSrc(src, _ctx) {
+  if (src.startsWith("data:") || src.startsWith("http://") || src.startsWith("https://"))
+    return src;
+  return src;
+}
+function parseStyleAttr(style) {
+  if (!style)
+    return void 0;
+  const result = {};
+  for (const decl of style.split(";")) {
+    const [prop, ...valParts] = decl.split(":");
+    const val = valParts.join(":").trim();
+    if (prop?.trim() && val)
+      result[camelCase(prop.trim())] = val;
+  }
+  return Object.keys(result).length ? result : void 0;
+}
+function camelCase(str) {
+  return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}

package/dist/runtime/server/og-image/takumi/renderer.d.ts

@@ -0,0 +1,3 @@
+import type { Renderer } from '../../../types.js';
+declare const TakumiRenderer: Renderer;
+export default TakumiRenderer;

package/dist/runtime/server/og-image/takumi/renderer.js

@@ -0,0 +1,45 @@
+import { defu } from "defu";
+import { loadAllFonts } from "../fonts.js";
+import { useTakumi } from "./instances.js";
+import { createTakumiNodes } from "./nodes.js";
+let _takumiRenderer;
+async function getTakumiRenderer(fonts) {
+  if (_takumiRenderer)
+    return _takumiRenderer;
+  const Renderer = await useTakumi();
+  _takumiRenderer = new Renderer({ fonts: fonts.filter((f) => f.data) });
+  return _takumiRenderer;
+}
+async function createImage(event, format) {
+  const { options } = event;
+  const [nodes, fonts] = await Promise.all([
+    createTakumiNodes(event),
+    loadAllFonts(event.e, { supportsWoff2: true })
+  ]);
+  await event._nitro.hooks.callHook("nuxt-og-image:takumi:nodes", nodes, event);
+  const renderer = await getTakumiRenderer(fonts);
+  const renderOptions = defu(options.takumi, {
+    width: options.width,
+    height: options.height,
+    format
+  });
+  return renderer.render(nodes, renderOptions);
+}
+const TakumiRenderer = {
+  name: "takumi",
+  supportedFormats: ["png", "jpeg", "jpg"],
+  async createImage(e) {
+    switch (e.extension) {
+      case "png":
+        return createImage(e, "png");
+      case "jpeg":
+      case "jpg":
+        return createImage(e, "jpeg");
+    }
+  },
+  async debug(e) {
+    const nodes = await createTakumiNodes(e);
+    return { nodes };
+  }
+};
+export default TakumiRenderer;

package/dist/runtime/server/og-image/templates/html.js

@@ -1,14 +1,33 @@
-import { theme } from "#og-image-virtual/unocss-config.mjs";
+import { tw4Breakpoints, tw4Colors, tw4FontVars } from "#og-image-virtual/tw4-theme.mjs";
+import resolvedFonts from "#og-image/fonts";
 import { createHeadCore } from "@unhead/vue";
 import { renderSSRHead } from "@unhead/vue/server";
 import { createError } from "h3";
-import { normaliseFontInput } from "../../../shared.js";
 import { fetchIsland } from "../../util/kit.js";
-import { useOgImageRuntimeConfig } from "../../utils.js";
-import { applyEmojis } from "../satori/transforms/emojis.js";
+import { applyEmojis } from "../satori/transforms/emojis/index.js";
+function buildTailwindConfig() {
+  const theme = {};
+  if (Object.keys(tw4Colors).length > 0)
+    theme.colors = tw4Colors;
+  const fontFamily = {};
+  if (tw4FontVars["font-sans"])
+    fontFamily.sans = [tw4FontVars["font-sans"]];
+  if (tw4FontVars["font-serif"])
+    fontFamily.serif = [tw4FontVars["font-serif"]];
+  if (tw4FontVars["font-mono"])
+    fontFamily.mono = [tw4FontVars["font-mono"]];
+  if (Object.keys(fontFamily).length > 0)
+    theme.fontFamily = fontFamily;
+  if (Object.keys(tw4Breakpoints).length > 0) {
+    theme.screens = Object.fromEntries(
+      Object.entries(tw4Breakpoints).map(([k, v]) => [k, `${v}px`])
+    );
+  }
+  return { theme: { extend: theme } };
+}
 export async function html(ctx) {
   const { options } = ctx;
-  const { fonts } = useOgImageRuntimeConfig();
+  const fonts = resolvedFonts;
   if (!options.component) {
     throw createError({
       statusCode: 500,
@@ -19,10 +38,9 @@ export async function html(ctx) {
   const head = createHeadCore();
   head.push(island.head);
   let defaultFontFamily = "sans-serif";
-  const normalisedFonts = normaliseFontInput([...options.fonts || [], ...fonts]);
-  const firstFont = normalisedFonts[0];
+  const firstFont = fonts[0];
   if (firstFont)
-    defaultFontFamily = firstFont.name.replaceAll("+", " ");
+    defaultFontFamily = firstFont.family.replaceAll("+", " ");
   await applyEmojis(ctx, island);
   let html2 = island.html;
   head.push({
@@ -61,12 +79,13 @@ svg[data-emoji] {
 `
       },
       ...fonts.map((font) => {
+        const cacheKey = `${font.family}-${font.weight}-${font.style}`;
         return `
           @font-face {
-            font-family: '${font.name.replaceAll("+", " ")}';
-            font-style: normal;
+            font-family: '${font.family.replaceAll("+", " ")}';
+            font-style: ${font.style};
             font-weight: ${font.weight};
-            src: url('/__og-image__/font/${font.key}') format('truetype');
+            src: url('/_og/f/${cacheKey}') format('truetype');
           }
           `;
       })
@@ -78,20 +97,10 @@ svg[data-emoji] {
     ],
     script: [
       {
-        src: "https://cdn.jsdelivr.net/npm/@unocss/runtime/preset-wind.global.js"
-      },
-      {
-        innerHTML: `
-  window.__unocss = {
-    theme: ${JSON.stringify(theme)},
-    presets: [
-      () => window.__unocss_runtime.presets.presetWind(),
-    ],
-  }
-`
+        src: "https://cdn.tailwindcss.com"
       },
       {
-        src: "https://cdn.jsdelivr.net/npm/@unocss/runtime/core.global.js"
+        innerHTML: `tailwind.config = ${JSON.stringify(buildTailwindConfig())}`
       }
     ],
     link: [

package/dist/runtime/server/plugins/prerender.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("nitropack").NitroAppPlugin;
+declare const _default: import("nitropack/types").NitroAppPlugin;
 export default _default;

package/dist/runtime/server/plugins/prerender.js

@@ -1,10 +1,16 @@
 import { prerenderOptionsCache } from "#og-image-cache";
 import { createSitePathResolver } from "#site-config/server/composables/utils";
+import { parse } from "devalue";
 import { defineNitroPlugin } from "nitropack/runtime";
 import { parseURL } from "ufo";
 import { isInternalRoute } from "../../shared.js";
-import { extractAndNormaliseOgImageOptions, resolvePathCacheKey } from "../og-image/context.js";
+import { resolvePathCacheKey } from "../og-image/context.js";
 import { createNitroRouteRuleMatcher } from "../util/kit.js";
+const PAYLOAD_REGEX = /<script.+id="nuxt-og-image-options"[^>]*>(.+?)<\/script>/;
+function getPayloadFromHtml(html) {
+  const match = String(html).match(PAYLOAD_REGEX);
+  return match ? String(match[1]) : null;
+}
 export default defineNitroPlugin(async (nitro) => {
   if (!import.meta.prerender)
     return;
@@ -17,18 +23,22 @@ export default defineNitroPlugin(async (nitro) => {
     const routeRules = routeRuleMatcher(path);
     if (routeRules.ogImage === false)
       return;
-    const options = extractAndNormaliseOgImageOptions([
-      head.join("\n"),
-      bodyAppend.join("\n")
-    ].join("\n"));
-    if (!options)
+    const _payload = getPayloadFromHtml([head.join("\n"), bodyAppend.join("\n")].join("\n"));
+    if (!_payload)
       return;
+    const parsed = parse(_payload);
+    const payloads = parsed.map((opt) => [opt.key || "og", opt]);
     const resolvePathWithBase = createSitePathResolver(ctx.event, {
       absolute: false,
       withBase: true
     });
     const key = resolvePathCacheKey(ctx.event, resolvePathWithBase(path));
-    await prerenderOptionsCache.setItem(key, options);
+    await prerenderOptionsCache.setItem(key, payloads);
+    for (const [_ogKey, opt] of payloads) {
+      if (opt._hash) {
+        await prerenderOptionsCache.setItem(`hash:${opt._hash}`, opt);
+      }
+    }
     const index = html.bodyAppend.findIndex((script) => script.includes('id="nuxt-og-image-options"'));
     if (index !== -1) {
       html.bodyAppend[index] = String(html.bodyAppend[index]).replace(/<script id="nuxt-og-image-options" type="application\/json">[\s\S]*?<\/script>/, "");

package/dist/runtime/server/util/auto-eject.d.ts

@@ -0,0 +1,2 @@
+import type { OgImageComponent, OgImageRuntimeConfig } from '../../types.js';
+export declare function autoEjectCommunityTemplate(component: OgImageComponent, runtimeConfig: OgImageRuntimeConfig): void;

package/dist/runtime/server/util/auto-eject.js

@@ -0,0 +1,30 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { logger } from "./logger.js";
+const ejectedTemplates = /* @__PURE__ */ new Set();
+export function autoEjectCommunityTemplate(component, runtimeConfig) {
+  if (!import.meta.dev)
+    return;
+  const { srcDir, communityTemplatesDir } = runtimeConfig;
+  if (!srcDir || !communityTemplatesDir)
+    return;
+  if (ejectedTemplates.has(component.pascalName))
+    return;
+  ejectedTemplates.add(component.pascalName);
+  const baseName = component.pascalName.replace(/^OgImage/, "").replace(/(Satori|Chromium|Takumi)$/, "");
+  const filename = `${baseName}.${component.renderer}.vue`;
+  const outputDir = join(srcDir, "components", "OgImage");
+  const outputPath = join(outputDir, filename);
+  if (existsSync(outputPath))
+    return;
+  const templatePath = join(communityTemplatesDir, filename);
+  if (!existsSync(templatePath)) {
+    logger.warn(`[nuxt-og-image] Community template not found: ${templatePath}`);
+    return;
+  }
+  if (!existsSync(outputDir))
+    mkdirSync(outputDir, { recursive: true });
+  const content = readFileSync(templatePath, "utf-8");
+  writeFileSync(outputPath, content, "utf-8");
+  logger.info(`Auto-ejected community template "${baseName}" to ${outputPath}`);
+}

package/dist/runtime/server/util/eventHandlers.d.ts

@@ -1,3 +1,2 @@
 import type { H3Event } from 'h3';
-export declare function fontEventHandler(e: H3Event): Promise<any>;
 export declare function imageEventHandler(e: H3Event): Promise<any>;

package/dist/runtime/server/util/eventHandlers.js

@@ -1,99 +1,22 @@
-import { createError, getQuery, H3Error, proxyRequest, sendRedirect, setHeader, setResponseHeader } from "h3";
-import { parseURL } from "ufo";
-import { normaliseFontInput } from "../../shared.js";
+import { useSiteConfig } from "#site-config/server/composables/useSiteConfig";
+import { createError, H3Error, setHeader } from "h3";
+import { getBuildCachedImage, setBuildCachedImage } from "../og-image/cache/buildCache.js";
 import { resolveContext } from "../og-image/context.js";
-import { assets } from "../og-image/satori/font.js";
+import { fetchPathHtmlAndExtractOptions } from "../og-image/devtools.js";
 import { html } from "../og-image/templates/html.js";
 import { useOgImageRuntimeConfig } from "../utils.js";
 import { useOgImageBufferCache } from "./cache.js";
-export async function fontEventHandler(e) {
-  const path = parseURL(e.path).pathname;
-  const { fonts } = useOgImageRuntimeConfig();
-  const key = path.split("/font/")[1];
-  if (key && key.includes(":")) {
-    const font2 = fonts.find((f) => f.key === key);
-    if (font2?.key && await assets.hasItem(font2.key)) {
-      let fontData = await assets.getItem(font2.key);
-      if (fontData instanceof Uint8Array) {
-        const decoder = new TextDecoder();
-        fontData = decoder.decode(fontData);
-      }
-      if (key.includes(".oft")) {
-        setResponseHeader(e, "Content-Type", "font/otf");
-      } else if (key.includes(".woff2")) {
-        setResponseHeader(e, "Content-Type", "font/woff2");
-      } else if (key.includes(".ttf")) {
-        setResponseHeader(e, "Content-Type", "font/ttf");
-      }
-      return Buffer.from(fontData, "base64");
-    }
-  }
-  const [_name, _weight] = String(key?.split(".")[0]).split("/");
-  if (!_name || !_weight)
-    return "Provide a font name and weight";
-  const name = String(_name[0]).toUpperCase() + _name.slice(1);
-  const weight = Math.round(Number.parseInt(_weight) / 100) * 100;
-  const config = useOgImageRuntimeConfig();
-  const normalisedFonts = normaliseFontInput(config.fonts);
-  let font;
-  if (typeof getQuery(e).font === "string")
-    font = JSON.parse(getQuery(e).font);
-  if (!font) {
-    font = normalisedFonts.find((font2) => {
-      return font2.name.toLowerCase() === name.toLowerCase() && weight === Number(font2.weight);
-    });
-  }
-  if (!font) {
-    return createError({
-      statusCode: 404,
-      statusMessage: `[Nuxt OG Image] Font ${name}:${weight} not found`
-    });
-  }
-  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: `[Nuxt OG Image] Invalid Google Font ${name}:${weight}`
-    });
-  }
-  const ttfResource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/);
-  if (ttfResource?.[1])
-    return proxyRequest(e, ttfResource[1], {});
-  const woff2Resource = css.match(/src: url\((.+)\) format\('woff2'\)/);
-  if (woff2Resource?.[1])
-    return sendRedirect(e, woff2Resource[1]);
-  return createError({
-    statusCode: 500,
-    statusMessage: `[Nuxt OG Image] Malformed Google Font CSS ${css}`
-  });
-}
 export async function imageEventHandler(e) {
   const ctx = await resolveContext(e);
   if (ctx instanceof H3Error)
     return ctx;
-  const { isDebugJsonPayload, extension, options, renderer } = ctx;
+  const { isDevToolsContextRequest, extension, renderer } = ctx;
   const { debug, baseCacheKey } = useOgImageRuntimeConfig();
-  const compatibilityHints = [];
-  if (isDebugJsonPayload) {
-    const queryExtension = getQuery(e).extension || ctx.options.extension;
-    if (["jpeg", "jpg"].includes(queryExtension) && options.renderer === "satori")
-      compatibilityHints.push("Converting PNGs to JPEGs requires Sharp which only runs on Node based systems.");
-    if (options.renderer === "chromium")
-      compatibilityHints.push("Using Chromium to generate images is only supported in Node based environments. It's recommended to only use this if you're prerendering");
+  if (import.meta.dev && isDevToolsContextRequest) {
     setHeader(e, "Content-Type", "application/json");
     return {
-      siteConfig: {
-        url: e.context.siteConfig.get().url
-      },
-      compatibilityHints,
-      cacheKey: ctx.key,
-      options: ctx.options,
-      ...options.renderer === "satori" ? await renderer.debug(ctx) : void 0
+      extract: await fetchPathHtmlAndExtractOptions(e, ctx.basePath, ctx.key),
+      siteUrl: useSiteConfig(e).url
     };
   }
   switch (extension) {
@@ -131,6 +54,10 @@ export async function imageEventHandler(e) {
         statusMessage: `[Nuxt OG Image] Invalid request for og.${extension}.`
       });
   }
+  const buildCachedImage = import.meta.prerender ? getBuildCachedImage(ctx.options, extension) : null;
+  if (buildCachedImage) {
+    return buildCachedImage;
+  }
   const cacheApi = await useOgImageBufferCache(ctx, {
     cacheMaxAgeSeconds: ctx.options.cacheMaxAgeSeconds,
     baseCacheKey
@@ -151,6 +78,9 @@ export async function imageEventHandler(e) {
       });
     }
     await cacheApi.update(image);
+    if (import.meta.prerender && ctx.options.cacheMaxAgeSeconds) {
+      setBuildCachedImage(ctx.options, extension, image, ctx.options.cacheMaxAgeSeconds);
+    }
   }
   return image;
 }

package/dist/runtime/server/util/options.d.ts

@@ -1,2 +1,7 @@
-import type { DefineOgImageInput, OgImageOptions, OgImagePrebuilt } from '../../types.js';
-export declare function normaliseOptions(_options: DefineOgImageInput): OgImageOptions | OgImagePrebuilt;
+import type { DefineOgImageInput, OgImageComponent, OgImageOptions, OgImagePrebuilt, RendererType } from '../../types.js';
+export interface NormalisedOptions {
+    options: OgImageOptions | OgImagePrebuilt;
+    renderer: RendererType;
+    component?: OgImageComponent;
+}
+export declare function normaliseOptions(_options: DefineOgImageInput): NormalisedOptions;