nuxt-og-image 1.0.0-beta.0 → 1.0.0-beta.10

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { mkdir, writeFile } from 'node:fs/promises';
 import { existsSync } from 'fs';
-import { useNuxt, addTemplate, defineNuxtModule, createResolver, addServerHandler, addImports, addComponent } from '@nuxt/kit';
+import { useNuxt, addTemplate, defineNuxtModule, createResolver, getNuxtVersion, useLogger, addServerHandler, addImports, addComponent } from '@nuxt/kit';
 import { execa } from 'execa';
 import chalk from 'chalk';
 import defu from 'defu';
@@ -57,13 +57,8 @@ async function screenshot(browser, url, options) {
   return await page.screenshot();
 }
 
-const PayloadScriptId = "nuxt-og-image-payload";
-const Constants = {
-  PayloadScriptId
-};
-
 function exposeConfig(alias, filename, config) {
-  const exports = Object.entries(config).map(([k, v]) => `export const ${k} = '${v}'`).join("\n");
+  const exports = Object.entries(config).map(([k, v]) => `export const ${k} = ${JSON.stringify(v)}`).join("\n");
   useNuxt().options.alias[alias] = addTemplate({
     filename,
     getContents: () => exports
@@ -72,6 +67,13 @@ function exposeConfig(alias, filename, config) {
     nitroConfig.virtual[alias] = exports;
   });
 }
+function extractOgImageOptions(html) {
+  const options = html.match(/<script id="nuxt-og-image-options" type="application\/json">(.+?)<\/script>/)?.[1];
+  return options ? JSON.parse(options) : false;
+}
+function stripOgImageOptions(html) {
+  return html.replace(/<script id="nuxt-og-image-options" type="application\/json">(.*?)<\/script>/, "");
+}
 
 function setupPlaygroundRPC(nuxt, config) {
   const serverFunctions = {
@@ -155,13 +157,6 @@ function getBodyJson(req) {
   });
 }
 
-function extractOgPayload(html) {
-  const payload = html.match(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.+?)<\/script>`))?.[1];
-  if (payload) {
-    return JSON.parse(payload);
-  }
-  return false;
-}
 const PATH = "/__nuxt_og_image__";
 const PATH_ENTRY = `${PATH}/entry`;
 const PATH_PLAYGROUND = `${PATH}/client`;
@@ -179,8 +174,26 @@ const module = defineNuxtModule({
       experimentalNitroBrowser: false,
       forcePrerender: !nuxt.options.dev && nuxt.options._generate,
       host: nuxt.options.runtimeConfig.public?.siteUrl,
-      width: 1200,
-      height: 630
+      defaults: {
+        component: "OgImageBasic",
+        width: 1200,
+        height: 630
+      },
+      satoriFonts: [
+        {
+          name: "Inter",
+          weight: 400,
+          style: "normal",
+          publicPath: "/inter-latin-ext-400-normal.woff"
+        },
+        {
+          name: "Inter",
+          weight: 700,
+          style: "normal",
+          publicPath: "/inter-latin-ext-700-normal.woff"
+        }
+      ],
+      satoriOptions: {}
     };
   },
   async setup(config, nuxt) {
@@ -193,6 +206,10 @@ const module = defineNuxtModule({
     };
     nuxt.options.experimental.componentIslands = true;
     const isEdge = (process.env.NITRO_PRESET || "").includes("edge");
+    const hasIslandSupport = getNuxtVersion(nuxt) !== "3.0.0";
+    const logger = useLogger("nuxt-og-image");
+    if (!hasIslandSupport)
+      logger.warn("You are using Nuxt 3.0.0 with `nuxt-og-image`, which only supports screenshots.\nPlease upgrade to Nuxt 3.0.1 or the edge channel: https://nuxt.com/docs/guide/going-further/edge-channel.");
     addTemplate({
       filename: "nuxt-og-image.d.ts",
       getContents: () => {
@@ -211,7 +228,7 @@ export {}
     nuxt.hooks.hook("prepare:types", ({ references }) => {
       references.push({ path: resolve(nuxt.options.buildDir, "nuxt-og-image.d.ts") });
     });
-    ["html", "payload", "svg", "og.png"].forEach((type) => {
+    ["html", "options", "svg", "vnode", "og.png"].forEach((type) => {
       addServerHandler({
         handler: resolve(`./runtime/nitro/routes/__og_image__/${type}`)
       });
@@ -238,8 +255,8 @@ export {}
       });
     });
     await addComponent({
-      name: "OgImageTemplate",
-      filePath: resolve("./runtime/components/OgImageTemplate.island.vue"),
+      name: "OgImageBasic",
+      filePath: resolve("./runtime/components/OgImageBasic.island.vue"),
       global: true,
       island: true
     });
@@ -252,7 +269,6 @@ export {}
     });
     const runtimeDir = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimeDir);
-    exposeConfig("#nuxt-og-image/constants", "nuxt-og-image-constants.mjs", Constants);
     exposeConfig("#nuxt-og-image/config", "nuxt-og-image-config.mjs", config);
     nuxt.hooks.hook("nitro:config", (nitroConfig) => {
       nitroConfig.externals = defu(nitroConfig.externals || {}, {
@@ -292,19 +308,19 @@ export {}
         const html = ctx.contents;
         if (!html)
           return;
-        const extractedPayload = extractOgPayload(html);
-        ctx.contents = html.replace(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.*?)<\/script>`), "");
+        const extractedOptions = extractOgImageOptions(html);
+        ctx.contents = stripOgImageOptions(html);
         const routeRules = defu({}, ..._routeRulesMatcher.matchAll(ctx.route).reverse());
-        if (!extractedPayload || routeRules.ogImage === false)
+        if (!extractedOptions || routeRules.ogImage === false)
           return;
-        const payload = {
+        const options = {
           path: ctx.route,
-          ...extractedPayload,
+          ...extractedOptions,
           ...routeRules.ogImage || {},
           ctx
         };
-        if ((nuxt.options._generate || payload.prerender) && payload.provider === "browser")
-          screenshotQueue.push(payload);
+        if ((nuxt.options._generate || options.prerender) && options.provider === "browser")
+          screenshotQueue.push(options);
       });
       if (nuxt.options.dev)
         return;
@@ -333,8 +349,8 @@ export {}
               const filename = joinURL(dirname, "/og.png");
               try {
                 const imgBuffer = await screenshot(browser, `${host}${entry.path}`, {
-                  ...config,
-                  ...entry
+                  ...config.defaults || {},
+                  ...entry || {}
                 });
                 try {
                   await mkdir(dirname, { recursive: true });

package/dist/runtime/components/{OgImageTemplate.island.vue → OgImageBasic.island.vue}

@@ -10,10 +10,10 @@ const props = defineProps({
   <div :style="{ padding: '0 60px', width: '100%', height: '100%', backgroundColor: '#0c0c0c', backgroundImage: 'linear-gradient(to bottom, #dbf4ff, #fff1f1)', display: 'flex', alignItems: 'center' }">
     <div :style="{ padding: '0 30px', display: 'flex', flexDirection: 'column' }">
       <p :style="{ fontSize: '60px', fontWeight: 'bold', marginBottom: '20px' }">
-        {{ title }}
+        {{ title || 'Og Image Template' }}
       </p>
       <p :style="{ fontSize: '26px' }">
-        {{ description }}
+        {{ description || 'Set a description to change me.' }}
       </p>
     </div>
   </div>

package/dist/runtime/components/OgImageDynamic.d.ts

@@ -1,5 +1,5 @@
-import type { OgImagePayload } from '../../types';
-declare const _default: import("vue").DefineComponent<OgImagePayload, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImagePayload>>, {
+import type { OgImageOptions } from '../../types';
+declare const _default: import("vue").DefineComponent<OgImageOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImageOptions>>, {
     [x: string]: any;
 }>;
 export default _default;

package/dist/runtime/components/OgImageScreenshot.d.ts

@@ -1,5 +1,5 @@
-import type { OgImageScreenshotPayload } from '../../types';
-declare const _default: import("vue").DefineComponent<OgImageScreenshotPayload, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImageScreenshotPayload>>, {
+import type { OgImageScreenshotOptions } from '../../types';
+declare const _default: import("vue").DefineComponent<OgImageScreenshotOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImageScreenshotOptions>>, {
     [x: string]: any;
     [x: number]: any;
 }>;

package/dist/runtime/components/OgImageStatic.d.ts

@@ -1,5 +1,5 @@
-import type { OgImagePayload } from '../../types';
-declare const _default: import("vue").DefineComponent<OgImagePayload, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImagePayload>>, {
+import type { OgImageOptions } from '../../types';
+declare const _default: import("vue").DefineComponent<OgImageOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImageOptions>>, {
     [x: string]: any;
 }>;
 export default _default;

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

@@ -1,5 +1,5 @@
-import type { OgImagePayload, OgImageScreenshotPayload } from '../../types';
-export declare function defineOgImageScreenshot(options?: OgImageScreenshotPayload): void;
-export declare function defineOgImageDynamic(options?: OgImageScreenshotPayload): void;
-export declare function defineOgImageStatic(options?: OgImageScreenshotPayload): void;
-export declare function defineOgImage(options?: OgImagePayload): void;
+import type { OgImageOptions, OgImageScreenshotOptions } from '../../types';
+export declare function defineOgImageScreenshot(options?: OgImageScreenshotOptions): void;
+export declare function defineOgImageDynamic(options?: OgImageOptions): void;
+export declare function defineOgImageStatic(options?: OgImageOptions): void;
+export declare function defineOgImage(options?: OgImageOptions): void;

package/dist/runtime/composables/defineOgImage.mjs

@@ -1,8 +1,8 @@
 import { useServerHead } from "@vueuse/head";
 import { withBase } from "ufo";
+import { useRequestEvent } from "#app";
 import { useRouter } from "#imports";
-import { PayloadScriptId } from "#nuxt-og-image/constants";
-import { forcePrerender, height, host, width } from "#nuxt-og-image/config";
+import { defaults, forcePrerender, host } from "#nuxt-og-image/config";
 export function defineOgImageScreenshot(options = {}) {
   const router = useRouter();
   const route = router?.currentRoute?.value?.path || "";
@@ -44,11 +44,11 @@ export function defineOgImage(options = {}) {
       },
       {
         property: "og:image:width",
-        content: width
+        content: options.width || defaults.width
       },
       {
         property: "og:image:height",
-        content: height
+        content: options.height || defaults.height
       }
     ];
     if (options.alt) {
@@ -61,9 +61,15 @@ export function defineOgImage(options = {}) {
       meta,
       script: [
         {
-          id: PayloadScriptId,
+          id: "nuxt-og-image-options",
           type: "application/json",
-          children: () => JSON.stringify(options)
+          children: () => {
+            const payload = {};
+            Object.entries(options).forEach(([key, val]) => {
+              payload[key.replace(/-([a-z])/g, (g) => g[1].toUpperCase())] = val;
+            });
+            return payload;
+          }
         }
       ]
     });

package/dist/runtime/nitro/providers/browser.mjs

@@ -1,16 +1,15 @@
 import { screenshot } from "../../browserUtil.mjs";
-import { height, width } from "#nuxt-og-image/config";
 import { createBrowser } from "#nuxt-og-image/browser";
 export default {
   name: "browser",
-  createSvg: function createSvg() {
-    throw new Error("Browser provider isn't able to create SVGs.");
+  createSvg: async function createSvg() {
+    throw new Error("Browser provider can't create SVGs.");
   },
-  createPng: async function createPng(basePath) {
+  createVNode: async function createVNode() {
+    throw new Error("Browser provider can't create VNodes.");
+  },
+  createPng: async function createPng(basePath, options) {
     const browser = await createBrowser();
-    return screenshot(browser, basePath, {
-      width: Number(width),
-      height: Number(height)
-    });
+    return screenshot(browser, basePath, options);
   }
 };

package/dist/runtime/nitro/providers/{satori.d.ts → satori/index.d.ts}

@@ -1,3 +1,3 @@
-import type { Provider } from '../../../types';
+import type { Provider } from '../../../../types';
 declare const _default: Provider;
 export default _default;

package/dist/runtime/nitro/providers/satori/index.mjs

@@ -0,0 +1,48 @@
+import { html as convertHtmlToSatori } from "satori-html";
+import satori from "satori";
+import { parseURL } from "ufo";
+import { Resvg } from "@resvg/resvg-js";
+import twemoji from "twemoji";
+import { parseFont, walkSatoriTree } from "./utils.mjs";
+import imageSrc from "./plugins/imageSrc.mjs";
+import twClasses from "./plugins/twClasses.mjs";
+import flex from "./plugins/flex.mjs";
+import emojis from "./plugins/emojis.mjs";
+import { satoriFonts, satoriOptions } from "#nuxt-og-image/config";
+export default {
+  name: "satori",
+  createPng: async function createPng(baseUrl, options) {
+    const svg = await this.createSvg(baseUrl, options);
+    const resvg = new Resvg(svg, {});
+    const pngData = resvg.render();
+    return pngData.asPng();
+  },
+  createVNode: async function createVNode(baseUrl, options) {
+    const url = parseURL(baseUrl);
+    const html = await $fetch(url.pathname);
+    const body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1];
+    const emojiedFont = twemoji.parse(body, {
+      folder: "svg",
+      ext: ".svg"
+    });
+    satoriOptions.fonts = satoriOptions.fonts || [];
+    for (const font of satoriFonts)
+      satoriOptions.fonts.push(await parseFont(url, font));
+    const satoriTree = convertHtmlToSatori(emojiedFont);
+    await walkSatoriTree(url, satoriTree, [
+      emojis(url),
+      twClasses(url),
+      imageSrc(url),
+      flex(url)
+    ]);
+    return satoriTree;
+  },
+  createSvg: async function createSvg(baseUrl, options) {
+    const vnodes = await this.createVNode(baseUrl, options);
+    return await satori(vnodes, {
+      ...satoriOptions,
+      width: options.width,
+      height: options.height
+    });
+  }
+};

package/dist/runtime/nitro/providers/satori/plugins/emojis.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer;
+export default _default;

package/dist/runtime/nitro/providers/satori/plugins/emojis.mjs

@@ -0,0 +1,13 @@
+import { defineSatoriTransformer } from "../utils.mjs";
+export default defineSatoriTransformer(() => {
+  return {
+    filter: (node) => node.type === "img" && node.props?.class.includes("emoji"),
+    transform: async (node) => {
+      node.props.style = node.props.style || {};
+      node.props.style.height = "1em";
+      node.props.style.width = "1em";
+      node.props.style.margin = "0 .05em 0 .1em";
+      node.props.style.verticalAlign = "0.1em";
+    }
+  };
+});

package/dist/runtime/nitro/providers/satori/plugins/flex.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer;
+export default _default;

package/dist/runtime/nitro/providers/satori/plugins/flex.mjs

@@ -0,0 +1,11 @@
+import { defineSatoriTransformer } from "../utils.mjs";
+export default defineSatoriTransformer(() => {
+  return {
+    filter: (node) => node.type === "div" && (Array.isArray(node.props?.children) && node.props?.children.length >= 1) && (!node.props.style?.display && !node.props?.class?.includes("flex")),
+    transform: async (node) => {
+      node.props.style = node.props.style || {};
+      node.props.style.display = "flex";
+      node.props.style.flexDirection = "column";
+    }
+  };
+});

package/dist/runtime/nitro/providers/satori/plugins/imageSrc.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer;
+export default _default;

package/dist/runtime/nitro/providers/satori/plugins/imageSrc.mjs

@@ -0,0 +1,24 @@
+import { fileURLToPath } from "node:url";
+import { promises as fsp } from "node:fs";
+import { withBase } from "ufo";
+import { dirname, resolve } from "pathe";
+import { defineSatoriTransformer } from "../utils.mjs";
+import { getAsset } from "#internal/nitro/virtual/public-assets";
+export default defineSatoriTransformer((url) => {
+  return {
+    filter: (node) => node.type === "img",
+    transform: async (node) => {
+      const src = node.props?.src;
+      if (src && src.startsWith("/")) {
+        const file = getAsset(src);
+        if (file) {
+          const serverDir = dirname(fileURLToPath(import.meta.url));
+          const path = resolve(serverDir, file.path);
+          node.props.src = `data:${file.type};base64,${await fsp.readFile(path, { encoding: "base64" })}`;
+        } else {
+          node.props.src = withBase(src, `${url.protocol}//${url.host}`);
+        }
+      }
+    }
+  };
+});

package/dist/runtime/nitro/providers/satori/plugins/twClasses.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer;
+export default _default;

package/dist/runtime/nitro/providers/satori/plugins/twClasses.mjs

@@ -0,0 +1,9 @@
+import { defineSatoriTransformer } from "../utils.mjs";
+export default defineSatoriTransformer(() => {
+  return {
+    filter: (node) => !!node.props?.class && !node.props?.tw,
+    transform: async (node) => {
+      node.props.tw = node.props.class;
+    }
+  };
+});

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

@@ -0,0 +1,10 @@
+import type { SatoriOptions } from 'satori';
+import type { ParsedURL } from 'ufo';
+import type { SatoriTransformer, VNode } from '../../../../types';
+export declare function parseFont(url: ParsedURL, font: SatoriOptions['fonts'][number] & {
+    publicPath?: string;
+}): Promise<import("satori").Font & {
+    publicPath?: string | undefined;
+}>;
+export declare function walkSatoriTree(url: ParsedURL, node: VNode, plugins: SatoriTransformer[]): Promise<void>;
+export declare function defineSatoriTransformer(transformer: (url: ParsedURL) => SatoriTransformer): (url: ParsedURL) => SatoriTransformer;

package/dist/runtime/nitro/providers/satori/utils.mjs

@@ -0,0 +1,33 @@
+import { fileURLToPath } from "node:url";
+import { promises as fsp } from "node:fs";
+import { dirname, resolve } from "pathe";
+import { withBase } from "ufo";
+import { getAsset } from "#internal/nitro/virtual/public-assets";
+export async function parseFont(url, font) {
+  if (typeof font.publicPath === "string") {
+    const file = getAsset(font.publicPath);
+    if (file) {
+      const serverDir = dirname(fileURLToPath(import.meta.url));
+      font.data = await fsp.readFile(resolve(serverDir, file.path));
+    }
+    if (!font.data)
+      font.data = await (await $fetch(withBase(font.publicPath, `${url.protocol}//${url.host}`))).arrayBuffer();
+  }
+  return font;
+}
+export async function walkSatoriTree(url, node, plugins) {
+  if (!node.props?.children)
+    return;
+  for (const child of node.props.children || []) {
+    if (child) {
+      for (const plugin of plugins) {
+        if (plugin.filter(child))
+          await plugin.transform(child, url);
+      }
+      await walkSatoriTree(url, child, plugins);
+    }
+  }
+}
+export function defineSatoriTransformer(transformer) {
+  return transformer;
+}

package/dist/runtime/nitro/routes/__og_image__/html.mjs

@@ -1,26 +1,56 @@
-import { parseURL, withoutTrailingSlash } from "ufo";
+import { parseURL, withBase, withoutTrailingSlash } from "ufo";
 import { renderSSRHead } from "@unhead/ssr";
 import { createHeadCore } from "@unhead/vue";
-import { defineEventHandler, sendRedirect } from "h3";
-import { fetchPayload, renderIsland, useHostname } from "../../utils.mjs";
-import { height, width } from "#nuxt-og-image/config";
+import { defineEventHandler, getQuery, sendRedirect } from "h3";
+import { fetchOptions, renderIsland, useHostname } from "../../utils.mjs";
+import { defaults } from "#nuxt-og-image/config";
 export default defineEventHandler(async (e) => {
   const path = parseURL(e.path).pathname;
   if (!path.endsWith("__og_image__/html"))
     return;
   const basePath = withoutTrailingSlash(path.replace("__og_image__/html", ""));
-  const payload = await fetchPayload(basePath);
-  if (payload.provider === "browser")
-    return sendRedirect(e, useHostname(e) + basePath);
-  const component = payload.component || "OgImageTemplate";
-  delete payload.component;
-  const island = await renderIsland(component, payload);
+  const scale = getQuery(e).scale;
+  const options = await fetchOptions(basePath);
+  if (options.provider === "browser")
+    return sendRedirect(e, withBase(basePath, useHostname(e)));
+  const island = await renderIsland(options);
   const head = createHeadCore();
   head.push(island.head);
   head.push({
     style: [
       {
-        innerHTML: "body { font-family: 'Inter', sans-serif; }"
+        innerHTML: "body { font-family: 'Inter', sans-serif;  }"
+      },
+      scale ? {
+        innerHTML: `body {
+    transform: scale(${scale});
+    transform-origin: top left;
+    max-height: 100vh;
+}
+img.emoji {
+   height: 1em;
+   width: 1em;
+   margin: 0 .05em 0 .1em;
+   vertical-align: -0.1em;
+}
+`
+      } : {}
+    ],
+    meta: [
+      {
+        charset: "utf-8"
+      }
+    ],
+    script: [
+      {
+        src: "https://cdn.tailwindcss.com"
+      },
+      {
+        innerHTML: `tailwind.config = {
+  corePlugins: {
+    preflight: false,
+  }
+}`
       }
     ],
     link: [
@@ -38,6 +68,6 @@ export default defineEventHandler(async (e) => {
   return `<!DOCTYPE html>
 <html ${headChunk.htmlAttrs}>
 <head>${headChunk.headTags}</head>
-<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div style="width: ${width}px; height: ${height}px; display: flex; margin: 0 auto;">${island.html}</div>${headChunk.bodyTags}</body>
+<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div style="width: ${defaults.width}px; height: ${defaults.height}px; display: flex; margin: 0 auto;">${island.html}</div>${headChunk.bodyTags}</body>
 </html>`;
 });

package/dist/runtime/nitro/routes/__og_image__/index.mjs

@@ -1,13 +1,13 @@
 import { defineEventHandler } from "h3";
 import { parseURL, withoutTrailingSlash } from "ufo";
-import { fetchPayload, useHostname } from "../../utils.mjs";
+import { fetchOptions, useHostname } from "../../utils.mjs";
 export default defineEventHandler(async (e) => {
   const path = parseURL(e.path).pathname;
   if (!path.endsWith("/__og_image__"))
     return;
   const basePath = withoutTrailingSlash(path.replace("__og_image__", ""));
-  const payload = await fetchPayload(basePath);
-  if (!payload)
+  const options = await fetchOptions(basePath);
+  if (!options)
     return `The route ${basePath} has not been set up for og:image generation.`;
   return `
 <style>
@@ -21,6 +21,6 @@ export default defineEventHandler(async (e) => {
     height: 100%;
   }
 </style>
-<title>Og Image Playground</title>
+<title>OG Image Playground</title>
 <iframe src="${useHostname(e)}/__nuxt_og_image__/client/?&path=${withoutTrailingSlash(path.replace("__og_image__", ""))}"></iframe>`;
 });

package/dist/runtime/nitro/routes/__og_image__/og.png.mjs

@@ -1,6 +1,6 @@
 import { defineEventHandler, setHeader } from "h3";
-import { parseURL, withBase, withoutTrailingSlash } from "ufo";
-import { fetchPayload, useHostname } from "../../utils.mjs";
+import { joinURL, parseURL, withBase, withoutTrailingSlash } from "ufo";
+import { fetchOptions, useHostname } from "../../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
 export default defineEventHandler(async (e) => {
   const path = parseURL(e.path).pathname;
@@ -9,15 +9,11 @@ export default defineEventHandler(async (e) => {
   const basePath = withoutTrailingSlash(
     path.replace("__og_image__/og.png", "")
   );
-  const { provider: providerName, prerender } = await fetchPayload(basePath);
+  const options = await fetchOptions(basePath);
   setHeader(e, "Content-Type", "image/png");
-  if (prerender && !process.dev) {
-    setHeader(e, "Cache-Control", "public, max-age=86400");
-  } else {
-    setHeader(e, "Cache-Control", "no-cache, no-store, must-revalidate");
-    setHeader(e, "Pragma", "no-cache");
-    setHeader(e, "Expires", "0");
-  }
-  const provider = await useProvider(providerName);
-  return provider.createPng(withBase(`${basePath}/__og_image__/html`, useHostname(e)));
+  setHeader(e, "Cache-Control", "no-cache, no-store, must-revalidate");
+  setHeader(e, "Pragma", "no-cache");
+  setHeader(e, "Expires", "0");
+  const provider = await useProvider(options.provider);
+  return provider.createPng(withBase(joinURL(basePath, "/__og_image__/html"), useHostname(e)), options);
 });

package/dist/runtime/nitro/routes/__og_image__/options.d.ts

@@ -0,0 +1,5 @@
+import type { OgImageOptions } from '../../../../types';
+export declare function extractOgImageOptions(html: string): any;
+export declare const inferOgImageOptions: (html: string) => OgImageOptions;
+declare const _default: import("h3").EventHandler<false | OgImageOptions | undefined>;
+export default _default;