nuxt-og-image 3.0.0-beta.4 → 3.0.0-beta.40

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

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

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

@@ -1,4 +1,6 @@
 import type _satori from 'satori';
+export declare function useSatoriRenderer(): Promise<import("../../../types").Renderer>;
+export declare function useChromiumRenderer(): Promise<import("../../../types").Renderer>;
 export declare function useResvg(): Promise<new (svg: string | Uint8Array, options?: import("@resvg/resvg-wasm").ResvgRenderOptions | undefined) => {
     free(): void;
     render(): {
@@ -37,3 +39,4 @@ export declare function useResvg(): Promise<new (svg: string | Uint8Array, optio
 }>;
 export declare function useSatori(): Promise<typeof _satori>;
 export declare function useSharp(): Promise<any>;
+export declare function useCssInline(): Promise<any>;

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

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

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

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

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

@@ -3,28 +3,41 @@ import { withBase } from "ufo";
 import sizeOf from "image-size";
 import { defineSatoriTransformer } from "../utils.mjs";
 import { toBase64Image } from "../../../env/assets.mjs";
-import { useNitroOrigin } from "#imports";
+import { useNitroOrigin, useStorage } from "#imports";
 export default defineSatoriTransformer({
   filter: (node) => node.type === "img",
-  transform: async (node, e) => {
+  transform: async (node, { e }) => {
     const src = node.props?.src;
+    const isRelative = src?.startsWith("/");
     if (src) {
       let updated = false;
       let dimensions;
-      if (!updated) {
-        let valid = true;
-        const response = await e.$fetch(src, {
+      let imageBuffer;
+      let valid = true;
+      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;
         });
-        if (valid) {
-          node.props.src = toBase64Image(src, response);
-          const imageSize = sizeOf(Buffer.from(response));
+        valid = !!imageBuffer;
+      }
+      if (valid) {
+        node.props.src = toBase64Image(src, imageBuffer);
+        try {
+          const imageSize = sizeOf(Buffer.from(imageBuffer));
           dimensions = { width: imageSize.width, height: imageSize.height };
-          updated = true;
+        } catch (e2) {
         }
+        updated = true;
       }
       if (dimensions?.width && dimensions?.height) {
         const naturalAspectRatio = dimensions.width / dimensions.height;
@@ -37,7 +50,7 @@ export default defineSatoriTransformer({
           node.props.height = dimensions.height;
         }
       }
-      if (!updated) {
+      if (!updated && isRelative) {
         node.props.src = `${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()}`;
       }
     }

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

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

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

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

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

@@ -1,4 +1,3 @@
-import type { H3Event } from 'h3';
-import type { SatoriTransformer, VNode } from '../../../types';
-export declare function walkSatoriTree(e: H3Event, node: VNode, plugins: (SatoriTransformer | SatoriTransformer[])[]): Promise<void>;
+import type { H3EventOgImageRender, SatoriTransformer, VNode } from '../../../types';
+export declare function walkSatoriTree(e: H3EventOgImageRender, node: VNode, plugins: (SatoriTransformer | SatoriTransformer[])[]): Promise<void>;
 export declare function defineSatoriTransformer(transformer: SatoriTransformer | SatoriTransformer[]): SatoriTransformer | SatoriTransformer[];

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

@@ -1,3 +1,2 @@
-import type { H3Event } from 'h3';
-import type { RendererOptions, VNode } from '../../../types';
-export declare function createVNodes(e: H3Event, options: RendererOptions): Promise<VNode>;
+import type { H3EventOgImageRender, VNode } from '../../../types';
+export declare function createVNodes(ctx: H3EventOgImageRender): Promise<VNode>;

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

@@ -1,16 +1,26 @@
 import { html as convertHtmlToSatori } from "satori-html";
-import { fetchHTML } from "../../html/fetch.mjs";
+import { fetchIsland } from "../../html/fetchIsland.mjs";
+import { applyInlineCss } from "../../html/applyInlineCss.mjs";
+import { applyEmojis } from "../../html/applyEmojis.mjs";
 import { walkSatoriTree } from "./utils.mjs";
+import unocss from "./plugins/unocss.mjs";
 import emojis from "./plugins/emojis.mjs";
 import twClasses from "./plugins/twClasses.mjs";
 import imageSrc from "./plugins/imageSrc.mjs";
 import flex from "./plugins/flex.mjs";
 import encoding from "./plugins/encoding.mjs";
-export async function createVNodes(e, options) {
-  const html = options.html || await fetchHTML(e, options);
-  const body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1] || html;
-  const satoriTree = convertHtmlToSatori(body);
-  await walkSatoriTree(e, satoriTree, [
+export async function createVNodes(ctx) {
+  let html = ctx.options.html;
+  if (!html) {
+    const island = await fetchIsland(ctx);
+    await applyInlineCss(ctx, island);
+    await applyEmojis(ctx, island);
+    html = island.html;
+  }
+  const template = `<div data-v-inspector-ignore="true" style="position: relative; display: flex; margin: 0 auto; width: ${ctx.options.width}px; height: ${ctx.options.height}px; overflow: hidden;">${html}</div>`;
+  const satoriTree = convertHtmlToSatori(template);
+  await walkSatoriTree(ctx, satoriTree, [
+    unocss,
     emojis,
     twClasses,
     imageSrc,

package/dist/runtime/core/utils/resolveRendererContext.d.ts

@@ -1,7 +1,3 @@
 import type { H3Error, H3Event } from 'h3';
-import type { Renderer, RuntimeOgImageOptions } from '../../types';
-export declare function resolveRendererContext(e: H3Event): Promise<H3Error | {
-    extension: RuntimeOgImageOptions['extension'];
-    renderer: Renderer;
-    options: RuntimeOgImageOptions;
-}>;
+import type { H3EventOgImageRender } from '../../types';
+export declare function resolveRendererContext(e: H3Event): Promise<H3Error | H3EventOgImageRender>;

package/dist/runtime/core/utils/resolveRendererContext.mjs

@@ -1,14 +1,15 @@
-import { parseURL, withoutBase, withoutLeadingSlash, withoutTrailingSlash } from "ufo";
+import { parseURL, withoutBase, withoutTrailingSlash } from "ufo";
 import { createError, getQuery } from "h3";
 import { defu } from "defu";
 import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
 import { fetchPathHtmlAndExtractOptions } from "../options/fetch.mjs";
-import { prerenderCache } from "../cache/prerender.mjs";
+import { prerenderOptionsCache } from "../cache/prerender.mjs";
+import { useChromiumRenderer, useSatoriRenderer } from "../renderers/satori/instances.mjs";
+import { separateProps, useOgImageRuntimeConfig } from "../../utils.mjs";
+import { resolvePathCacheKey } from "../../nitro/utils.mjs";
 import { useRuntimeConfig } from "#imports";
-const satoriRendererInstance = { instance: void 0 };
-const chromiumRendererInstance = { instance: void 0 };
 export async function resolveRendererContext(e) {
-  const runtimeConfig = useRuntimeConfig()["nuxt-og-image"];
+  const runtimeConfig = useOgImageRuntimeConfig();
   const path = parseURL(e.path).pathname;
   const extension = path.split(".").pop();
   if (!extension) {
@@ -17,22 +18,29 @@ export async function resolveRendererContext(e) {
       statusMessage: `Missing OG Image type.`
     });
   }
+  if (!["png", "jpeg", "jpg", "svg", "html", "json"].includes(extension)) {
+    return createError({
+      statusCode: 400,
+      statusMessage: `Unknown OG Image type ${extension}.`
+    });
+  }
   const basePath = withoutTrailingSlash(
-    path.replace("/__og-image__/image", "").replace(`/og.${extension}`, "")
+    path.replace(`/__og-image__/image`, "").replace(`/og.${extension}`, "")
   );
-  const queryParams = { ...getQuery(e) };
+  let queryParams = { ...getQuery(e) };
+  queryParams.props = JSON.parse(queryParams.props || "{}");
+  queryParams = separateProps(queryParams);
+  const isDebugJsonPayload = extension === "json" && runtimeConfig.debug;
+  const key = resolvePathCacheKey(e, basePath);
   let options = queryParams.options;
   if (!options) {
-    if (import.meta.prerender) {
-      const key = [
-        withoutLeadingSlash(basePath === "/" || !basePath ? "index" : basePath).replaceAll("/", "-")
-      ].join(":");
-      options = await prerenderCache?.getItem(key);
-    } else {
-      const payloadOptions = await fetchPathHtmlAndExtractOptions(e, basePath);
-      if (payloadOptions instanceof Error)
-        return payloadOptions;
-      options = payloadOptions;
+    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;
@@ -41,8 +49,15 @@ export async function resolveRendererContext(e) {
   );
   const routeRules = defu({}, ..._routeRulesMatcher.matchAll(
     withoutBase(basePath.split("?")[0], useRuntimeConfig().app.baseURL)
-  ).reverse()).ogImage;
-  options = defu(queryParams, routeRules, options, runtimeConfig.defaults);
+  ).reverse());
+  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, ogImageRouteRules, options, runtimeConfig.defaults);
   if (!options) {
     return createError({
       statusCode: 404,
@@ -52,25 +67,25 @@ export async function resolveRendererContext(e) {
   let renderer;
   switch (options.renderer) {
     case "satori":
-      renderer = satoriRendererInstance.instance = satoriRendererInstance.instance || await import("#nuxt-og-image/renderers/satori").then((m) => Object.keys(m.default).length ? m.default : false);
+      renderer = await useSatoriRenderer();
       break;
     case "chromium":
-      renderer = chromiumRendererInstance.instance = chromiumRendererInstance.instance || await import("#nuxt-og-image/renderers/chromium").then((m) => Object.keys(m.default).length ? m.default : false);
+      renderer = await useChromiumRenderer();
       break;
   }
-  if (!renderer) {
+  if (!renderer || renderer.__unenv__) {
     throw createError({
       statusCode: 400,
       statusMessage: `Renderer ${options.renderer} is missing.`
     });
   }
   return {
+    e,
+    key,
     renderer,
+    isDebugJsonPayload,
     extension,
-    options: {
-      ...options,
-      extension: extension === "json" ? options.extension : extension,
-      path: basePath
-    }
+    basePath,
+    options
   };
 }

package/dist/runtime/core/utils/wasm.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="node" />
+export declare function importWasm(input: any): Promise<any>;
+export declare function readWasmFile(input: string): Promise<Buffer>;

package/dist/runtime/core/utils/wasm.mjs

@@ -0,0 +1,16 @@
+import { readFile } from "node:fs/promises";
+import { resolvePath } from "mlly";
+export async function importWasm(input) {
+  const _input = await input;
+  const _module = _input.default || _input;
+  if (typeof _module === "function") {
+    const fnRes = await _module();
+    const _instance = fnRes.instance || fnRes;
+    return _instance.exports || _instance || _module;
+  }
+  return _module;
+}
+export async function readWasmFile(input) {
+  const path = await resolvePath(input);
+  return readFile(path);
+}

package/dist/runtime/nitro/plugins/nuxt-content.mjs

@@ -1,16 +1,15 @@
 import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
 import { defu } from "defu";
-import { getOgImagePath } from "../../utilts.mjs";
-import { useRuntimeConfig } from "#imports";
+import { getOgImagePath, useOgImageRuntimeConfig } from "../../utils.mjs";
 export default defineNitroPlugin((nitroApp) => {
   nitroApp.hooks.hook("content:file:afterParse", async (content) => {
     if (content._draft || content._extension !== "md" || content._partial || content.indexable === false || content.index === false)
       return;
     if (content.path && content.ogImage) {
       const ogImageConfig = typeof content.ogImage === "object" ? content.ogImage : {};
-      const { defaults } = useRuntimeConfig()["nuxt-og-image"];
+      const { defaults } = useOgImageRuntimeConfig();
       const optionsWithDefault = defu(ogImageConfig, defaults);
-      const src = getOgImagePath(content.path, optionsWithDefault.extension);
+      const src = getOgImagePath(content.path, optionsWithDefault);
       const payload = {
         title: content.title,
         excerpt: content.description || content.excerpt,

package/dist/runtime/nitro/plugins/prerender.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("nitropack/dist/runtime/plugin").NitroAppPlugin;
+declare const _default: import("nitropack").NitroAppPlugin;
 export default _default;

package/dist/runtime/nitro/plugins/prerender.mjs

@@ -1,17 +1,27 @@
-import { parseURL, withoutLeadingSlash } from "ufo";
-import { getRouteRules } from "nitropack/dist/runtime/route-rules";
-import { extractAndNormaliseOgImageOptions } from "../../core/options/extract.mjs";
-import { prerenderCache, prerenderChromiumContext } from "../../core/cache/prerender.mjs";
-import { isInternalRoute } from "../../utilts.mjs";
+import { parseURL, withoutBase } from "ufo";
 import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
+import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
+import { defu } from "defu";
+import { extractAndNormaliseOgImageOptions } from "../../core/options/extract.mjs";
+import { prerenderChromiumContext, prerenderOptionsCache } from "../../core/cache/prerender.mjs";
+import { isInternalRoute } from "../../utils.pure.mjs";
+import { resolvePathCacheKey } from "../utils.mjs";
+import { useRuntimeConfig } from "#imports";
 export default defineNitroPlugin(async (nitro) => {
   if (!import.meta.prerender)
     return;
-  nitro.hooks.hook("render:html", async ({ head, bodyAppend }, e) => {
-    const path = parseURL(e.event.path).pathname;
+  nitro.hooks.hook("render:html", async (html, ctx) => {
+    const { head, bodyAppend } = html;
+    const path = parseURL(ctx.event.path).pathname;
     if (isInternalRoute(path))
       return;
-    const routeRules = getRouteRules(e)?.ogImage || {};
+    const runtimeConfig = useRuntimeConfig();
+    const _routeRulesMatcher = toRouteMatcher(
+      createRadixRouter({ routes: runtimeConfig.nitro?.routeRules })
+    );
+    const routeRules = defu({}, ..._routeRulesMatcher.matchAll(
+      withoutBase(path.split("?")[0], runtimeConfig.app.baseURL)
+    ).reverse()).ogImage;
     if (routeRules === false)
       return;
     const options = extractAndNormaliseOgImageOptions([
@@ -20,10 +30,8 @@ export default defineNitroPlugin(async (nitro) => {
     ].join("\n"));
     if (!options)
       return;
-    const key = [
-      withoutLeadingSlash(path === "/" || !path ? "index" : path).replaceAll("/", "-")
-    ].join(":");
-    await prerenderCache.setItem(key, options);
+    const key = resolvePathCacheKey(ctx.event);
+    await prerenderOptionsCache.setItem(key, options);
   });
   nitro.hooks.hook("close", () => {
     if (prerenderChromiumContext.browser) {

package/dist/runtime/nitro/utils.d.ts

@@ -0,0 +1,2 @@
+import type { H3Event } from 'h3';
+export declare function resolvePathCacheKey(e: H3Event, path?: string): string;

package/dist/runtime/nitro/utils.mjs

@@ -0,0 +1,17 @@
+import { withoutLeadingSlash, withoutTrailingSlash } from "ufo";
+import { hash } from "ohash";
+import { normalizeKey } from "unstorage";
+import { getQuery } from "h3";
+import { useSiteConfig } from "#imports";
+export function resolvePathCacheKey(e, path) {
+  const siteConfig = useSiteConfig(e);
+  const basePath = withoutTrailingSlash(withoutLeadingSlash(normalizeKey(path || e.path)));
+  return [
+    !basePath ? "index" : basePath,
+    hash([
+      basePath,
+      siteConfig.url,
+      hash(getQuery(e))
+    ])
+  ].join(":");
+}

package/dist/runtime/nuxt/plugins/og-image-canonical-urls.server.mjs

@@ -0,0 +1,31 @@
+import { parseURL } from "ufo";
+import { toValue } from "vue";
+import { isInternalRoute } from "../../utils.pure.mjs";
+import { defineNuxtPlugin, useRequestEvent, withSiteUrl } from "#imports";
+export default defineNuxtPlugin({
+  setup(nuxtApp) {
+    nuxtApp.hooks.hook("app:rendered", async (ctx) => {
+      const { ssrContext } = ctx;
+      const e = useRequestEvent();
+      const path = parseURL(e.path).pathname;
+      if (isInternalRoute(path))
+        return;
+      ssrContext?.head.use({
+        key: "nuxt-og-image:canonical-urls",
+        hooks: {
+          "tags:resolve": async ({ tags }) => {
+            for (const tag of tags) {
+              if (tag.tag === "meta" && (tag.props.property === "og:image" || tag.props.name === "twitter:image:src")) {
+                if (!tag.props.content.startsWith("https")) {
+                  await nuxtApp.runWithContext(() => {
+                    tag.props.content = toValue(withSiteUrl(tag.props.content));
+                  });
+                }
+              }
+            }
+          }
+        }
+      });
+    });
+  }
+});