nuxt-og-image 2.0.0-beta.59 → 2.0.0-beta.60

package/dist/module.mjs

@@ -1,5 +1,5 @@
 import { readFile, writeFile } from 'node:fs/promises';
-import { defineNuxtModule, useLogger, createResolver, addTemplate, addServerHandler, addImports, addComponent, addServerPlugin } from '@nuxt/kit';
+import { useNuxt, addTemplate, defineNuxtModule, useLogger, createResolver, installModule, addServerHandler, addImports, addComponent, addServerPlugin } from '@nuxt/kit';
 import { execa } from 'execa';
 import chalk from 'chalk';
 import defu from 'defu';
@@ -10,6 +10,7 @@ import { tinyws } from 'tinyws';
 import sirv from 'sirv';
 import { pathExists, copy, mkdirp } from 'fs-extra';
 import { globby } from 'globby';
+import { updateSiteConfig, requireSiteConfig } from 'nuxt-site-config-kit';
 import playwrightCore from 'playwright-core';
 import { existsSync } from 'node:fs';
 import { createBirpcGroup } from 'birpc';
@@ -316,6 +317,23 @@ function ensureDependencies(nuxt, dep) {
   }));
 }
 
+function extendTypes(module, template) {
+  const nuxt = useNuxt();
+  addTemplate({
+    filename: `${module}.d.ts`,
+    getContents: () => {
+      const s = template();
+      return `// Generated by ${module}
+${s}
+export {}
+`;
+    }
+  });
+  nuxt.hooks.hook("prepare:types", ({ references }) => {
+    references.push({ path: resolve(nuxt.options.buildDir, `${module}.d.ts`) });
+  });
+}
+
 const PATH = "/__nuxt_og_image__";
 const PATH_ENTRY = `${PATH}/entry`;
 const PATH_PLAYGROUND = `${PATH}/client`;
@@ -329,20 +347,21 @@ const module = defineNuxtModule({
     configKey: "ogImage"
   },
   defaults(nuxt) {
-    const siteUrl = process.env.NUXT_PUBLIC_SITE_URL || process.env.NUXT_SITE_URL || nuxt.options.runtimeConfig.public?.siteUrl || nuxt.options.runtimeConfig.siteUrl;
     return {
-      siteUrl,
+      enabled: true,
       defaults: {
-        component: "OgImageBasic",
+        component: "OgImageTemplateFallback",
         width: 1200,
         height: 630,
-        cacheTtl: 24 * 60 * 60 * 1e3
         // default is to cache the image for 24 hours
+        cache: true,
+        cacheTtl: 24 * 60 * 60 * 1e3
       },
+      componentDirs: ["OgImage", "OgImageTemplate"],
       runtimeSatori: true,
       runtimeBrowser: nuxt.options.dev,
       fonts: [],
-      runtimeCacheStorage: false,
+      runtimeCacheStorage: true,
       satoriOptions: {},
       playground: process.env.NODE_ENV === "development" || nuxt.options.dev,
       debug: false
@@ -350,8 +369,12 @@ const module = defineNuxtModule({
   },
   async setup(config, nuxt) {
     const logger = useLogger("nuxt-og-image");
-    logger.level = config.debug ? 4 : 3;
-    const { resolve } = createResolver(import.meta.url);
+    logger.level = config.debug || nuxt.options.debug ? 4 : 3;
+    if (config.enabled === false) {
+      logger.debug("The module is disabled, skipping setup.");
+      return;
+    }
+    const { resolve, resolvePath } = createResolver(import.meta.url);
     logger.debug("Using Nitro preset", getNitroPreset(nuxt));
     const nitroCompatibility = getNitroProviderCompatibility(nuxt);
     logger.debug("Nitro compatibility", nitroCompatibility);
@@ -368,9 +391,14 @@ const module = defineNuxtModule({
       logger.info(`\`nuxt-og-image\` is deploying to nitro target \`${nitroTarget}\` that installs extra dependencies.`);
       await ensureDependencies(nuxt, ["puppeteer-core@14.1.1", "@sparticuz/chrome-aws-lambda@14.1.1"]);
     }
-    config.siteUrl = config.siteUrl || config.host;
-    if (!nuxt.options.dev && nuxt.options._generate && !config.siteUrl)
-      logger.warn("Missing `ogImage.siteUrl` and site is being prerendered. This will result in broken og images.");
+    await installModule(await resolvePath("nuxt-site-config"));
+    await updateSiteConfig({
+      _context: "nuxt-og-image:config",
+      url: config.siteUrl || config.host
+    });
+    requireSiteConfig("nuxt-og-image", {
+      url: "Required to generate absolute URLs for the og:image."
+    }, { prerender: true });
     nuxt.options.nitro.storage = nuxt.options.nitro.storage || {};
     if (nuxt.options._generate) {
       nuxt.options.nitro.storage["og-image"] = {
@@ -388,23 +416,14 @@ const module = defineNuxtModule({
       return resolve(`../dist/${p}`);
     };
     nuxt.options.experimental.componentIslands = true;
-    addTemplate({
-      filename: "nuxt-og-image.d.ts",
-      getContents: () => {
-        return `// Generated by nuxt-og-image
-interface NuxtOgImageNitroRules {
+    extendTypes("nuxt-og-image", () => {
+      return `interface NuxtOgImageNitroRules {
   ogImage?: false | Record<string, any>
 }
 declare module 'nitropack' {
   interface NitroRouteRules extends NuxtOgImageNitroRules {}
   interface NitroRouteConfig extends NuxtOgImageNitroRules {}
-}
-export {}
-`;
-      }
-    });
-    nuxt.hooks.hook("prepare:types", ({ references }) => {
-      references.push({ path: resolve(nuxt.options.buildDir, "nuxt-og-image.d.ts") });
+}`;
     });
     addServerHandler({
       lazy: true,
@@ -446,7 +465,17 @@ export {}
       });
     }
     nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"] = [];
-    ["defineOgImageDynamic", "defineOgImageStatic", "defineOgImageScreenshot"].forEach((name) => {
+    [
+      // deprecated
+      "Dynamic",
+      "Static",
+      // new
+      "index",
+      "Cached",
+      "WithoutCache",
+      "Screenshot"
+    ].forEach((name) => {
+      name = name === "index" ? "defineOgImage" : `defineOgImage${name}`;
       addImports({
         name,
         from: resolve("./runtime/composables/defineOgImage")
@@ -454,16 +483,47 @@ export {}
       nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"].push(name);
     });
     await addComponent({
-      name: "OgImageBasic",
-      filePath: resolve("./runtime/components/OgImageBasic.island.vue"),
+      name: "OgImageTemplateFallback",
+      filePath: resolve("./runtime/components/OgImageTemplate/Fallback.vue"),
       island: true
     });
-    ["OgImageStatic", "OgImageDynamic", "OgImageScreenshot"].forEach((name) => {
+    [
+      // deprecated
+      "Static",
+      "Dynamic",
+      // new
+      "index",
+      "Cached",
+      "WithoutCache",
+      "Screenshot"
+    ].forEach((name) => {
       addComponent({
-        name,
-        filePath: resolve(`./runtime/components/${name}`)
+        name: name === "index" ? "OgImage" : `OgImage${name}`,
+        filePath: resolve(`./runtime/components/OgImage/${name}`)
       });
     });
+    const ogImageComponents = [];
+    nuxt.hook("components:extend", (components) => {
+      components.forEach((component) => {
+        let valid = false;
+        config.componentDirs.forEach((dir) => {
+          if (component.pascalName.startsWith(dir) || component.kebabName.startsWith(dir))
+            valid = true;
+        });
+        if (valid) {
+          component.island = true;
+          component.mode = "server";
+          ogImageComponents.push({ pascalName: component.pascalName, kebabName: component.kebabName });
+        }
+      });
+    });
+    addTemplate({
+      filename: "og-image-component-names.mjs",
+      getContents() {
+        return `export const componentNames = ${JSON.stringify(ogImageComponents)}`;
+      },
+      options: { mode: "server" }
+    });
     const runtimeDir = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimeDir);
     addServerPlugin(resolve("./runtime/nitro/plugins/prerender"));
@@ -484,9 +544,13 @@ export {}
     nuxt.hooks.hook("modules:done", async () => {
       nuxt.hooks.callHook("og-image:config", config);
       nuxt.options.runtimeConfig["nuxt-og-image"] = {
-        ...config,
+        satoriOptions: config.satoriOptions,
+        runtimeSatori: config.runtimeSatori,
+        runtimeBrowser: config.runtimeBrowser,
+        // @ts-expect-error runtime type
+        defaults: config.defaults,
         // avoid adding credentials
-        runtimeCacheStorage: Boolean(config.runtimeCacheStorage),
+        runtimeCacheStorage: typeof config.runtimeCacheStorage === "boolean" ? "default" : config.runtimeCacheStorage.driver,
         // convert the fonts to uniform type to fix ts issue
         fonts: config.fonts.map((f) => {
           if (typeof f === "string") {
@@ -631,7 +695,7 @@ export async function useProvider(provider) {
           ...extractedOptions,
           ...routeRules.ogImage || {}
         };
-        if ((nuxt.options._generate || entry.static) && entry.provider === "browser")
+        if ((nuxt.options._generate || entry.cache) && entry.provider === "browser")
           screenshotQueue.push(entry);
       });
       if (nuxt.options.dev)

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

@@ -1,5 +1,4 @@
-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>>, {
+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/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,4 @@
-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>>, {
+declare const _default: import("vue").DefineComponent<OgImageScreenshotOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<any>, {} | {
     [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/{OgImageStatic.d.ts → OgImage/WithoutCache.d.ts}

@@ -1,5 +1,4 @@
-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>>, {
+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,7 @@
+/**
+ * @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<any>, {} | {
+    [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,7 @@
+/**
+ * @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<any>, {} | {
+    [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/OgImage/index.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/index.mjs

@@ -0,0 +1,9 @@
+import { defineComponent } from "vue";
+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,155 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+// 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.',
+  },
+  background: {
+    type: String,
+    default: 'linear-gradient(to bottom, #dbf4ff, #fff1f1)',
+  },
+  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,
+  }
+  return { class: classes, style: styles }
+})
+
+const siteConfig = useSiteConfig()
+const siteName = computed(() => {
+  return props.siteName || siteConfig.name
+})
+const siteLogo = computed(() => {
+  return props.siteLogo || siteConfig.logo || 'https://nuxt.com/assets/design-kit/logo/full-logo-green-light.png'
+})
+</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'" style="width: 30%;" class="flex justify-end">
+        <Icon :name="icon" size="250px" style="margin: 0 auto;" />
+      </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;">
+        {{ siteName }}
+      </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,45 +1,68 @@
 import { withBase } from "ufo";
 import { useRequestEvent } from "#app";
-import { useHostname } from "../nitro/util-hostname.mjs";
-import { useRouter, useRuntimeConfig, useServerHead } from "#imports";
+import { useNitroOrigin, useRouter, useRuntimeConfig, useServerHead, useSiteConfig } from "#imports";
+import { componentNames } from "#build/og-image-component-names.mjs";
 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 { runtimeSatori } = useRuntimeConfig()["nuxt-og-image"];
-  defineOgImage({
-    provider: runtimeSatori ? "satori" : "browser",
-    static: false,
-    cacheTtl: 0,
+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 { runtimeSatori } = useRuntimeConfig()["nuxt-og-image"];
-  defineOgImage({
-    provider: runtimeSatori ? "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 = {}) {
+  const options = { ...unref(_options) };
   if (process.server) {
-    let resolveSrc = function() {
-      return withBase(`${route === "/" ? "" : route}/__og_image__/og.png`, baseUrl);
-    };
-    const { defaults, siteUrl } = useRuntimeConfig()["nuxt-og-image"];
+    if (options.static)
+      options.cache = options.cache || options.static;
+    if (!options.provider)
+      options.provider = "satori";
+    const { defaults, 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;
+          }
+        }
+      }
+    }
     const router = useRouter();
     const route = router?.currentRoute?.value?.path || "";
     const e = useRequestEvent();
-    const baseUrl = process.env.prerender ? siteUrl : useHostname(e);
+    const baseUrl = process.env.prerender ? (await useSiteConfig(e)).url : useNitroOrigin(e);
+    const src = withBase(`${route === "/" ? "" : route}/__og_image__/og.png`, baseUrl || "");
     const meta = [
       {
         name: "twitter:card",
@@ -47,11 +70,11 @@ export function defineOgImage(options = {}) {
       },
       {
         name: "twitter:image:src",
-        content: resolveSrc
+        content: src
       },
       {
         property: "og:image",
-        content: resolveSrc
+        content: src
       },
       {
         property: "og:image:width",