nuxt-og-image 5.1.12 → 6.0.0-beta.1

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

@@ -1,11 +1,90 @@
+import { getEmojiSvg } from "#og-image/emoji-transform";
+import { html as convertHtmlToSatori } from "satori-html";
+import { RE_MATCH_EMOJIS } from "../transforms/emojis/emoji-utils.js";
 import { defineSatoriTransformer } from "../utils.js";
-function isEmojiFilter(node) {
+function isEmojiSvg(node) {
   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
+  // Transform text nodes that contain emojis to replace them with SVG nodes
   {
-    filter: (node) => ["div", "p"].includes(node.type) && Array.isArray(node.props?.children) && node.props.children.some(isEmojiFilter),
+    filter: (node) => {
+      if (typeof node.props?.children !== "string")
+        return false;
+      RE_MATCH_EMOJIS.lastIndex = 0;
+      return RE_MATCH_EMOJIS.test(node.props.children);
+    },
+    transform: async (node, ctx) => {
+      const text = node.props.children;
+      RE_MATCH_EMOJIS.lastIndex = 0;
+      const matches = [...text.matchAll(RE_MATCH_EMOJIS)];
+      if (!matches.length)
+        return;
+      const children = [];
+      let lastIndex = 0;
+      for (const match of matches) {
+        const emoji = match[0];
+        const emojiIndex = match.index;
+        if (emojiIndex > lastIndex) {
+          const beforeText = text.slice(lastIndex, emojiIndex);
+          if (beforeText)
+            children.push(beforeText);
+        }
+        const svg = await getEmojiSvg(ctx, emoji);
+        if (svg) {
+          const parsedNode = convertHtmlToSatori(svg);
+          const nodeChildren = parsedNode?.props?.children;
+          if (nodeChildren?.[0]) {
+            const svgNode = nodeChildren[0];
+            if (svgNode.props) {
+              svgNode.props["data-emoji"] = true;
+              const existingStyle = svgNode.props.style || {};
+              if (existingStyle.display === "inline-block")
+                delete existingStyle.display;
+              svgNode.props.style = {
+                ...existingStyle,
+                width: "1em",
+                height: "1em"
+              };
+            }
+            children.push(svgNode);
+          } else {
+            children.push(emoji);
+          }
+        } else {
+          children.push(emoji);
+        }
+        lastIndex = emojiIndex + emoji.length;
+      }
+      if (lastIndex < text.length) {
+        const afterText = text.slice(lastIndex);
+        if (afterText)
+          children.push(afterText);
+      }
+      if (children.length >= 1) {
+        const vnodeChildren = children.map((child) => {
+          if (typeof child === "string") {
+            return {
+              type: "div",
+              props: {
+                children: child
+              }
+            };
+          }
+          return child;
+        });
+        node.props.children = vnodeChildren;
+        node.props.style = node.props.style || {};
+        node.props.style.display = "flex";
+        node.props.style.alignItems = "center";
+      }
+    }
+  },
+  // Keep the existing logic for styling containers with emoji SVGs
+  {
+    filter: (node) => ["div", "p"].includes(node.type) && Array.isArray(node.props?.children) && node.props.children.some(
+      (child) => child.type === "svg" && child.props?.["data-emoji"] || isEmojiSvg(child)
+    ),
     transform: (node) => {
       node.props.style = node.props.style || {};
       node.props.style.display = "flex";
@@ -19,7 +98,7 @@ export default defineSatoriTransformer([
             }
           };
         }
-        if (child.props.class?.includes("emoji"))
+        if (child.props?.class?.includes("emoji"))
           delete child.props.class;
         return child;
       });

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

@@ -1,17 +1,27 @@
 import { decodeHtml } from "../../../util/encoding.js";
 import { defineSatoriTransformer } from "../utils.js";
 export default defineSatoriTransformer([
-  // clean up
+  // clean up vue inspector data attributes
   {
     filter: (node) => node.props?.["data-v-inspector"],
     transform: (node) => {
       delete node.props["data-v-inspector"];
     }
   },
+  // decode HTML entities in string children
   {
     filter: (node) => typeof node.props?.children === "string",
     transform: (node) => {
       node.props.children = decodeHtml(node.props.children);
     }
+  },
+  // decode HTML entities in array children (text nodes with siblings)
+  {
+    filter: (node) => Array.isArray(node.props?.children),
+    transform: (node) => {
+      node.props.children = node.props.children.map(
+        (child) => typeof child === "string" ? decodeHtml(child) : child
+      );
+    }
   }
 ]);

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

@@ -9,7 +9,7 @@ import { defineSatoriTransformer } from "../utils.js";
 async function resolveLocalFilePathImage(publicStoragePath, src) {
   const normalizedSrc = withoutLeadingSlash(
     src.replace("_nuxt/@fs/", "").replace("_nuxt/", "").replace("./", "")
-  );
+  ).replaceAll("/", ":");
   const key = `${publicStoragePath}:${normalizedSrc}`;
   if (await useStorage().hasItem(key))
     return await useStorage().getItemRaw(key);
@@ -54,6 +54,10 @@ export default defineSatoriTransformer([
         }).catch(() => {
         });
       }
+      if (typeof node.props.width === "string")
+        node.props.width = Number(node.props.width) || void 0;
+      if (typeof node.props.height === "string")
+        node.props.height = Number(node.props.height) || void 0;
       if (imageBuffer && (!node.props.width || !node.props.height)) {
         try {
           const imageSize = sizeOf(imageBuffer);

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

@@ -0,0 +1,35 @@
+import { tw4Breakpoints } from "#og-image-virtual/tw4-theme.mjs";
+import { defineSatoriTransformer } from "../utils.js";
+const DEFAULT_BREAKPOINTS = {
+  "sm": 640,
+  "md": 768,
+  "lg": 1024,
+  "xl": 1280,
+  "2xl": 1536
+};
+const BREAKPOINTS = { ...DEFAULT_BREAKPOINTS, ...tw4Breakpoints };
+const RESPONSIVE_PREFIX_RE = /^(sm|md|lg|xl|2xl):(.+)$/;
+export default defineSatoriTransformer({
+  filter: (node) => !!node.props?.class,
+  transform: (node, ctx) => {
+    const classes = node.props.class || "";
+    const renderWidth = Number(ctx.options.width) || 1200;
+    const processedClasses = [];
+    for (const token of classes.split(" ").filter((c) => c.trim())) {
+      const match = token.match(RESPONSIVE_PREFIX_RE);
+      if (match) {
+        const bp = match[1];
+        const baseClass = match[2];
+        const breakpointWidth = BREAKPOINTS[bp];
+        if (breakpointWidth && renderWidth >= breakpointWidth) {
+          processedClasses.push(baseClass);
+        }
+      } else {
+        processedClasses.push(token);
+      }
+    }
+    const twClasses = processedClasses.join(" ");
+    node.props.tw = twClasses;
+    node.props.class = twClasses;
+  }
+});

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

@@ -1,59 +1,36 @@
-import { fontCache } from "#og-image-cache";
-import { theme } from "#og-image-virtual/unocss-config.mjs";
+import { tw4FontVars } from "#og-image-virtual/tw4-theme.mjs";
 import compatibility from "#og-image/compatibility";
 import { defu } from "defu";
 import { sendError } from "h3";
-import { normaliseFontInput } from "../../../shared.js";
 import { useOgImageRuntimeConfig } from "../../utils.js";
-import { loadFont } from "./font.js";
+import { loadAllFonts } from "../fonts.js";
 import { useResvg, useSatori, useSharp } from "./instances.js";
 import { createVNodes } from "./vnodes.js";
-const fontPromises = {};
-async function resolveFonts(event) {
-  const { fonts } = useOgImageRuntimeConfig();
-  const normalisedFonts = normaliseFontInput([...event.options.fonts || [], ...fonts]);
-  const localFontPromises = [];
-  const preloadedFonts = [];
-  if (fontCache) {
-    for (const font of normalisedFonts) {
-      if (await fontCache.hasItem(font.cacheKey)) {
-        font.data = await fontCache.getItemRaw(font.cacheKey) || void 0;
-        preloadedFonts.push(font);
-      } else {
-        if (!fontPromises[font.cacheKey]) {
-          fontPromises[font.cacheKey] = loadFont(event, font).then(async (_font) => {
-            if (_font?.data)
-              await fontCache?.setItemRaw(_font.cacheKey, _font.data);
-            return _font;
-          });
-        }
-        localFontPromises.push(fontPromises[font.cacheKey]);
-      }
-    }
-  }
-  const awaitedFonts = await Promise.all(localFontPromises);
-  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)
+    loadAllFonts(event.e, { supportsWoff2: false })
   ]);
   await event._nitro.hooks.callHook("nuxt-og-image:satori:vnodes", vnodes, event);
+  const fontFamily = {};
+  if (tw4FontVars["font-sans"])
+    fontFamily.sans = tw4FontVars["font-sans"];
+  if (tw4FontVars["font-serif"])
+    fontFamily.serif = tw4FontVars["font-serif"];
+  if (tw4FontVars["font-mono"])
+    fontFamily.mono = tw4FontVars["font-mono"];
   const satoriOptions = defu(options.satori, _satoriOptions, {
     fonts,
-    tailwindConfig: { theme },
+    tailwindConfig: Object.keys(fontFamily).length ? { theme: { fontFamily } } : void 0,
     embedFont: true,
     width: options.width,
     height: options.height
   });
   return satori(vnodes, satoriOptions).catch((err) => {
-    return sendError(event.e, err, import.meta.dev);
+    return sendError(event.e, err, true);
   });
 }
 async function createPng(event) {
@@ -61,23 +38,16 @@ async function createPng(event) {
   const svg = await createSvg(event);
   if (!svg)
     throw new Error("Failed to create SVG");
+  const options = defu(event.options.resvg, resvgOptions);
   const Resvg = await useResvg();
-  const resvg = new Resvg(svg, defu(
-    event.options.resvg,
-    resvgOptions
-  ));
+  const resvg = new Resvg(svg, options);
   const pngData = resvg.render();
   return pngData.asPng();
 }
 async function createJpeg(event) {
   const { sharpOptions } = useOgImageRuntimeConfig();
   if (compatibility.sharp === false) {
-    if (import.meta.dev) {
-      throw new Error("Sharp dependency is not accessible. Please check you have it installed and are using a compatible runtime.");
-    } else {
-      console.error("Sharp dependency is not accessible. Please check you have it installed and are using a compatible runtime. Falling back to png.");
-    }
-    return createPng(event);
+    throw new Error("Sharp dependency is not accessible. Please check you have it installed and are using a compatible runtime.");
   }
   const svg = await createSvg(event);
   if (!svg) {
@@ -85,15 +55,8 @@ async function createJpeg(event) {
   }
   const svgBuffer = Buffer.from(svg);
   const sharp = await useSharp().catch(() => {
-    if (import.meta.dev) {
-      throw new Error("Sharp dependency could not be loaded. Please check you have it installed and are using a compatible runtime.");
-    }
-    return null;
+    throw new Error("Sharp dependency could not be loaded. Please check you have it installed and are using a compatible runtime.");
   });
-  if (!sharp) {
-    console.error("Sharp dependency is not accessible. Please check you have it installed and are using a compatible runtime. Falling back to png.");
-    return createPng(event);
-  }
   const options = defu(event.options.sharp, sharpOptions);
   return sharp(svgBuffer, options).jpeg(options).toBuffer();
 }

package/dist/runtime/server/og-image/satori/transforms/emojis/emoji-names-minimal.d.ts

@@ -0,0 +1 @@
+export declare const EMOJI_CODEPOINT_TO_NAME: Record<string, string>;

package/dist/runtime/server/og-image/satori/transforms/emojis/emoji-names-minimal.js

@@ -0,0 +1,223 @@
+export const EMOJI_CODEPOINT_TO_NAME = {
+  // Faces - most popular
+  "1f600": "grinning-face",
+  "1f603": "grinning-face-with-big-eyes",
+  "1f604": "grinning-face-with-smiling-eyes",
+  "1f601": "beaming-face-with-smiling-eyes",
+  "1f606": "grinning-squinting-face",
+  "1f605": "grinning-face-with-sweat",
+  "1f602": "face-with-tears-of-joy",
+  "1f923": "rolling-on-the-floor-laughing",
+  "1f60a": "smiling-face-with-smiling-eyes",
+  "1f607": "smiling-face-with-halo",
+  "1f970": "smiling-face-with-hearts",
+  "1f60d": "smiling-face-with-heart-eyes",
+  "1f929": "star-struck",
+  "1f618": "face-blowing-a-kiss",
+  "1f617": "kissing-face",
+  "1f619": "kissing-face-with-smiling-eyes",
+  "1f61a": "kissing-face-with-closed-eyes",
+  "1f60b": "face-savoring-food",
+  "1f61b": "face-with-tongue",
+  "1f61c": "winking-face-with-tongue",
+  "1f92a": "zany-face",
+  "1f61d": "squinting-face-with-tongue",
+  "1f911": "money-mouth-face",
+  "1f917": "smiling-face-with-open-hands",
+  "1f92d": "face-with-hand-over-mouth",
+  "1f92b": "shushing-face",
+  "1f914": "thinking-face",
+  "1f910": "zipper-mouth-face",
+  "1f928": "face-with-raised-eyebrow",
+  "1f610": "neutral-face",
+  "1f611": "expressionless-face",
+  "1f636": "face-without-mouth",
+  "1f60f": "smirking-face",
+  "1f612": "unamused-face",
+  "1f644": "face-with-rolling-eyes",
+  "1f62c": "grimacing-face",
+  "1f925": "lying-face",
+  "1f60c": "relieved-face",
+  "1f614": "pensive-face",
+  "1f62a": "sleepy-face",
+  "1f924": "drooling-face",
+  "1f634": "sleeping-face",
+  "1f637": "face-with-medical-mask",
+  "1f912": "face-with-thermometer",
+  "1f915": "face-with-head-bandage",
+  "1f922": "nauseated-face",
+  "1f92e": "face-vomiting",
+  "1f927": "sneezing-face",
+  "1f975": "hot-face",
+  "1f976": "cold-face",
+  "1f974": "woozy-face",
+  "1f635": "knocked-out-face",
+  "1f92f": "exploding-head",
+  "1f920": "cowboy-hat-face",
+  "1f973": "partying-face",
+  "1f60e": "smiling-face-with-sunglasses",
+  "1f913": "nerd-face",
+  "1f9d0": "face-with-monocle",
+  // Gestures
+  "1f44b": "waving-hand",
+  "1f44d": "thumbs-up",
+  "1f44e": "thumbs-down",
+  "1f44f": "clapping-hands",
+  "1f64c": "raising-hands",
+  "1f64f": "folded-hands",
+  "1f4aa": "flexed-biceps",
+  "270c": "victory-hand",
+  "1f91e": "crossed-fingers",
+  "1f918": "sign-of-the-horns",
+  "1f919": "call-me-hand",
+  "1f448": "backhand-index-pointing-left",
+  "1f449": "backhand-index-pointing-right",
+  "1f446": "backhand-index-pointing-up",
+  "1f447": "backhand-index-pointing-down",
+  "261d": "index-pointing-up",
+  "270b": "raised-hand",
+  "1f91a": "raised-back-of-hand",
+  "1f590": "hand-with-fingers-splayed",
+  "1f596": "vulcan-salute",
+  "1f44c": "ok-hand",
+  // Hearts & Symbols
+  "2764": "red-heart",
+  "1f9e1": "orange-heart",
+  "1f49b": "yellow-heart",
+  "1f49a": "green-heart",
+  "1f499": "blue-heart",
+  "1f49c": "purple-heart",
+  "1f5a4": "black-heart",
+  "1f90d": "white-heart",
+  "1f90e": "brown-heart",
+  "1f494": "broken-heart",
+  "1f495": "two-hearts",
+  "1f496": "sparkling-heart",
+  "1f497": "growing-heart",
+  "1f498": "heart-with-arrow",
+  "1f49d": "heart-with-ribbon",
+  "1f49e": "revolving-hearts",
+  "1f49f": "heart-decoration",
+  // Popular Objects & Symbols
+  "1f680": "rocket",
+  "26a1": "high-voltage",
+  "1f525": "fire",
+  "2728": "sparkles",
+  "1f31f": "glowing-star",
+  "2b50": "star",
+  "1f4a5": "collision",
+  "1f4a1": "light-bulb",
+  "1f389": "party-popper",
+  "1f38a": "confetti-ball",
+  "1f381": "wrapped-gift",
+  "1f3c6": "trophy",
+  "1f3c5": "1st-place-medal",
+  "1f947": "1st-place-medal",
+  "1f4af": "hundred-points",
+  "2705": "check-mark-button",
+  "274c": "cross-mark",
+  "2714": "check-mark",
+  "2795": "plus",
+  "2796": "minus",
+  "2716": "multiply",
+  "27a1": "right-arrow",
+  "2b05": "left-arrow",
+  "2b06": "up-arrow",
+  "2b07": "down-arrow",
+  // Tech & Work
+  "1f4bb": "laptop",
+  "1f4f1": "mobile-phone",
+  "2699": "gear",
+  "1f527": "wrench",
+  "1f528": "hammer",
+  "1f529": "nut-and-bolt",
+  "1f6e0": "hammer-and-wrench",
+  "1f4e6": "package",
+  "1f4dd": "memo",
+  "1f4c8": "chart-increasing",
+  "1f4c9": "chart-decreasing",
+  "1f4ca": "bar-chart",
+  "1f4cb": "clipboard",
+  "1f4cc": "pushpin",
+  "1f4cd": "round-pushpin",
+  "1f4ce": "paperclip",
+  "1f4cf": "straight-ruler",
+  "1f4d0": "triangular-ruler",
+  "1f50d": "magnifying-glass-tilted-left",
+  "1f50e": "magnifying-glass-tilted-right",
+  "1f512": "locked",
+  "1f513": "unlocked",
+  // Nature & Weather
+  "2600": "sun",
+  "1f31e": "sun-with-face",
+  "1f319": "crescent-moon",
+  "1f308": "rainbow",
+  "2601": "cloud",
+  "26c5": "sun-behind-cloud",
+  "1f327": "cloud-with-rain",
+  "26c8": "cloud-with-lightning-and-rain",
+  "1f329": "cloud-with-lightning",
+  "2744": "snowflake",
+  "1f4a7": "droplet",
+  "1f30a": "water-wave",
+  // Animals
+  "1f436": "dog-face",
+  "1f431": "cat-face",
+  "1f42d": "mouse-face",
+  "1f430": "rabbit-face",
+  "1f43b": "bear",
+  "1f43c": "panda",
+  "1f428": "koala",
+  "1f42f": "tiger-face",
+  "1f981": "lion",
+  "1f984": "unicorn",
+  "1f98b": "butterfly",
+  "1f41d": "honeybee",
+  "1f577": "spider",
+  "1f427": "penguin",
+  "1f426": "bird",
+  "1f985": "eagle",
+  "1f419": "octopus",
+  "1f422": "turtle",
+  "1f40d": "snake",
+  "1f409": "dragon",
+  "1f432": "dragon-face",
+  // Food
+  "1f34e": "red-apple",
+  "1f34a": "tangerine",
+  "1f34b": "lemon",
+  "1f34c": "banana",
+  "1f34d": "pineapple",
+  "1f347": "grapes",
+  "1f353": "strawberry",
+  "1f352": "cherries",
+  "1f351": "peach",
+  "1f349": "watermelon",
+  "1f96d": "mango",
+  "1f951": "avocado",
+  "1f955": "carrot",
+  "1f33d": "ear-of-corn",
+  "1f336": "hot-pepper",
+  "1f355": "pizza",
+  "1f354": "hamburger",
+  "1f35f": "french-fries",
+  "1f32d": "hot-dog",
+  "1f32e": "taco",
+  "1f32f": "burrito",
+  "1f37f": "popcorn",
+  "1f36a": "cookie",
+  "1f382": "birthday-cake",
+  "1f370": "shortcake",
+  "1f36b": "chocolate-bar",
+  "1f36c": "candy",
+  "1f36d": "lollipop",
+  "1f369": "doughnut",
+  "1f366": "soft-ice-cream",
+  "1f36f": "honey-pot",
+  "2615": "hot-beverage",
+  "1f375": "teacup-without-handle",
+  "1f37a": "beer-mug",
+  "1f37b": "clinking-beer-mugs",
+  "1f377": "wine-glass",
+  "1f378": "cocktail-glass"
+};

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

@@ -0,0 +1,45 @@
+/**
+ * Emoji Unicode to name mapping utilities
+ *
+ * This file provides utilities for converting Unicode emoji characters to their
+ * corresponding Iconify icon names.
+ */
+/**
+ * Regular expression to match emoji sequences including multi-codepoint emojis.
+ *
+ * This regex handles:
+ * - Single emoji characters (😀)
+ * - Emoji with variation selectors (❤️)
+ * - Emoji with skin tone modifiers (👋🏽)
+ * - ZWJ sequences like family emojis (👨‍👩‍👧)
+ * - Flag sequences (🇺🇸, 🏳️‍🌈)
+ * - Keycap sequences (1️⃣, #️⃣)
+ *
+ * Important: Uses \p{Extended_Pictographic} instead of \p{Emoji} to avoid matching
+ * plain digits (0-9), # and * which are technically emoji-capable but shouldn't
+ * be treated as emojis when appearing alone.
+ *
+ * Pattern breakdown:
+ * - \p{Extended_Pictographic} matches pictographic emoji characters
+ * - [\d#*]\uFE0F\u20E3 matches keycap sequences (digit/hash/asterisk + variation selector + combining enclosing keycap)
+ * - \p{Regional_Indicator}{2} matches flag emoji pairs
+ * - \p{Emoji_Modifier} handles skin tone modifiers
+ * - \uFE0F is variation selector for emoji presentation
+ * - \u200D is Zero Width Joiner for combining emojis
+ */
+export declare const RE_MATCH_EMOJIS: RegExp;
+/**
+ * Gets possible Iconify icon names for a given Unicode emoji
+ *
+ * @param codePoint The Unicode code point as a hex string (e.g., "1f44b" or "2764-fe0f")
+ * @param _emojiSet The emoji set to use (currently only noto is fully supported)
+ * @returns An array of possible icon names to try
+ */
+export declare function getEmojiIconNames(codePoint: string, _emojiSet: string): string[];
+/**
+ * Gets the code point(s) for a Unicode emoji character/sequence
+ *
+ * @param emoji The emoji character (e.g., "👋" or "👨‍👩‍👧")
+ * @returns Hex code point(s) joined by dash (e.g., "1f44b" or "1f468-200d-1f469-200d-1f467")
+ */
+export declare function getEmojiCodePoint(emoji: string): string;

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

@@ -0,0 +1,13 @@
+import { EMOJI_CODEPOINT_TO_NAME } from "./emoji-names-minimal.js";
+export const RE_MATCH_EMOJIS = /(?:\p{Extended_Pictographic}|[\d#*]\uFE0F\u20E3|\p{Regional_Indicator}{2})(?:\p{Emoji_Modifier}|\uFE0F|\u200D[\p{Extended_Pictographic}\p{Emoji}])*/gu;
+export function getEmojiIconNames(codePoint, _emojiSet) {
+  const baseCodePoint = codePoint.replace(/-fe0f$/i, "");
+  const knownName = EMOJI_CODEPOINT_TO_NAME[codePoint] || EMOJI_CODEPOINT_TO_NAME[baseCodePoint];
+  if (knownName) {
+    return [knownName];
+  }
+  return [codePoint, baseCodePoint, `u${baseCodePoint}`].filter((v, i, a) => a.indexOf(v) === i);
+}
+export function getEmojiCodePoint(emoji) {
+  return [...emoji].map((char) => char.codePointAt(0).toString(16)).join("-");
+}

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

@@ -0,0 +1,6 @@
+import type { OgImageRenderEventContext } from '../../../../../types.js';
+/**
+ * Service function to fetch emoji SVGs from the iconify API
+ * This does not perform HTML replacement - that's handled by the AST plugin
+ */
+export declare function getEmojiSvg(ctx: OgImageRenderEventContext, emojiChar: string): Promise<string | null>;

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

@@ -0,0 +1,38 @@
+import { emojiCache } from "#og-image-cache";
+import { $fetch } from "ofetch";
+import { getEmojiCodePoint, getEmojiIconNames } from "./emoji-utils.js";
+export async function getEmojiSvg(ctx, emojiChar) {
+  const codePoint = getEmojiCodePoint(emojiChar);
+  const possibleNames = getEmojiIconNames(codePoint, ctx.options.emojis);
+  let svg = null;
+  for (const iconName of possibleNames) {
+    const key = ["1", ctx.options.emojis, iconName].join("|");
+    if (await emojiCache.hasItem(key)) {
+      svg = await emojiCache.getItem(key);
+      if (svg)
+        break;
+    }
+  }
+  if (!svg) {
+    for (const iconName of possibleNames) {
+      try {
+        svg = await $fetch(`https://api.iconify.design/${ctx.options.emojis}/${iconName}.svg`, {
+          responseType: "text",
+          retry: 2,
+          retryDelay: 500
+        });
+        if (svg && svg !== "404") {
+          const key = ["1", ctx.options.emojis, iconName].join("|");
+          await emojiCache.setItem(key, svg);
+          break;
+        }
+      } catch {
+        svg = null;
+      }
+    }
+  }
+  if (svg) {
+    return svg.replace("<svg ", '<svg data-emoji style="margin: 0 .05em 0 .15em; vertical-align: -0.1em;" ');
+  }
+  return null;
+}

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

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