nuxt-og-image 3.0.0-rc.9 → 3.0.1

package/dist/runtime/nitro/og-image/bindings/chromium/chrome-launcher.js

@@ -0,0 +1,9 @@
+import { Launcher } from "chrome-launcher";
+import playwrightCore from "playwright-core";
+const chromePath = Launcher.getFirstInstallation();
+export async function createBrowser() {
+  return playwrightCore.chromium.launch({
+    headless: true,
+    executablePath: chromePath
+  });
+}

package/dist/runtime/nitro/og-image/bindings/chromium/on-demand.d.ts

@@ -0,0 +1,2 @@
+import type { Browser } from 'playwright-core';
+export declare function createBrowser(): Promise<Browser | void>;

package/dist/runtime/nitro/og-image/bindings/chromium/on-demand.js

@@ -0,0 +1,35 @@
+import { createConsola } from "consola";
+import { execa } from "execa";
+import playwrightCore from "playwright-core";
+let installedChromium = false;
+let installChromiumPromise;
+export async function createBrowser() {
+  if (installChromiumPromise)
+    await installChromiumPromise;
+  if (!installedChromium) {
+    installChromiumPromise = new Promise((_resolve) => {
+      const logger = createConsola().withTag("Nuxt OG Image");
+      logger.info("Installing Chromium install for og:image generation...");
+      const installChromeProcess = execa("npx", ["playwright", "install", "chromium"], {
+        stdio: "inherit"
+      });
+      installChromeProcess.stderr?.pipe(process.stderr);
+      new Promise((resolve) => {
+        installChromeProcess.on("exit", (e) => {
+          if (e !== 0)
+            logger.error("Failed to install Playwright dependency for og:image generation. Trying anyway...");
+          resolve(true);
+        });
+      }).then(() => {
+        installChromeProcess.kill();
+        logger.info("Installed Chromium install for og:image generation.");
+        _resolve();
+      });
+    }).then(() => {
+      installedChromium = true;
+    });
+  }
+  return await playwrightCore.chromium.launch({
+    headless: true
+  });
+}

package/dist/runtime/nitro/og-image/bindings/chromium/playwright.d.ts

@@ -0,0 +1,2 @@
+import type { Browser } from 'playwright-core';
+export declare function createBrowser(): Promise<Browser | void>;

package/dist/runtime/nitro/og-image/bindings/chromium/playwright.js

@@ -0,0 +1,6 @@
+import playwright from "playwright";
+export async function createBrowser() {
+  return await playwright.chromium.launch({
+    headless: true
+  });
+}

package/dist/runtime/nitro/og-image/bindings/css-inline/node.d.ts

@@ -0,0 +1,8 @@
+import { inline } from '@css-inline/css-inline';
+declare const _default: {
+    initWasmPromise: Promise<void>;
+    cssInline: {
+        inline: typeof inline;
+    };
+};
+export default _default;

package/dist/runtime/nitro/og-image/bindings/css-inline/node.js

@@ -0,0 +1,7 @@
+import { inline } from "@css-inline/css-inline";
+export default {
+  initWasmPromise: Promise.resolve(),
+  cssInline: {
+    inline
+  }
+};

package/dist/runtime/nitro/og-image/bindings/css-inline/wasm-fs.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    initWasmPromise: any;
+    cssInline: {
+        inline: any;
+    };
+};
+export default _default;

package/dist/runtime/nitro/og-image/bindings/css-inline/wasm-fs.js

@@ -0,0 +1,8 @@
+import { initWasm, inline } from "@css-inline/css-inline-wasm";
+import { readWasmFile } from "../../../util/wasm.js";
+export default {
+  initWasmPromise: initWasm(readWasmFile("@css-inline/css-inline-wasm/index_bg.wasm")),
+  cssInline: {
+    inline
+  }
+};

package/dist/runtime/nitro/og-image/bindings/css-inline/wasm.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    initWasmPromise: any;
+    cssInline: {
+        inline: any;
+    };
+};
+export default _default;

package/dist/runtime/nitro/og-image/bindings/css-inline/wasm.js

@@ -0,0 +1,7 @@
+import { initWasm, inline } from "@css-inline/css-inline-wasm";
+export default {
+  initWasmPromise: initWasm(import("@css-inline/css-inline-wasm/index_bg.wasm?module").then((r) => r.default || r)),
+  cssInline: {
+    inline
+  }
+};

package/dist/runtime/{core → nitro/og-image}/bindings/resvg/wasm-fs.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
     initWasmPromise: Promise<void>;
-    Resvg: new (svg: string | Uint8Array, options?: import("@resvg/resvg-wasm").ResvgRenderOptions | undefined) => {
+    Resvg: new (svg: Uint8Array | string, options?: import("@resvg/resvg-wasm").ResvgRenderOptions) => {
         free(): void;
         render(): {
             free(): void;

package/dist/runtime/{core/bindings/resvg/wasm-fs.mjs → nitro/og-image/bindings/resvg/wasm-fs.js}

@@ -1,5 +1,5 @@
 import { Resvg as _Resvg, initWasm } from "@resvg/resvg-wasm";
-import { readWasmFile } from "../../utils/wasm.mjs";
+import { readWasmFile } from "../../../util/wasm.js";
 export default {
   initWasmPromise: initWasm(readWasmFile("@resvg/resvg-wasm/index_bg.wasm")),
   Resvg: _Resvg

package/dist/runtime/{core → nitro/og-image}/bindings/resvg/wasm.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
     initWasmPromise: Promise<void>;
-    Resvg: new (svg: string | Uint8Array, options?: import("@resvg/resvg-wasm").ResvgRenderOptions | undefined) => {
+    Resvg: new (svg: Uint8Array | string, options?: import("@resvg/resvg-wasm").ResvgRenderOptions) => {
         free(): void;
         render(): {
             free(): void;

package/dist/runtime/nitro/og-image/bindings/resvg/wasm.js

@@ -0,0 +1,5 @@
+import { Resvg as _Resvg, initWasm } from "@resvg/resvg-wasm";
+export default {
+  initWasmPromise: initWasm(import("@resvg/resvg-wasm/index_bg.wasm?module").then((r) => r.default || r)),
+  Resvg: _Resvg
+};

package/dist/runtime/{core/bindings/satori/wasm-fs.mjs → nitro/og-image/bindings/satori/wasm-fs.js}

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

package/dist/runtime/{core/bindings/satori/wasm.mjs → nitro/og-image/bindings/satori/wasm.js}

@@ -1,8 +1,7 @@
+import { init } from "satori";
 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));
+const wasm = import("yoga-wasm-web/dist/yoga.wasm?module").then(async (yoga) => await initYoga(yoga.default || yoga));
 export default {
   initWasmPromise: new Promise((resolve) => {
     wasm.then((yoga) => {

package/dist/runtime/nitro/og-image/cache/lru.d.ts

@@ -0,0 +1,9 @@
+import type { Storage } from 'unstorage';
+import type { OgImageOptions } from '../../../types.js';
+export declare const htmlPayloadCache: Storage<{
+    expiresAt: number;
+    value: OgImageOptions;
+}>;
+export declare const prerenderOptionsCache: Storage<OgImageOptions> | undefined;
+export declare const fontCache: Storage<BufferSource>;
+export declare const emojiCache: Storage<string>;

package/dist/runtime/nitro/og-image/cache/lru.js

@@ -0,0 +1,15 @@
+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 ? 1e4 : 50 })
+});
+export const prerenderOptionsCache = import.meta.prerender ? createStorage({
+  driver: lruCacheDriver({ max: 1e4 })
+}) : void 0;
+export const fontCache = createStorage({
+  driver: lruCacheDriver({ max: 10 })
+});
+export const emojiCache = createStorage({
+  driver: lruCacheDriver({ max: 1e3 })
+});

package/dist/runtime/nitro/og-image/cache/mock.d.ts

@@ -0,0 +1,9 @@
+import type { Storage } from 'unstorage';
+import type { OgImageOptions } from '../../../types.js';
+export declare const htmlPayloadCache: Storage<{
+    expiresAt: number;
+    value: OgImageOptions;
+}>;
+export declare const prerenderOptionsCache: Storage<OgImageOptions> | undefined;
+export declare const fontCache: Storage<OgImageOptions<"NuxtSeo">>;
+export declare const emojiCache: Storage<string>;

package/dist/runtime/nitro/og-image/cache/mock.js

@@ -0,0 +1,9 @@
+import { createStorage } from "unstorage";
+import memoryDriver from "unstorage/drivers/memory";
+const storage = createStorage({
+  driver: memoryDriver()
+});
+export const htmlPayloadCache = storage;
+export const prerenderOptionsCache = storage;
+export const fontCache = storage;
+export const emojiCache = storage;

package/dist/runtime/{core/renderers/chromium/index.d.ts → nitro/og-image/chromium/renderer.d.ts}

@@ -1,3 +1,3 @@
-import type { Renderer } from '../../../types';
+import type { Renderer } from '../../../types.js';
 declare const ChromiumRenderer: Renderer;
 export default ChromiumRenderer;

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

@@ -1,6 +1,6 @@
-import { createError } from "h3";
-import { createScreenshot } from "./screenshot.mjs";
 import { createBrowser } from "#nuxt-og-image/bindings/chromium";
+import { createError } from "h3";
+import { createScreenshot } from "./screenshot.js";
 const ChromiumRenderer = {
   name: "chromium",
   supportedFormats: ["png", "jpeg", "jpg"],

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

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

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

@@ -1,6 +1,6 @@
-import { joinURL, withQuery } from "ufo";
-import { useOgImageRuntimeConfig } from "../../../utils.mjs";
 import { useNitroOrigin } from "#imports";
+import { joinURL, withQuery } from "ufo";
+import { useOgImageRuntimeConfig } from "../../../shared.js";
 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`);

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

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

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

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

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

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

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

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

package/dist/runtime/nitro/og-image/satori/font.d.ts

@@ -0,0 +1,3 @@
+import type { OgImageRenderEventContext, ResolvedFontConfig } from '../../../types.js';
+export declare const assets: import("unstorage").Storage<import("unstorage").StorageValue>;
+export declare function loadFont({ e, publicStoragePath }: OgImageRenderEventContext, font: ResolvedFontConfig): Promise<ResolvedFontConfig>;

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

@@ -0,0 +1,39 @@
+import { useNitroOrigin, useStorage } from "#imports";
+import { prefixStorage } from "unstorage";
+export const assets = prefixStorage(useStorage(), "/assets");
+export async function loadFont({ e, publicStoragePath }, font) {
+  const { name, weight } = font;
+  if (font.data)
+    return font;
+  if (font.key && await assets.hasItem(font.key)) {
+    let fontData = await assets.getItem(font.key);
+    if (fontData instanceof Uint8Array) {
+      const decoder = new TextDecoder();
+      fontData = decoder.decode(fontData);
+    }
+    font.data = Buffer.from(fontData, "base64");
+    return font;
+  }
+  let data;
+  if (font.path) {
+    if (import.meta.dev || import.meta.prerender) {
+      const key = `${publicStoragePath}${font.path.replace("./", ":").replace("/", ":")}`;
+      if (await useStorage().hasItem(key))
+        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",
+      query: {
+        font
+      }
+    });
+  }
+  font.data = data;
+  return font;
+}

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

@@ -1,7 +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) => {
+import type _sharp from 'sharp';
+export declare function useResvg(): Promise<new (svg: Uint8Array | string, options?: import("@resvg/resvg-wasm").ResvgRenderOptions) => {
     free(): void;
     render(): {
         free(): void;
@@ -38,5 +37,5 @@ export declare function useResvg(): Promise<new (svg: string | Uint8Array, optio
     readonly width: number;
 }>;
 export declare function useSatori(): Promise<typeof _satori>;
-export declare function useSharp(): Promise<any>;
+export declare function useSharp(): Promise<typeof _sharp>;
 export declare function useCssInline(): Promise<any>;

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

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

package/dist/runtime/nitro/og-image/satori/plugins/classes.js

@@ -0,0 +1,17 @@
+import { defineSatoriTransformer } from "../utils.js";
+export default defineSatoriTransformer([
+  {
+    filter: (node) => !!node.props?.class && !node.props?.tw,
+    transform(node) {
+      node.props.tw = node.props.class;
+      node.props.tw = node.props.tw.replace(/icon|inline-style/g, "");
+    }
+  },
+  {
+    filter: (node) => !!node.props?.style?.display,
+    transform(node) {
+      if (["inline-block", "inline"].includes(node.props.style.display))
+        delete node.props.style.display;
+    }
+  }
+]);

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

@@ -1,4 +1,4 @@
-import { defineSatoriTransformer } from "../utils.mjs";
+import { defineSatoriTransformer } from "../utils.js";
 function isEmojiFilter(node) {
   return node.type === "svg" && typeof node.props?.["data-emoji"] !== "undefined";
 }
@@ -6,7 +6,7 @@ export default defineSatoriTransformer([
   // need to make sure parent div has flex for the emoji to render inline
   {
     filter: (node) => ["div", "p"].includes(node.type) && Array.isArray(node.props?.children) && node.props.children.some(isEmojiFilter),
-    transform: async (node) => {
+    transform: (node) => {
       node.props.style = node.props.style || {};
       node.props.style.display = "flex";
       node.props.style.alignItems = "center";

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

@@ -0,0 +1,17 @@
+import { decodeHtml } from "../../../util/encoding.js";
+import { defineSatoriTransformer } from "../utils.js";
+export default defineSatoriTransformer([
+  // clean up
+  {
+    filter: (node) => node.props?.["data-v-inspector"],
+    transform: (node) => {
+      delete node.props["data-v-inspector"];
+    }
+  },
+  {
+    filter: (node) => typeof node.props?.children === "string",
+    transform: (node) => {
+      node.props.children = decodeHtml(node.props.children);
+    }
+  }
+]);

package/dist/runtime/nitro/og-image/satori/plugins/flex.js

@@ -0,0 +1,35 @@
+import { defineSatoriTransformer } from "../utils.js";
+const BLOCK_ELEMENTS = [
+  "div",
+  "p",
+  "ul",
+  "ol",
+  "li",
+  "blockquote",
+  "pre",
+  "hr",
+  "table",
+  "dl"
+];
+export default defineSatoriTransformer({
+  filter: (node) => node.type === "div" && (Array.isArray(node.props?.children) && node.props?.children.length >= 1) && !node.props?.class?.includes("hidden"),
+  transform: (node) => {
+    node.props.style = node.props.style || {};
+    if (node.props.style?.display && node.props.style?.display !== "flex") {
+      return;
+    }
+    node.props.style.display = "flex";
+    if (!node.props?.class?.includes("flex-") && node.props.children.some((child) => BLOCK_ELEMENTS.includes(child.type))) {
+      node.props.style.flexDirection = "column";
+      return;
+    }
+    let flexWrap = node.props?.class?.includes("flex-wrap");
+    if (!node.props?.class?.includes("flex-")) {
+      node.props.style.flexWrap = "wrap";
+      flexWrap = true;
+    }
+    if (flexWrap && !node.props?.class?.includes("gap")) {
+      node.props.style.gap = "0.2em";
+    }
+  }
+});