nuxt-og-image 3.0.0-beta.3 → 3.0.0-beta.30

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

@@ -1,8 +1,9 @@
 import { Buffer } from "node:buffer";
+import { createError } from "h3";
 import { base64ToArrayBuffer } from "../env/assets.mjs";
 import { fontCache } from "./cache.mjs";
 import { useNitroOrigin, useStorage } from "#imports";
-export async function loadFont(e, font) {
+export async function loadFont({ e }, font) {
   const fontKey = `${font.name}:${font.weight}`;
   const storageKey = `assets:nuxt-og-image:font:${fontKey}`;
   if (fontCache[fontKey])
@@ -13,17 +14,28 @@ export async function loadFont(e, font) {
     data = base64ToArrayBuffer(await useStorage().getItem(storageKey));
   if (!data) {
     if (font.path) {
-      data = await e.$fetch(font.path, {
-        baseURL: useNitroOrigin(e),
-        responseType: "arrayBuffer"
-      });
+      if (import.meta.prerender) {
+        const key = `root:public${font.path.replace("./", ":").replace("/", ":")}`;
+        data = await useStorage().getItemRaw(key);
+      } 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" };
+    await useStorage().setItem(storageKey, Buffer.from(data).toString("base64"));
+    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 { H3EventOgImageRender } from '../../types';
+export declare function applyEmojis(ctx: H3EventOgImageRender, 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 { H3EventOgImageRender } from '../../types';
+export declare function applyInlineCss({ e }: H3EventOgImageRender, 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 { H3EventOgImageRender } from '../../types';
+export declare function devIframeTemplate(ctx: H3EventOgImageRender): 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 { H3EventOgImageRender } from '../../types';
+export declare function fetchIsland({ options, e }: H3EventOgImageRender): 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 { H3EventOgImageRender } from '../../../types';
+export declare function createScreenshot({ basePath, e, options, extension }: H3EventOgImageRender, browser: Browser): Promise<Buffer>;

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

@@ -1,6 +1,7 @@
-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" ? options.path : joinURL("/__og-image__/image", basePath, `og.html`);
   const page = await browser.newPage({
     colorScheme: options.colorScheme,
     baseURL: useNitroOrigin(e)
@@ -23,7 +24,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 +32,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, H3EventOgImageRender } from '../../../types';
 export declare const satoriFonts: any[];
-export declare function loadFonts(baseURL: string, fonts: FontConfig[]): Promise<any>;
+export declare function loadFonts(e: H3EventOgImageRender, 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 { H3EventOgImageRender, Renderer } from '../../../types';
+export declare function createSvg(event: H3EventOgImageRender): Promise<string>;
 declare const SatoriRenderer: Renderer;
 export default SatoriRenderer;

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

@@ -1,13 +1,14 @@
 import { defu } from "defu";
+import { useOgImageRuntimeConfig } from "../../../utils.mjs";
 import { createVNodes } from "./vnodes.mjs";
 import { loadFonts, satoriFonts } from "./fonts.mjs";
 import { useResvg, useSatori, useSharp } from "./instances.mjs";
-import { useRuntimeConfig } from "#imports";
-export async function createSvg(e, options) {
-  const { fonts, satoriOptions } = useRuntimeConfig()["nuxt-og-image"];
-  const vnodes = await createVNodes(e, options);
+export async function createSvg(event) {
+  const { options } = event;
+  const { fonts, satoriOptions } = useOgImageRuntimeConfig();
+  const vnodes = await createVNodes(event);
   if (!satoriFonts.length)
-    satoriFonts.push(...await loadFonts(e, fonts));
+    satoriFonts.push(...await loadFonts(event, fonts));
   const satori = await useSatori();
   return satori(vnodes, defu(options.satori, satoriOptions, {
     fonts: satoriFonts,
@@ -16,38 +17,40 @@ export async function createSvg(e, options) {
     height: options.height
   }));
 }
-async function createPng(e, options) {
-  const { resvgOptions } = useRuntimeConfig()["nuxt-og-image"];
-  const svg = await createSvg(e, options);
+async function createPng(event) {
+  const { resvgOptions } = useOgImageRuntimeConfig();
+  const svg = await createSvg(event);
   const Resvg = await useResvg();
   const resvg = new Resvg(svg, defu(
-    options.resvg,
+    event.options.resvg,
     resvgOptions
   ));
   const pngData = resvg.render();
   return pngData.asPng();
 }
-async function createJpeg(e, options) {
-  const { sharpOptions } = useRuntimeConfig()["nuxt-og-image"];
-  const png = await createPng(e, options);
+async function createJpeg(event) {
+  const { sharpOptions } = useOgImageRuntimeConfig();
+  const png = await createPng(event);
   const sharp = await useSharp();
-  return sharp(png, defu(options.sharp, sharpOptions)).jpeg(defu(options.sharp, sharpOptions)).toBuffer();
+  return sharp(png, defu(event.options.sharp, sharpOptions)).jpeg().toBuffer();
 }
 const SatoriRenderer = {
   name: "satori",
-  supportedFormats: ["svg", "png", "jpeg", "jpg", "json"],
-  async createImage(e, options) {
-    switch (options.extension) {
-      case "json":
-        return createVNodes(e, options);
-      case "svg":
-        return createSvg(e, options);
+  supportedFormats: ["png", "jpeg", "jpg", "json"],
+  async createImage(e) {
+    switch (e.extension) {
       case "png":
-        return createPng(e, options);
+        return createPng(e);
       case "jpeg":
       case "jpg":
-        return createJpeg(e, options);
+        return createJpeg(e);
     }
+  },
+  async debug(e) {
+    return {
+      vnodes: await createVNodes(e),
+      svg: await createSvg(e)
+    };
   }
 };
 export default SatoriRenderer;

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

@@ -1,4 +1,6 @@
 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(): {
@@ -37,3 +39,4 @@ export declare function useResvg(): Promise<new (svg: string | Uint8Array, optio
 }>;
 export declare function useSatori(): Promise<typeof _satori>;
 export declare function useSharp(): Promise<any>;
+export declare function useCssInline(): Promise<any>;

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

@@ -1,6 +1,17 @@
+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;
@@ -15,3 +26,7 @@ export async function useSharp() {
   sharpInstance.instance = sharpInstance.instance || await import("#nuxt-og-image/bindings/sharp").then((m) => m.default);
   return sharpInstance.instance;
 }
+export async function useCssInline() {
+  cssInlineInstance.instance = cssInlineInstance.instance || await import("#nuxt-og-image/bindings/css-inline").then((m) => m.default);
+  return cssInlineInstance.instance;
+}

package/dist/runtime/core/renderers/satori/plugins/emojis.mjs

@@ -1,26 +1,28 @@
 import { defineSatoriTransformer } from "../utils.mjs";
 function isEmojiFilter(node) {
-  return node.type === "img" && node.props?.class?.includes("emoji");
+  return node.type === "svg" && typeof node.props?.["data-emoji"] !== "undefined";
 }
 export default defineSatoriTransformer([
   // need to make sure parent div has flex for the emoji to render inline
   {
-    filter: (node) => node.type === "div" && Array.isArray(node.props?.children) && node.props.children.some(isEmojiFilter),
+    filter: (node) => ["div", "p"].includes(node.type) && Array.isArray(node.props?.children) && node.props.children.some(isEmojiFilter),
     transform: async (node) => {
       node.props.style = node.props.style || {};
       node.props.style.display = "flex";
       node.props.style.alignItems = "center";
-    }
-  },
-  {
-    filter: isEmojiFilter,
-    transform: async (node) => {
-      node.props.style = node.props.style || {};
-      node.props.style.height = "1em";
-      node.props.style.width = "1em";
-      node.props.style.margin = "0 .3em 0 .3em";
-      node.props.style.verticalAlign = "0.1em";
-      node.props.class = "";
+      node.props.children = node.props.children.map((child) => {
+        if (typeof child === "string") {
+          return {
+            type: "div",
+            props: {
+              children: child
+            }
+          };
+        }
+        if (child.props.class?.includes("emoji"))
+          delete child.props.class;
+        return child;
+      });
     }
   }
 ]);