nuxt-og-image 6.10.4 → 7.0.1

package/dist/runtime/server/nitro.d.ts

@@ -1,9 +1,9 @@
-import type { H3Event } from '#nuxtseo/h3';
+import type { RequestEvent } from 'nuxt/server';
 import type { OgImageOptionsInternal } from '../types.js';
 type Options = Partial<OgImageOptionsInternal>;
 /**
  * Build the absolute OG image URL for a page. Without a page path, uses the current request path.
  */
-export declare function getOgImageUrl(event: H3Event, options?: Options): string;
-export declare function getOgImageUrl(event: H3Event, pagePath: string, options?: Options): string;
+export declare function getOgImageUrl(event: RequestEvent, options?: Options): string;
+export declare function getOgImageUrl(event: RequestEvent, pagePath: string, options?: Options): string;
 export {};

package/dist/runtime/server/nitro.js

@@ -1,10 +1,10 @@
-import { parseURL, withoutBase } from "ufo";
-import { useRuntimeConfig } from "#nuxtseo/nitro";
+import { getRequestURL, useRuntimeConfig } from "nuxt/server";
+import { withoutBase } from "ufo";
 import { withSiteUrl } from "#site-config/server/composables/utils";
 import { getOgImagePath } from "./utils.js";
 export function getOgImageUrl(event, pathOrOptions, maybeOptions) {
-  const pagePath = typeof pathOrOptions === "string" ? pathOrOptions : withoutBase(parseURL(event.path).pathname, useRuntimeConfig(event).app.baseURL) || "/";
+  const pagePath = typeof pathOrOptions === "string" ? pathOrOptions : withoutBase(getRequestURL(event).pathname, useRuntimeConfig().app.baseURL) || "/";
   const options = typeof pathOrOptions === "string" ? maybeOptions : pathOrOptions;
   const { path } = getOgImagePath(event, pagePath, options);
-  return withSiteUrl(event, path, { canonical: !import.meta.dev });
+  return withSiteUrl(event, path, { canonical: !import.meta.dev, withBase: true });
 }

package/dist/runtime/server/og-image/bindings/font-assets/dev-prerender.js

@@ -1,15 +1,14 @@
 import { readFile } from "node:fs/promises";
-import { basename, join } from "pathe";
+import { join } from "pathe";
 import { withBase } from "ufo";
 import { getRequestURL } from "#nuxtseo/h3";
 import { fetchWithEvent, useRuntimeConfig } from "#nuxtseo/nitro";
-import { buildDir, rootDir, staticFontCacheDir } from "#og-image-virtual/build-dir.mjs";
+import { resolvedFontPaths, rootDir, staticFontCacheDir } from "#og-image-virtual/build-dir.mjs";
 import { getSiteConfig } from "#site-config/server/composables";
 import { getFetchTimeout } from "../../../util/fetchTimeout.js";
 import { fetchWithRedirectValidation } from "../../../util/ssrf.js";
 import { useOgImageRuntimeConfig } from "../../../utils.js";
 import { fetchSpecialFontUrl, isDataFontUrl, isExternalFontUrl } from "./external-url.js";
-let fontUrlMapping;
 async function readOptionalFile(path) {
   return readFile(path).catch((error) => {
     if (error.code === "ENOENT")
@@ -17,18 +16,6 @@ async function readOptionalFile(path) {
     throw error;
   });
 }
-async function fetchOptionalFont(url, timeout) {
-  return fetch(url, { signal: AbortSignal.timeout(timeout) }).catch(() => {
-    return null;
-  });
-}
-async function loadFontUrlMapping() {
-  if (fontUrlMapping)
-    return fontUrlMapping;
-  const content = await readOptionalFile(join(buildDir, "cache", "og-image", "font-urls.json"));
-  fontUrlMapping = content ? JSON.parse(content.toString("utf-8")) : {};
-  return fontUrlMapping;
-}
 export async function resolve(event, font) {
   const path = font.src || font.localPath;
   const runtimeConfig = useOgImageRuntimeConfig();
@@ -40,36 +27,17 @@ export async function resolve(event, font) {
   }
   if (path && (isDataFontUrl(path) || isExternalFontUrl(path)))
     return fetchSpecialFontUrl(path, getSiteConfig(event).url, timeout);
-  if ((import.meta.dev || import.meta.prerender) && path.startsWith("/_fonts/")) {
-    const filename = path.slice("/_fonts/".length);
-    if (filename && basename(filename) === filename) {
-      const cached = await readOptionalFile(join(buildDir, "cache", "fonts", filename));
-      if (cached?.length)
-        return cached;
-    }
-  }
+  if (resolvedFontPaths[path])
+    return readFile(resolvedFontPaths[path]);
   if (import.meta.prerender) {
     if (path.startsWith("/_og-static-fonts/")) {
-      const filename2 = path.slice("/_og-static-fonts/".length);
-      const cached = await readOptionalFile(join(staticFontCacheDir, filename2)) || await readOptionalFile(join(rootDir, ".output", "public", "_og-static-fonts", filename2));
+      const filename = path.slice("/_og-static-fonts/".length);
+      const cached = await readOptionalFile(join(staticFontCacheDir, filename));
       if (cached?.length)
         return cached;
     }
-    if (path.startsWith("/_fonts/")) {
-      const filename2 = path.slice("/_fonts/".length);
-      const cached = await readOptionalFile(join(rootDir, ".output", "public", "_fonts", filename2));
-      if (cached?.length)
-        return cached;
-      const mapping = await loadFontUrlMapping();
-      if (mapping[filename2]) {
-        const res = await fetchOptionalFont(mapping[filename2], timeout);
-        if (res?.ok)
-          return Buffer.from(await res.arrayBuffer());
-      }
-      throw new Error(`Font ${filename2} not found in mapping or cache`);
-    }
-    const filename = path.slice(1);
-    const data = await readOptionalFile(join(rootDir, "public", filename)) || await readOptionalFile(join(rootDir, ".output", "public", filename));
+    const publicPath = path.slice(1);
+    const data = await readOptionalFile(join(rootDir, "public", publicPath));
     if (data?.length)
       return data;
   }
@@ -79,15 +47,6 @@ export async function resolve(event, font) {
     if (cached?.length)
       return cached;
   }
-  if (import.meta.dev && path.startsWith("/_fonts/")) {
-    const filename = path.slice("/_fonts/".length);
-    const mapping = await loadFontUrlMapping();
-    if (mapping[filename]) {
-      const res = await fetchOptionalFont(mapping[filename], timeout);
-      if (res?.ok)
-        return Buffer.from(await res.arrayBuffer());
-    }
-  }
   if (import.meta.dev) {
     const filename = path.slice(1);
     const data = await readOptionalFile(join(rootDir, "public", filename));

package/dist/runtime/server/og-image/bindings/font-assets/node.js

@@ -1,7 +1,8 @@
 import { withBase } from "ufo";
 import { fetchWithEvent, useRuntimeConfig } from "#nuxtseo/nitro";
-import { getNitroOrigin, getSiteConfig } from "#site-config/server/composables";
+import { getSiteConfig } from "#site-config/server/composables";
 import { getFetchTimeout } from "../../../util/fetchTimeout.js";
+import { getOgImageOrigin } from "../../../util/origin.js";
 import { fetchWithRedirectValidation } from "../../../util/ssrf.js";
 import { useOgImageRuntimeConfig } from "../../../utils.js";
 import { fetchSpecialFontUrl, isDataFontUrl, isExternalFontUrl } from "./external-url.js";
@@ -10,7 +11,7 @@ export async function resolve(event, font) {
   const runtimeConfig = useOgImageRuntimeConfig();
   const timeout = getFetchTimeout(runtimeConfig);
   const { app } = useRuntimeConfig();
-  const origin = getNitroOrigin(event);
+  const origin = getOgImageOrigin(event);
   const fullPath = withBase(path, app.baseURL);
   if (path && (isDataFontUrl(path) || isExternalFontUrl(path)))
     return fetchSpecialFontUrl(path, getSiteConfig(event).url, timeout);

package/dist/runtime/server/og-image/bindings/satori/node.d.ts

@@ -1,6 +1,5 @@
-import _satori from 'satori';
 declare const _default: {
     initWasmPromise: Promise<void>;
-    satori: typeof _satori;
+    satori: (element: ReactNode, options: import("satori").SatoriOptions) => Promise<string>;
 };
 export default _default;

package/dist/runtime/server/og-image/bindings/satori/wasm-fs.d.ts

@@ -1,6 +1,5 @@
-import _satori from 'satori/standalone';
 declare const _default: {
     initWasmPromise: Promise<void>;
-    satori: typeof _satori;
+    satori: (element: ReactNode, options: import("satori/standalone").SatoriOptions) => Promise<string>;
 };
 export default _default;

package/dist/runtime/server/og-image/bindings/satori/wasm-fs.js

@@ -1,6 +1,6 @@
 import _satori, { init } from "satori/standalone";
 import { readWasmFile } from "../../../util/wasm.js";
-const wasmBinary = readWasmFile("satori/yoga.wasm");
+const wasmBinary = readWasmFile("satori/layout.wasm");
 export default {
   initWasmPromise: wasmBinary.then(async (wasm) => {
     await init(wasm);

package/dist/runtime/server/og-image/bindings/satori/wasm.d.ts

@@ -1,6 +1,5 @@
-import _satori from 'satori/standalone';
 declare const _default: {
     initWasmPromise: Promise<void>;
-    satori: typeof _satori;
+    satori: (element: ReactNode, options: import("satori/standalone").SatoriOptions) => Promise<string>;
 };
 export default _default;

package/dist/runtime/server/og-image/bindings/satori/wasm.js

@@ -1,6 +1,6 @@
 import _satori, { init } from "satori/standalone";
 import { importWasm } from "../../../util/wasm.js";
 export default {
-  initWasmPromise: importWasm(import("#og-image/yoga-wasm")).then((wasm) => init(wasm)),
+  initWasmPromise: importWasm(import("#og-image/layout-wasm")).then((wasm) => init(wasm)),
   satori: _satori
 };

package/dist/runtime/server/og-image/browser/screenshot.js

@@ -1,10 +1,10 @@
 import { withQuery } from "ufo";
 import { toValue } from "vue";
 import { fetchWithEvent } from "#nuxtseo/nitro";
-import { getNitroOrigin } from "#site-config/server/composables";
 import { buildOgImageUrl } from "../../../shared.js";
 import { getFetchTimeout } from "../../util/fetchTimeout.js";
 import { logger } from "../../util/logger.js";
+import { getOgImageOrigin } from "../../util/origin.js";
 import { resolveSameOriginUrl } from "../../util/ssrf.js";
 import { useOgImageRuntimeConfig } from "../../utils.js";
 function isPlaywrightPage(page) {
@@ -71,13 +71,15 @@ export async function createScreenshot({ basePath, e, options, extension, timing
   } else {
     page = await browser.newPage({
       colorScheme: colorPreference || "no-preference",
-      baseURL: getNitroOrigin(e)
+      baseURL: getOgImageOrigin(e)
     });
   }
   try {
     if (options.html) {
       logger.warn("The `html` option is deprecated and will be removed in the next major version. Use a Vue component instead.");
     }
+    if (import.meta.prerender && options._prerenderHtml)
+      options.html = options._prerenderHtml;
     if (import.meta.prerender && !options.html) {
       options.html = await timings.measure("html-fetch", () => fetchWithEvent(e, path, { timeout: getFetchTimeout(runtimeConfig) }).catch((err) => {
         void err;
@@ -102,7 +104,7 @@ export async function createScreenshot({ basePath, e, options, extension, timing
         await page.setContent(html, { waitUntil: "networkidle0" });
       }
     } else {
-      const url = resolveSameOriginUrl(withQuery(path, options.props || {}), getNitroOrigin(e));
+      const url = resolveSameOriginUrl(withQuery(path, options.props || {}), getOgImageOrigin(e));
       if (!url)
         throw new Error("[Nuxt OG Image] The browser renderer can only navigate to a same-origin path.");
       await gotoWithIdle(page, url, 1e4);

package/dist/runtime/server/og-image/cache/publish.d.ts

@@ -0,0 +1,46 @@
+import type { Storage } from 'unstorage';
+interface PublishStorage {
+    getMount: Storage['getMount'];
+    hasItem: (key: string) => Promise<boolean>;
+    getItem: (key: string) => Promise<unknown>;
+    setItem: (key: string, value: object, options?: Record<string, unknown>) => Promise<void>;
+    setItemRaw: (key: string, value: Uint8Array, options?: Record<string, unknown>) => Promise<void>;
+}
+interface PublishInput {
+    storage: PublishStorage;
+    mount: string;
+    baseURL: string;
+    key: string;
+    extension: 'png' | 'jpg' | 'jpeg' | 'webp';
+    maxAgeSeconds: number;
+    timeoutMs?: number;
+    now: () => number;
+}
+export interface Published {
+    _tag: 'Published';
+    url: string;
+    objectKey: string;
+    expiresAt: number;
+}
+interface Unavailable {
+    _tag: 'Unavailable';
+    reason: unknown;
+}
+/**
+ * Normalize signed image paths without loading a renderer during page SSR.
+ * The key is a full SHA-256 hex digest, so it has one fixed format.
+ */
+export declare function getPublishKey(url: string, defaults: Record<string, unknown>, cacheVersion: string): string;
+/** A page may reference the bucket only while its manifest and object both exist. */
+export declare function getPublishedImage(input: PublishInput): Promise<Published | Unavailable | {
+    _tag: 'Miss';
+}>;
+/** Publish immutable bytes. Manifest expiry limits reuse, never object retention. */
+export declare function publishImage(input: PublishInput & {
+    render: () => Promise<Uint8Array>;
+    /** Original buffer expiry, preserved across uploads and cache hits. */
+    expiresAt?: number;
+    /** Fresh runtime bytes replace the manifest even if an older object is still reusable. */
+    force?: boolean;
+}): Promise<Published | Unavailable>;
+export {};

package/dist/runtime/server/og-image/cache/publish.js

@@ -0,0 +1,91 @@
+import { parseURL } from "ufo";
+import { parsePublishConfig } from "../../../shared/publish.js";
+import { digestCanonical, extractEncodedSegment } from "../../../shared/urlEncoding.js";
+import { withTimeout } from "../../util/withTimeout.js";
+export function getPublishKey(url, defaults, cacheVersion) {
+  const { pathname: path, host, protocol } = parseURL(url);
+  const extension = path.split(".").pop();
+  const segment = decodeURIComponent(extractEncodedSegment(path, extension)).replace(/,s_[^,]+$/, "");
+  return digestCanonical([{ segment, defaults, host, protocol }, cacheVersion]);
+}
+export async function getPublishedImage(input) {
+  return withTimeout((async () => {
+    const target = resolveTarget(input);
+    return target._tag === "Unavailable" ? target : lookupPublishedImage(input, target);
+  })(), input.timeoutMs ?? 15e3, "OG image publish lookup").catch((reason) => ({ _tag: "Unavailable", reason }));
+}
+export async function publishImage(input) {
+  return withTimeout((async () => {
+    const target = resolveTarget(input);
+    if (target._tag === "Unavailable")
+      return target;
+    if (!input.force) {
+      const cached = await lookupPublishedImage(input, target);
+      if (cached._tag === "Published")
+        return cached;
+    }
+    const { storage } = target;
+    const bytes = await input.render();
+    const digest = await crypto.subtle.digest("SHA-256", new Uint8Array(bytes));
+    const hash = Array.from(new Uint8Array(digest), (byte) => byte.toString(16).padStart(2, "0")).join("");
+    const objectKey = `${hash}.${input.extension}`;
+    if (!await storage.hasItem(objectKey)) {
+      await storage.setItemRaw(objectKey, bytes, {
+        httpMetadata: {
+          contentType: `image/${input.extension === "jpg" ? "jpeg" : input.extension}`,
+          cacheControl: "public, max-age=31536000, immutable"
+        }
+      });
+      if (!await storage.hasItem(objectKey))
+        return { _tag: "Unavailable", reason: "Publish storage did not retain the image." };
+    }
+    const expiresAt = input.expiresAt ?? input.now() + (Number.isFinite(input.maxAgeSeconds) ? Math.max(0, input.maxAgeSeconds) : 0) * 1e3;
+    await storage.setItem(manifestKey(input), {
+      objectKey,
+      expiresAt
+    }, { ttl: Math.max(60, Number.isFinite(input.maxAgeSeconds) ? Math.ceil(input.maxAgeSeconds) : 60) });
+    return published(target, objectKey, expiresAt);
+  })(), input.timeoutMs ?? 15e3, "OG image publication").catch((reason) => ({ _tag: "Unavailable", reason }));
+}
+function resolveTarget(input) {
+  const parsed = parsePublishConfig({ storage: input.mount, baseURL: input.baseURL });
+  if (parsed._tag === "Err")
+    return { _tag: "Unavailable", reason: parsed.reason };
+  const { storage: mount, baseURL } = parsed.value;
+  const mounted = input.storage.getMount(`${mount}:`);
+  if (!mount || mounted.base !== `${mount}:` || !mounted.driver.setItemRaw)
+    return { _tag: "Unavailable", reason: "Publish storage needs a mounted driver with raw writes." };
+  const prefix = `${mount}:`;
+  const storage = {
+    hasItem: (key) => input.storage.hasItem(prefix + key),
+    getItem: (key) => input.storage.getItem(prefix + key),
+    setItem: (key, value, options) => input.storage.setItem(prefix + key, value, options),
+    setItemRaw: (key, value, options) => input.storage.setItemRaw(prefix + key, value, options)
+  };
+  return { _tag: "Target", storage, baseURL };
+}
+async function lookupPublishedImage(input, target) {
+  if (!(input.maxAgeSeconds > 0))
+    return { _tag: "Miss" };
+  const raw = await target.storage.getItem(manifestKey(input));
+  const manifest = parseManifest(raw, input.extension);
+  if (manifest && manifest.expiresAt > input.now() && await target.storage.hasItem(manifest.objectKey))
+    return published(target, manifest.objectKey, manifest.expiresAt);
+  return { _tag: "Miss" };
+}
+function manifestKey(input) {
+  return `manifest:${input.key}.${input.extension}.json`;
+}
+function published(target, objectKey, expiresAt) {
+  return { _tag: "Published", objectKey, url: `${target.baseURL}/${objectKey}`, expiresAt };
+}
+function parseManifest(value, extension) {
+  if (!value || typeof value !== "object")
+    return;
+  const record = value;
+  if (typeof record.objectKey !== "string" || !new RegExp(`^[a-f0-9]{64}\\.${extension}$`).test(record.objectKey))
+    return;
+  if (typeof record.expiresAt !== "number" || !Number.isFinite(record.expiresAt))
+    return;
+  return { objectKey: record.objectKey, expiresAt: record.expiresAt };
+}

package/dist/runtime/server/og-image/cache/published.d.ts

@@ -0,0 +1,17 @@
+import type { OgImageRenderEventContext } from '../../../types.js';
+import type { Published } from './publish.js';
+export declare function createPublishedImageCache(max?: number): {
+    get(key: string, now: number): Published | undefined;
+    isPublishing: (key: string, now: number) => boolean;
+    remember: (key: string, image: Published, now: number) => void;
+    forget: (key: string) => void;
+    begin(key: string, now: number, timeoutMs: number): symbol | undefined;
+    complete(key: string, token: symbol, result: Published | {
+        _tag: "Unavailable";
+    }, now: number): void;
+};
+export declare function getPublishedImageCache(app: OgImageRenderEventContext['_nitro']): any;
+export declare function getPublishedImageCacheKey(publish: {
+    storage: string;
+    baseURL: string;
+}, key: string, extension: string): string;

package/dist/runtime/server/og-image/cache/published.js

@@ -0,0 +1,49 @@
+import { LRUCache } from "lru-cache";
+export function createPublishedImageCache(max = 1e3) {
+  const entries = new LRUCache({ max });
+  function read(key, now) {
+    const entry = entries.get(key);
+    if (entry && entry.validUntil <= now) {
+      entries.delete(key);
+      return;
+    }
+    return entry;
+  }
+  function remember(key, image, now) {
+    if (image.expiresAt > now)
+      entries.set(key, { _tag: "Published", image, validUntil: Math.min(image.expiresAt, now + 6e4) });
+  }
+  return {
+    get(key, now) {
+      const entry = read(key, now);
+      return entry?._tag === "Published" ? entry.image : void 0;
+    },
+    isPublishing: (key, now) => read(key, now)?._tag === "Publishing",
+    remember,
+    forget: (key) => {
+      entries.delete(key);
+    },
+    begin(key, now, timeoutMs) {
+      if (read(key, now)?._tag === "Publishing")
+        return;
+      const token = Symbol(key);
+      entries.set(key, { _tag: "Publishing", token, validUntil: now + timeoutMs });
+      return token;
+    },
+    complete(key, token, result, now) {
+      const entry = entries.peek(key);
+      if (entry?._tag !== "Publishing" || entry.token !== token)
+        return;
+      entries.delete(key);
+      if (result._tag === "Published")
+        remember(key, result, now);
+    }
+  };
+}
+export function getPublishedImageCache(app) {
+  const state = app;
+  return state._ogImagePublishedImages ??= createPublishedImageCache();
+}
+export function getPublishedImageCacheKey(publish, key, extension) {
+  return JSON.stringify([publish.storage, publish.baseURL, key, extension]);
+}

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

@@ -38,7 +38,7 @@ export async function resolveContext(e) {
     if (!sigMatch) {
       return createError({
         statusCode: 403,
-        statusMessage: "[Nuxt OG Image] Missing URL signature. Configure security.secret to sign URLs."
+        statusMessage: "[Nuxt OG Image] Missing URL signature. Set NUXT_APP_SECRET to sign URLs."
       });
     }
     const signature = sigMatch[1];

package/dist/runtime/server/og-image/core/plugins/imageSrc.js

@@ -1,11 +1,11 @@
 import { parseURL, withBase, withoutLeadingSlash } from "ufo";
 import { useStorage } from "#nuxtseo/nitro";
-import { getNitroOrigin } from "#site-config/server/composables/getNitroOrigin";
 import { toBase64Image } from "../../../../shared.js";
 import { decodeHtml } from "../../../util/encoding.js";
 import { fetchLocalAsset } from "../../../util/fetchLocalAsset.js";
 import { getFetchTimeout } from "../../../util/fetchTimeout.js";
 import { logger } from "../../../util/logger.js";
+import { getOgImageOrigin } from "../../../util/origin.js";
 import { fetchWithRedirectValidation, isBlockedUrl, parseSameOriginPath } from "../../../util/ssrf.js";
 import { getImageDimensions } from "../../utils/image-detector.js";
 import { defineTransformer } from "../plugins.js";
@@ -123,9 +123,6 @@ export default defineTransformer([
       let src = node.props.src;
       if (src.startsWith("data:"))
         return;
-      if (ctx.renderer.name === "satori" && src.endsWith(".webp")) {
-        logger.warn("Using WebP images with Satori is not supported. Please consider switching image format or use the takumi or browser renderer.", src);
-      }
       const isRelative = src.startsWith("/");
       if (!isRelative)
         src = node.props.src = decodeHtml(src);
@@ -140,7 +137,7 @@ export default defineTransformer([
         return;
       }
       if (isRelative) {
-        node.props.src = withBase(src, `${getNitroOrigin(ctx.e)}`);
+        node.props.src = withBase(src, `${getOgImageOrigin(ctx.e)}`);
         return;
       }
       if (!import.meta.dev)

package/dist/runtime/server/og-image/core/transforms/emojis/index.d.ts

@@ -1,7 +1,8 @@
-import type { NuxtIslandResponse } from 'nuxt/app';
 import type { OgImageRenderEventContext } from '../../../../../types.js';
 /**
  * Apply emoji transformations to island HTML content.
  * Replaces emoji characters with inline SVG elements.
  */
-export declare function applyEmojis(ctx: OgImageRenderEventContext, island: NuxtIslandResponse): Promise<void>;
+export declare function applyEmojis(ctx: OgImageRenderEventContext, island: {
+    html: string;
+}): Promise<void>;

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

@@ -119,6 +119,21 @@ export function htmlToVNode(html) {
     throw new Error("Failed to parse HTML - no root div found");
   return elementToVNode(root);
 }
+function omitImagesWithoutSource(node) {
+  const children = node.props.children;
+  if (!Array.isArray(children))
+    return;
+  node.props.children = children.filter((child) => {
+    if (!child || typeof child !== "object")
+      return true;
+    if (child.type === "img" && !child.props.src)
+      return false;
+    omitImagesWithoutSource(child);
+    return true;
+  });
+  if (node.props.children.length === 0)
+    delete node.props.children;
+}
 const UNSUPPORTED_SVG_ELEMENTS = /* @__PURE__ */ new Set(["text", "tspan", "textPath", "foreignObject", "switch", "a"]);
 export function warnUnsupportedSvgElements(vnode, component) {
   const unsupported = /* @__PURE__ */ new Set();
@@ -157,12 +172,14 @@ export async function createVNodes(ctx, options) {
   if (!html) {
     const islandTimeout = ctx.runtimeConfig.security?.renderTimeout ?? 15e3;
     const island = await ctx.timings.measure("island-fetch", () => fetchIsland(ctx.e, ctx.options.component, typeof ctx.options.props !== "undefined" ? ctx.options.props : ctx.options, islandTimeout));
-    await applyEmojis(ctx, island);
     html = island.html;
     if (html?.includes("<body>")) {
       html = html.match(RE_BODY_CONTENT)?.[1] || "";
     }
   }
+  const content = { html };
+  await applyEmojis(ctx, content);
+  html = content.html;
   const baseStyle = `position: relative; display: flex; margin: 0 auto; width: ${ctx.options.width}px; height: ${ctx.options.height}px; overflow: hidden;`;
   const fullStyle = options?.wrapperStyle ? `${baseStyle} ${options.wrapperStyle}` : baseStyle;
   const template = `<div style="${fullStyle}">${html}</div>`;
@@ -173,5 +190,6 @@ export async function createVNodes(ctx, options) {
   }
   warnUnsupportedSvgElements(vnodeTree, ctx.options.component);
   await ctx.timings.measure("vnode-walk", () => Promise.all(walkTree(ctx, vnodeTree, [encoding, styleDirectives, imageSrc])));
+  omitImagesWithoutSource(vnodeTree);
   return vnodeTree;
 }

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

@@ -1,4 +1,5 @@
 export type FontFormat = 'ttf' | 'otf' | 'woff' | 'woff2';
+export declare const TAKUMI_FORMATS: Set<FontFormat>;
 export declare function fontFormat(src: string): FontFormat;
 /**
  * Pick the src to actually load for a parsed font entry.

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

@@ -1,3 +1,4 @@
+export const TAKUMI_FORMATS = /* @__PURE__ */ new Set(["ttf", "otf", "woff", "woff2"]);
 export function fontFormat(src) {
   if (src.endsWith(".woff2"))
     return "woff2";

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

@@ -7,7 +7,7 @@ export interface LoadFontsOptions {
     /**
      * Font formats the renderer can parse.
      * Satori: ttf, otf, woff
-     * Takumi: ttf, woff2
+     * Takumi: ttf, otf, woff, woff2
      */
     supportedFormats: Set<FontFormat>;
     /** Component pascalName — filters fonts to only what this component needs */

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

@@ -14,7 +14,7 @@ async function loadFont(event, font, src) {
   const cached = fontCache.get(cacheKey);
   if (cached)
     return cached;
-  const data = await resolve(event, { ...font, src }).catch((err) => {
+  const data = await resolve(event, { ...font, src, absolutePath: src === font.src ? font.absolutePath : void 0 }).catch((err) => {
     logger.warn(`Failed to load font ${font.family}: ${err.message}`);
     return null;
   });

package/dist/runtime/server/og-image/satori/filters.d.ts

@@ -0,0 +1 @@
+export declare function resolveSvgFilters(svg: string): string;

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

@@ -0,0 +1,14 @@
+export function resolveSvgFilters(svg) {
+  return svg.replace(/<feColorMatrix\s[^>]*type="saturate"\s+values="([^"]+)"[^>]*>/g, (filter, value) => {
+    const saturation = Number(value);
+    if (!Number.isFinite(saturation) || saturation <= 1)
+      return filter;
+    const matrix = [
+      [0.213 + 0.787 * saturation, 0.715 - 0.715 * saturation, 0.072 - 0.072 * saturation, 0, 0],
+      [0.213 - 0.213 * saturation, 0.715 + 0.285 * saturation, 0.072 - 0.072 * saturation, 0, 0],
+      [0.213 - 0.213 * saturation, 0.715 - 0.715 * saturation, 0.072 + 0.928 * saturation, 0, 0],
+      [0, 0, 0, 1, 0]
+    ].flat();
+    return filter.replace(`type="saturate" values="${value}"`, `type="matrix" values="${matrix.join(" ")}"`);
+  });
+}

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

@@ -1,4 +1,3 @@
-import type _satori from 'satori';
 export declare function getResvg(): Promise<any>;
-export declare function getSatori(): Promise<typeof _satori>;
+export declare function getSatori(): Promise<(element: ReactNode, options: import("satori").SatoriOptions) => Promise<string>>;
 export declare function getSharp(): Promise<import("sharp").SharpConstructor>;

package/dist/runtime/server/og-image/satori/plugins/classes.js

@@ -7,12 +7,5 @@ export default defineTransformer([
       node.props.tw = node.props.class;
       node.props.tw = node.props.tw.replace(RE_ICON_CLASSES, "");
     }
-  },
-  {
-    filter: (node) => !!node.props?.style?.display,
-    transform(node) {
-      if (["inline-block", "inline"].includes(node.props.style.display))
-        delete node.props.style.display;
-    }
   }
 ]);

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

@@ -4,6 +4,7 @@ import compatibility from "#og-image/compatibility";
 import { withTimeout } from "../../util/withTimeout.js";
 import { useOgImageRuntimeConfig } from "../../utils.js";
 import { buildSubsetFamilyChain, extractCodepoints, getDefaultFontFamily, loadAllFontsDebug, loadFontsForRenderer, resolveSubsetChain } from "../fonts.js";
+import { resolveSvgFilters } from "./filters.js";
 import { getResvg, getSatori, getSharp } from "./instances.js";
 import { createVNodes } from "./vnodes.js";
 const _satoriFontCache = /* @__PURE__ */ new WeakMap();
@@ -89,7 +90,7 @@ export async function createSvg(event) {
   const { result, warnings } = await timings.measure("render-satori", () => withWarningCapture(
     () => satori(vnodes, satoriOptions)
   ));
-  return { svg: result, warnings, fonts };
+  return { svg: result && resolveSvgFilters(result), warnings, fonts };
 }
 async function createPng(event) {
   const { resvgOptions } = useOgImageRuntimeConfig();

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

@@ -2,8 +2,6 @@ import resolvedFonts from "#og-image/fonts";
 import { walkTree } from "../core/plugins.js";
 import { createVNodes as coreCreateVNodes, resolveSvgDimension } from "../core/vnodes.js";
 import classes from "./plugins/classes.js";
-import emojis from "./plugins/emojis.js";
-import flex from "./plugins/flex.js";
 import nuxtIcon from "./plugins/nuxt-icon.js";
 export { htmlToVNode, resolveSvgDimension, SVG_CAMEL_ATTR_VALUES, warnUnsupportedSvgElements } from "../core/vnodes.js";
 function getDefaultFontFamily() {
@@ -50,8 +48,7 @@ export async function createVNodes(ctx) {
   const fontFamilyOverride = ctx.options.props?.fontFamily;
   const font = fontFamilyOverride ? `'${fontFamilyOverride}', sans-serif` : getDefaultFontFamily();
   const vnodes = await coreCreateVNodes(ctx, { wrapperStyle: `font-family: ${font};` });
-  walkTree(ctx, vnodes, [classes, flex, nuxtIcon]);
-  await Promise.all(walkTree(ctx, vnodes, [emojis]));
+  walkTree(ctx, vnodes, [classes, nuxtIcon]);
   resolveSvgPercentDimensions(vnodes);
   return vnodes;
 }