nuxt-og-image 3.0.0-rc.30 → 3.0.0-rc.31

package/dist/runtime/{core/cache/htmlPayload.mjs → nitro/og-image/cache.mjs}

@@ -4,3 +4,6 @@ export const htmlPayloadCache = createStorage({
   // short cache time so we don't need many entries at runtime
   driver: lruCacheDriver({ max: import.meta.prerender ? 1e3 : 50 })
 });
+export const prerenderOptionsCache = import.meta.prerender ? createStorage({
+  driver: lruCacheDriver({ max: 1e3 })
+}) : void 0;

package/dist/runtime/{core/renderers → nitro/og-image}/chromium/screenshot.mjs

@@ -1,5 +1,5 @@
 import { joinURL, withQuery } from "ufo";
-import { useOgImageRuntimeConfig } from "../../../utils.mjs";
+import { useOgImageRuntimeConfig } from "../../../shared.mjs";
 import { useNitroOrigin } from "#imports";
 export async function createScreenshot({ basePath, e, options, extension }, browser) {
   const { colorPreference } = useOgImageRuntimeConfig();

package/dist/runtime/nitro/og-image/context.d.ts

@@ -0,0 +1,5 @@
+import type { H3Error, H3Event } from 'h3';
+import type { OgImageOptions, OgImageRenderEventContext } from '../../types';
+export declare function resolvePathCacheKey(e: H3Event, path?: string): string;
+export declare function resolveContext(e: H3Event): Promise<H3Error | OgImageRenderEventContext>;
+export declare function extractAndNormaliseOgImageOptions(html: string): OgImageOptions | false;

package/dist/runtime/nitro/og-image/context.mjs

@@ -0,0 +1,177 @@
+import { parseURL, withQuery, withoutLeadingSlash, withoutTrailingSlash } from "ufo";
+import { createError, getQuery } from "h3";
+import { defu } from "defu";
+import { normalizeKey } from "unstorage";
+import { hash } from "ohash";
+import { separateProps, useOgImageRuntimeConfig } from "../../shared.mjs";
+import { createNitroRouteRuleMatcher } from "../util/kit.mjs";
+import { decodeObjectHtmlEntities } from "../util/encoding.mjs";
+import { htmlPayloadCache, prerenderOptionsCache } from "./cache.mjs";
+import { useChromiumRenderer, useSatoriRenderer } from "./instances.mjs";
+import { useNitroApp } from "#internal/nitro";
+export function resolvePathCacheKey(e, path) {
+  const siteConfig = e.context.siteConfig.get();
+  const basePath = withoutTrailingSlash(withoutLeadingSlash(normalizeKey(path || e.path)));
+  return [
+    !basePath || basePath === "/" ? "index" : basePath,
+    hash([
+      basePath,
+      siteConfig.url,
+      hash(getQuery(e))
+    ])
+  ].join(":");
+}
+export async function resolveContext(e) {
+  const runtimeConfig = useOgImageRuntimeConfig();
+  const path = parseURL(e.path).pathname;
+  const extension = path.split(".").pop();
+  if (!extension) {
+    return createError({
+      statusCode: 400,
+      statusMessage: `[Nuxt OG Image] Missing OG Image type.`
+    });
+  }
+  if (!["png", "jpeg", "jpg", "svg", "html", "json"].includes(extension)) {
+    return createError({
+      statusCode: 400,
+      statusMessage: `[Nuxt OG Image] Unknown OG Image type ${extension}.`
+    });
+  }
+  let queryParams = { ...getQuery(e) };
+  queryParams.props = JSON.parse(queryParams.props || "{}");
+  queryParams = separateProps(queryParams);
+  let basePath = withoutTrailingSlash(
+    path.replace(`/__og-image__/image`, "").replace(`/og.${extension}`, "")
+  );
+  if (queryParams._query)
+    basePath = withQuery(basePath, JSON.parse(queryParams._query));
+  const isDebugJsonPayload = extension === "json" && runtimeConfig.debug;
+  const key = resolvePathCacheKey(e, basePath);
+  let options = queryParams.options;
+  if (!options) {
+    if (import.meta.prerender)
+      options = await prerenderOptionsCache?.getItem(key);
+    if (!options) {
+      const payload = await fetchPathHtmlAndExtractOptions(e, basePath, key);
+      if (payload instanceof Error)
+        return payload;
+      options = payload;
+    }
+  }
+  delete queryParams.options;
+  const routeRuleMatcher = createNitroRouteRuleMatcher();
+  const routeRules = routeRuleMatcher(basePath);
+  if (typeof routeRules.ogImage === "undefined" && !options) {
+    return createError({
+      statusCode: 400,
+      statusMessage: "The route is missing the Nuxt OG Image payload or route rules."
+    });
+  }
+  const ogImageRouteRules = separateProps(routeRules.ogImage);
+  options = defu(queryParams, ogImageRouteRules, options, runtimeConfig.defaults);
+  if (!options) {
+    return createError({
+      statusCode: 404,
+      statusMessage: "[Nuxt OG Image] OG Image not found."
+    });
+  }
+  let renderer;
+  switch (options.renderer) {
+    case "satori":
+      renderer = await useSatoriRenderer();
+      break;
+    case "chromium":
+      renderer = await useChromiumRenderer();
+      break;
+  }
+  if (!renderer || renderer.__unenv__) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: `[Nuxt OG Image] Renderer ${options.renderer} is missing.`
+    });
+  }
+  const ctx = {
+    e,
+    key,
+    renderer,
+    isDebugJsonPayload,
+    extension,
+    basePath,
+    options,
+    _nitro: useNitroApp()
+  };
+  await ctx._nitro.hooks.callHook("nuxt-og-image:context", ctx);
+  return ctx;
+}
+export function extractAndNormaliseOgImageOptions(html) {
+  const htmlPayload = html.match(/<script.+id="nuxt-og-image-options"[^>]*>(.+?)<\/script>/)?.[1];
+  if (!htmlPayload)
+    return false;
+  let options;
+  try {
+    const payload2 = JSON.parse(htmlPayload);
+    Object.entries(payload2).forEach(([key, value]) => {
+      if (!value)
+        delete payload2[key];
+    });
+    options = payload2;
+  } catch (e) {
+    if (import.meta.dev)
+      console.warn("Failed to parse #nuxt-og-image-options", e, options);
+  }
+  if (!options)
+    return false;
+  const description = html.match(/<meta[^>]+name="description"[^>]*>/)?.[0];
+  if (description) {
+    const [, content] = description.match(/content="([^"]+)"/) || [];
+    if (content && !options.props.description)
+      options.props.description = content;
+  }
+  const payload = decodeObjectHtmlEntities(options);
+  if (import.meta.dev) {
+    const socialPreview = {};
+    const socialMetaTags = html.match(/<meta[^>]+(property|name)="(twitter|og):([^"]+)"[^>]*>/g);
+    if (socialMetaTags) {
+      socialMetaTags.forEach((tag) => {
+        const [, , type, key] = tag.match(/(property|name)="(twitter|og):([^"]+)"/);
+        const value = tag.match(/content="([^"]+)"/)?.[1];
+        if (!value)
+          return;
+        if (!socialPreview[type])
+          socialPreview[type] = {};
+        socialPreview[type][key] = value;
+      });
+    }
+    payload.socialPreview = socialPreview;
+  }
+  return payload;
+}
+async function fetchPathHtmlAndExtractOptions(e, path, key) {
+  const cachedHtmlPayload = await htmlPayloadCache.getItem(key);
+  if (cachedHtmlPayload && cachedHtmlPayload.expiresAt < Date.now())
+    return cachedHtmlPayload.value;
+  let html;
+  try {
+    html = await e.$fetch(path);
+  } catch (err) {
+    return createError({
+      statusCode: 500,
+      statusMessage: `[Nuxt OG Image] Failed to read the path ${path} for og-image extraction. ${err.message}.`
+    });
+  }
+  if (typeof html !== "string") {
+    return createError({
+      statusCode: 500,
+      statusMessage: `[Nuxt OG Image] Got invalid response from ${path} for og-image extraction.`
+    });
+  }
+  const payload = extractAndNormaliseOgImageOptions(html);
+  if (payload) {
+    await htmlPayloadCache.setItem(key, {
+      // 60 minutes for prerender, 10 seconds for runtime
+      expiresAt: Date.now() + 1e3 * (import.meta.prerender ? 60 * 60 : 10),
+      value: payload
+    });
+  }
+  return payload;
+}

package/dist/runtime/nitro/og-image/instances.d.ts

@@ -0,0 +1,2 @@
+export declare function useSatoriRenderer(): Promise<import("../../types").Renderer>;
+export declare function useChromiumRenderer(): Promise<import("../../types").Renderer>;

package/dist/runtime/nitro/og-image/instances.mjs

@@ -0,0 +1,10 @@
+const satoriRendererInstance = { instance: void 0 };
+const chromiumRendererInstance = { instance: void 0 };
+export async function useSatoriRenderer() {
+  satoriRendererInstance.instance = satoriRendererInstance.instance || await import("#nuxt-og-image/renderers/satori").then((m) => m.default);
+  return satoriRendererInstance.instance;
+}
+export async function useChromiumRenderer() {
+  chromiumRendererInstance.instance = chromiumRendererInstance.instance || await import("#nuxt-og-image/renderers/chromium").then((m) => m.default);
+  return chromiumRendererInstance.instance;
+}

package/dist/runtime/{core/font/fetch.d.ts → nitro/og-image/satori/font.d.ts}

@@ -1,2 +1,2 @@
-import type { OgImageRenderEventContext, ResolvedFontConfig } from '../../types';
+import type { OgImageRenderEventContext, ResolvedFontConfig } from '../../../types';
 export declare function loadFont({ e }: OgImageRenderEventContext, font: ResolvedFontConfig): Promise<ResolvedFontConfig>;

package/dist/runtime/nitro/og-image/satori/font.mjs

@@ -0,0 +1,32 @@
+import { setHeader } from "h3";
+import { prefixStorage } from "unstorage";
+import { getExtension } from "../../../pure.mjs";
+import { useNitroOrigin, useStorage } from "#imports";
+const assets = prefixStorage(useStorage(), "/assets");
+export async function loadFont({ e }, font) {
+  const { name, weight } = font;
+  if (font.data)
+    return font;
+  if (font.key && await assets.hasItem(font.key)) {
+    setHeader(e, "Content-Type", `font/${getExtension(font.path)}`);
+    const fontData = await assets.getItemRaw(font.key);
+    font.data = Buffer.from(fontData, "base64");
+    return font;
+  }
+  let data;
+  if (font.path) {
+    data = await e.$fetch(font.path, {
+      baseURL: useNitroOrigin(e),
+      responseType: "arrayBuffer"
+    });
+  } else {
+    data = await e.$fetch(`/__og-image__/font/${name}/${weight}.ttf`, {
+      responseType: "arrayBuffer",
+      query: {
+        font
+      }
+    });
+  }
+  font.data = data;
+  return font;
+}

package/dist/runtime/{core/renderers → nitro/og-image}/satori/instances.d.ts

@@ -1,6 +1,4 @@
 import type _satori from 'satori';
-export declare function useSatoriRenderer(): Promise<import("../../../types").Renderer>;
-export declare function useChromiumRenderer(): Promise<import("../../../types").Renderer>;
 export declare function useResvg(): Promise<new (svg: string | Uint8Array, options?: import("@resvg/resvg-wasm").ResvgRenderOptions | undefined) => {
     free(): void;
     render(): {

package/dist/runtime/{core/renderers → nitro/og-image}/satori/instances.mjs

@@ -2,16 +2,6 @@ const cssInlineInstance = { instance: void 0 };
 const sharpInstance = { instance: void 0 };
 const resvgInstance = { instance: void 0 };
 const satoriInstance = { instance: void 0 };
-const satoriRendererInstance = { instance: void 0 };
-const chromiumRendererInstance = { instance: void 0 };
-export async function useSatoriRenderer() {
-  satoriRendererInstance.instance = satoriRendererInstance.instance || await import("#nuxt-og-image/renderers/satori").then((m) => m.default);
-  return satoriRendererInstance.instance;
-}
-export async function useChromiumRenderer() {
-  chromiumRendererInstance.instance = chromiumRendererInstance.instance || await import("#nuxt-og-image/renderers/chromium").then((m) => m.default);
-  return chromiumRendererInstance.instance;
-}
 export async function useResvg() {
   resvgInstance.instance = resvgInstance.instance || await import("#nuxt-og-image/bindings/resvg").then((m) => m.default);
   await resvgInstance.instance.initWasmPromise;

package/dist/runtime/{core/renderers → nitro/og-image}/satori/plugins/encoding.mjs

@@ -1,5 +1,5 @@
 import { defineSatoriTransformer } from "../utils.mjs";
-import { decodeHtml } from "../../../options/extract.mjs";
+import { decodeHtml } from "../../../util/encoding.mjs";
 export default defineSatoriTransformer([
   // clean up
   {

package/dist/runtime/{core/renderers → nitro/og-image}/satori/plugins/imageSrc.mjs

@@ -1,10 +1,8 @@
-import { Buffer } from "node:buffer";
 import { withBase } from "ufo";
 import sizeOf from "image-size";
 import { defineSatoriTransformer } from "../utils.mjs";
-import { toBase64Image } from "../../../env/assets.mjs";
-import { useStorage } from "#internal/nitro";
-import { useNitroOrigin } from "#imports";
+import { toBase64Image } from "../../../../pure.mjs";
+import { useNitroOrigin, useStorage } from "#imports";
 export default defineSatoriTransformer([
   // fix <img src="">
   {

package/dist/runtime/{core/renderers/satori/index.mjs → nitro/og-image/satori/renderer.mjs}

@@ -1,15 +1,17 @@
 import { defu } from "defu";
-import { normaliseFontInput, useOgImageRuntimeConfig } from "../../../utils.mjs";
-import { loadFont } from "../../font/fetch.mjs";
-import { fontCache, fontPromises } from "../../cache/fonts.mjs";
+import { createStorage } from "unstorage";
+import lruCacheDriver from "unstorage/drivers/lru-cache";
+import { normaliseFontInput, useOgImageRuntimeConfig } from "../../../shared.mjs";
+import { loadFont } from "./font.mjs";
 import { createVNodes } from "./vnodes.mjs";
 import { useResvg, useSatori, useSharp } from "./instances.mjs";
 import { theme } from "#nuxt-og-image/unocss-config.mjs";
-export async function createSvg(event) {
-  const { options } = event;
-  const { fonts, satoriOptions: _satoriOptions } = useOgImageRuntimeConfig();
-  const vnodes = await createVNodes(event);
-  await event._nitro.hooks.callHook("nuxt-og-image:satori:vnodes", vnodes, event);
+const fontPromises = {};
+const fontCache = createStorage({
+  driver: lruCacheDriver({ max: 10 })
+});
+async function resolveFonts(event) {
+  const { fonts } = useOgImageRuntimeConfig();
   const normalisedFonts = normaliseFontInput([...event.options.fonts || [], ...fonts]);
   const localFontPromises = [];
   const preloadedFonts = [];
@@ -29,11 +31,21 @@ export async function createSvg(event) {
     }
   }
   const awaitedFonts = await Promise.all(localFontPromises);
-  const satori = await useSatori();
+  return [...preloadedFonts, ...awaitedFonts].map((_f) => {
+    return { name: _f.name, data: _f.data, style: _f.style, weight: Number(_f.weight) };
+  });
+}
+export async function createSvg(event) {
+  const { options } = event;
+  const { satoriOptions: _satoriOptions } = useOgImageRuntimeConfig();
+  const [satori, vnodes, fonts] = await Promise.all([
+    useSatori(),
+    createVNodes(event),
+    resolveFonts(event)
+  ]);
+  await event._nitro.hooks.callHook("nuxt-og-image:satori:vnodes", vnodes, event);
   const satoriOptions = defu(options.satori, _satoriOptions, {
-    fonts: [...preloadedFonts, ...awaitedFonts].map((_f) => {
-      return { name: _f.name, data: _f.data, style: _f.style, weight: Number(_f.weight) };
-    }),
+    fonts,
     tailwindConfig: { theme },
     embedFont: true,
     width: options.width,

package/dist/runtime/{core/html/applyEmojis.d.ts → nitro/og-image/satori/transforms/emojis.d.ts}

@@ -1,3 +1,5 @@
 import type { NuxtIslandResponse } from 'nuxt/dist/core/runtime/nitro/renderer';
-import type { OgImageRenderEventContext } from '../../types';
+import type { Storage } from 'unstorage';
+import type { OgImageRenderEventContext } from '../../../../types';
+export declare const emojiCache: Storage<string>;
 export declare function applyEmojis(ctx: OgImageRenderEventContext, island: NuxtIslandResponse): Promise<string | boolean>;

package/dist/runtime/{core/html/applyEmojis.mjs → nitro/og-image/satori/transforms/emojis.mjs}

@@ -1,5 +1,9 @@
 import defaultCharMap from "@iconify-json/noto/chars.json";
-import { emojiCache } from "../cache/emojis.mjs";
+import { createStorage } from "unstorage";
+import lruCacheDriver from "unstorage/drivers/lru-cache";
+export const emojiCache = createStorage({
+  driver: lruCacheDriver({ max: 1e3 })
+});
 const RE_MATCH_EMOJIS = /[#*0-9]\uFE0F?\u20E3|[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u23CF\u23ED-\u23EF\u23F1\u23F2\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB\u25FC\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638-\u263A\u2640\u2642\u2648-\u2653\u265F\u2660\u2663\u2665\u2666\u2668\u267B\u267E\u267F\u2692\u2694-\u2697\u2699\u269B\u269C\u26A0\u26A7\u26AA\u26B0\u26B1\u26BD\u26BE\u26C4\u26C8\u26CF\u26D1\u26E9\u26F0-\u26F5\u26F7\u26F8\u26FA\u2702\u2708\u2709\u270F\u2712\u2714\u2716\u271D\u2721\u2733\u2734\u2744\u2747\u2757\u2763\u27A1\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B55\u3030\u303D\u3297\u3299]\uFE0F?|[\u261D\u270C\u270D](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?|[\u270A\u270B](?:\uD83C[\uDFFB-\uDFFF])?|[\u23E9-\u23EC\u23F0\u23F3\u25FD\u2693\u26A1\u26AB\u26C5\u26CE\u26D4\u26EA\u26FD\u2705\u2728\u274C\u274E\u2753-\u2755\u2795-\u2797\u27B0\u27BF\u2B50]|\u26D3\uFE0F?(?:\u200D\uD83D\uDCA5)?|\u26F9(?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|\u2764\uFE0F?(?:\u200D(?:\uD83D\uDD25|\uD83E\uDE79))?|\uD83C(?:[\uDC04\uDD70\uDD71\uDD7E\uDD7F\uDE02\uDE37\uDF21\uDF24-\uDF2C\uDF36\uDF7D\uDF96\uDF97\uDF99-\uDF9B\uDF9E\uDF9F\uDFCD\uDFCE\uDFD4-\uDFDF\uDFF5\uDFF7]\uFE0F?|[\uDF85\uDFC2\uDFC7](?:\uD83C[\uDFFB-\uDFFF])?|[\uDFC4\uDFCA](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDFCB\uDFCC](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDCCF\uDD8E\uDD91-\uDD9A\uDE01\uDE1A\uDE2F\uDE32-\uDE36\uDE38-\uDE3A\uDE50\uDE51\uDF00-\uDF20\uDF2D-\uDF35\uDF37-\uDF43\uDF45-\uDF4A\uDF4C-\uDF7C\uDF7E-\uDF84\uDF86-\uDF93\uDFA0-\uDFC1\uDFC5\uDFC6\uDFC8\uDFC9\uDFCF-\uDFD3\uDFE0-\uDFF0\uDFF8-\uDFFF]|\uDDE6\uD83C[\uDDE8-\uDDEC\uDDEE\uDDF1\uDDF2\uDDF4\uDDF6-\uDDFA\uDDFC\uDDFD\uDDFF]|\uDDE7\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEF\uDDF1-\uDDF4\uDDF6-\uDDF9\uDDFB\uDDFC\uDDFE\uDDFF]|\uDDE8\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDEE\uDDF0-\uDDF5\uDDF7\uDDFA-\uDDFF]|\uDDE9\uD83C[\uDDEA\uDDEC\uDDEF\uDDF0\uDDF2\uDDF4\uDDFF]|\uDDEA\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDED\uDDF7-\uDDFA]|\uDDEB\uD83C[\uDDEE-\uDDF0\uDDF2\uDDF4\uDDF7]|\uDDEC\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEE\uDDF1-\uDDF3\uDDF5-\uDDFA\uDDFC\uDDFE]|\uDDED\uD83C[\uDDF0\uDDF2\uDDF3\uDDF7\uDDF9\uDDFA]|\uDDEE\uD83C[\uDDE8-\uDDEA\uDDF1-\uDDF4\uDDF6-\uDDF9]|\uDDEF\uD83C[\uDDEA\uDDF2\uDDF4\uDDF5]|\uDDF0\uD83C[\uDDEA\uDDEC-\uDDEE\uDDF2\uDDF3\uDDF5\uDDF7\uDDFC\uDDFE\uDDFF]|\uDDF1\uD83C[\uDDE6-\uDDE8\uDDEE\uDDF0\uDDF7-\uDDFB\uDDFE]|\uDDF2\uD83C[\uDDE6\uDDE8-\uDDED\uDDF0-\uDDFF]|\uDDF3\uD83C[\uDDE6\uDDE8\uDDEA-\uDDEC\uDDEE\uDDF1\uDDF4\uDDF5\uDDF7\uDDFA\uDDFF]|\uDDF4\uD83C\uDDF2|\uDDF5\uD83C[\uDDE6\uDDEA-\uDDED\uDDF0-\uDDF3\uDDF7-\uDDF9\uDDFC\uDDFE]|\uDDF6\uD83C\uDDE6|\uDDF7\uD83C[\uDDEA\uDDF4\uDDF8\uDDFA\uDDFC]|\uDDF8\uD83C[\uDDE6-\uDDEA\uDDEC-\uDDF4\uDDF7-\uDDF9\uDDFB\uDDFD-\uDDFF]|\uDDF9\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDED\uDDEF-\uDDF4\uDDF7\uDDF9\uDDFB\uDDFC\uDDFF]|\uDDFA\uD83C[\uDDE6\uDDEC\uDDF2\uDDF3\uDDF8\uDDFE\uDDFF]|\uDDFB\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDEE\uDDF3\uDDFA]|\uDDFC\uD83C[\uDDEB\uDDF8]|\uDDFD\uD83C\uDDF0|\uDDFE\uD83C[\uDDEA\uDDF9]|\uDDFF\uD83C[\uDDE6\uDDF2\uDDFC]|\uDF44(?:\u200D\uD83D\uDFEB)?|\uDF4B(?:\u200D\uD83D\uDFE9)?|\uDFC3(?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D(?:[\u2640\u2642]\uFE0F?(?:\u200D\u27A1\uFE0F?)?|\u27A1\uFE0F?))?|\uDFF3\uFE0F?(?:\u200D(?:\u26A7\uFE0F?|\uD83C\uDF08))?|\uDFF4(?:\u200D\u2620\uFE0F?|\uDB40\uDC67\uDB40\uDC62\uDB40(?:\uDC65\uDB40\uDC6E\uDB40\uDC67|\uDC73\uDB40\uDC63\uDB40\uDC74|\uDC77\uDB40\uDC6C\uDB40\uDC73)\uDB40\uDC7F)?)|\uD83D(?:[\uDC3F\uDCFD\uDD49\uDD4A\uDD6F\uDD70\uDD73\uDD76-\uDD79\uDD87\uDD8A-\uDD8D\uDDA5\uDDA8\uDDB1\uDDB2\uDDBC\uDDC2-\uDDC4\uDDD1-\uDDD3\uDDDC-\uDDDE\uDDE1\uDDE3\uDDE8\uDDEF\uDDF3\uDDFA\uDECB\uDECD-\uDECF\uDEE0-\uDEE5\uDEE9\uDEF0\uDEF3]\uFE0F?|[\uDC42\uDC43\uDC46-\uDC50\uDC66\uDC67\uDC6B-\uDC6D\uDC72\uDC74-\uDC76\uDC78\uDC7C\uDC83\uDC85\uDC8F\uDC91\uDCAA\uDD7A\uDD95\uDD96\uDE4C\uDE4F\uDEC0\uDECC](?:\uD83C[\uDFFB-\uDFFF])?|[\uDC6E\uDC70\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4\uDEB5](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDD74\uDD90](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?|[\uDC00-\uDC07\uDC09-\uDC14\uDC16-\uDC25\uDC27-\uDC3A\uDC3C-\uDC3E\uDC40\uDC44\uDC45\uDC51-\uDC65\uDC6A\uDC79-\uDC7B\uDC7D-\uDC80\uDC84\uDC88-\uDC8E\uDC90\uDC92-\uDCA9\uDCAB-\uDCFC\uDCFF-\uDD3D\uDD4B-\uDD4E\uDD50-\uDD67\uDDA4\uDDFB-\uDE2D\uDE2F-\uDE34\uDE37-\uDE41\uDE43\uDE44\uDE48-\uDE4A\uDE80-\uDEA2\uDEA4-\uDEB3\uDEB7-\uDEBF\uDEC1-\uDEC5\uDED0-\uDED2\uDED5-\uDED7\uDEDC-\uDEDF\uDEEB\uDEEC\uDEF4-\uDEFC\uDFE0-\uDFEB\uDFF0]|\uDC08(?:\u200D\u2B1B)?|\uDC15(?:\u200D\uD83E\uDDBA)?|\uDC26(?:\u200D(?:\u2B1B|\uD83D\uDD25))?|\uDC3B(?:\u200D\u2744\uFE0F?)?|\uDC41\uFE0F?(?:\u200D\uD83D\uDDE8\uFE0F?)?|\uDC68(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D(?:[\uDC68\uDC69]\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFC-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFD-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFD\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFE])))?))?|\uDC69(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?[\uDC68\uDC69]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D(?:[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?|\uDC69\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?))|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFC-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB\uDFFD-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB-\uDFFD\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB-\uDFFE])))?))?|\uDC6F(?:\u200D[\u2640\u2642]\uFE0F?)?|\uDD75(?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|\uDE2E(?:\u200D\uD83D\uDCA8)?|\uDE35(?:\u200D\uD83D\uDCAB)?|\uDE36(?:\u200D\uD83C\uDF2B\uFE0F?)?|\uDE42(?:\u200D[\u2194\u2195]\uFE0F?)?|\uDEB6(?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D(?:[\u2640\u2642]\uFE0F?(?:\u200D\u27A1\uFE0F?)?|\u27A1\uFE0F?))?)|\uD83E(?:[\uDD0C\uDD0F\uDD18-\uDD1F\uDD30-\uDD34\uDD36\uDD77\uDDB5\uDDB6\uDDBB\uDDD2\uDDD3\uDDD5\uDEC3-\uDEC5\uDEF0\uDEF2-\uDEF8](?:\uD83C[\uDFFB-\uDFFF])?|[\uDD26\uDD35\uDD37-\uDD39\uDD3D\uDD3E\uDDB8\uDDB9\uDDCD\uDDCF\uDDD4\uDDD6-\uDDDD](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDDDE\uDDDF](?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDD0D\uDD0E\uDD10-\uDD17\uDD20-\uDD25\uDD27-\uDD2F\uDD3A\uDD3F-\uDD45\uDD47-\uDD76\uDD78-\uDDB4\uDDB7\uDDBA\uDDBC-\uDDCC\uDDD0\uDDE0-\uDDFF\uDE70-\uDE7C\uDE80-\uDE88\uDE90-\uDEBD\uDEBF-\uDEC2\uDECE-\uDEDB\uDEE0-\uDEE8]|\uDD3C(?:\u200D[\u2640\u2642]\uFE0F?|\uD83C[\uDFFB-\uDFFF])?|\uDDCE(?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D(?:[\u2640\u2642]\uFE0F?(?:\u200D\u27A1\uFE0F?)?|\u27A1\uFE0F?))?|\uDDD1(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1|\uDDD1\u200D\uD83E\uDDD2(?:\u200D\uD83E\uDDD2)?|\uDDD2(?:\u200D\uD83E\uDDD2)?))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFC-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB\uDFFD-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB-\uDFFD\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB-\uDFFE]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?))?|\uDEF1(?:\uD83C(?:\uDFFB(?:\u200D\uD83E\uDEF2\uD83C[\uDFFC-\uDFFF])?|\uDFFC(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB\uDFFD-\uDFFF])?|\uDFFD(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])?|\uDFFE(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB-\uDFFD\uDFFF])?|\uDFFF(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB-\uDFFE])?))?)/g;
 export async function applyEmojis(ctx, island) {
   const html = island.html;
@@ -15,7 +19,7 @@ export async function applyEmojis(ctx, island) {
       if (await emojiCache.hasItem(key))
         svg = await emojiCache.getItem(key);
       if (!svg) {
-        svg = await ctx.e.$fetch(`https://api.iconify.design/${ctx.options.emojis}/${emoji}.svg`, {
+        svg = await $fetch(`https://api.iconify.design/${ctx.options.emojis}/${emoji}.svg`, {
           responseType: "text"
         });
         if (svg === "404")

package/dist/runtime/{core/html/applyInlineCss.d.ts → nitro/og-image/satori/transforms/inlineCss.d.ts}

@@ -1,3 +1,3 @@
 import type { NuxtIslandResponse } from 'nuxt/dist/core/runtime/nitro/renderer';
-import type { OgImageRenderEventContext } from '../../types';
+import type { OgImageRenderEventContext } from '../../../../types';
 export declare function applyInlineCss({ e }: OgImageRenderEventContext, island: NuxtIslandResponse): Promise<boolean>;

package/dist/runtime/{core/html/applyInlineCss.mjs → nitro/og-image/satori/transforms/inlineCss.mjs}

@@ -1,4 +1,4 @@
-import { useCssInline } from "../renderers/satori/instances.mjs";
+import { useCssInline } from "../instances.mjs";
 import { useNitroOrigin } from "#imports";
 import cssInline from "#nuxt-og-image/bindings/css-inline";
 export async function applyInlineCss({ e }, island) {

package/dist/runtime/{core/renderers → nitro/og-image}/satori/vnodes.mjs

@@ -1,8 +1,8 @@
 import { html as convertHtmlToSatori } from "satori-html";
-import { fetchIsland } from "../../html/fetchIsland.mjs";
-import { applyInlineCss } from "../../html/applyInlineCss.mjs";
-import { applyEmojis } from "../../html/applyEmojis.mjs";
-import { htmlDecodeQuotes } from "../../options/extract.mjs";
+import { fetchIsland } from "../../util/kit.mjs";
+import { htmlDecodeQuotes } from "../../util/encoding.mjs";
+import { applyInlineCss } from "./transforms/inlineCss.mjs";
+import { applyEmojis } from "./transforms/emojis.mjs";
 import { walkSatoriTree } from "./utils.mjs";
 import unocss from "./plugins/unocss.mjs";
 import emojis from "./plugins/emojis.mjs";
@@ -13,7 +13,7 @@ import encoding from "./plugins/encoding.mjs";
 export async function createVNodes(ctx) {
   let html = ctx.options.html;
   if (!html) {
-    const island = await fetchIsland(ctx);
+    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);

package/dist/runtime/nitro/og-image/templates/html.d.ts

@@ -0,0 +1,2 @@
+import type { OgImageRenderEventContext } from '../../../types';
+export declare function html(ctx: OgImageRenderEventContext): Promise<string>;

package/dist/runtime/{core/html/devIframeTemplate.mjs → nitro/og-image/templates/html.mjs}

@@ -1,13 +1,20 @@
 import { createHeadCore } from "@unhead/vue";
 import { renderSSRHead } from "@unhead/ssr";
-import { normaliseFontInput, useOgImageRuntimeConfig } from "../../utils.mjs";
-import { applyEmojis } from "./applyEmojis.mjs";
-import { fetchIsland } from "./fetchIsland.mjs";
+import { createError } from "h3";
+import { normaliseFontInput, useOgImageRuntimeConfig } from "../../../shared.mjs";
+import { fetchIsland } from "../../util/kit.mjs";
+import { applyEmojis } from "../satori/transforms/emojis.mjs";
 import { theme } from "#nuxt-og-image/unocss-config.mjs";
-export async function devIframeTemplate(ctx) {
+export async function html(ctx) {
   const { options } = ctx;
   const { fonts } = useOgImageRuntimeConfig();
-  const island = await fetchIsland(ctx);
+  if (!options.component) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `[Nuxt OG Image] Rendering an invalid component. Received options: ${JSON.stringify(options)}.`
+    });
+  }
+  const island = await fetchIsland(ctx.e, ctx.options.component, typeof ctx.options.props !== "undefined" ? ctx.options.props : ctx.options);
   const head = createHeadCore();
   head.push(island.head);
   let defaultFontFamily = "sans-serif";
@@ -16,7 +23,7 @@ export async function devIframeTemplate(ctx) {
   if (firstFont)
     defaultFontFamily = firstFont.name;
   await applyEmojis(ctx, island);
-  let html = island.html;
+  let html2 = island.html;
   const googleFonts = {};
   fonts.filter((font) => !font.path).forEach((font) => {
     if (!googleFonts[font.name])
@@ -99,11 +106,11 @@ svg[data-emoji] {
       })
     ]
   });
-  html = html.replaceAll(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
+  html2 = html2.replaceAll(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
   const headChunk = await renderSSRHead(head);
   return `<!DOCTYPE html>
 <html ${headChunk.htmlAttrs}>
 <head>${headChunk.headTags}</head>
-<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div data-v-inspector-ignore="true" style="position: relative; display: flex; margin: 0 auto; width: ${options.width}px; height: ${options.height}px; overflow: hidden;">${html}</div>${headChunk.bodyTags}</body>
+<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div data-v-inspector-ignore="true" style="position: relative; display: flex; margin: 0 auto; width: ${options.width}px; height: ${options.height}px; overflow: hidden;">${html2}</div>${headChunk.bodyTags}</body>
 </html>`;
 }

package/dist/runtime/nitro/plugins/nuxt-content.mjs

@@ -1,6 +1,6 @@
 import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
 import { defu } from "defu";
-import { getOgImagePath, useOgImageRuntimeConfig } from "../../utils.mjs";
+import { getOgImagePath, useOgImageRuntimeConfig } from "../../shared.mjs";
 export default defineNitroPlugin((nitroApp) => {
   const { isNuxtContentDocumentDriven, defaults } = useOgImageRuntimeConfig();
   nitroApp.hooks.hook("content:file:afterParse", async (content) => {

package/dist/runtime/nitro/plugins/prerender.mjs

@@ -1,10 +1,9 @@
 import { parseURL } from "ufo";
 import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
-import { extractAndNormaliseOgImageOptions } from "../../core/options/extract.mjs";
-import { prerenderOptionsCache } from "../../core/cache/prerender.mjs";
-import { isInternalRoute } from "../../utils.pure.mjs";
-import { resolvePathCacheKey } from "../utils.mjs";
-import { createNitroRouteRuleMatcher } from "../kit.mjs";
+import { extractAndNormaliseOgImageOptions, resolvePathCacheKey } from "../og-image/context.mjs";
+import { prerenderOptionsCache } from "../og-image/cache.mjs";
+import { isInternalRoute } from "../../pure.mjs";
+import { createNitroRouteRuleMatcher } from "../util/kit.mjs";
 export default defineNitroPlugin(async (nitro) => {
   if (!import.meta.prerender)
     return;

package/dist/runtime/nitro/routes/{__og-image__/debug.json.d.ts → debug.json.d.ts}

@@ -1,6 +1,6 @@
 declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<{
     componentNames: any;
-    runtimeConfig: import("../../../types").OgImageRuntimeConfig;
+    runtimeConfig: import("../../types").OgImageRuntimeConfig;
     compatibility: any;
 }>>;
 export default _default;

package/dist/runtime/nitro/routes/{__og-image__/debug.json.mjs → debug.json.mjs}

@@ -1,5 +1,5 @@
 import { defineEventHandler, setHeader } from "h3";
-import { useOgImageRuntimeConfig } from "../../../utils.mjs";
+import { useOgImageRuntimeConfig } from "../../shared.mjs";
 import compatibility from "#nuxt-og-image/compatibility";
 import { componentNames } from "#nuxt-og-image/component-names.mjs";
 export default defineEventHandler(async (e) => {

package/dist/runtime/nitro/routes/{__og-image__/font-[name]-[weight].[extension].mjs → font.mjs}

@@ -1,7 +1,6 @@
-import { createError, defineEventHandler, getQuery, proxyRequest, sendRedirect, setHeader } from "h3";
+import { createError, defineEventHandler, getQuery, proxyRequest, sendRedirect } from "h3";
 import { parseURL } from "ufo";
-import { getExtension, normaliseFontInput, useOgImageRuntimeConfig } from "../../../utils.mjs";
-import { assets } from "#internal/nitro/virtual/server-assets";
+import { normaliseFontInput, useOgImageRuntimeConfig } from "../../shared.mjs";
 export default defineEventHandler(async (e) => {
   const path = parseURL(e.path).pathname;
   const [_name, _weight] = path.split("/font/")[1].split(".")[0].split("/");
@@ -25,12 +24,6 @@ export default defineEventHandler(async (e) => {
       statusMessage: `[Nuxt OG Image] Font ${name}:${weight} not found`
     });
   }
-  if (import.meta.dev || import.meta.prerender) {
-    if (font.key && await assets.hasItem(font.key)) {
-      setHeader(e, "Content-Type", `font/${getExtension(font.path)}`);
-      return assets.getItemRaw(font.key);
-    }
-  }
   const css = await globalThis.$fetch(`https://fonts.googleapis.com/css2?family=${name}:wght@${weight}`, {
     headers: {
       // Make sure it returns TTF.

package/dist/runtime/nitro/routes/{__og-image__/image.mjs → image.mjs}

@@ -1,12 +1,10 @@
 import { H3Error, createError, defineEventHandler, getQuery, setHeader } from "h3";
-import { resolveRendererContext } from "../../../core/utils/resolveRendererContext.mjs";
-import { fetchIsland } from "../../../core/html/fetchIsland.mjs";
-import { devIframeTemplate } from "../../../core/html/devIframeTemplate.mjs";
-import { applyInlineCss } from "../../../core/html/applyInlineCss.mjs";
-import { useOgImageBufferCache } from "../../../cache.mjs";
-import { useOgImageRuntimeConfig } from "../../../utils.mjs";
+import { useOgImageBufferCache } from "../util/cache.mjs";
+import { useOgImageRuntimeConfig } from "../../shared.mjs";
+import { resolveContext } from "../og-image/context.mjs";
+import { html } from "../og-image/templates/html.mjs";
 export default defineEventHandler(async (e) => {
-  const ctx = await resolveRendererContext(e);
+  const ctx = await resolveContext(e);
   if (ctx instanceof H3Error)
     return ctx;
   const { isDebugJsonPayload, extension, options, renderer } = ctx;
@@ -18,8 +16,6 @@ export default defineEventHandler(async (e) => {
       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 (options.component !== "PageScreenshot" && await applyInlineCss(ctx, await fetchIsland(ctx)))
-      compatibilityHints.push("Inlining CSS is not supported on Cloudflare.");
     setHeader(e, "Content-Type", "application/json");
     return {
       siteConfig: {
@@ -34,7 +30,7 @@ export default defineEventHandler(async (e) => {
   switch (extension) {
     case "html":
       setHeader(e, "Content-Type", `text/html`);
-      return devIframeTemplate(ctx);
+      return html(ctx);
     case "svg":
       if (!debug && !import.meta.dev) {
         return createError({

package/dist/runtime/{cache.d.ts → nitro/util/cache.d.ts}

@@ -1,5 +1,5 @@
 import { type H3Error } from 'h3';
-import type { OgImageRenderEventContext } from './types';
+import type { OgImageRenderEventContext } from '../../types';
 export declare function useOgImageBufferCache(ctx: OgImageRenderEventContext, options: {
     baseCacheKey: string | false;
     cacheMaxAgeSeconds?: number;

package/dist/runtime/nitro/util/encoding.d.ts

@@ -0,0 +1,3 @@
+export declare function htmlDecodeQuotes(html: string): string;
+export declare function decodeHtml(html: string): string;
+export declare function decodeObjectHtmlEntities(obj: Record<string, string | any>): Record<string, any>;

package/dist/runtime/nitro/util/encoding.mjs

@@ -0,0 +1,15 @@
+export function htmlDecodeQuotes(html) {
+  return html.replace(/"/g, '"').replace(/'/g, "'").replace(/'/g, "'");
+}
+export function decodeHtml(html) {
+  return html.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&cent;/g, "\xA2").replace(/&pound;/g, "\xA3").replace(/&yen;/g, "\xA5").replace(/&euro;/g, "\u20AC").replace(/&copy;/g, "\xA9").replace(/&reg;/g, "\xAE").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/").replace(/&#([0-9]+);/g, (full, int) => {
+    return String.fromCharCode(Number.parseInt(int));
+  });
+}
+export function decodeObjectHtmlEntities(obj) {
+  Object.entries(obj).forEach(([key, value]) => {
+    if (typeof value === "string")
+      obj[key] = decodeHtml(value);
+  });
+  return obj;
+}