nuxt-og-image 2.0.0-beta.7 → 2.0.0-beta.70

package/dist/runtime/browserUtil.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="node" />
+import type { Buffer } from 'node:buffer';
 import type { Browser } from 'playwright-core';
 import type { ScreenshotOptions } from '../types';
 export declare function screenshot(browser: Browser, options: Partial<ScreenshotOptions> & Record<string, any>): Promise<Buffer>;

package/dist/runtime/browserUtil.mjs

@@ -6,9 +6,9 @@ export async function screenshot(browser, options) {
     width: options.width || 1200,
     height: options.height || 630
   });
-  const isHtml = options.path.startsWith("html:") || options.html;
+  const isHtml = options.html || options.path?.startsWith("html:");
   if (isHtml) {
-    const html = options.html || options.path.substring(5);
+    const html = options.html || options.path?.substring(5);
     await page.evaluate((html2) => {
       document.open("text/html");
       document.write(html2);
@@ -17,10 +17,13 @@ export async function screenshot(browser, options) {
     await page.waitForLoadState("networkidle");
   } else {
     await page.goto(`${options.host}${options.path}`, {
-      timeout: 1e4,
+      timeout: process.env.prerender || process.dev ? 1e4 : 3500,
       waitUntil: "networkidle"
     });
   }
+  const screenshotOptions = {
+    timeout: process.env.prerender || process.dev ? 1e4 : 3500
+  };
   if (options.delay)
     await page.waitForTimeout(options.delay);
   if (options.mask) {
@@ -30,6 +33,8 @@ export async function screenshot(browser, options) {
     }, options.mask);
   }
   if (options.selector)
-    return await page.locator(options.selector).screenshot();
-  return await page.screenshot();
+    return await page.locator(options.selector).screenshot(screenshotOptions);
+  const screenshot2 = await page.screenshot(screenshotOptions);
+  await page.close();
+  return screenshot2;
 }

package/dist/runtime/components/{OgImageDynamic.d.ts → OgImage/Cached.d.ts}

@@ -1,5 +1,5 @@
-import type { OgImageOptions } from '../../types';
+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/OgImage/Cached.mjs

@@ -0,0 +1,10 @@
+import { defineComponent } from "vue";
+import { defineOgImageCached } from "#imports";
+export default defineComponent({
+  name: "OgImageCached",
+  async setup(_, { attrs }) {
+    if (process.server)
+      await defineOgImageCached(attrs);
+    return () => null;
+  }
+});

package/dist/runtime/components/{OgImageScreenshot.d.ts → OgImage/Screenshot.d.ts}

@@ -1,6 +1,6 @@
-import type { OgImageScreenshotOptions } from '../../types';
+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;
-}>;
+}, {}>;
 export default _default;

package/dist/runtime/components/{OgImageScreenshot.mjs → OgImage/Screenshot.mjs}

@@ -2,9 +2,9 @@ import { defineComponent } from "vue";
 import { defineOgImageScreenshot } from "#imports";
 export default defineComponent({
   name: "OgImageScreenshot",
-  setup(_, { attrs }) {
+  async setup(_, { attrs }) {
     if (process.server)
-      defineOgImageScreenshot(attrs);
+      await defineOgImageScreenshot(attrs);
     return () => null;
   }
 });

package/dist/runtime/components/OgImage/WithoutCache.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("vue").DefineComponent<OgImageOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<any>, {} | {
+    [x: string]: any;
+}, {}>;
+export default _default;

package/dist/runtime/components/OgImage/WithoutCache.mjs

@@ -0,0 +1,10 @@
+import { defineComponent } from "vue";
+import { defineOgImageWithoutCache } from "#imports";
+export default defineComponent({
+  name: "OgImageWithoutCache",
+  async setup(_, { attrs }) {
+    if (process.server)
+      defineOgImageWithoutCache(attrs);
+    return () => null;
+  }
+});

package/dist/runtime/components/OgImage/_OgImageDynamic.d.ts

@@ -0,0 +1,8 @@
+import type { OgImageOptions } from '../../../types';
+/**
+ * @deprecated Use OgImageWithoutCache
+ */
+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/{OgImageDynamic.mjs → OgImage/_OgImageDynamic.mjs}

@@ -1,10 +1,10 @@
 import { defineComponent } from "vue";
-import { defineOgImageDynamic } from "#imports";
+import { defineOgImageWithoutCache } from "#imports";
 export default defineComponent({
   name: "OgImageDynamic",
-  setup(_, { attrs }) {
+  async setup(_, { attrs }) {
     if (process.server)
-      defineOgImageDynamic(attrs);
+      await defineOgImageWithoutCache(attrs);
     return () => null;
   }
 });

package/dist/runtime/components/OgImage/_OgImageStatic.d.ts

@@ -0,0 +1,8 @@
+import type { OgImageOptions } from '../../../types';
+/**
+ * @deprecated Use OgImageCached instead
+ */
+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/{OgImageStatic.mjs → OgImage/_OgImageStatic.mjs}

@@ -1,10 +1,10 @@
 import { defineComponent } from "vue";
-import { defineOgImageStatic } from "#imports";
+import { defineOgImageCached } from "#imports";
 export default defineComponent({
   name: "OgImageStatic",
-  setup(_, { attrs }) {
+  async setup(_, { attrs }) {
     if (process.server)
-      defineOgImageStatic(attrs);
+      await defineOgImageCached(attrs);
     return () => null;
   }
 });

package/dist/runtime/components/{OgImageStatic.d.ts → OgImage/index.d.ts}

@@ -1,5 +1,5 @@
-import type { OgImageOptions } from '../../types';
+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/OgImage/index.mjs

@@ -0,0 +1,10 @@
+import { defineComponent } from "vue";
+import { defineOgImage } from "#imports";
+export default defineComponent({
+  name: "OgImage",
+  async setup(_, { attrs }) {
+    if (process.server)
+      await defineOgImage(attrs);
+    return () => null;
+  }
+});

package/dist/runtime/components/OgImageTemplate/Fallback.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useSiteConfig } from '#imports'
+
+// inherited attrs can mess up the satori parser
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps({
+  path: String,
+  title: {
+    type: String,
+    default: 'Og Image Template',
+  },
+  description: {
+    type: String,
+    default: 'Set a description to change me.',
+  },
+  color: {
+    type: String,
+  },
+  padding: {
+    type: String,
+    default: '0 100px',
+  },
+  titleFontSize: {
+    type: String,
+    default: '75px',
+  },
+  descriptionFontSize: {
+    type: String,
+    default: '35px',
+  },
+  icon: {
+    type: [String, Boolean],
+    default: false,
+  },
+  siteName: {
+    type: String,
+    required: false,
+  },
+  siteLogo: {
+    type: String,
+    required: false,
+  },
+})
+
+const backgroundAttrs = computed(() => {
+  // we want to make a
+  // const isBackgroundTw = props.background?.startsWith('bg-')
+  return {
+    style: {
+      display: 'flex',
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      background: 'rgba(5, 5, 5,1)',
+    },
+  }
+})
+
+const backgroundFlareAttrs = computed(() => {
+  // we want to make a
+  // const isBackgroundTw = props.background?.startsWith('bg-')
+  return {
+    style: {
+      display: 'flex',
+      position: 'absolute',
+      right: '-100%',
+      top: '10%',
+      width: '200%',
+      height: '200%',
+      backgroundImage: 'radial-gradient(circle, rgba(0,220,130, 0.5) 0%,  rgba(5, 5, 5,0.3) 50%, rgba(5, 5, 5,0) 70%)',
+    },
+  }
+})
+
+const containerAttrs = computed(() => {
+  const isColorTw = props.color?.startsWith('text-')
+
+  const classes = [
+    'w-full',
+    'h-full',
+    'flex',
+    'text-gray-100',
+    'relative',
+    'items-center',
+    'justify-center',
+  ]
+  const styles: Record<string, any> = {
+    padding: props.padding,
+  }
+  if (isColorTw)
+    classes.push(props.color)
+  else
+    styles.color = props.color
+  return { class: classes, style: styles }
+})
+
+const titleAttrs = computed(() => {
+  const classes = []
+  const styles = {
+    fontWeight: 'bold',
+    marginBottom: '50px',
+    fontSize: props.titleFontSize,
+  }
+  return { class: classes, style: styles }
+})
+
+const descriptionAttrs = computed(() => {
+  const classes = []
+  const styles = {
+    fontSize: props.descriptionFontSize,
+    lineHeight: `${props.descriptionFontSize.replace('px', '') * 1.5}px`,
+    opacity: '0.8',
+  }
+  return { class: classes, style: styles }
+})
+
+const siteConfig = useSiteConfig()
+const siteName = computed(() => {
+  return props.siteName || siteConfig.name
+})
+const siteLogo = computed(() => {
+  return props.siteLogo || siteConfig.logo
+})
+
+const MaybeIconComponent = resolveComponent('Icon')
+</script>
+
+<template>
+  <div v-bind="backgroundAttrs" />
+  <div v-bind="backgroundFlareAttrs" />
+  <div v-bind="containerAttrs">
+    <div class="flex flex-row justify-between items-center" style="margin-bottom: 100px;">
+      <div class="flex flex-col w-full" :style="icon ? { width: '65%' } : {}">
+        <div v-bind="titleAttrs">
+          {{ title || 'Null Title' }}
+        </div>
+        <div v-if="description" v-bind="descriptionAttrs">
+          {{ description }}
+        </div>
+      </div>
+      <div v-if="typeof icon === 'string' && typeof MaybeIconComponent !== 'string'" style="width: 30%;" class="flex justify-end">
+        <MaybeIconComponent :name="icon" size="250px" style="margin: 0 auto; margin-left: 100px; opacity: 0.9;" />
+      </div>
+    </div>
+    <div class="flex flex-row absolute bottom-10 text-left items-start">
+      <img v-if="siteLogo" :src="siteLogo" height="30">
+      <div v-else-if="siteName" style="font-size: 25px;" class="font-bold">
+        {{ siteName }}
+      </div>
+      <div v-else class="flex flex-row items-center space-x-5">
+        <div class="flex flex-row items-end gap-1.5 font-bold text-2xl text-white font-title">
+          <svg height="25" width="25" class="d-inline-block mb-2px mr-2" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+            <path fill="#00DC82" d="M62.3,-53.9C74.4,-34.5,73.5,-9,67.1,13.8C60.6,36.5,48.7,56.5,30.7,66.1C12.7,75.7,-11.4,74.8,-31.6,65.2C-51.8,55.7,-67.9,37.4,-73.8,15.7C-79.6,-6,-75.1,-31.2,-61.1,-51C-47.1,-70.9,-23.6,-85.4,0.8,-86C25.1,-86.7,50.2,-73.4,62.3,-53.9Z" transform="translate(100 100)" />
+          </svg>
+          <span>Nuxt</span><span class="sm:text-primary-500 dark:sm:text-primary-400 ml-2">SEO</span>
+        </div>
+        <div class="opacity-75 flex flex-row items-end gap-1.5 font-bold text-2xl text-white font-title px-5">
+          •
+        </div>
+        <div class="flex flex-row items-end gap-1.5 font-bold text-2xl text-white font-title">
+          OG Image
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -1,5 +1,13 @@
 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;
+export declare function defineOgImageScreenshot(options?: OgImageScreenshotOptions): Promise<void>;
+/**
+ * @deprecated Use `defineOgImage` or `defineOgImageCached` instead
+ */
+export declare function defineOgImageStatic(options?: OgImageOptions): Promise<void>;
+export declare function defineOgImageCached(options?: OgImageOptions): Promise<void>;
+export declare function defineOgImageWithoutCache(options?: OgImageOptions): Promise<void>;
+/**
+ * @deprecated Use `defineOgImageWithoutCache` instead
+ */
+export declare function defineOgImageDynamic(options?: OgImageOptions): Promise<void>;
+export declare function defineOgImage(_options?: OgImageOptions): Promise<void>;

package/dist/runtime/composables/defineOgImage.mjs

@@ -1,70 +1,52 @@
-import { useServerHead } from "@vueuse/head";
-import { withBase } from "ufo";
-import { useRequestEvent } from "#app";
-import { useRouter, useRuntimeConfig } from "#imports";
+import { joinURL } from "ufo";
+import { normaliseOgImageOptions } from "./util.mjs";
+import { useRouter, useRuntimeConfig, useServerHead, withSiteUrl } from "#imports";
 export function defineOgImageScreenshot(options = {}) {
   const router = useRouter();
   const route = router?.currentRoute?.value?.path || "";
-  defineOgImage({
+  return defineOgImage({
     alt: `Web page screenshot${route ? ` of ${route}` : ""}.`,
     provider: "browser",
     component: null,
-    static: true,
+    cache: true,
     ...options
   });
 }
-export function defineOgImageDynamic(options = {}) {
-  const { satoriProvider, forcePrerender } = useRuntimeConfig()["nuxt-og-image"];
-  defineOgImage({
-    provider: satoriProvider ? "satori" : "browser",
-    static: !!forcePrerender,
+export function defineOgImageStatic(options = {}) {
+  return defineOgImageCached(options);
+}
+export function defineOgImageCached(options = {}) {
+  const { defaults } = useRuntimeConfig()["nuxt-og-image"];
+  if (!defaults.cacheTtl && !options.cacheTtl)
+    options.cacheTtl = 60 * 60 * 24 * 7;
+  return defineOgImage({
+    cache: true,
     ...options
   });
 }
-export function defineOgImageStatic(options = {}) {
-  const { satoriProvider } = useRuntimeConfig()["nuxt-og-image"];
-  defineOgImage({
-    provider: satoriProvider ? "satori" : "browser",
-    static: true,
+export function defineOgImageWithoutCache(options = {}) {
+  return defineOgImage({
+    cache: false,
+    cacheTtl: 0,
     ...options
   });
 }
-export function defineOgImage(options = {}) {
+export function defineOgImageDynamic(options = {}) {
+  return defineOgImageWithoutCache(options);
+}
+export async function defineOgImage(_options = {}) {
   if (process.server) {
-    const { forcePrerender, defaults, siteUrl } = useRuntimeConfig()["nuxt-og-image"];
-    const router = useRouter();
-    const route = router?.currentRoute?.value?.path || "";
-    const e = useRequestEvent();
-    if ((forcePrerender || options.static) && options.provider === "satori")
-      e.res.setHeader("x-nitro-prerender", `${route === "/" ? "" : route}/__og_image__/og.png`);
+    const options = normaliseOgImageOptions(_options);
+    const src = withSiteUrl(joinURL(useRouter().currentRoute.value.path || "", "/__og_image__/og.png"));
     const meta = [
-      {
-        name: "twitter:card",
-        content: "summary_large_image"
-      },
-      {
-        name: "twitter:image:src",
-        content: () => withBase(`${route === "/" ? "" : route}/__og_image__/og.png`, siteUrl)
-      },
-      {
-        property: "og:image",
-        content: () => withBase(`${route === "/" ? "" : route}/__og_image__/og.png`, siteUrl)
-      },
-      {
-        property: "og:image:width",
-        content: options.width || defaults.width
-      },
-      {
-        property: "og:image:height",
-        content: options.height || defaults.height
-      }
+      { name: "twitter:card", content: "summary_large_image" },
+      { name: "twitter:image:src", content: src },
+      { property: "og:image", content: src },
+      { property: "og:image:width", content: options.width },
+      { property: "og:image:height", content: options.height }
     ];
-    if (options.alt) {
-      meta.push({
-        property: "og:image:alt",
-        content: options.alt
-      });
-    }
+    if (options.alt)
+      meta.push({ property: "og:image:alt", content: options.alt });
     useServerHead({
       meta,
       script: [

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

@@ -0,0 +1,2 @@
+import type { OgImageOptions } from '../../types';
+export declare function normaliseOgImageOptions(_options: OgImageOptions): any;

package/dist/runtime/composables/util.mjs

@@ -0,0 +1,26 @@
+import { unref, useRuntimeConfig } from "#imports";
+import { componentNames } from "#build/og-image-component-names.mjs";
+export function normaliseOgImageOptions(_options) {
+  const options = { ...unref(_options) };
+  if (options.static)
+    options.cache = options.cache || options.static;
+  if (!options.provider)
+    options.provider = "satori";
+  const { runtimeSatori } = useRuntimeConfig()["nuxt-og-image"];
+  if (options.provider === "satori" && !runtimeSatori)
+    options.provider = "browser";
+  if (options.component && componentNames) {
+    const originalName = options.component;
+    let isValid = componentNames.some((component) => component.pascalName === originalName || component.kebabName === originalName);
+    if (!isValid) {
+      for (const component of componentNames) {
+        if (component.pascalName.endsWith(originalName) || component.kebabName.endsWith(originalName)) {
+          options.component = component.pascalName;
+          isValid = true;
+          break;
+        }
+      }
+    }
+  }
+  return options;
+}

package/dist/runtime/nitro/middleware/og.png.mjs

@@ -1,19 +1,22 @@
-import { createError, defineEventHandler, setHeader } from "h3";
-import { parseURL, withBase, withoutTrailingSlash } from "ufo";
-import { fetchOptions, useHostname } from "../utils.mjs";
+import { Buffer } from "node:buffer";
+import { createError, defineEventHandler, sendRedirect, setHeader } from "h3";
+import { joinURL, parseURL, withoutTrailingSlash } from "ufo";
+import { prefixStorage } from "unstorage";
+import { hash } from "ohash";
+import { fetchOptions } from "../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
+import { useNitroOrigin, useRuntimeConfig, useStorage } from "#imports";
 export default defineEventHandler(async (e) => {
+  const { runtimeBrowser, runtimeCacheStorage } = useRuntimeConfig()["nuxt-og-image"];
   const path = parseURL(e.path).pathname;
   if (!path.endsWith("__og_image__/og.png"))
     return;
   const basePath = withoutTrailingSlash(
     path.replace("__og_image__/og.png", "")
   );
-  setHeader(e, "Content-Type", "image/png");
-  setHeader(e, "Cache-Control", "no-cache, no-store, must-revalidate");
-  setHeader(e, "Pragma", "no-cache");
-  setHeader(e, "Expires", "0");
   const options = await fetchOptions(e, basePath);
+  if (process.env.NODE_ENV === "production" && !process.env.prerender && !runtimeBrowser && options.provider === "browser")
+    return sendRedirect(e, joinURL(useNitroOrigin(e), "__nuxt_og_image__/browser-provider-not-supported.png"));
   const provider = await useProvider(options.provider);
   if (!provider) {
     throw createError({
@@ -21,5 +24,48 @@ export default defineEventHandler(async (e) => {
       statusMessage: `Provider ${options.provider} is missing.`
     });
   }
-  return provider.createPng(withBase(basePath, useHostname(e)), options);
+  const useCache = runtimeCacheStorage && !process.dev && options.cacheTtl && options.cacheTtl > 0 && options.cache;
+  const baseCacheKey = runtimeCacheStorage === "default" ? "/cache/og-image" : "/og-image";
+  const cache = prefixStorage(useStorage(), `${baseCacheKey}/images`);
+  const key = [options.path === "/" || !options.path ? "index" : options.path, hash(options)].join(":");
+  let png;
+  if (useCache && await cache.hasItem(key)) {
+    const { value, expiresAt } = await cache.getItem(key);
+    if (expiresAt > Date.now()) {
+      setHeader(e, "Cache-Control", "public, max-age=31536000");
+      setHeader(e, "Content-Type", "image/png");
+      png = Buffer.from(value, "base64");
+    } else {
+      await cache.removeItem(key);
+    }
+  }
+  if (!png) {
+    try {
+      png = await provider.createPng(options);
+      if (useCache && png) {
+        const base64png = Buffer.from(png).toString("base64");
+        await cache.setItem(key, { value: base64png, expiresAt: Date.now() + (options.cacheTtl || 0) });
+      }
+    } catch (err) {
+      throw createError({
+        statusCode: 500,
+        statusMessage: `Failed to create og image: ${err.message}`
+      });
+    }
+  }
+  if (png) {
+    if (!process.dev && options.cache) {
+      setHeader(e, "Cache-Control", "public, max-age=31536000");
+    } else {
+      setHeader(e, "Cache-Control", "no-cache, no-store, must-revalidate");
+      setHeader(e, "Pragma", "no-cache");
+      setHeader(e, "Expires", "0");
+    }
+    setHeader(e, "Content-Type", "image/png");
+    return png;
+  }
+  throw createError({
+    statusCode: 500,
+    statusMessage: "Failed to create og image, unknown error."
+  });
 });

package/dist/runtime/nitro/middleware/playground.mjs

@@ -1,11 +1,12 @@
 import { defineEventHandler } from "h3";
-import { parseURL, withoutTrailingSlash } from "ufo";
+import { parseURL, withBase, withoutTrailingSlash } from "ufo";
 import { fetchOptions } from "../utils.mjs";
+import { useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   const path = withoutTrailingSlash(parseURL(e.path).pathname);
   if (!path.endsWith("/__og_image__"))
     return;
-  const basePath = path.replace("/__og_image__", "");
+  const basePath = withBase(path.replace("/__og_image__", ""), useRuntimeConfig().app.baseURL);
   const options = await fetchOptions(e, basePath === "" ? "/" : basePath);
   if (!options)
     return `The route ${basePath} has not been set up for og:image generation.`;
@@ -22,5 +23,5 @@ export default defineEventHandler(async (e) => {
   }
 </style>
 <title>OG Image Playground</title>
-<iframe src="/__nuxt_og_image__/client/?&path=${basePath}"></iframe>`;
+<iframe src="/__nuxt_og_image__/client?&path=${basePath}&base=${useRuntimeConfig().app.baseURL}"></iframe>`;
 });

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

@@ -0,0 +1,3 @@
+import type { NitroAppPlugin } from 'nitropack';
+declare const OgImagePrenderNitroPlugin: NitroAppPlugin;
+export default OgImagePrenderNitroPlugin;

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

@@ -0,0 +1,28 @@
+import { appendHeader } from "h3";
+import { joinURL } from "ufo";
+import { prefixStorage } from "unstorage";
+import { extractOgImageOptions } from "../utils-pure.mjs";
+import { useRuntimeConfig, useStorage } from "#imports";
+const OgImagePrenderNitroPlugin = (nitroApp) => {
+  if (!process.env.prerender)
+    return;
+  const { runtimeCacheStorage } = useRuntimeConfig()["nuxt-og-image"];
+  const baseCacheKey = runtimeCacheStorage === "default" ? "/cache/og-image" : "/og-image";
+  const cache = prefixStorage(useStorage(), `${baseCacheKey}/options`);
+  nitroApp.hooks.hook("render:html", async (ctx, { event }) => {
+    const url = event.node.req.url;
+    if (url.includes(".") || url.startsWith("/__nuxt_island/"))
+      return;
+    const options = extractOgImageOptions(ctx.head.join("\n"));
+    if (!options)
+      return;
+    await cache.setItem(url === "/" || !url ? "index" : url, {
+      value: JSON.stringify(options),
+      expiresAt: Date.now() + 60 * 60 * 1e3
+      // 60 minutes to prerender
+    });
+    if (options.provider === "satori")
+      appendHeader(event, "x-nitro-prerender", joinURL(url, "/__og_image__/og.png"));
+  });
+};
+export default OgImagePrenderNitroPlugin;

package/dist/runtime/nitro/providers/browser/lambda.d.ts

@@ -1 +1 @@
-export default function createBrowser(): Promise<import("puppeteer-core").Browser>;
+export default function createBrowser(): Promise<any>;

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

@@ -1,9 +1,9 @@
-import edgeChromium from "chrome-aws-lambda";
+import edgeChromium from "@sparticuz/chrome-aws-lambda";
 import puppeteer from "puppeteer-core";
 export default async function createBrowser() {
-  return puppeteer.launch({
-    args: edgeChromium.args,
+  return await puppeteer.launch({
     executablePath: await edgeChromium.executablePath,
+    args: edgeChromium.args,
     headless: true
   });
 }