nuxt-og-image 3.0.0-beta.25 → 3.0.0-beta.26

package/dist/runtime/components/Templates/Community/NuxtSeo.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+/**
+ * @credits Nuxt SEO <https://nuxtseo.com/>
+ */
+
+import { computed, defineComponent, h, resolveComponent } from 'vue'
+import { useOgImageRuntimeConfig } from '../../../utils'
+import { useSiteConfig } from '#imports'
+
+// inherited attrs can mess up the satori parser
+defineOptions({
+  inheritAttrs: false,
+})
+
+// convert to typescript props
+const props = withDefaults(defineProps<{
+  colorMode?: 'dark' | 'light'
+  title?: string
+  description?: string
+  icon?: string | boolean
+  siteName?: string
+  siteLogo?: string
+  theme?: string
+}>(), {
+  theme: '#00dc82',
+  title: 'title',
+})
+
+const HexRegex = /^#([0-9a-f]{3}){1,2}$/i
+
+const runtimeConfig = useOgImageRuntimeConfig()
+
+const colorMode = computed(() => {
+  return props.colorMode || runtimeConfig.colorPreference || 'light'
+})
+
+const themeHex = computed(() => {
+  // regex test if valid hex
+  if (HexRegex.test(props.theme))
+    return props.theme
+
+  // if it's hex without the hash, just add the hash
+  if (HexRegex.test(`#${props.theme}`))
+    return `#${props.theme}`
+
+  // if it's rgb or rgba, we convert it to hex
+  if (props.theme.startsWith('rgb')) {
+    const rgb = props.theme
+      .replace('rgb(', '')
+      .replace('rgba(', '')
+      .replace(')', '')
+      .split(',')
+      .map(v => Number.parseInt(v.trim(), 10))
+    const hex = rgb
+      .map((v) => {
+        const hex = v.toString(16)
+        return hex.length === 1 ? `0${hex}` : hex
+      })
+      .join('')
+    return `#${hex}`
+  }
+  return '#FFFFFF'
+})
+
+const themeRgb = computed(() => {
+  // we want to convert it so it's just `<red>, <green>, <blue>` (255, 255, 255)
+  return themeHex.value
+    .replace('#', '')
+    .match(/.{1,2}/g)
+    ?.map(v => Number.parseInt(v, 16))
+    .join(', ')
+})
+
+const siteConfig = useSiteConfig()
+const siteName = computed(() => {
+  return props.siteName || siteConfig.name
+})
+const siteLogo = computed(() => {
+  return props.siteLogo || siteConfig.logo
+})
+
+const IconComponent = runtimeConfig.hasNuxtIcon
+  ? resolveComponent('Icon')
+  : defineComponent({
+    render() {
+      return h('div', 'missing nuxt-icon')
+    },
+  })
+if (typeof props.icon === 'string' && !runtimeConfig.hasNuxtIcon && process.dev) {
+  console.warn('Please install `nuxt-icon` to use icons with the fallback OG Image component.')
+  // eslint-disable-next-line no-console
+  console.log('\nnpm add -D nuxt-icon\n')
+  // create simple div renderer component
+}
+</script>
+
+<template>
+  <div
+    class="w-full h-full flex justify-between relative p-[60px]"
+    :class="[
+      colorMode === 'light' ? ['bg-white', 'text-gray-900'] : ['bg-gray-900', 'text-gray-50'],
+    ]"
+  >
+    <div
+      class="flex absolute top-0 right-[-100%]" :style="{
+        width: '200%',
+        height: '200%',
+        backgroundImage: `radial-gradient(circle, rgba(${themeRgb}, 0.5) 0%,  ${colorMode === 'dark' ? 'rgba(5, 5, 5,0.3)' : 'rgba(255, 255, 255, 0.7)'} 50%, ${props.colorMode === 'dark' ? 'rgba(5, 5, 5,0)' : 'rgba(255, 255, 255, 0)'} 70%)`,
+      }"
+    />
+    <div class="h-full w-full justify-between relative">
+      <div class="flex flex-row justify-between items-center">
+        <div class="flex flex-col w-full" :style="icon ? { width: '65%' } : {}">
+          <h1 class="font-bold mb-[30px] text-[75px] max-w-[70%]">
+            {{ title }}
+          </h1>
+          <p
+            v-if="description" class="text-[35px]" :class="[
+              colorMode === 'light' ? ['text-gray-700'] : ['text-gray-300'],
+            ]"
+          >
+            {{ description }}
+          </p>
+        </div>
+        <div v-if="icon" style="width: 30%;" class="flex justify-end">
+          <IconComponent :name="icon" size="250px" style="margin: 0 auto 0 100px;opacity: 0.9;" />
+        </div>
+      </div>
+      <div class="flex flex-row justify-center items-center text-left w-full">
+        <img v-if="siteLogo" :src="siteLogo" height="30">
+        <template v-else>
+          <svg height="50" width="50" class="mr-3" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+            <path :fill="theme.includes('#') ? theme : `#${theme}`" 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>
+          <p v-if="siteName" style="font-size: 25px;" class="font-bold">
+            {{ siteName }}
+          </p>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Templates/{Official → Community}/SimpleBlog.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+/**
+ * @credits Full Stack Heroes <https://fullstackheroes.com/>
+ */
+
 import { parseURL } from 'ufo'
 import { computed, useSiteConfig } from '#imports'
 
@@ -25,9 +29,9 @@ const website = computed(() => {
         <h1 class="text-[80px] p-20 font-black text-left">
           {{ title }}
         </h1>
-        <div class="text-2xl pb-10 px-20 font-bold mb-0">
+        <p class="text-2xl pb-10 px-20 font-bold mb-0">
           {{ website }}
-        </div>
+        </p>
       </div>
     </div>
   </div>

package/dist/runtime/components/Templates/{Official → Community}/Wave.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+/**
+ * @credits Full Stack Heroes <https://fullstackheroes.com/>
+ */
+
 // inherited attrs can mess up the satori parser
 defineOptions({ inheritAttrs: false })
 

package/dist/runtime/components/Templates/{Official → Community}/WithEmoji.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+/**
+ * @credits Full Stack Heroes <https://fullstackheroes.com/>
+ */
+
 // inherited attrs can mess up the satori parser
 defineOptions({ inheritAttrs: false })
 

package/dist/runtime/composables/defineOgImage.mjs

@@ -2,7 +2,7 @@ import { defu } from "defu";
 import { appendHeader } from "h3";
 import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
 import { withoutBase } from "ufo";
-import { getOgImagePath } from "../utils.mjs";
+import { getOgImagePath, separateProps, useOgImageRuntimeConfig } from "../utils.mjs";
 import { normaliseOptions } from "../core/options/normalise.mjs";
 import { createOgImageMeta } from "../nuxt/utils.mjs";
 import { useNuxtApp, useRequestEvent, useRouter, useRuntimeConfig } from "#imports";
@@ -28,8 +28,8 @@ export function defineOgImage(_options = {}) {
   const options = normaliseOptions({
     ..._options
   });
-  const { defaults } = useRuntimeConfig()["nuxt-og-image"];
-  const resolvedOptions = normaliseOptions(defu(options, routeRules, defaults));
+  const { defaults } = useOgImageRuntimeConfig();
+  const resolvedOptions = normaliseOptions(defu(separateProps(options), separateProps(routeRules), defaults));
   if (_options.url) {
     createOgImageMeta(null, options, resolvedOptions, nuxtApp.ssrContext);
   } else {

package/dist/runtime/composables/defineOgImageComponent.mjs

@@ -1,8 +1,8 @@
 import { defineOgImage } from "./defineOgImage.mjs";
 export function defineOgImageComponent(component, props, options = {}) {
   return defineOgImage({
+    ...options,
     component,
-    props,
-    ...options
+    props
   });
 }

package/dist/runtime/core/cache/prerender.d.ts

@@ -1,6 +1,6 @@
 import type { Browser } from 'playwright-core';
 import type { OgImageOptions } from '../../types';
-export declare const prerenderCache: import("unstorage/dist/shared/unstorage.745f9650").a<OgImageOptions<"Fallback">> | undefined;
+export declare const prerenderCache: import("unstorage/dist/shared/unstorage.745f9650").a<OgImageOptions<"NuxtSeo">> | undefined;
 export declare const prerenderChromiumContext: {
     browser?: Browser;
 };

package/dist/runtime/core/font/fetch.mjs

@@ -1,4 +1,5 @@
 import { Buffer } from "node:buffer";
+import { createError } from "h3";
 import { base64ToArrayBuffer } from "../env/assets.mjs";
 import { fontCache } from "./cache.mjs";
 import { useNitroOrigin, useStorage } from "#imports";
@@ -13,10 +14,15 @@ export async function loadFont({ e }, font) {
     data = base64ToArrayBuffer(await useStorage().getItem(storageKey));
   if (!data) {
     if (font.path) {
-      data = await e.$fetch(font.path, {
-        baseURL: useNitroOrigin(e),
-        responseType: "arrayBuffer"
-      });
+      if (import.meta.prerender) {
+        const key = `root:public${font.path.replace("./", ":").replace("/", ":")}`;
+        data = await useStorage().getItemRaw(key);
+      } else {
+        data = await e.$fetch(font.path, {
+          baseURL: useNitroOrigin(e),
+          responseType: "arrayBuffer"
+        });
+      }
     } else {
       data = await e.$fetch(`/__og-image__/font/${name}/${weight}.ttf`, {
         responseType: "arrayBuffer"

package/dist/runtime/core/html/applyEmojis.mjs

@@ -25,7 +25,7 @@ export async function applyEmojis(ctx, island) {
       }
       if (svg)
         return `
-${svg.replace("<svg ", '<svg data-emoji style="margin: 0 .05em 0 .3em;   vertical-align: -0.1em;" ')}
+${svg.replace("<svg ", '<svg data-emoji style="margin: 0 .05em 0 .15em; vertical-align: -0.1em;" ')}
 `;
       return match;
     }

package/dist/runtime/core/html/devIframeTemplate.mjs

@@ -1,11 +1,11 @@
 import { createHeadCore } from "@unhead/vue";
 import { renderSSRHead } from "@unhead/ssr";
+import { useOgImageRuntimeConfig } from "../../utils.mjs";
 import { applyEmojis } from "./applyEmojis.mjs";
 import { fetchIsland } from "./fetchIsland.mjs";
-import { useRuntimeConfig } from "#imports";
 export async function devIframeTemplate(ctx) {
   const { options } = ctx;
-  const { fonts, satoriOptions } = useRuntimeConfig()["nuxt-og-image"];
+  const { fonts, satoriOptions } = useOgImageRuntimeConfig();
   const island = await fetchIsland(ctx);
   const head = createHeadCore();
   head.push(island.head);
@@ -29,15 +29,23 @@ export async function devIframeTemplate(ctx) {
       },
       {
         innerHTML: `body {
-    transform: scale(${options.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.mode === "dark" ? "#1b1b1b" : "#fff"};
-}`
+    background-color: ${options.props.colorMode === "dark" ? "#1b1b1b" : "#fff"};
+}
+div {
+  display: flex;
+  flex-direction: column;
+}
+svg[data-emoji] {
+  display: inline-block;
+}
+`
       },
       ...fonts.filter((font) => font.path).map((font) => {
         return `

package/dist/runtime/core/options/normalise.mjs

@@ -1,7 +1,8 @@
-import { unref, useRuntimeConfig } from "#imports";
+import { useOgImageRuntimeConfig } from "../../utils.mjs";
+import { unref } from "#imports";
 import { componentNames } from "#build/og-image-component-names.mjs";
 export function normaliseOptions(_options) {
-  const { runtimeSatori } = useRuntimeConfig()["nuxt-og-image"];
+  const { runtimeSatori } = useOgImageRuntimeConfig();
   const options = { ...unref(_options) };
   if (options.static)
     options.cache = options.cache || options.static;

package/dist/runtime/core/renderers/chromium/screenshot.d.ts

@@ -2,4 +2,4 @@
 import type { Buffer } from 'node:buffer';
 import type { Browser } from 'playwright-core';
 import type { H3EventOgImageRender } from '../../../types';
-export declare function createScreenshot({ e, options, extension }: H3EventOgImageRender, browser: Browser): Promise<Buffer>;
+export declare function createScreenshot({ basePath, e, options, extension }: H3EventOgImageRender, browser: Browser): Promise<Buffer>;

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

@@ -1,7 +1,7 @@
 import { joinURL, withQuery } from "ufo";
 import { useNitroOrigin } from "#imports";
-export async function createScreenshot({ e, options, extension }, browser) {
-  const path = options.component === "PageScreenshot" ? options.path : joinURL("/__og-image__/image", options.path, `og.html`);
+export async function createScreenshot({ basePath, e, options, extension }, browser) {
+  const path = options.component === "PageScreenshot" ? options.path : joinURL("/__og-image__/image", basePath, `og.html`);
   const page = await browser.newPage({
     colorScheme: options.colorScheme,
     baseURL: useNitroOrigin(e)

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

@@ -1,11 +1,11 @@
 import { defu } from "defu";
+import { useOgImageRuntimeConfig } from "../../../utils.mjs";
 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(event) {
   const { options } = event;
-  const { fonts, satoriOptions } = useRuntimeConfig()["nuxt-og-image"];
+  const { fonts, satoriOptions } = useOgImageRuntimeConfig();
   const vnodes = await createVNodes(event);
   if (!satoriFonts.length)
     satoriFonts.push(...await loadFonts(event, fonts));
@@ -18,7 +18,7 @@ export async function createSvg(event) {
   }));
 }
 async function createPng(event) {
-  const { resvgOptions } = useRuntimeConfig()["nuxt-og-image"];
+  const { resvgOptions } = useOgImageRuntimeConfig();
   const svg = await createSvg(event);
   const Resvg = await useResvg();
   const resvg = new Resvg(svg, defu(
@@ -29,7 +29,7 @@ async function createPng(event) {
   return pngData.asPng();
 }
 async function createJpeg(event) {
-  const { sharpOptions } = useRuntimeConfig()["nuxt-og-image"];
+  const { sharpOptions } = useOgImageRuntimeConfig();
   const png = await createPng(event);
   const sharp = await useSharp();
   return sharp(png, defu(event.options.sharp, sharpOptions)).jpeg().toBuffer();

package/dist/runtime/core/utils/resolveRendererContext.mjs

@@ -6,9 +6,10 @@ import { hash } from "ohash";
 import { fetchPathHtmlAndExtractOptions } from "../options/fetch.mjs";
 import { prerenderCache } from "../cache/prerender.mjs";
 import { useChromiumRenderer, useSatoriRenderer } from "../renderers/satori/instances.mjs";
+import { separateProps, useOgImageRuntimeConfig } from "../../utils.mjs";
 import { useRuntimeConfig, useSiteConfig } from "#imports";
 export async function resolveRendererContext(e) {
-  const runtimeConfig = useRuntimeConfig()["nuxt-og-image"];
+  const runtimeConfig = useOgImageRuntimeConfig();
   const path = parseURL(e.path).pathname;
   const extension = path.split(".").pop();
   if (!extension) {
@@ -26,7 +27,9 @@ export async function resolveRendererContext(e) {
   const basePath = withoutTrailingSlash(
     path.replace(`/__og-image__/image`, "").replace(`/og.${extension}`, "")
   );
-  const queryParams = { ...getQuery(e) };
+  let queryParams = { ...getQuery(e) };
+  queryParams.props = JSON.parse(queryParams.props || "{}");
+  queryParams = separateProps(queryParams);
   const isDebugJsonPayload = extension === "json" && runtimeConfig.debug;
   const siteConfig = useSiteConfig(e);
   const key = [
@@ -55,7 +58,14 @@ export async function resolveRendererContext(e) {
   const routeRules = defu({}, ..._routeRulesMatcher.matchAll(
     withoutBase(basePath.split("?")[0], useRuntimeConfig().app.baseURL)
   ).reverse());
-  options = defu(queryParams, routeRules.ogImage, options, runtimeConfig.defaults);
+  if (typeof routeRules.ogImage === "undefined" && !options) {
+    return createError({
+      statusCode: 400,
+      statusMessage: "The route is missing the Nuxt OG Image payload or route rules."
+    });
+  }
+  const ogImageRouteRules = separateProps(routeRules.ogImage);
+  options = defu(queryParams, ogImageRouteRules, options, runtimeConfig.defaults);
   if (!options) {
     return createError({
       statusCode: 404,

package/dist/runtime/nitro/plugins/nuxt-content.mjs

@@ -1,14 +1,13 @@
 import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
 import { defu } from "defu";
-import { getOgImagePath } from "../../utils.mjs";
-import { useRuntimeConfig } from "#imports";
+import { getOgImagePath, useOgImageRuntimeConfig } from "../../utils.mjs";
 export default defineNitroPlugin((nitroApp) => {
   nitroApp.hooks.hook("content:file:afterParse", async (content) => {
     if (content._draft || content._extension !== "md" || content._partial || content.indexable === false || content.index === false)
       return;
     if (content.path && content.ogImage) {
       const ogImageConfig = typeof content.ogImage === "object" ? content.ogImage : {};
-      const { defaults } = useRuntimeConfig()["nuxt-og-image"];
+      const { defaults } = useOgImageRuntimeConfig();
       const optionsWithDefault = defu(ogImageConfig, defaults);
       const src = getOgImagePath(content.path, optionsWithDefault);
       const payload = {

package/dist/runtime/nitro/plugins/prerender.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/prerender.mjs

@@ -1,9 +1,11 @@
-import { parseURL, withoutLeadingSlash } from "ufo";
-import { getRouteRules } from "nitropack/dist/runtime/route-rules";
+import { parseURL, withoutBase, withoutLeadingSlash } from "ufo";
 import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
+import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
+import { defu } from "defu";
 import { extractAndNormaliseOgImageOptions } from "../../core/options/extract.mjs";
 import { prerenderCache, prerenderChromiumContext } from "../../core/cache/prerender.mjs";
-import { isInternalRoute } from "../../utils.mjs";
+import { isInternalRoute } from "../../utils.pure.mjs";
+import { useRuntimeConfig } from "#imports";
 export default defineNitroPlugin(async (nitro) => {
   if (!import.meta.prerender)
     return;
@@ -11,7 +13,13 @@ export default defineNitroPlugin(async (nitro) => {
     const path = parseURL(e.event.path).pathname;
     if (isInternalRoute(path))
       return;
-    const routeRules = getRouteRules(e)?.ogImage || {};
+    const runtimeConfig = useRuntimeConfig();
+    const _routeRulesMatcher = toRouteMatcher(
+      createRadixRouter({ routes: runtimeConfig.nitro?.routeRules })
+    );
+    const routeRules = defu({}, ..._routeRulesMatcher.matchAll(
+      withoutBase(path.split("?")[0], runtimeConfig.app.baseURL)
+    ).reverse()).ogImage;
     if (routeRules === false)
       return;
     const options = extractAndNormaliseOgImageOptions([

package/dist/runtime/nuxt/plugins/og-image-canonical-urls.server.mjs

@@ -0,0 +1,31 @@
+import { parseURL } from "ufo";
+import { toValue } from "vue";
+import { isInternalRoute } from "../../utils.pure.mjs";
+import { defineNuxtPlugin, useRequestEvent, withSiteUrl } from "#imports";
+export default defineNuxtPlugin({
+  setup(nuxtApp) {
+    nuxtApp.hooks.hook("app:rendered", async (ctx) => {
+      const { ssrContext } = ctx;
+      const e = useRequestEvent();
+      const path = parseURL(e.path).pathname;
+      if (isInternalRoute(path))
+        return;
+      ssrContext?.head.use({
+        key: "nuxt-og-image:canonical-urls",
+        hooks: {
+          "tags:resolve": async ({ tags }) => {
+            for (const tag of tags) {
+              if (tag.tag === "meta" && (tag.props.property === "og:image" || tag.props.name === "twitter:image:src")) {
+                if (!tag.props.content.startsWith("https")) {
+                  await nuxtApp.runWithContext(() => {
+                    tag.props.content = toValue(withSiteUrl(tag.props.content));
+                  });
+                }
+              }
+            }
+          }
+        }
+      });
+    });
+  }
+});

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

@@ -2,9 +2,9 @@ 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 "../../utils.mjs";
+import { getOgImagePath, isInternalRoute, useOgImageRuntimeConfig } from "../../utils.mjs";
 import { createOgImageMeta } from "../utils.mjs";
-import { defineNuxtPlugin, useRequestEvent, useRuntimeConfig } from "#imports";
+import { defineNuxtPlugin, useRequestEvent } from "#imports";
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hooks.hook("app:rendered", async (ctx) => {
     const { ssrContext } = ctx;
@@ -25,15 +25,14 @@ export default defineNuxtPlugin((nuxtApp) => {
       ogImageInstances?.forEach((e2) => {
         e2.dispose();
       });
+      nuxtApp.ssrContext._ogImagePayload = void 0;
       nuxtApp.ssrContext._ogImageInstances = void 0;
       return;
     }
-    if (ogImageInstances.length >= 0)
-      return;
     routeRules = defu(nuxtApp.ssrContext?.event.context._nitro?.routeRules?.ogImage, routeRules);
-    const { defaults } = useRuntimeConfig()["nuxt-og-image"];
+    const { defaults } = useOgImageRuntimeConfig();
     const resolvedOptions = normaliseOptions(defu(routeRules, defaults));
     const src = getOgImagePath(ssrContext.url, resolvedOptions);
-    createOgImageMeta(src, {}, resolvedOptions, nuxtApp.ssrContext);
+    createOgImageMeta(src, routeRules, resolvedOptions, nuxtApp.ssrContext);
   });
 });

package/dist/runtime/nuxt/utils.mjs

@@ -1,5 +1,8 @@
+import { defu } from "defu";
+import { separateProps } from "../utils.mjs";
 import { useServerHead } from "#imports";
 export function createOgImageMeta(src, input, resolvedOptions, ssrContext) {
+  const _input = separateProps(defu(input, ssrContext._ogImagePayload));
   const url = src || input.url || resolvedOptions.url;
   let urlExtension = (url.split("/").pop() || url).split(".").pop() || resolvedOptions.extension;
   if (urlExtension === "jpg")
@@ -30,16 +33,10 @@ export function createOgImageMeta(src, input, resolvedOptions, ssrContext) {
       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;
+        if (!_input.props.title)
+          _input.props.title = "%s";
+        delete _input.url;
+        return _input;
       },
       // we want this to be last in our head
       tagPosition: "bodyClose"
@@ -51,5 +48,6 @@ export function createOgImageMeta(src, input, resolvedOptions, ssrContext) {
   }, {
     tagPriority: 35
   });
+  ssrContext._ogImagePayload = _input;
   ssrContext._ogImageInstances.push(instance);
 }

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

@@ -4,6 +4,6 @@ declare const _default: import("h3").EventHandler<import("h3").EventHandlerReque
         source: any;
     };
     componentNames: any;
-    runtimeConfig: any;
+    runtimeConfig: import("../../../types").OgImageRuntimeConfig;
 }>>;
 export default _default;

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

@@ -1,9 +1,10 @@
 import { defineEventHandler, setHeader } from "h3";
-import { useRuntimeConfig, useSiteConfig } from "#imports";
+import { useOgImageRuntimeConfig } from "../../../utils.mjs";
+import { 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 runtimeConfig = useOgImageRuntimeConfig();
   const siteConfig = await useSiteConfig(e, { debug: true });
   return {
     siteConfigUrl: {

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

@@ -4,13 +4,14 @@ 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";
+import { useOgImageRuntimeConfig } from "../../../utils.mjs";
+import { 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 { debug, baseCacheKey } = useOgImageRuntimeConfig();
   const compatibility = [];
   if (isDebugJsonPayload) {
     const queryExtension = getQuery(e).extension || ctx.options.extension;

package/dist/runtime/types.d.ts

@@ -3,6 +3,7 @@ import type { H3Error, H3Event } from 'h3';
 import type { ResvgRenderOptions } from '@resvg/resvg-js';
 import type { SatoriOptions } from 'satori';
 import type { AllowedComponentProps, Component, ComponentCustomProps, VNodeProps } from '@vue/runtime-core';
+import type { SharpOptions } from 'sharp';
 import type { OgImageComponents } from '#nuxt-og-image/components';
 export interface H3EventOgImageRender {
     e: H3Event;
@@ -14,12 +15,26 @@ export interface H3EventOgImageRender {
     isDebugJsonPayload: boolean;
 }
 export type IconifyEmojiIconSets = 'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'streamline-emojis' | 'openmoji';
+export interface OgImageRuntimeConfig {
+    version: string;
+    satoriOptions: SatoriOptions;
+    resvgOptions: ResvgRenderOptions;
+    sharpOptions: SharpOptions;
+    runtimeSatori: boolean;
+    runtimeChromium: boolean;
+    defaults: OgImageOptions;
+    debug: boolean;
+    baseCacheKey: string;
+    fonts: FontConfig[];
+    hasNuxtIcon: boolean;
+    colorPreference: 'light' | 'dark';
+}
 export interface OgImageComponent {
     path?: string;
     pascalName: string;
     kebabName: string;
     hash: string;
-    category: 'app' | 'official' | 'community' | 'pro';
+    category: 'app' | 'community' | 'pro';
     credits?: string;
 }
 export interface ScreenshotOptions {
@@ -47,7 +62,7 @@ export type OgImagePrebuilt = {
     url: string;
 } & Pick<OgImageOptions, 'width' | 'height' | 'alt'>;
 export type DefineOgImageInput = OgImageOptions | OgImagePrebuilt | false;
-export interface OgImageOptions<T extends keyof OgImageComponents = 'Fallback'> {
+export interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
     /**
      * The width of the screenshot.
      *
@@ -88,6 +103,7 @@ export interface OgImageOptions<T extends keyof OgImageComponents = 'Fallback'>
     resvg?: ResvgRenderOptions;
     satori?: SatoriOptions;
     screenshot?: Partial<ScreenshotOptions>;
+    sharp?: SharpOptions;
     cacheMaxAgeSeconds?: number;
 }
 export interface FontConfig {