nuxt-og-image 3.0.0-beta.4 → 3.0.0-beta.41

package/dist/runtime/core/bindings/satori/stackblitz.mjs

@@ -0,0 +1,13 @@
+import _satori, { init } from "satori/wasm";
+import initYoga from "yoga-wasm-web";
+import { readWasmFile } from "../../utils/wasm.mjs";
+const wasm = readWasmFile("yoga-wasm-web/dist/yoga.wasm").then(async (yoga) => await initYoga(yoga));
+export default {
+  initWasmPromise: new Promise((resolve) => {
+    wasm.then((yoga) => {
+      init(yoga);
+      resolve();
+    });
+  }),
+  satori: _satori
+};

package/dist/runtime/core/bindings/satori/wasm.d.ts

@@ -0,0 +1,6 @@
+import _satori from 'satori/wasm';
+declare const _default: {
+    initWasmPromise: Promise<void>;
+    satori: typeof _satori;
+};
+export default _default;

package/dist/runtime/core/bindings/satori/wasm.mjs

@@ -0,0 +1,14 @@
+import _satori from "satori/wasm";
+import initYoga from "yoga-wasm-web";
+import { init } from "satori";
+import { importWasm } from "../../utils/wasm.mjs";
+const wasm = importWasm(import("yoga-wasm-web/dist/yoga.wasm")).then(async (yoga) => await initYoga(yoga));
+export default {
+  initWasmPromise: new Promise((resolve) => {
+    wasm.then((yoga) => {
+      init(yoga);
+      resolve();
+    });
+  }),
+  satori: _satori
+};

package/dist/runtime/core/cache/emojis.d.ts

@@ -0,0 +1 @@
+export declare const emojiCache: import("unstorage/dist/shared/unstorage.745f9650").a<string>;

package/dist/runtime/core/cache/emojis.mjs

@@ -0,0 +1,5 @@
+import { createStorage } from "unstorage";
+import lruCacheDriver from "unstorage/drivers/lru-cache";
+export const emojiCache = createStorage({
+  driver: lruCacheDriver({ max: 1e3 })
+});

package/dist/runtime/core/cache/htmlPayload.d.ts

@@ -0,0 +1,5 @@
+import type { OgImageOptions } from '../../types';
+export declare const htmlPayloadCache: import("unstorage/dist/shared/unstorage.745f9650").a<{
+    expiresAt: number;
+    value: OgImageOptions;
+}>;

package/dist/runtime/core/cache/htmlPayload.mjs

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

package/dist/runtime/core/cache/prerender.d.ts

@@ -1,6 +1,6 @@
 import type { Browser } from 'playwright-core';
 import type { OgImageOptions } from '../../types';
-export declare const prerenderCache: import("unstorage/dist/shared/unstorage.745f9650").a<OgImageOptions> | undefined;
+export declare const prerenderOptionsCache: import("unstorage/dist/shared/unstorage.745f9650").a<OgImageOptions<"NuxtSeo">> | undefined;
 export declare const prerenderChromiumContext: {
     browser?: Browser;
 };

package/dist/runtime/core/cache/prerender.mjs

@@ -1,6 +1,6 @@
 import { createStorage } from "unstorage";
 import lruCacheDriver from "unstorage/drivers/lru-cache";
-export const prerenderCache = import.meta.prerender ? createStorage({
+export const prerenderOptionsCache = import.meta.prerender ? createStorage({
   driver: lruCacheDriver({ max: 1e3 })
 }) : void 0;
 export const prerenderChromiumContext = { browser: void 0 };

package/dist/runtime/core/env/assets.d.ts

@@ -1,2 +1 @@
-export declare function base64ToArrayBuffer(base64: string): ArrayBuffer;
 export declare function toBase64Image(fileName: string, data: string | ArrayBuffer): string;

package/dist/runtime/core/env/assets.mjs

@@ -1,8 +1,4 @@
 import { Buffer } from "node:buffer";
-export function base64ToArrayBuffer(base64) {
-  const buffer = Buffer.from(base64, "base64");
-  return new Uint8Array(buffer).buffer;
-}
 export function toBase64Image(fileName, data) {
   const base64 = typeof data === "string" ? data : Buffer.from(data).toString("base64");
   let type = "image/jpeg";

package/dist/runtime/core/font/fetch.d.ts

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

package/dist/runtime/core/font/fetch.mjs

@@ -1,29 +1,46 @@
-import { Buffer } from "node:buffer";
-import { base64ToArrayBuffer } from "../env/assets.mjs";
+import { createError } from "h3";
 import { fontCache } from "./cache.mjs";
 import { useNitroOrigin, useStorage } from "#imports";
-export async function loadFont(e, font) {
-  const fontKey = `${font.name}:${font.weight}`;
-  const storageKey = `assets:nuxt-og-image:font:${fontKey}`;
+import { assets } from "#internal/nitro/virtual/server-assets";
+export async function loadFont({ e }, font) {
+  const fontKey = font.key || `${font.name}:${font.weight}`;
   if (fontCache[fontKey])
     return fontCache[fontKey];
-  const [name, weight] = fontKey.split(":");
+  const { name, weight } = font;
   let data;
-  if (await useStorage().hasItem(storageKey))
-    data = base64ToArrayBuffer(await useStorage().getItem(storageKey));
+  if (import.meta.dev || import.meta.prerender) {
+    if (font.key && await assets.hasItem(font.key))
+      data = await assets.getItemRaw(font.key);
+  }
   if (!data) {
     if (font.path) {
-      data = await e.$fetch(font.path, {
-        baseURL: useNitroOrigin(e),
-        responseType: "arrayBuffer"
-      });
+      if (import.meta.dev || import.meta.prerender) {
+        const key = `root:public${font.path.replace("./", ":").replace("/", ":")}`;
+        if (await useStorage().hasItem(key))
+          data = await useStorage().getItemRaw(key);
+        if (!data) {
+          data = await e.$fetch(font.path, {
+            responseType: "arrayBuffer"
+          });
+        }
+      } else {
+        data = await e.$fetch(font.path, {
+          baseURL: useNitroOrigin(e),
+          responseType: "arrayBuffer"
+        });
+      }
     } else {
       data = await e.$fetch(`/__og-image__/font/${name}/${weight}.ttf`, {
         responseType: "arrayBuffer"
       });
     }
   }
-  fontCache[fontKey] = { name, weight: Number(weight), data, style: "normal" };
-  await useStorage().setItem(storageKey, Buffer.from(data).toString("base64"));
-  return fontCache[fontKey];
+  if (data) {
+    fontCache[fontKey] = { name, weight: Number(weight), data, style: "normal" };
+    return fontCache[fontKey];
+  }
+  return createError({
+    statusCode: 500,
+    statusMessage: `Failed to fetch font: ${fontKey}`
+  });
 }

package/dist/runtime/core/html/applyEmojis.d.ts

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

package/dist/runtime/core/html/applyEmojis.mjs

@@ -0,0 +1,37 @@
+import defaultCharMap from "@iconify-json/noto/chars.json";
+import { emojiCache } from "../cache/emojis.mjs";
+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;
+  const matches = html.match(RE_MATCH_EMOJIS);
+  if (!matches)
+    return html;
+  const replacements = await Promise.all(matches.map(async (match) => {
+    const unicode = match.codePointAt(0).toString(16);
+    const emoji = defaultCharMap[unicode];
+    if (emoji) {
+      const key = ["1", ctx.options.emojis, emoji].join(":");
+      let svg;
+      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`, {
+          responseType: "text"
+        });
+        if (svg === "404")
+          svg = void 0;
+        if (svg)
+          await emojiCache.setItem(key, svg);
+      }
+      if (svg)
+        return `
+${svg.replace("<svg ", '<svg data-emoji style="margin: 0 .05em 0 .15em; vertical-align: -0.1em;" ')}
+`;
+      return match;
+    }
+  }));
+  const finalHtml = html.replace(RE_MATCH_EMOJIS, () => replacements.shift());
+  const modified = finalHtml !== island.html;
+  island.html = finalHtml;
+  return modified;
+}

package/dist/runtime/core/html/applyInlineCss.d.ts

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

package/dist/runtime/core/html/applyInlineCss.mjs

@@ -0,0 +1,32 @@
+import { useCssInline } from "../renderers/satori/instances.mjs";
+import { useNitroOrigin } from "#imports";
+import cssInline from "#nuxt-og-image/bindings/css-inline";
+export async function applyInlineCss({ e }, island) {
+  let html = island.html;
+  const componentInlineStyles = island.head.link.filter((l) => l.href.startsWith("/_nuxt/components"));
+  const usingInlineCss = !!componentInlineStyles.length;
+  if (!cssInline.__unenv__ && componentInlineStyles.length) {
+    const css = island.head.style.map((s) => s.innerHTML).join("\n");
+    const linksToCss = (await Promise.all(
+      componentInlineStyles.map((l) => {
+        return e.$fetch(`${l.href}&hmr=false`, {
+          responseType: "text",
+          baseURL: useNitroOrigin(e)
+        }).then((res) => {
+          return res.trim().split("\n").filter((l2) => !l2.startsWith("//")).join("\n").trim();
+        });
+      })
+    )).join("\n");
+    const cssToInline = `${linksToCss}${css}`;
+    const cssInline2 = await useCssInline();
+    html = cssInline2.inline(island.html, {
+      load_remote_stylesheets: false,
+      extra_css: cssToInline
+    });
+    const classes = cssToInline.match(/\.([a-zA-Z0-9-_]+)/g)?.map((c) => c.replace(".", ""));
+    if (classes)
+      html = html.replace(new RegExp(`class="(${classes.join("|")})"`, "g"), "");
+    island.html = html;
+  }
+  return usingInlineCss;
+}

package/dist/runtime/core/html/devIframeTemplate.d.ts

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

package/dist/runtime/core/html/{fetch.mjs → devIframeTemplate.mjs}

@@ -1,37 +1,21 @@
-import { createError } from "h3";
-import { hash } from "ohash";
 import { createHeadCore } from "@unhead/vue";
-import twemoji from "twemoji";
 import { renderSSRHead } from "@unhead/ssr";
-import { useRuntimeConfig } from "#imports";
-export async function fetchHTML(e, options) {
-  const { fonts, satoriOptions } = useRuntimeConfig()["nuxt-og-image"];
-  if (!options.component) {
-    throw createError({
-      statusCode: 500,
-      statusMessage: `Nuxt OG Image trying to render an invalid component. Received options ${JSON.stringify(options)}`
-    });
-  }
-  const hashId = hash([options.component, options, Math.random() * 100]);
-  const island = await e.$fetch(`/__nuxt_island/${options.component}_${hashId}.json`, {
-    params: {
-      props: JSON.stringify(options)
-    }
-  });
+import { useOgImageRuntimeConfig } from "../../utils.mjs";
+import { applyEmojis } from "./applyEmojis.mjs";
+import { fetchIsland } from "./fetchIsland.mjs";
+import { theme } from "#nuxt-og-image/unocss-config.mjs";
+export async function devIframeTemplate(ctx) {
+  const { options } = ctx;
+  const { fonts } = useOgImageRuntimeConfig();
+  const island = await fetchIsland(ctx);
   const head = createHeadCore();
   head.push(island.head);
   let defaultFontFamily = "sans-serif";
   const firstFont = fonts[0];
   if (firstFont)
     defaultFontFamily = firstFont.name;
+  await applyEmojis(ctx, island);
   let html = island.html;
-  try {
-    html = twemoji.parse(html, {
-      folder: "svg",
-      ext: ".svg"
-    });
-  } catch (e2) {
-  }
   const googleFonts = {};
   fonts.filter((font) => !font.path).forEach((font) => {
     if (!googleFonts[font.name])
@@ -46,21 +30,23 @@ export async function fetchHTML(e, options) {
       },
       {
         innerHTML: `body {
-    transform: scale(${options.scale || 1});
+    transform: scale(${options.props.scale || 1});
     transform-origin: top left;
     max-height: 100vh;
     position: relative;
     width: ${options.width}px;
     height: ${options.height}px;
     overflow: hidden;
-    background-color: ${options.mode === "dark" ? "#1b1b1b" : "#fff"};
+    background-color: ${options.props.colorMode === "dark" ? "#1b1b1b" : "#fff"};
+}
+div {
+  display: flex;
+  flex-direction: column;
+}
+svg[data-emoji] {
+  display: inline-block;
 }
-img.emoji {
-   height: 1em;
-   width: 1em;
-   margin: 0 .05em 0 .1em;
-   vertical-align: -0.1em;
-}`
+`
       },
       ...fonts.filter((font) => font.path).map((font) => {
         return `
@@ -80,15 +66,20 @@ img.emoji {
     ],
     script: [
       {
-        src: "https://cdn.tailwindcss.com"
+        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(),
+    ],
+  }
+`
       },
       {
-        innerHTML: `tailwind.config = {
-  corePlugins: {
-    preflight: false,
-  },
-  theme: ${JSON.stringify(satoriOptions?.tailwindConfig?.theme || {})}
-}`
+        src: "https://cdn.jsdelivr.net/npm/@unocss/runtime/core.global.js"
       }
     ],
     link: [
@@ -98,6 +89,7 @@ img.emoji {
         rel: "stylesheet"
       },
       // have to add each weight as their own stylesheet
+      // we should use the local font file no?
       ...Object.entries(googleFonts).map(([name, fonts2]) => {
         return {
           href: `https://fonts.googleapis.com/css2?family=${name}:wght@${fonts2.map((f) => f.weight).join(";")}&display=swap`,
@@ -108,10 +100,9 @@ img.emoji {
   });
   html = html.replaceAll(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
   const headChunk = await renderSSRHead(head);
-  const htmlTemplate = `<!DOCTYPE html>
+  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>
 </html>`;
-  return htmlTemplate;
 }

package/dist/runtime/core/html/fetchIsland.d.ts

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

package/dist/runtime/core/html/fetchIsland.mjs

@@ -0,0 +1,17 @@
+import { createError } from "h3";
+import { hash } from "ohash";
+export function fetchIsland({ options, e }) {
+  if (!options.component) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `Nuxt OG Image trying to render an invalid component. Received options ${JSON.stringify(options)}`
+    });
+  }
+  const hashId = hash([options.component, options]);
+  const props = typeof options.props !== "undefined" ? options.props : options;
+  return e.$fetch(`/__nuxt_island/${options.component}_${hashId}.json`, {
+    params: {
+      props: JSON.stringify(props)
+    }
+  });
+}

package/dist/runtime/core/options/fetch.d.ts

@@ -1,3 +1,3 @@
 import { type H3Error, type H3Event } from 'h3';
 import type { OgImageOptions } from '../../types';
-export declare function fetchPathHtmlAndExtractOptions(e: H3Event, path: string): Promise<H3Error | OgImageOptions>;
+export declare function fetchPathHtmlAndExtractOptions(e: H3Event, path: string, key: string): Promise<H3Error | OgImageOptions>;

package/dist/runtime/core/options/fetch.mjs

@@ -1,6 +1,10 @@
 import { createError } from "h3";
+import { htmlPayloadCache } from "../cache/htmlPayload.mjs";
 import { extractAndNormaliseOgImageOptions } from "./extract.mjs";
-export async function fetchPathHtmlAndExtractOptions(e, path) {
+export 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);
@@ -11,10 +15,11 @@ export async function fetchPathHtmlAndExtractOptions(e, path) {
     });
   }
   const payload = extractAndNormaliseOgImageOptions(html);
-  if (!payload) {
-    return createError({
-      statusCode: 400,
-      statusMessage: `The path is missing the Nuxt OG Image payload. Did you forget to use defineOgImage()?`
+  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/core/options/normalise.d.ts

@@ -1,2 +1,2 @@
-import type { OgImageOptions } from '../../types';
-export declare function normaliseOptions(_options: OgImageOptions): any;
+import type { DefineOgImageInput, OgImageOptions, OgImagePrebuilt } from '../../types';
+export declare function normaliseOptions(_options: DefineOgImageInput): OgImageOptions | OgImagePrebuilt;

package/dist/runtime/core/options/normalise.mjs

@@ -1,7 +1,8 @@
-import { unref, useRuntimeConfig } from "#imports";
+import { useOgImageRuntimeConfig } from "../../utils.mjs";
+import { unref } from "#imports";
 import { componentNames } from "#build/og-image-component-names.mjs";
 export function normaliseOptions(_options) {
-  const { runtimeSatori } = useRuntimeConfig()["nuxt-og-image"];
+  const { runtimeSatori } = useOgImageRuntimeConfig();
   const options = { ...unref(_options) };
   if (options.static)
     options.cache = options.cache || options.static;

package/dist/runtime/core/renderers/chromium/index.mjs

@@ -1,11 +1,13 @@
-import { getOgImagePath } from "../../../utilts.mjs";
 import { prerenderChromiumContext } from "../../cache/prerender.mjs";
 import { createScreenshot } from "./screenshot.mjs";
 import { createBrowser } from "#nuxt-og-image/bindings/chromium";
 const ChromiumRenderer = {
   name: "chromium",
-  supportedFormats: ["png", "jpeg"],
-  async createImage(e, options) {
+  supportedFormats: ["png", "jpeg", "jpg"],
+  async debug() {
+    return {};
+  },
+  async createImage(ctx) {
     const browser = (import.meta.prerender ? prerenderChromiumContext.browser : null) || await createBrowser();
     if (!browser) {
       return createError({
@@ -15,10 +17,7 @@ const ChromiumRenderer = {
     }
     if (import.meta.prerender)
       prerenderChromiumContext.browser = browser;
-    return createScreenshot(e, browser, {
-      ...options,
-      path: options.component === "PageScreenshot" ? options.path : getOgImagePath(options.path, "html")
-    }).finally(async () => {
+    return createScreenshot(ctx, browser).finally(async () => {
       await browser.close();
     });
   }

package/dist/runtime/core/renderers/chromium/screenshot.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="node" />
 import type { Buffer } from 'node:buffer';
 import type { Browser } from 'playwright-core';
-import type { H3Event } from 'h3';
-import type { RendererOptions } from '../../../types';
-export declare function createScreenshot(e: H3Event, browser: Browser, options: RendererOptions): Promise<Buffer>;
+import type { OgImageRenderEventContext } from '../../../types';
+export declare function createScreenshot({ basePath, e, options, extension }: OgImageRenderEventContext, browser: Browser): Promise<Buffer>;

package/dist/runtime/core/renderers/chromium/screenshot.mjs

@@ -1,21 +1,21 @@
-import { withQuery } from "ufo";
+import { joinURL, withQuery } from "ufo";
 import { useNitroOrigin } from "#imports";
-export async function createScreenshot(e, browser, options) {
+export async function createScreenshot({ basePath, e, options, extension }, browser) {
+  const path = options.component === "PageScreenshot" ? basePath : joinURL("/__og-image__/image", basePath, `og.html`);
   const page = await browser.newPage({
     colorScheme: options.colorScheme,
     baseURL: useNitroOrigin(e)
   });
   if (import.meta.prerender && !options.html) {
-    options.html = await e.$fetch(options.path);
+    options.html = await e.$fetch(path);
   }
   try {
     await page.setViewportSize({
       width: options.width || 1200,
       height: options.height || 630
     });
-    const isHtml = options.html || options.path?.startsWith("html:");
-    if (isHtml) {
-      const html = options.html || options.path?.substring(5);
+    if (options.html) {
+      const html = options.html;
       await page.evaluate((html2) => {
         document.open("text/html");
         document.write(html2);
@@ -23,7 +23,7 @@ export async function createScreenshot(e, browser, options) {
       }, html);
       await page.waitForLoadState("networkidle");
     } else {
-      await page.goto(withQuery(options.path, options), {
+      await page.goto(withQuery(path, options.props), {
         timeout: 1e4,
         waitUntil: "networkidle"
       });
@@ -31,7 +31,7 @@ export async function createScreenshot(e, browser, options) {
     const screenshotOptions = {
       timeout: 1e4,
       animations: "disabled",
-      type: options.extension
+      type: extension === "png" ? "png" : "jpeg"
     };
     if (options.mask) {
       await page.evaluate((mask) => {

package/dist/runtime/core/renderers/satori/fonts.d.ts

@@ -1,3 +1,3 @@
-import type { FontConfig } from '../../../types';
+import type { FontConfig, OgImageRenderEventContext } from '../../../types';
 export declare const satoriFonts: any[];
-export declare function loadFonts(baseURL: string, fonts: FontConfig[]): Promise<any>;
+export declare function loadFonts(e: OgImageRenderEventContext, fonts: FontConfig[]): Promise<any>;

package/dist/runtime/core/renderers/satori/fonts.mjs

@@ -1,8 +1,8 @@
 import { loadFont } from "../../font/fetch.mjs";
 export const satoriFonts = [];
 let fontLoadPromise = null;
-export function loadFonts(baseURL, fonts) {
+export function loadFonts(e, fonts) {
   if (fontLoadPromise)
     return fontLoadPromise;
-  return fontLoadPromise = Promise.all(fonts.map((font) => loadFont(baseURL, font)));
+  return fontLoadPromise = Promise.all(fonts.map((font) => loadFont(e, font)));
 }

package/dist/runtime/core/renderers/satori/index.d.ts

@@ -1,5 +1,4 @@
-import type { H3Event } from 'h3';
-import type { Renderer, RendererOptions } from '../../../types';
-export declare function createSvg(e: H3Event, options: RendererOptions): Promise<string>;
+import type { OgImageRenderEventContext, Renderer } from '../../../types';
+export declare function createSvg(event: OgImageRenderEventContext): Promise<string>;
 declare const SatoriRenderer: Renderer;
 export default SatoriRenderer;