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

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

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

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

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

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

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

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

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

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

@@ -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) => {

package/dist/runtime/nuxt/plugins/route-rule-og-image.server.mjs

@@ -2,7 +2,8 @@ import { defu } from "defu";
 import { parseURL, withoutBase } from "ufo";
 import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
 import { normaliseOptions } from "../../core/options/normalise.mjs";
-import { getOgImagePath, isInternalRoute } from "../../utilts.mjs";
+import { getOgImagePath, isInternalRoute } from "../../utils.mjs";
+import { createOgImageMeta } from "../utils.mjs";
 import { defineNuxtPlugin, useRequestEvent, useRuntimeConfig } from "#imports";
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hooks.hook("app:rendered", async (ctx) => {
@@ -14,59 +15,25 @@ export default defineNuxtPlugin((nuxtApp) => {
     const _routeRulesMatcher = toRouteMatcher(
       createRadixRouter({ routes: ssrContext?.runtimeConfig?.nitro?.routeRules })
     );
-    const routeRules = defu({}, ..._routeRulesMatcher.matchAll(
+    let routeRules = defu({}, ..._routeRulesMatcher.matchAll(
       withoutBase(path.split("?")[0], ssrContext?.runtimeConfig?.app.baseURL)
     ).reverse()).ogImage;
     if (typeof routeRules === "undefined")
       return;
-    const payloadIndex = ssrContext.head.headEntries().findIndex((entry) => {
-      return entry.input?.script?.[0]?.id === "nuxt-og-image-options";
-    });
-    if (payloadIndex >= 0 && routeRules === false) {
-      ssrContext.head.headEntries().splice(payloadIndex, 1);
+    const ogImageInstances = nuxtApp.ssrContext._ogImageInstances || [];
+    if (routeRules === false) {
+      ogImageInstances?.forEach((e2) => {
+        e2.dispose();
+      });
+      nuxtApp.ssrContext._ogImageInstances = void 0;
       return;
     }
-    if (payloadIndex >= 0)
+    if (ogImageInstances.length >= 0)
       return;
-    const options = normaliseOptions(routeRules);
+    routeRules = defu(nuxtApp.ssrContext?.event.context._nitro?.routeRules?.ogImage, routeRules);
     const { defaults } = useRuntimeConfig()["nuxt-og-image"];
-    const optionsWithDefault = normaliseOptions(defu(options, defaults));
-    const src = getOgImagePath(ssrContext.url, optionsWithDefault.extension);
-    ssrContext?.head.push({
-      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"
-        }
-      ],
-      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}` },
-        { property: "og:image:alt", content: optionsWithDefault.alt },
-        // twitter
-        { 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 },
-        { name: "twitter:image:alt", content: optionsWithDefault.alt }
-      ]
-    }, {
-      mode: "server",
-      tagPriority: 35
-    });
+    const resolvedOptions = normaliseOptions(defu(routeRules, defaults));
+    const src = getOgImagePath(ssrContext.url, resolvedOptions);
+    createOgImageMeta(src, {}, resolvedOptions, nuxtApp.ssrContext);
   });
 });

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

@@ -0,0 +1,2 @@
+import type { OgImageOptions, OgImagePrebuilt } from '../types';
+export declare function createOgImageMeta(src: string | null, input: OgImageOptions | OgImagePrebuilt, resolvedOptions: OgImageOptions, ssrContext: Record<string, any>): void;

package/dist/runtime/nuxt/utils.mjs

@@ -0,0 +1,55 @@
+import { useServerHead } from "#imports";
+export function createOgImageMeta(src, input, resolvedOptions, ssrContext) {
+  const url = src || input.url || resolvedOptions.url;
+  let urlExtension = (url.split("/").pop() || url).split(".").pop() || resolvedOptions.extension;
+  if (urlExtension === "jpg")
+    urlExtension = "jpeg";
+  const meta = [
+    { property: "og:image", content: url },
+    { property: "og:image:type", content: `image/${urlExtension}` },
+    { name: "twitter:card", content: "summary_large_image" },
+    { name: "twitter:image:src", content: url }
+  ];
+  if (resolvedOptions.width) {
+    meta.push({ property: "og:image:width", content: resolvedOptions.width });
+    meta.push({ name: "twitter:image:width", content: resolvedOptions.width });
+  }
+  if (resolvedOptions.height) {
+    meta.push({ property: "og:image:height", content: resolvedOptions.height });
+    meta.push({ name: "twitter:image:height", content: resolvedOptions.height });
+  }
+  if (resolvedOptions.alt) {
+    meta.push({ property: "og:image:alt", content: resolvedOptions.alt });
+    meta.push({ name: "twitter:image:alt", content: resolvedOptions.alt });
+  }
+  ssrContext._ogImageInstances = ssrContext._ogImageInstances || [];
+  const script = [];
+  if (src) {
+    script.push({
+      id: "nuxt-og-image-options",
+      type: "application/json",
+      processTemplateParams: true,
+      innerHTML: () => {
+        const payload = {
+          title: "%s"
+        };
+        delete input.url;
+        Object.entries({ ...input, url: void 0 }).forEach(([key, val]) => {
+          if (typeof val !== "undefined") {
+            payload[key.replace(/-([a-z])/g, (g) => g[1].toUpperCase())] = val;
+          }
+        });
+        return payload;
+      },
+      // we want this to be last in our head
+      tagPosition: "bodyClose"
+    });
+  }
+  const instance = useServerHead({
+    script,
+    meta
+  }, {
+    tagPriority: 35
+  });
+  ssrContext._ogImageInstances.push(instance);
+}

package/dist/runtime/server/routes/__og-image__/debug.json.d.ts

@@ -5,7 +5,5 @@ declare const _default: import("h3").EventHandler<import("h3").EventHandlerReque
     };
     componentNames: any;
     runtimeConfig: any;
-    baseCacheKey: string;
-    cachedKeys: string[];
 }>>;
 export default _default;

package/dist/runtime/server/routes/__og-image__/debug.json.mjs

@@ -1,21 +1,16 @@
 import { defineEventHandler, setHeader } from "h3";
-import { prefixStorage } from "unstorage";
-import { useRuntimeConfig, useSiteConfig, useStorage } from "#imports";
+import { useRuntimeConfig, useSiteConfig } from "#imports";
 import { componentNames } from "#nuxt-og-image/component-names.mjs";
 export default defineEventHandler(async (e) => {
   setHeader(e, "Content-Type", "application/json");
   const runtimeConfig = useRuntimeConfig()["nuxt-og-image"];
   const siteConfig = await useSiteConfig(e, { debug: true });
-  const baseCacheKey = runtimeConfig.runtimeCacheStorage === "default" ? `/cache/nuxt-og-image@${runtimeConfig.version}` : `/nuxt-og-image@${runtimeConfig.version}`;
-  const cache = prefixStorage(useStorage(), `${baseCacheKey}/`);
   return {
     siteConfigUrl: {
       value: siteConfig.url,
       source: siteConfig._context.url || "unknown"
     },
     componentNames,
-    runtimeConfig,
-    baseCacheKey,
-    cachedKeys: await cache.getKeys()
+    runtimeConfig
   };
 });

package/dist/runtime/server/routes/__og-image__/image.mjs

@@ -0,0 +1,86 @@
+import { H3Error, createError, defineEventHandler, getQuery, setHeader } from "h3";
+import { resolveRendererContext } from "../../../core/utils/resolveRendererContext.mjs";
+import { fetchIsland } from "../../../core/html/fetchIsland.mjs";
+import { devIframeTemplate } from "../../../core/html/devIframeTemplate.mjs";
+import { applyInlineCss } from "../../../core/html/applyInlineCss.mjs";
+import { useOgImageBufferCache } from "../../../cache.mjs";
+import { useRuntimeConfig, useSiteConfig } from "#imports";
+export default defineEventHandler(async (e) => {
+  const ctx = await resolveRendererContext(e);
+  if (ctx instanceof H3Error)
+    return ctx;
+  const { isDebugJsonPayload, extension, options, renderer } = ctx;
+  const { debug, baseCacheKey } = useRuntimeConfig()["nuxt-og-image"];
+  const compatibility = [];
+  if (isDebugJsonPayload) {
+    const queryExtension = getQuery(e).extension || ctx.options.extension;
+    if (["jpeg", "jpg"].includes(queryExtension) && options.renderer === "satori")
+      compatibility.push("Converting PNGs to JPEGs requires Sharp which only runs on Node based systems.");
+    if (options.renderer === "chromium")
+      compatibility.push("Using Chromium to generate images is only supported in Node based environments. It's recommended to only use this if you're prerendering");
+    if (await applyInlineCss(ctx, await fetchIsland(ctx)))
+      compatibility.push("Inlining CSS is only supported in Node based environments.");
+    setHeader(e, "Content-Type", "application/json");
+    return {
+      compatibility,
+      ...ctx,
+      siteConfig: useSiteConfig(e),
+      ...options.renderer === "satori" ? await renderer.debug(ctx) : void 0
+    };
+  }
+  switch (extension) {
+    case "html":
+      setHeader(e, "Content-Type", `text/html`);
+      return devIframeTemplate(ctx);
+    case "svg":
+      if (!debug && !import.meta.dev) {
+        return createError({
+          statusCode: 404
+        });
+      }
+      if (ctx.renderer.name !== "satori") {
+        return createError({
+          statusCode: 400,
+          statusMessage: `Generating ${extension}'s with ${renderer.name} is not supported.`
+        });
+      }
+      setHeader(e, "Content-Type", `image/svg+xml`);
+      return (await ctx.renderer.debug(ctx)).svg;
+    case "png":
+    case "jpeg":
+    case "jpg":
+      if (!renderer.supportedFormats.includes(extension)) {
+        return createError({
+          statusCode: 400,
+          statusMessage: `Generating ${extension}'s with ${renderer.name} is not supported.`
+        });
+      }
+      setHeader(e, "Content-Type", `image/${extension === "jpg" ? "jpeg" : extension}`);
+      break;
+    default:
+      return createError({
+        statusCode: 400,
+        statusMessage: `Invalid request for og.${extension}.`
+      });
+  }
+  const cacheApi = await useOgImageBufferCache(ctx, {
+    cacheMaxAgeSeconds: ctx.options.cacheMaxAgeSeconds,
+    baseCacheKey
+  });
+  if (typeof cacheApi === "undefined")
+    return;
+  let image = cacheApi.cachedItem;
+  if (!image) {
+    image = await renderer.createImage(ctx);
+    if (image instanceof H3Error)
+      return image;
+    if (!image) {
+      return createError({
+        statusCode: 500,
+        statusMessage: `Failed to generate og.${extension}.`
+      });
+    }
+    await cacheApi.update(image);
+  }
+  return image;
+});