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

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

@@ -0,0 +1,3 @@
+import type { NuxtIslandResponse } from 'nuxt/dist/core/runtime/nitro/renderer';
+import type { OgImageRenderEventContext } from '../../../../types.js';
+export declare function applyInlineCss(ctx: OgImageRenderEventContext, island: NuxtIslandResponse): Promise<boolean>;

package/dist/runtime/nitro/og-image/satori/transforms/inlineCss.js

@@ -0,0 +1,50 @@
+import { useNitroOrigin } from "#imports";
+import { createConsola } from "consola";
+import { useCssInline } from "../instances.js";
+export async function applyInlineCss(ctx, island) {
+  const { e } = ctx;
+  let html = island.html;
+  let css = island.head.style.map((s) => s.innerHTML).filter(Boolean).join("\n");
+  const componentInlineStyles = island.head.link.filter((l) => l.href.startsWith("/_nuxt/components") && l.href.replaceAll("/", "").includes(ctx.options.component));
+  if (!import.meta.prerender && !componentInlineStyles.length) {
+    return false;
+  }
+  let linksToCss = [];
+  if (import.meta.dev) {
+    linksToCss = componentInlineStyles.length ? (await Promise.all(
+      componentInlineStyles.map((l) => {
+        const url = l.href.endsWith("lang.css") ? `${l.href}&hmr=false` : l.href;
+        return e.$fetch(url, {
+          responseType: "text",
+          baseURL: useNitroOrigin(e)
+        }).then((res) => {
+          if (res.includes("__vite__css"))
+            return res.match(/__vite__css = "([^"]+)"/)?.[1];
+          return res.trim().split("\n").filter((l2) => !l2.startsWith("//")).join("\n").trim();
+        }).catch(() => {
+          return "";
+        });
+      })
+    )).join("\n") : "";
+    css = [linksToCss, css].join("\n");
+  }
+  if (!css.trim().length)
+    return false;
+  const cssInline = await useCssInline();
+  if (!cssInline || cssInline?.__unenv__) {
+    if (componentInlineStyles.length) {
+      const logger = createConsola().withTag("Nuxt OG Image");
+      logger.warn("To have inline styles applied you need to install either the `@css-inline/css-inline` or `@css-inline/css-inline-wasm` package.");
+    }
+    return false;
+  }
+  html = cssInline.inline(island.html, {
+    loadRemoteStylesheets: false,
+    extraCss: css
+  });
+  const classes = css.match(/\.([\w-]+)/g)?.map((c) => c.replace(".", ""));
+  if (classes)
+    html = html.replace(new RegExp(`class="(${classes.join("|")})"`, "g"), "");
+  island.html = html;
+  return true;
+}

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

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

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

@@ -1,19 +1,23 @@
-export async function walkSatoriTree(e, node, plugins) {
+export function walkSatoriTree(e, node, plugins) {
+  const promises = [];
   if (!node.props?.children || !Array.isArray(node.props.children))
-    return;
+    return promises;
   if (node.props.children.length === 0) {
     delete node.props.children;
-    return;
+    return promises;
   }
   for (const child of node.props.children || []) {
     if (child) {
       for (const plugin of plugins.flat()) {
         if (plugin.filter(child))
-          await plugin.transform(child, e);
+          promises.push(plugin.transform(child, e));
       }
-      await walkSatoriTree(e, child, plugins);
+      promises.push(
+        ...walkSatoriTree(e, child, plugins)
+      );
     }
   }
+  return promises;
 }
 export function defineSatoriTransformer(transformer) {
   return transformer;

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

@@ -1,2 +1,2 @@
-import type { OgImageRenderEventContext, VNode } from '../../../types';
+import type { OgImageRenderEventContext, VNode } from '../../../types.js';
 export declare function createVNodes(ctx: OgImageRenderEventContext): Promise<VNode>;

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

@@ -0,0 +1,38 @@
+import { html as convertHtmlToSatori } from "satori-html";
+import { htmlDecodeQuotes } from "../../util/encoding.js";
+import { fetchIsland } from "../../util/kit.js";
+import classes from "./plugins/classes.js";
+import emojis from "./plugins/emojis.js";
+import encoding from "./plugins/encoding.js";
+import flex from "./plugins/flex.js";
+import imageSrc from "./plugins/imageSrc.js";
+import unocss from "./plugins/unocss.js";
+import { applyEmojis } from "./transforms/emojis.js";
+import { applyInlineCss } from "./transforms/inlineCss.js";
+import { walkSatoriTree } from "./utils.js";
+export async function createVNodes(ctx) {
+  let html = ctx.options.html;
+  if (!html) {
+    const island = await fetchIsland(ctx.e, ctx.options.component, typeof ctx.options.props !== "undefined" ? ctx.options.props : ctx.options);
+    island.html = htmlDecodeQuotes(island.html);
+    await applyInlineCss(ctx, island);
+    await applyEmojis(ctx, island);
+    html = island.html;
+    if (html?.includes("<body>")) {
+      html = html.match(/<body>([\s\S]*)<\/body>/)?.[1] || "";
+    }
+  }
+  const template = `<div 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);
+  walkSatoriTree(ctx, satoriTree, [
+    emojis,
+    classes,
+    flex,
+    encoding
+  ]);
+  await Promise.all(walkSatoriTree(ctx, satoriTree, [
+    unocss,
+    imageSrc
+  ]));
+  return satoriTree;
+}

package/dist/runtime/nitro/og-image/templates/html.d.ts

@@ -0,0 +1,2 @@
+import type { OgImageRenderEventContext } from '../../../types.js';
+export declare function html(ctx: OgImageRenderEventContext): Promise<string>;

package/dist/runtime/{core/html/devIframeTemplate.mjs → nitro/og-image/templates/html.js}

@@ -1,13 +1,20 @@
-import { createHeadCore } from "@unhead/vue";
-import { renderSSRHead } from "@unhead/ssr";
-import { normaliseFontInput, useOgImageRuntimeConfig } from "../../utils.mjs";
-import { applyEmojis } from "./applyEmojis.mjs";
-import { fetchIsland } from "./fetchIsland.mjs";
 import { theme } from "#nuxt-og-image/unocss-config.mjs";
-export async function devIframeTemplate(ctx) {
+import { renderSSRHead } from "@unhead/ssr";
+import { createHeadCore } from "@unhead/vue";
+import { createError } from "h3";
+import { normaliseFontInput, useOgImageRuntimeConfig } from "../../../shared.js";
+import { fetchIsland } from "../../util/kit.js";
+import { applyEmojis } from "../satori/transforms/emojis.js";
+export async function html(ctx) {
   const { options } = ctx;
   const { fonts } = useOgImageRuntimeConfig();
-  const island = await fetchIsland(ctx);
+  if (!options.component) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `[Nuxt OG Image] Rendering an invalid component. Received options: ${JSON.stringify(options)}.`
+    });
+  }
+  const island = await fetchIsland(ctx.e, ctx.options.component, typeof ctx.options.props !== "undefined" ? ctx.options.props : ctx.options);
   const head = createHeadCore();
   head.push(island.head);
   let defaultFontFamily = "sans-serif";
@@ -16,13 +23,7 @@ export async function devIframeTemplate(ctx) {
   if (firstFont)
     defaultFontFamily = firstFont.name;
   await applyEmojis(ctx, island);
-  let html = island.html;
-  const googleFonts = {};
-  fonts.filter((font) => !font.path).forEach((font) => {
-    if (!googleFonts[font.name])
-      googleFonts[font.name] = [];
-    googleFonts[font.name].push(font);
-  });
+  let html2 = island.html;
   head.push({
     style: [
       {
@@ -31,31 +32,40 @@ export async function devIframeTemplate(ctx) {
       },
       {
         innerHTML: `body {
-    transform: scale(${options.props.scale || 1});
+    transform: scale(${options.props?.scale || 1});
     transform-origin: top left;
     max-height: 100vh;
     position: relative;
     width: ${options.width}px;
     height: ${options.height}px;
     overflow: hidden;
-    background-color: ${options.props.colorMode === "dark" ? "#1b1b1b" : "#fff"};
+    background-color: ${options.props?.colorMode === "dark" ? "#1b1b1b" : "#fff"};
 }
 div {
   display: flex;
+}
+div:has(div, p, ul, ol, li, blockquote, pre, hr, table, dl) {
+  display: flex;
   flex-direction: column;
 }
+div:not(:has(div, p, ul, ol, li, blockquote, pre, hr, table, dl)) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
 svg[data-emoji] {
   display: inline-block;
 }
 `
       },
-      ...fonts.filter((font) => font.path).map((font) => {
+      ...fonts.map((font) => {
         return `
           @font-face {
             font-family: '${font.name}';
             font-style: normal;
             font-weight: ${font.weight};
-            src: url('${font.path}') format('truetype');
+            src: url('/__og-image__/font/${font.key}') format('truetype');
           }
           `;
       })
@@ -88,22 +98,14 @@ svg[data-emoji] {
         // reset css to match svg output
         href: "https://cdn.jsdelivr.net/npm/gardevoir",
         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`,
-          rel: "stylesheet"
-        };
-      })
+      }
     ]
   });
-  html = html.replaceAll(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
+  html2 = html2.replaceAll(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
   const headChunk = await renderSSRHead(head);
   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>
+<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;">${html2}</div>${headChunk.bodyTags}</body>
 </html>`;
 }

package/dist/runtime/nitro/plugins/__zero-runtime/nuxt-content.d.ts

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

package/dist/runtime/nitro/plugins/__zero-runtime/nuxt-content.js

@@ -0,0 +1,9 @@
+import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
+import { nuxtContentPlugin } from "../../util/plugins.js";
+export default defineNitroPlugin((nitroApp) => {
+  if (import.meta.dev || import.meta.prerender) {
+    nuxtContentPlugin(nitroApp);
+    return;
+  }
+  throw new Error("Not supported in zeroRuntime mode.");
+});

package/dist/runtime/nitro/plugins/nuxt-content.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/nuxt-content.js

@@ -0,0 +1,5 @@
+import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
+import { nuxtContentPlugin } from "../util/plugins.js";
+export default defineNitroPlugin((nitroApp) => {
+  nuxtContentPlugin(nitroApp);
+});

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

@@ -0,0 +1,33 @@
+import { prerenderOptionsCache } from "#nuxt-og-image-cache";
+import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
+import { parseURL } from "ufo";
+import { isInternalRoute } from "../../pure.js";
+import { extractAndNormaliseOgImageOptions, resolvePathCacheKey } from "../og-image/context.js";
+import { createNitroRouteRuleMatcher } from "../util/kit.js";
+export default defineNitroPlugin(async (nitro) => {
+  if (!import.meta.prerender)
+    return;
+  const routeRuleMatcher = createNitroRouteRuleMatcher();
+  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 = routeRuleMatcher(path);
+    if (routeRules.ogImage === false)
+      return;
+    const options = extractAndNormaliseOgImageOptions([
+      head.join("\n"),
+      bodyAppend.join("\n")
+    ].join("\n"));
+    if (!options)
+      return;
+    const key = resolvePathCacheKey(ctx.event);
+    await prerenderOptionsCache.setItem(key, options);
+    const index = html.bodyAppend.findIndex((script) => script.includes('id="nuxt-og-image-options"'));
+    if (index !== -1) {
+      html.bodyAppend[index] = html.bodyAppend[index].replace(/<script id="nuxt-og-image-options" type="application\/json">[\s\S]*?<\/script>/, "");
+      html.bodyAppend[index] = html.bodyAppend[index].replace(/<script id="nuxt-og-image-overrides" type="application\/json">[\s\S]*?<\/script>/, "");
+    }
+  });
+});

package/dist/runtime/nitro/routes/__zero-runtime/font.js

@@ -0,0 +1,8 @@
+import { defineEventHandler } from "h3";
+import { fontEventHandler } from "../../util/eventHandlers.js";
+export default defineEventHandler(async (e) => {
+  if (import.meta.dev || import.meta.prerender) {
+    return await fontEventHandler(e);
+  }
+  throw new Error("Not supported in zeroRuntime mode.");
+});

package/dist/runtime/nitro/routes/__zero-runtime/image.js

@@ -0,0 +1,8 @@
+import { defineEventHandler } from "h3";
+import { imageEventHandler } from "../../util/eventHandlers.js";
+export default defineEventHandler(async (e) => {
+  if (import.meta.dev || import.meta.prerender) {
+    return await imageEventHandler(e);
+  }
+  throw new Error("Not supported in zeroRuntime mode.");
+});

package/dist/runtime/{server/routes/__og-image__ → nitro/routes}/debug.json.d.ts

@@ -1,6 +1,6 @@
 declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<{
     componentNames: any;
-    runtimeConfig: import("../../../types").OgImageRuntimeConfig;
+    runtimeConfig: import("../../types").OgImageRuntimeConfig;
     compatibility: any;
 }>>;
 export default _default;

package/dist/runtime/{server/routes/__og-image__/debug.json.mjs → nitro/routes/debug.json.js}

@@ -1,7 +1,7 @@
-import { defineEventHandler, setHeader } from "h3";
-import { useOgImageRuntimeConfig } from "../../../utils.mjs";
 import compatibility from "#nuxt-og-image/compatibility";
 import { componentNames } from "#nuxt-og-image/component-names.mjs";
+import { defineEventHandler, setHeader } from "h3";
+import { useOgImageRuntimeConfig } from "../../shared.js";
 export default defineEventHandler(async (e) => {
   setHeader(e, "Content-Type", "application/json");
   const runtimeConfig = useOgImageRuntimeConfig();

package/dist/runtime/nitro/routes/font.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<any>>;
+export default _default;

package/dist/runtime/nitro/routes/font.js

@@ -0,0 +1,3 @@
+import { defineEventHandler } from "h3";
+import { fontEventHandler } from "../util/eventHandlers.js";
+export default defineEventHandler(fontEventHandler);

package/dist/runtime/nitro/routes/image.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<any>>;
+export default _default;

package/dist/runtime/nitro/routes/image.js

@@ -0,0 +1,3 @@
+import { defineEventHandler } from "h3";
+import { imageEventHandler } from "../util/eventHandlers.js";
+export default defineEventHandler(imageEventHandler);

package/dist/runtime/nitro/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json"
+}

package/dist/runtime/{cache.d.ts → nitro/util/cache.d.ts}

@@ -1,5 +1,5 @@
-import { type H3Error } from 'h3';
-import type { OgImageRenderEventContext } from './types';
+import type { H3Error } from 'h3';
+import type { OgImageRenderEventContext } from '../../types.js';
 export declare function useOgImageBufferCache(ctx: OgImageRenderEventContext, options: {
     baseCacheKey: string | false;
     cacheMaxAgeSeconds?: number;

package/dist/runtime/{cache.mjs → nitro/util/cache.js}

@@ -1,8 +1,8 @@
-import { prefixStorage } from "unstorage";
+import { useStorage } from "#imports";
 import { createError, getQuery, handleCacheHeaders, setHeader, setHeaders } from "h3";
-import { withTrailingSlash } from "ufo";
 import { hash } from "ohash";
-import { useStorage } from "#imports";
+import { withTrailingSlash } from "ufo";
+import { prefixStorage } from "unstorage";
 export async function useOgImageBufferCache(ctx, options) {
   const maxAge = Number(options.cacheMaxAgeSeconds);
   let enabled = !import.meta.dev && import.meta.env.MODE !== "test" && maxAge > 0;
@@ -34,8 +34,9 @@ export async function useOgImageBufferCache(ctx, options) {
           modifiedTime: new Date(headers["last-modified"]),
           etag: headers.etag,
           maxAge
-        }))
+        })) {
           return;
+        }
         setHeaders(ctx.e, headers);
       } else {
         await cache.removeItem(key).catch(() => {

package/dist/runtime/nitro/util/encoding.d.ts

@@ -0,0 +1,3 @@
+export declare function htmlDecodeQuotes(html: string): string;
+export declare function decodeHtml(html: string): string;
+export declare function decodeObjectHtmlEntities(obj: Record<string, string | any>): Record<string, any>;

package/dist/runtime/nitro/util/encoding.js

@@ -0,0 +1,15 @@
+export function htmlDecodeQuotes(html) {
+  return html.replace(/"/g, '"').replace(/'/g, "'").replace(/'/g, "'");
+}
+export function decodeHtml(html) {
+  return html.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&cent;/g, "\xA2").replace(/&pound;/g, "\xA3").replace(/&yen;/g, "\xA5").replace(/&euro;/g, "\u20AC").replace(/&copy;/g, "\xA9").replace(/&reg;/g, "\xAE").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/").replace(/&#(\d+);/g, (full, int) => {
+    return String.fromCharCode(Number.parseInt(int));
+  });
+}
+export function decodeObjectHtmlEntities(obj) {
+  Object.entries(obj).forEach(([key, value]) => {
+    if (typeof value === "string")
+      obj[key] = decodeHtml(value);
+  });
+  return obj;
+}

package/dist/runtime/nitro/util/eventHandlers.d.ts

@@ -0,0 +1,3 @@
+import type { H3Event } from 'h3';
+export declare function fontEventHandler(e: H3Event): Promise<any>;
+export declare function imageEventHandler(e: H3Event): Promise<any>;

package/dist/runtime/nitro/util/eventHandlers.js

@@ -0,0 +1,155 @@
+import { createError, getQuery, H3Error, proxyRequest, sendRedirect, setHeader, setResponseHeader } from "h3";
+import { parseURL } from "ufo";
+import { normaliseFontInput, useOgImageRuntimeConfig } from "../../shared.js";
+import { resolveContext } from "../og-image/context.js";
+import { assets } from "../og-image/satori/font.js";
+import { html } from "../og-image/templates/html.js";
+import { useOgImageBufferCache } from "./cache.js";
+export async function fontEventHandler(e) {
+  const path = parseURL(e.path).pathname;
+  const { fonts } = useOgImageRuntimeConfig();
+  const key = path.split("/font/")[1];
+  if (key.includes(":")) {
+    const font2 = fonts.find((f) => f.key === key);
+    if (font2?.key && await assets.hasItem(font2.key)) {
+      let fontData = await assets.getItem(font2.key);
+      if (fontData instanceof Uint8Array) {
+        const decoder = new TextDecoder();
+        fontData = decoder.decode(fontData);
+      }
+      if (key.includes(".oft")) {
+        setResponseHeader(e, "Content-Type", "font/otf");
+      } else if (key.includes(".woff2")) {
+        setResponseHeader(e, "Content-Type", "font/woff2");
+      } else if (key.includes(".ttf")) {
+        setResponseHeader(e, "Content-Type", "font/ttf");
+      }
+      return Buffer.from(fontData, "base64");
+    }
+  }
+  const [_name, _weight] = key.split(".")[0].split("/");
+  if (!_name || !_weight)
+    return "Provide a font name and weight";
+  const name = _name[0].toUpperCase() + _name.slice(1);
+  const weight = Math.round(Number.parseInt(_weight) / 100) * 100;
+  const config = useOgImageRuntimeConfig();
+  const normalisedFonts = normaliseFontInput(config.fonts);
+  let font;
+  if (typeof getQuery(e).font === "string")
+    font = JSON.parse(getQuery(e).font);
+  if (!font) {
+    font = normalisedFonts.find((font2) => {
+      return font2.name.toLowerCase() === name.toLowerCase() && weight === Number(font2.weight);
+    });
+  }
+  if (!font) {
+    return createError({
+      statusCode: 404,
+      statusMessage: `[Nuxt OG Image] Font ${name}:${weight} not found`
+    });
+  }
+  const css = await globalThis.$fetch(`https://fonts.googleapis.com/css2?family=${name}:wght@${weight}`, {
+    headers: {
+      // Make sure it returns TTF.
+      "User-Agent": "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"
+    }
+  });
+  if (!css) {
+    return createError({
+      statusCode: 500,
+      statusMessage: `[Nuxt OG Image] Invalid Google Font ${name}:${weight}`
+    });
+  }
+  const ttfResource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/);
+  if (ttfResource?.[1])
+    return proxyRequest(e, ttfResource[1], {});
+  const woff2Resource = css.match(/src: url\((.+)\) format\('woff2'\)/);
+  if (woff2Resource?.[1])
+    return sendRedirect(e, woff2Resource[1]);
+  return createError({
+    statusCode: 500,
+    statusMessage: `[Nuxt OG Image] Malformed Google Font CSS ${css}`
+  });
+}
+export async function imageEventHandler(e) {
+  const ctx = await resolveContext(e);
+  if (ctx instanceof H3Error)
+    return ctx;
+  const { isDebugJsonPayload, extension, options, renderer } = ctx;
+  const { debug, baseCacheKey } = useOgImageRuntimeConfig();
+  const compatibilityHints = [];
+  if (isDebugJsonPayload) {
+    const queryExtension = getQuery(e).extension || ctx.options.extension;
+    if (["jpeg", "jpg"].includes(queryExtension) && options.renderer === "satori")
+      compatibilityHints.push("Converting PNGs to JPEGs requires Sharp which only runs on Node based systems.");
+    if (options.renderer === "chromium")
+      compatibilityHints.push("Using Chromium to generate images is only supported in Node based environments. It's recommended to only use this if you're prerendering");
+    setHeader(e, "Content-Type", "application/json");
+    return {
+      siteConfig: {
+        url: e.context.siteConfig.get().url
+      },
+      compatibilityHints,
+      cacheKey: ctx.key,
+      options: ctx.options,
+      ...options.renderer === "satori" ? await renderer.debug(ctx) : void 0
+    };
+  }
+  switch (extension) {
+    case "html":
+      setHeader(e, "Content-Type", `text/html`);
+      return html(ctx);
+    case "svg":
+      if (!debug && !import.meta.dev) {
+        return createError({
+          statusCode: 404
+        });
+      }
+      if (ctx.renderer.name !== "satori") {
+        return createError({
+          statusCode: 400,
+          statusMessage: `[Nuxt OG Image] 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: `[Nuxt OG Image] 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: `[Nuxt OG Image] Invalid request for og.${extension}.`
+      });
+  }
+  const cacheApi = await useOgImageBufferCache(ctx, {
+    cacheMaxAgeSeconds: ctx.options.cacheMaxAgeSeconds,
+    baseCacheKey
+  });
+  if (typeof cacheApi === "undefined")
+    return;
+  if (cacheApi instanceof H3Error)
+    return cacheApi;
+  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;
+}

package/dist/runtime/nitro/util/kit.d.ts

@@ -0,0 +1,6 @@
+import type { H3Event } from 'h3';
+import type { NitroRouteRules } from 'nitropack';
+import type { NuxtIslandResponse } from 'nuxt/dist/core/runtime/nitro/renderer';
+export declare function fetchIsland(e: H3Event, component: string, props: Record<string, any>): Promise<NuxtIslandResponse>;
+export declare function withoutQuery(path: string): string;
+export declare function createNitroRouteRuleMatcher(): ((path: string) => NitroRouteRules);

package/dist/runtime/nitro/util/kit.js

@@ -0,0 +1,32 @@
+import { useRuntimeConfig } from "#imports";
+import { defu } from "defu";
+import { hash } from "ohash";
+import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
+import { withoutBase, withoutTrailingSlash } from "ufo";
+export function fetchIsland(e, component, props) {
+  const hashId = hash([component, props]);
+  return e.$fetch(`/__nuxt_island/${component}_${hashId}.json`, {
+    params: {
+      props: JSON.stringify(props)
+    }
+  });
+}
+export function withoutQuery(path) {
+  return path.split("?")[0];
+}
+export function createNitroRouteRuleMatcher() {
+  const { nitro, app } = useRuntimeConfig();
+  const _routeRulesMatcher = toRouteMatcher(
+    createRadixRouter({
+      routes: Object.fromEntries(
+        Object.entries(nitro?.routeRules || {}).map(([path, rules]) => [withoutTrailingSlash(path), rules])
+      )
+    })
+  );
+  return (path) => {
+    return defu({}, ..._routeRulesMatcher.matchAll(
+      // radix3 does not support trailing slashes
+      withoutBase(withoutTrailingSlash(withoutQuery(path)), app.baseURL)
+    ).reverse());
+  };
+}

package/dist/runtime/nitro/util/logger.d.ts

@@ -0,0 +1 @@
+export declare const logger: import("consola").ConsolaInstance;

package/dist/runtime/nitro/util/logger.js

@@ -0,0 +1,6 @@
+import { createConsola } from "consola";
+export const logger = createConsola({
+  defaults: {
+    tag: "Nuxt OG Image"
+  }
+});

package/dist/runtime/nitro/util/options.d.ts

@@ -0,0 +1,2 @@
+import type { DefineOgImageInput, OgImageOptions, OgImagePrebuilt } from '../../types.js';
+export declare function normaliseOptions(_options: DefineOgImageInput): OgImageOptions | OgImagePrebuilt;