npm - nuxt-og-image - Versions diffs - 3.0.0-beta.12 → 3.0.0-beta.14 - Mend

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

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 (99) hide show

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

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

@@ -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 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/options/normalise.d.ts CHANGED Viewed

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

@@ -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 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 { H3EventOgImageRender } from '../../../types';
+export declare function createScreenshot({ e, options, extension }: H3EventOgImageRender, browser: Browser): Promise<Buffer>;

package/dist/runtime/core/renderers/chromium/screenshot.mjs CHANGED Viewed

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

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

@@ -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 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 { H3EventOgImageRender, Renderer } from '../../../types';
+export declare function createSvg(event: H3EventOgImageRender): Promise<string>;
 declare const SatoriRenderer: Renderer;
 export default SatoriRenderer;

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

@@ -3,11 +3,12 @@ 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) {
+export async function createSvg(event) {
+  const { options } = event;
   const { fonts, satoriOptions } = useRuntimeConfig()["nuxt-og-image"];
-  const vnodes = await createVNodes(e, options);
+  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) {
+async function createPng(event) {
   const { resvgOptions } = useRuntimeConfig()["nuxt-og-image"];
-  const svg = await createSvg(e, options);
+  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) {
+async function createJpeg(event) {
   const { sharpOptions } = useRuntimeConfig()["nuxt-og-image"];
-  const png = await createPng(e, options);
+  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

@@ -6,8 +6,9 @@ import { toBase64Image } from "../../../env/assets.mjs";
 import { useNitroOrigin } 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;
@@ -21,8 +22,11 @@ export default defineSatoriTransformer({
         });
         if (valid) {
           node.props.src = toBase64Image(src, response);
-          const imageSize = sizeOf(Buffer.from(response));
-          dimensions = { width: imageSize.width, height: imageSize.height };
+          try {
+            const imageSize = sizeOf(Buffer.from(response));
+            dimensions = { width: imageSize.width, height: imageSize.height };
+          } catch (e2) {
+          }
           updated = true;
         }
       }
@@ -37,7 +41,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/utils.d.ts CHANGED Viewed

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

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

@@ -1,16 +1,24 @@
 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 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, [
     emojis,
     twClasses,
     imageSrc,

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

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

@@ -2,11 +2,11 @@ import { parseURL, withoutBase, withoutLeadingSlash, withoutTrailingSlash } from
 import { createError, getQuery } from "h3";
 import { defu } from "defu";
 import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
+import { hash } from "ohash";
 import { fetchPathHtmlAndExtractOptions } from "../options/fetch.mjs";
 import { prerenderCache } from "../cache/prerender.mjs";
-import { useRuntimeConfig } from "#imports";
-const satoriRendererInstance = { instance: void 0 };
-const chromiumRendererInstance = { instance: void 0 };
+import { useChromiumRenderer, useSatoriRenderer } from "../renderers/satori/instances.mjs";
+import { useRuntimeConfig, useSiteConfig } from "#imports";
 export async function resolveRendererContext(e) {
   const runtimeConfig = useRuntimeConfig()["nuxt-og-image"];
   const path = parseURL(e.path).pathname;
@@ -17,22 +17,35 @@ 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) };
+  const isDebugJsonPayload = extension === "json" && runtimeConfig.debug;
+  const siteConfig = useSiteConfig(e);
+  const key = [
+    withoutLeadingSlash(basePath === "/" || !basePath ? "index" : basePath).replaceAll("/", "-"),
+    hash([
+      basePath,
+      siteConfig.url,
+      hash(queryParams)
+    ])
+  ].join(":");
   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;
+      const payload = await fetchPathHtmlAndExtractOptions(e, basePath, key);
+      if (payload instanceof Error)
+        return payload;
+      options = payload;
     }
   }
   delete queryParams.options;
@@ -41,8 +54,8 @@ 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());
+  options = defu(queryParams, routeRules.ogImage, options, runtimeConfig.defaults);
   if (!options) {
     return createError({
       statusCode: 404,
@@ -52,25 +65,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/nitro/plugins/nuxt-content.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
 import { defu } from "defu";
-import { getOgImagePath } from "../../utilts.mjs";
+import { getOgImagePath } from "../../utils.mjs";
 import { useRuntimeConfig } from "#imports";
 export default defineNitroPlugin((nitroApp) => {
   nitroApp.hooks.hook("content:file:afterParse", async (content) => {
@@ -10,7 +10,7 @@ export default defineNitroPlugin((nitroApp) => {
       const ogImageConfig = typeof content.ogImage === "object" ? content.ogImage : {};
       const { defaults } = useRuntimeConfig()["nuxt-og-image"];
       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.mjs CHANGED Viewed

@@ -1,9 +1,9 @@
 import { parseURL, withoutLeadingSlash } from "ufo";
 import { getRouteRules } from "nitropack/dist/runtime/route-rules";
+import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
 import { extractAndNormaliseOgImageOptions } from "../../core/options/extract.mjs";
 import { prerenderCache, prerenderChromiumContext } from "../../core/cache/prerender.mjs";
-import { isInternalRoute } from "../../utilts.mjs";
-import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
+import { isInternalRoute } from "../../utils.mjs";
 export default defineNitroPlugin(async (nitro) => {
   if (!import.meta.prerender)
     return;

package/dist/runtime/nuxt/plugins/nuxt-content-canonical-urls.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import { parseURL } from "ufo";
 import { toValue } from "vue";
-import { isInternalRoute } from "../../utilts.mjs";
+import { isInternalRoute } from "../../utils.mjs";
 import { useRequestEvent, withSiteUrl } from "#imports";
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hooks.hook("app:rendered", async (ctx) => {