npm - nuxt-og-image - Versions diffs - 3.0.0-beta.9 → 3.0.0-rc.1 - Mend

nuxt-og-image 3.0.0-beta.9 → 3.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (143) hide show

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/renderers/chromium/index.mjs CHANGED Viewed

@@ -1,26 +1,23 @@
-import { getOgImagePath } from "../../../utilts.mjs";
-import { prerenderChromiumContext } from "../../cache/prerender.mjs";
+import { createError } from "h3";
 import { createScreenshot } from "./screenshot.mjs";
 import { createBrowser } from "#nuxt-og-image/bindings/chromium";
 const ChromiumRenderer = {
   name: "chromium",
-  supportedFormats: ["png", "jpeg"],
-  async createImage(e, options) {
-    const browser = (import.meta.prerender ? prerenderChromiumContext.browser : null) || await createBrowser();
-    if (!browser) {
+  supportedFormats: ["png", "jpeg", "jpg"],
+  async debug() {
+    return {};
+  },
+  async createImage(ctx) {
+    const browser = await createBrowser();
+    const screenshot = await createScreenshot(ctx, browser).catch((e) => e);
+    await browser.close();
+    if (screenshot instanceof Error) {
       return createError({
         statusCode: 400,
-        statusMessage: "Failed to create Local Chromium Browser."
+        statusMessage: `Failed to create screenshot ${screenshot.message}.`
       });
     }
-    if (import.meta.prerender)
-      prerenderChromiumContext.browser = browser;
-    return createScreenshot(e, browser, {
-      ...options,
-      path: options.component === "PageScreenshot" ? options.path : getOgImagePath(options.path, "html")
-    }).finally(async () => {
-      await browser.close();
-    });
+    return screenshot;
   }
 };
 export default ChromiumRenderer;

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

@@ -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 CHANGED Viewed

@@ -1,21 +1,23 @@
-import { withQuery } from "ufo";
+import { joinURL, withQuery } from "ufo";
+import { useOgImageRuntimeConfig } from "../../../utils.mjs";
 import { useNitroOrigin } from "#imports";
-export async function createScreenshot(e, browser, options) {
+export async function createScreenshot({ basePath, e, options, extension }, browser) {
+  const { colorPreference } = useOgImageRuntimeConfig();
+  const path = options.component === "PageScreenshot" ? basePath : joinURL("/__og-image__/image", basePath, `og.html`);
   const page = await browser.newPage({
-    colorScheme: options.colorScheme,
+    colorScheme: colorPreference || "no-preference",
     baseURL: useNitroOrigin(e)
   });
-  if (import.meta.prerender && !options.html) {
-    options.html = await e.$fetch(options.path);
-  }
   try {
+    if (import.meta.prerender && !options.html) {
+      options.html = await e.$fetch(path).catch(() => void 0);
+    }
     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 +25,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,16 +33,19 @@ export async function createScreenshot(e, browser, options) {
     const screenshotOptions = {
       timeout: 1e4,
       animations: "disabled",
-      type: options.extension
+      type: extension === "png" ? "png" : "jpeg"
     };
-    if (options.mask) {
+    const _options = options.screenshot || {};
+    if (_options.delay)
+      await page.waitForTimeout(_options.delay);
+    if (_options.mask) {
       await page.evaluate((mask) => {
         for (const el of document.querySelectorAll(mask))
           el.style.display = "none";
-      }, options.mask);
+      }, _options.mask);
     }
-    if (options.selector)
-      return await page.locator(options.selector).screenshot(screenshotOptions);
+    if (_options.selector)
+      return await page.locator(_options.selector).screenshot(screenshotOptions);
     return await page.screenshot(screenshotOptions);
   } finally {
     await page.close();

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

@@ -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;

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

@@ -1,53 +1,79 @@
 import { defu } from "defu";
+import { normaliseFontInput, useOgImageRuntimeConfig } from "../../../utils.mjs";
+import { loadFont } from "../../font/fetch.mjs";
+import { fontCache, fontPromises } from "../../cache/fonts.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);
-  if (!satoriFonts.length)
-    satoriFonts.push(...await loadFonts(e, fonts));
+import { theme } from "#nuxt-og-image/unocss-config.mjs";
+export async function createSvg(event) {
+  const { options } = event;
+  const { fonts, satoriOptions } = useOgImageRuntimeConfig();
+  const vnodes = await createVNodes(event);
+  await event._nitro.hooks.callHook("nuxt-og-image:satori:vnodes", vnodes, event);
+  const normalisedFonts = normaliseFontInput([...fonts, ...event.options.fonts || []]);
+  const localFontPromises = [];
+  const preloadedFonts = [];
+  for (const font of normalisedFonts) {
+    if (await fontCache.hasItem(font.cacheKey)) {
+      font.data = await fontCache.getItemRaw(font.cacheKey);
+      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);
   const satori = await useSatori();
   return satori(vnodes, defu(options.satori, satoriOptions, {
-    fonts: satoriFonts,
+    fonts: [...preloadedFonts, ...awaitedFonts].map((_f) => {
+      return { ..._f, weight: Number(_f.weight) };
+    }),
+    tailwindConfig: { theme },
     embedFont: true,
     width: options.width,
     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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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;
+      });
     }
   }
 ]);

package/dist/runtime/core/renderers/satori/plugins/imageSrc.mjs CHANGED Viewed

@@ -3,43 +3,73 @@ import { withBase } from "ufo";
 import sizeOf from "image-size";
 import { defineSatoriTransformer } from "../utils.mjs";
 import { toBase64Image } from "../../../env/assets.mjs";
+import { useStorage } from "#internal/nitro";
 import { useNitroOrigin } from "#imports";
-export default defineSatoriTransformer({
-  filter: (node) => node.type === "img",
-  transform: async (node, e) => {
-    const src = node.props?.src;
-    if (src) {
-      let updated = false;
-      let dimensions;
-      if (!updated) {
+export default defineSatoriTransformer([
+  // fix <img src="">
+  {
+    filter: (node) => node.type === "img",
+    transform: async (node, { e }) => {
+      const src = node.props?.src;
+      const isRelative = src?.startsWith("/");
+      if (src) {
+        let updated = false;
+        let dimensions;
+        let imageBuffer;
         let valid = true;
-        const response = await e.$fetch(src, {
-          baseURL: useNitroOrigin(e),
-          responseType: "arrayBuffer"
-        }).catch(() => {
-          valid = false;
-        });
+        if (import.meta.prerender || import.meta.dev) {
+          const key = `root:public${src.replace("./", ":").replace("/", ":")}`;
+          if (await useStorage().hasItem(key)) {
+            imageBuffer = await useStorage().getItemRaw(key);
+            updated = !!imageBuffer;
+          }
+        }
+        if (!import.meta.prerender && !updated) {
+          imageBuffer = await e.$fetch(src, {
+            baseURL: useNitroOrigin(e),
+            responseType: "arrayBuffer"
+          }).catch(() => {
+            valid = false;
+          });
+          valid = !!imageBuffer;
+        }
         if (valid) {
-          node.props.src = toBase64Image(src, response);
-          const imageSize = sizeOf(Buffer.from(response));
-          dimensions = { width: imageSize.width, height: imageSize.height };
+          node.props.src = toBase64Image(src, imageBuffer);
+          try {
+            const imageSize = sizeOf(Buffer.from(imageBuffer));
+            dimensions = { width: imageSize.width, height: imageSize.height };
+          } catch (e2) {
+          }
           updated = true;
         }
-      }
-      if (dimensions?.width && dimensions?.height) {
-        const naturalAspectRatio = dimensions.width / dimensions.height;
-        if (node.props.width && !node.props.height) {
-          node.props.height = Math.round(node.props.width / naturalAspectRatio);
-        } else if (node.props.height && !node.props.width) {
-          node.props.width = Math.round(node.props.height * naturalAspectRatio);
-        } else if (!node.props.width && !node.props.height) {
-          node.props.width = dimensions.width;
-          node.props.height = dimensions.height;
+        if (dimensions?.width && dimensions?.height) {
+          const naturalAspectRatio = dimensions.width / dimensions.height;
+          if (node.props.width && !node.props.height) {
+            node.props.height = Math.round(node.props.width / naturalAspectRatio);
+          } else if (node.props.height && !node.props.width) {
+            node.props.width = Math.round(node.props.height * naturalAspectRatio);
+          } else if (!node.props.width && !node.props.height) {
+            node.props.width = dimensions.width;
+            node.props.height = dimensions.height;
+          }
+        }
+        if (!updated && isRelative) {
+          node.props.src = `${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()}`;
         }
       }
-      if (!updated) {
-        node.props.src = `${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()}`;
+    }
+  },
+  // fix style="background-image: url('')"
+  {
+    filter: (node) => node.props?.style?.backgroundImage?.includes("url("),
+    transform: async (node, { e }) => {
+      const backgroundImage = node.props.style.backgroundImage;
+      if (backgroundImage) {
+        const src = backgroundImage.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "");
+        const isRelative = src?.startsWith("/");
+        if (isRelative)
+          node.props.style.backgroundImage = `url(${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()})`;
       }
     }
   }
-});
+]);

package/dist/runtime/core/renderers/satori/plugins/unocss.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const _default: import("../../../../types").SatoriTransformer \| import("../../../../types").SatoriTransformer[];
2	+ export default _default;

package/dist/runtime/core/renderers/satori/plugins/unocss.mjs ADDED Viewed

@@ -0,0 +1,45 @@
+import { createGenerator } from "@unocss/core";
+import presetWind from "@unocss/preset-wind";
+import { defineSatoriTransformer } from "../utils.mjs";
+import { theme } from "#nuxt-og-image/unocss-config.mjs";
+const uno = createGenerator({ theme }, {
+  presets: [
+    presetWind()
+  ]
+});
+export default defineSatoriTransformer({
+  filter: (node) => !!node.props?.class,
+  transform: async (node) => {
+    const classes = node.props.class || "";
+    const styles = node.props.style || {};
+    const replacedClasses = /* @__PURE__ */ new Set();
+    for (const token of classes.split(" ").filter((c) => c.trim())) {
+      const parsedToken = await uno.parseToken(token);
+      if (parsedToken) {
+        const inlineStyles = parsedToken[0][2].split(";").filter((s) => !!s?.trim());
+        const vars = {};
+        inlineStyles.filter((s) => s.startsWith("--")).forEach((s) => {
+          const [key, value] = s.split(":");
+          vars[key] = value;
+        });
+        inlineStyles.filter((s) => !s.startsWith("--")).forEach((s) => {
+          const [key, value] = s.split(":");
+          const camelCasedKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+          if (!styles[camelCasedKey])
+            styles[camelCasedKey] = value.replace(/var\((.*?)\)/g, (_, k) => vars[k.trim()]);
+          if (styles[camelCasedKey] && styles[camelCasedKey].includes("/")) {
+            const [rgb, opacity] = styles[camelCasedKey].split("/");
+            if (opacity.trim() === "1)")
+              styles[camelCasedKey] = rgb.replace(/(\d+) (\d+) (\d+).*/, (_, r, g, b) => `${r}, ${g}, ${b})`);
+            else
+              styles[camelCasedKey] = `${rgb.replace("rgb", "rgba").replaceAll(" ", ", ")}${opacity.trim()}`;
+          }
+        });
+        replacedClasses.add(token);
+      }
+    }
+    node.props.class = classes.split(" ").filter((c) => !replacedClasses.has(c)).join(" ");
+    node.props.tw = classes.split(" ").filter((c) => !replacedClasses.has(c)).join(" ");
+    node.props.style = styles;
+  }
+});