nuxt-og-image 3.0.0-beta.12 → 3.0.0-beta.15

package/dist/runtime/composables/defineOgImage.mjs

@@ -1,124 +1,41 @@
 import { defu } from "defu";
 import { appendHeader } from "h3";
-import { getOgImagePath } from "../utilts.mjs";
+import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
+import { withoutBase } from "ufo";
+import { getOgImagePath } from "../utils.mjs";
 import { normaliseOptions } from "../core/options/normalise.mjs";
-import { useRouter, useRuntimeConfig, useServerHead, withSiteUrl } from "#imports";
-export function defineOgImageScreenshot(options = {}) {
-  const router = useRouter();
-  const route = router.currentRoute.value?.path || "";
-  return defineOgImage({
-    alt: `Web page screenshot${route ? ` of ${route}` : ""}.`,
-    renderer: "chromium",
-    extension: "jpeg",
-    component: "PageScreenshot",
-    // this is an alias
-    cache: true,
-    ...options
+import { createOgImageMeta } from "../nuxt/utils.mjs";
+import { useNuxtApp, useRequestEvent, useRouter, useRuntimeConfig } from "#imports";
+export function defineOgImage(_options = {}) {
+  if (!import.meta.server)
+    return;
+  const nuxtApp = useNuxtApp();
+  const ogImageInstances = nuxtApp.ssrContext._ogImageInstances || [];
+  const basePath = useRouter().currentRoute.value?.path;
+  const _routeRulesMatcher = toRouteMatcher(
+    createRadixRouter({ routes: useRuntimeConfig().nitro?.routeRules })
+  );
+  const routeRules = defu({}, ..._routeRulesMatcher.matchAll(
+    withoutBase(basePath.split("?")[0], useRuntimeConfig().app.baseURL)
+  ).reverse()).ogImage;
+  if (!_options || nuxtApp.ssrContext?.event.context._nitro?.routeRules?.ogImage === false || typeof routeRules !== "undefined" && routeRules === false) {
+    ogImageInstances.forEach((e) => {
+      e.dispose();
+    });
+    nuxtApp.ssrContext._ogImageInstances = void 0;
+    return;
+  }
+  const options = normaliseOptions({
+    ..._options
   });
-}
-export function defineOgImageStatic(options = {}) {
-  return defineOgImageCached(options);
-}
-export function defineOgImageCached(options = {}) {
   const { defaults } = useRuntimeConfig()["nuxt-og-image"];
-  if (!defaults.cacheTtl && !options.cacheTtl)
-    options.cacheTtl = 60 * 60 * 24 * 1e3 * 7;
-  return defineOgImage({
-    cache: true,
-    ...options
-  });
-}
-export function defineOgImageWithoutCache(options = {}) {
-  return defineOgImage({
-    ...options,
-    cache: false,
-    cacheTtl: 0
-  });
-}
-export function defineOgImageDynamic(options = {}) {
-  return defineOgImageWithoutCache(options);
-}
-export function defineOgImageComponent(component, props, options = {}) {
-  defineOgImage({
-    component,
-    ...props,
-    ...options
-  });
-}
-export function defineOgImage(_options = {}) {
-  if (import.meta.server) {
-    if (_options.url) {
-      const type = _options.url.endsWith(".png") ? "image/png" : "image/jpeg";
-      const meta2 = [
-        { property: "og:image", content: _options.url },
-        { property: "og:image:type", content: type },
-        { name: "twitter:card", content: "summary_large_image" },
-        { name: "twitter:image:src", content: _options.url }
-      ];
-      if (_options.width) {
-        meta2.push({ property: "og:image:width", content: _options.width });
-        meta2.push({ name: "twitter:image:width", content: _options.width });
-      }
-      if (_options.height) {
-        meta2.push({ property: "og:image:height", content: _options.height });
-        meta2.push({ name: "twitter:image:height", content: _options.height });
-      }
-      if (_options.alt) {
-        meta2.push({ property: "og:image:alt", content: _options.alt });
-        meta2.push({ name: "twitter:image:alt", content: _options.alt });
-      }
-      useServerHead({ meta: meta2 }, {
-        // after async scripts when capo.js is enabled
-        tagPriority: 35
-      });
-      return;
-    }
-    const { defaults } = useRuntimeConfig()["nuxt-og-image"];
-    const options = normaliseOptions(_options);
-    const optionsWithDefault = defu(options, defaults);
-    const path = getOgImagePath(useRouter().currentRoute.value?.path, optionsWithDefault.extension);
-    const src = withSiteUrl(path);
+  const resolvedOptions = normaliseOptions(defu(options, routeRules, defaults));
+  if (_options.url) {
+    createOgImageMeta(null, options, resolvedOptions, nuxtApp.ssrContext);
+  } else {
+    const path = getOgImagePath(basePath, resolvedOptions);
     if (import.meta.prerender)
       appendHeader(useRequestEvent(), "x-nitro-prerender", path);
-    const meta = [
-      { property: "og:image", content: src },
-      { property: "og:image:width", content: optionsWithDefault.width },
-      { property: "og:image:height", content: optionsWithDefault.height },
-      { property: "og:image:type", content: `image/${optionsWithDefault.extension}` }
-    ];
-    if (optionsWithDefault.alt)
-      meta.push({ property: "og:image:alt", content: optionsWithDefault.alt });
-    meta.push(...[
-      { name: "twitter:card", content: "summary_large_image" },
-      { name: "twitter:image:src", content: src },
-      { name: "twitter:image:width", content: optionsWithDefault.width },
-      { name: "twitter:image:height", content: optionsWithDefault.height }
-    ]);
-    if (optionsWithDefault.alt)
-      meta.push({ name: "twitter:image:alt", content: optionsWithDefault.alt });
-    useServerHead({
-      meta,
-      script: [
-        {
-          id: "nuxt-og-image-options",
-          type: "application/json",
-          processTemplateParams: true,
-          innerHTML: () => {
-            const payload = {
-              title: "%s"
-            };
-            Object.entries(options).forEach(([key, val]) => {
-              payload[key.replace(/-([a-z])/g, (g) => g[1].toUpperCase())] = val;
-            });
-            return payload;
-          },
-          // we want this to be last in our head
-          tagPosition: "bodyClose"
-        }
-      ]
-    }, {
-      // after async scripts when capo.js is enabled
-      tagPriority: 35
-    });
+    createOgImageMeta(path, options, resolvedOptions, nuxtApp.ssrContext);
   }
 }

package/dist/runtime/composables/defineOgImageComponent.d.ts

@@ -0,0 +1,3 @@
+import type { ExtractComponentProps, OgImageOptions } from '../types';
+import type { OgImageComponents } from '#nuxt-og-image/components';
+export declare function defineOgImageComponent<T extends keyof OgImageComponents>(component: T, props: ExtractComponentProps<OgImageComponents[T]>, options?: OgImageOptions): void;

package/dist/runtime/composables/defineOgImageComponent.mjs

@@ -0,0 +1,8 @@
+import { defineOgImage } from "./defineOgImage.mjs";
+export function defineOgImageComponent(component, props, options = {}) {
+  return defineOgImage({
+    component,
+    props,
+    ...options
+  });
+}

package/dist/runtime/composables/defineOgImagePageScreenshot.d.ts

@@ -0,0 +1,2 @@
+import type { OgImagePageScreenshotOptions } from '../types';
+export declare function defineOgImageScreenshot(options?: OgImagePageScreenshotOptions): any;

package/dist/runtime/composables/defineOgImagePageScreenshot.mjs

@@ -0,0 +1,14 @@
+import { defineOgImage, useRouter } from "#imports";
+export function defineOgImageScreenshot(options = {}) {
+  const router = useRouter();
+  const route = router.currentRoute.value?.path || "";
+  return defineOgImage({
+    alt: `Web page screenshot${route ? ` of ${route}` : ""}.`,
+    renderer: "chromium",
+    extension: "jpeg",
+    component: "PageScreenshot",
+    // this is an alias
+    cache: true,
+    ...options
+  });
+}

package/dist/runtime/core/bindings/css-inline/node.d.ts

@@ -1,5 +1,2 @@
-declare function nodeFn(html: string, options: any): string;
-declare namespace nodeFn {
-    var __mock: boolean;
-}
-export default nodeFn;
+import cssInline from 'css-inline';
+export default cssInline;

package/dist/runtime/core/bindings/css-inline/node.mjs

@@ -1,10 +1,2 @@
-import { inline } from "css-inline";
-function nodeFn(html, options) {
-  return inline(html, {
-    ...options,
-    load_remote_stylesheets: false,
-    keep_style_tags: false
-  });
-}
-nodeFn.__mock = false;
-export default nodeFn;
+import cssInline from "css-inline";
+export default cssInline;

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,7 +2,7 @@ import { Buffer } from "node:buffer";
 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])
@@ -23,7 +23,13 @@ export async function loadFont(e, font) {
       });
     }
   }
-  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 .3em;   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,20 @@
-import { createError } from "h3";
-import { hash } from "ohash";
 import { createHeadCore } from "@unhead/vue";
-import twemoji from "twemoji";
 import { renderSSRHead } from "@unhead/ssr";
+import { applyEmojis } from "./applyEmojis.mjs";
+import { fetchIsland } from "./fetchIsland.mjs";
 import { useRuntimeConfig } from "#imports";
-export async function fetchHTML(e, options) {
+export async function devIframeTemplate(ctx) {
+  const { options } = ctx;
   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)
-    }
-  });
+  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])
@@ -54,12 +37,6 @@ export async function fetchHTML(e, options) {
     height: ${options.height}px;
     overflow: hidden;
     background-color: ${options.mode === "dark" ? "#1b1b1b" : "#fff"};
-}
-img.emoji {
-   height: 1em;
-   width: 1em;
-   margin: 0 .05em 0 .1em;
-   vertical-align: -0.1em;
 }`
       },
       ...fonts.filter((font) => font.path).map((font) => {
@@ -98,6 +75,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 +86,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/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({ 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({ e, options, extension }, browser) {
+  const path = options.component === "PageScreenshot" ? options.path : joinURL("/__og-image__/image", options.path, `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;