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

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

@@ -0,0 +1,18 @@
+import { componentNames } from "#nuxt-og-image/component-names.mjs";
+export function normaliseOptions(_options) {
+  const options = { ..._options };
+  if (!options)
+    return options;
+  if (options.component && componentNames) {
+    const originalName = options.component;
+    for (const component of componentNames) {
+      if (component.pascalName.endsWith(originalName) || component.kebabName.endsWith(originalName)) {
+        options.component = component.pascalName;
+        break;
+      }
+    }
+  } else if (!options.component) {
+    options.component = componentNames[0]?.pascalName;
+  }
+  return options;
+}

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

@@ -0,0 +1,2 @@
+import type { NitroApp } from 'nitropack';
+export declare function nuxtContentPlugin(nitroApp: NitroApp): void;

package/dist/runtime/nitro/{plugins/nuxt-content.mjs → util/plugins.js}

@@ -1,15 +1,19 @@
-import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
 import { defu } from "defu";
-import { getOgImagePath, useOgImageRuntimeConfig } from "../../utils.mjs";
-export default defineNitroPlugin((nitroApp) => {
+import { stringify } from "devalue";
+import { getOgImagePath, useOgImageRuntimeConfig } from "../../shared.js";
+import { normaliseOptions } from "./options.js";
+export function nuxtContentPlugin(nitroApp) {
+  const { isNuxtContentDocumentDriven, defaults } = useOgImageRuntimeConfig();
   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) {
+    let path = content.path;
+    if (isNuxtContentDocumentDriven && content.path)
+      path = content._path;
+    if (path && content.ogImage) {
       const ogImageConfig = typeof content.ogImage === "object" ? content.ogImage : {};
-      const { defaults } = useOgImageRuntimeConfig();
       const optionsWithDefault = defu(ogImageConfig, defaults);
-      const src = getOgImagePath(content.path, optionsWithDefault);
+      const src = getOgImagePath(path, optionsWithDefault);
       const payload = {
         title: content.title,
         excerpt: content.description || content.excerpt,
@@ -24,7 +28,7 @@ export default defineNitroPlugin((nitroApp) => {
             id: "nuxt-og-image-overrides",
             type: "application/json",
             processTemplateParams: true,
-            innerHTML: payload,
+            innerHTML: stringify(normaliseOptions(payload)),
             // we want this to be last in our head
             tagPosition: "bodyClose",
             tagPriority: 30
@@ -48,4 +52,4 @@ export default defineNitroPlugin((nitroApp) => {
     }
     return content;
   });
-});
+}

package/dist/runtime/{core/utils → nitro/util}/wasm.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="node" />
 export declare function importWasm(input: any): Promise<any>;
 export declare function readWasmFile(input: string): Promise<Buffer>;

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

@@ -1,5 +1,3 @@
-import type { OgImageOptions } from '../../types';
-declare const _default: import("vue").DefineComponent<OgImageOptions<"NuxtSeo">, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<OgImageOptions<"NuxtSeo">>, {
-    props?: any;
-}, {}>;
+import type { OgImageOptions } from '../../../types.js';
+declare const _default: import("vue").DefineComponent<OgImageOptions<"NuxtSeo">, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OgImageOptions<"NuxtSeo">> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -0,0 +1,3 @@
+import type { OgImagePageScreenshotOptions } from '../../../types.js';
+declare const _default: import("vue").DefineComponent<OgImagePageScreenshotOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OgImagePageScreenshotOptions> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/nuxt/components/Templates/Community/Frame.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+/**
+ * @credits @arashsheyda <https://github.com/arashsheyda>
+ */
+
+withDefaults(defineProps<{
+  title?: string
+  description?: string
+  bg?: string
+  icon?: string
+  logo?: string
+  image?: string
+  username?: string
+  socials?: { name: string, icon: string }[]
+}>(), {
+  bg: 'linear-gradient(to bottom right, #171717, #131313)',
+})
+</script>
+
+<template>
+  <div
+    class="relative h-full w-full flex items-center justify-center bg-neutral-900 text-white border-2 border-white"
+    :style="{ backgroundImage: bg }"
+  >
+    <div
+      v-if="image"
+      class="absolute inset-0 w-full h-full bg-center opacity-10"
+      :style="{ backgroundImage: `url(${image})` }"
+    />
+    <div class="flex flex-col items-center text-center">
+      <h1 class="flex gap-4 text-7xl font-bold">
+        <Icon
+          v-if="icon"
+          :name="icon"
+        />
+        {{ title }}
+      </h1>
+      <p class="text-2xl max-w-3xl">
+        {{ description }}
+      </p>
+    </div>
+
+    <img
+      v-if="logo"
+      :src="logo"
+      class="absolute bottom-0 left-0 p-5"
+      style="height: 125px; width: 153px;"
+    >
+    <div class="absolute bottom-5 right-5 flex gap-4">
+      <div
+        v-if="username"
+        class="absolute bottom-12 right-8 font-bold"
+      >
+        {{ username }}
+      </div>
+      <Icon
+        v-for="social of socials"
+        :key="social.name"
+        :name="social.icon!"
+        class="w-7 h-7"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/{components → nuxt/components}/Templates/Community/Nuxt.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 /**
  * @credits NuxtLabs <https://nuxtlabs.com/>
- * @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/OgImageDocs.vue
+ * @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/Docs.vue
  */
 import { computed } from 'vue'
 
@@ -11,7 +11,8 @@ const props = withDefaults(defineProps<{ title?: string, description?: string, h
   headline: 'headline',
 })
 
-const title = computed(() => props.title.slice(0, 60))
+const title = computed(() => (props.title || '').slice(0, 60))
+const description = computed(() => (props.description || '').slice(0, 200))
 </script>
 
 <template>
@@ -48,11 +49,11 @@ const title = computed(() => props.title.slice(0, 60))
       <p v-if="headline" class="uppercase text-[24px] text-[#00DC82] mb-4 font-semibold">
         {{ headline }}
       </p>
-      <h1 class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white flex items-center">
+      <h1 v-if="title" class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white flex items-center">
         <span>{{ title }}</span>
       </h1>
-      <p class="text-[32px] text-[#E4E4E7] leading-tight">
-        {{ description.slice(0, 200) }}
+      <p v-if="description" class="text-[32px] text-[#E4E4E7] leading-tight">
+        {{ description }}
       </p>
     </div>
     <svg

package/dist/runtime/{components → nuxt/components}/Templates/Community/NuxtSeo.vue

@@ -3,9 +3,9 @@
  * @credits Nuxt SEO <https://nuxtseo.com/>
  */
 
-import { computed, defineComponent, h, resolveComponent } from 'vue'
-import { useOgImageRuntimeConfig } from '../../../utils'
 import { useSiteConfig } from '#imports'
+import { useOgImageRuntimeConfig } from '#nuxt-og-image-utils'
+import { computed, defineComponent, h, resolveComponent } from 'vue'
 
 // convert to typescript props
 const props = withDefaults(defineProps<{
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<{
   title: 'title',
 })
 
-const HexRegex = /^#([0-9a-f]{3}){1,2}$/i
+const HexRegex = /^#(?:[0-9a-f]{3}){1,2}$/i
 
 const runtimeConfig = useOgImageRuntimeConfig()
 
@@ -78,13 +78,13 @@ const IconComponent = runtimeConfig.hasNuxtIcon
   ? resolveComponent('Icon')
   : defineComponent({
     render() {
-      return h('div', 'missing nuxt-icon')
+      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.')
+  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')
+  console.log('\nnpx nuxi module add icon\n')
   // create simple div renderer component
 }
 </script>
@@ -93,7 +93,7 @@ if (typeof props.icon === 'string' && !runtimeConfig.hasNuxtIcon && process.dev)
   <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'],
+      colorMode === 'light' ? ['bg-white', 'text-gray-900'] : ['bg-gray-900', 'text-white'],
     ]"
   >
     <div

package/dist/runtime/{components → nuxt/components}/Templates/Community/Pergel.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 /**
  * @credits Pergel <https://nuxtlabs.com/>
- * @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/OgImageDocs.vue
  */
 import { computed } from 'vue'
 
@@ -33,7 +32,7 @@ const title = computed(() => props.title.slice(0, 60))
 
     <div class="w-[600px] pl-[100px]">
       <p v-if="headline" class="uppercase text-[24px] text-[#FEC476] mb-4 font-semibold">
-        Oku - Pergel
+        {{ headline }}
       </p>
       <h1 class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white flex items-center">
         <span>{{ title }}</span>

package/dist/runtime/{components → nuxt/components}/Templates/Community/UnJs.vue

@@ -25,10 +25,10 @@ const org = computed(() => props.title.split('/')[0])
 const repo = computed(() => props.title.split('/')[1])
 
 const stars = computed(() => {
-  return new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' }).format(props.stars || 0)
+  return new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' }).format(Number(props.stars || 0))
 })
 const downloads = computed(() => new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' })
-  .format(props.downloads || 0),
+  .format(Number(props.downloads || 0)),
 )
 
 const description = computed(() => (props.description || '').slice(0, 200))

package/dist/runtime/{composables → nuxt/composables}/defineOgImage.d.ts

@@ -1,2 +1,2 @@
-import type { DefineOgImageInput } from '../types';
+import type { DefineOgImageInput } from '../../types.js';
 export declare function defineOgImage(_options?: DefineOgImageInput): void;

package/dist/runtime/{composables/defineOgImage.mjs → nuxt/composables/defineOgImage.js}

@@ -1,10 +1,9 @@
+import { useNuxtApp, useRequestEvent, useRoute } from "#imports";
 import { defu } from "defu";
 import { appendHeader } from "h3";
-import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
-import { withoutBase } from "ufo";
-import { getOgImagePath, separateProps, useOgImageRuntimeConfig, withoutQuery } from "../utils.mjs";
-import { createOgImageMeta, normaliseOptions } from "../nuxt/utils.mjs";
-import { useNuxtApp, useRequestEvent, useRoute, useRuntimeConfig } from "#imports";
+import { createNitroRouteRuleMatcher } from "../../nitro/util/kit.js";
+import { getOgImagePath, separateProps, useOgImageRuntimeConfig } from "../../shared.js";
+import { createOgImageMeta, normaliseOptions } from "../utils.js";
 export function defineOgImage(_options = {}) {
   if (!import.meta.server)
     return;
@@ -12,12 +11,8 @@ export function defineOgImage(_options = {}) {
   const ogImageInstances = nuxtApp.ssrContext._ogImageInstances || [];
   const route = useRoute();
   const basePath = route.path || "/";
-  const _routeRulesMatcher = toRouteMatcher(
-    createRadixRouter({ routes: useRuntimeConfig().nitro?.routeRules })
-  );
-  const routeRules = defu({}, ..._routeRulesMatcher.matchAll(
-    withoutBase(withoutQuery(basePath), useRuntimeConfig().app.baseURL)
-  ).reverse()).ogImage;
+  const routeRuleMatcher = createNitroRouteRuleMatcher();
+  const routeRules = routeRuleMatcher(basePath).ogImage;
   if (!_options || nuxtApp.ssrContext?.event.context._nitro?.routeRules?.ogImage === false || typeof routeRules !== "undefined" && routeRules === false) {
     ogImageInstances.forEach((e) => {
       e.dispose();
@@ -25,14 +20,16 @@ export function defineOgImage(_options = {}) {
     nuxtApp.ssrContext._ogImageInstances = void 0;
     return;
   }
-  const options = normaliseOptions({
+  const { defaults } = useOgImageRuntimeConfig();
+  const options = normaliseOptions(defu({
     ..._options
-  });
+  }, {
+    component: defaults.component
+  }));
   if (route.query)
     options._query = route.query;
-  const { defaults } = useOgImageRuntimeConfig();
   const resolvedOptions = normaliseOptions(defu(separateProps(_options), separateProps(routeRules), defaults));
-  if (_options.url) {
+  if (resolvedOptions.url) {
     createOgImageMeta(null, options, resolvedOptions, nuxtApp.ssrContext);
   } else {
     const path = getOgImagePath(basePath, resolvedOptions);

package/dist/runtime/{composables → nuxt/composables}/defineOgImageComponent.d.ts

@@ -1,3 +1,3 @@
-import type { ExtractComponentProps, OgImageOptions } from '../types';
 import type { OgImageComponents } from '#nuxt-og-image/components';
+import type { ExtractComponentProps, OgImageOptions } from '../../types.js';
 export declare function defineOgImageComponent<T extends keyof OgImageComponents>(component: T, props?: Partial<ExtractComponentProps<OgImageComponents[T]>>, options?: OgImageOptions): void;

package/dist/runtime/{composables/defineOgImageComponent.mjs → nuxt/composables/defineOgImageComponent.js}

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

package/dist/runtime/nuxt/composables/defineOgImageScreenshot.d.ts

@@ -0,0 +1,2 @@
+import type { OgImagePageScreenshotOptions } from '../../types.js';
+export declare function defineOgImageScreenshot(options?: OgImagePageScreenshotOptions): void;

package/dist/runtime/nuxt/composables/mock.d.ts

@@ -0,0 +1,5 @@
+import type { OgImageComponents } from '#nuxt-og-image/components';
+import type { DefineOgImageInput, ExtractComponentProps, OgImageOptions, OgImagePageScreenshotOptions } from '../../types.js';
+export declare function defineOgImage(_options?: DefineOgImageInput): void;
+export declare function defineOgImageComponent<T extends keyof OgImageComponents>(component: T, props?: Partial<ExtractComponentProps<OgImageComponents[T]>>, options?: OgImageOptions): void;
+export declare function defineOgImageScreenshot(options?: OgImagePageScreenshotOptions): void;

package/dist/runtime/nuxt/composables/mock.js

@@ -0,0 +1,6 @@
+export function defineOgImage(_options = {}) {
+}
+export function defineOgImageComponent(component, props = {}, options = {}) {
+}
+export function defineOgImageScreenshot(options = {}) {
+}

package/dist/runtime/nuxt/plugins/__zero-runtime/og-image-canonical-urls.server.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

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

@@ -0,0 +1,9 @@
+import { defineNuxtPlugin } from "#imports";
+import { ogImageCanonicalUrls as setup } from "../../utils/plugins.js";
+export default defineNuxtPlugin({
+  setup(nuxtApp) {
+    if (import.meta.dev || import.meta.prerender) {
+      setup(nuxtApp);
+    }
+  }
+});

package/dist/runtime/nuxt/plugins/__zero-runtime/route-rule-og-image.server.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

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

@@ -0,0 +1,9 @@
+import { defineNuxtPlugin } from "#imports";
+import { routeRuleOgImage as setup } from "../../utils/plugins.js";
+export default defineNuxtPlugin({
+  setup(nuxtApp) {
+    if (import.meta.dev || import.meta.prerender) {
+      setup(nuxtApp);
+    }
+  }
+});

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

@@ -1,2 +1,2 @@
-declare const _default: any;
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

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

@@ -0,0 +1,5 @@
+import { defineNuxtPlugin } from "#imports";
+import { ogImageCanonicalUrls as setup } from "../utils/plugins.js";
+export default defineNuxtPlugin({
+  setup
+});

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

@@ -1,2 +1,2 @@
-declare const _default: any;
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

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

@@ -0,0 +1,5 @@
+import { defineNuxtPlugin } from "#imports";
+import { routeRuleOgImage as setup } from "../utils/plugins.js";
+export default defineNuxtPlugin({
+  setup
+});

package/dist/runtime/nuxt/utils/plugins.d.ts

@@ -0,0 +1,3 @@
+import type { NuxtApp } from 'nuxt/app';
+export declare function ogImageCanonicalUrls(nuxtApp: NuxtApp): void;
+export declare function routeRuleOgImage(nuxtApp: NuxtApp): void;

package/dist/runtime/nuxt/utils/plugins.js

@@ -0,0 +1,87 @@
+import { useRequestEvent, withSiteUrl } from "#imports";
+import { defu } from "defu";
+import { parse, stringify } from "devalue";
+import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
+import { parseURL, withoutBase } from "ufo";
+import { toValue } from "vue";
+import { createOgImageMeta, normaliseOptions } from "../../nuxt/utils.js";
+import { isInternalRoute, separateProps } from "../../pure.js";
+import { getOgImagePath, useOgImageRuntimeConfig } from "../../shared.js";
+export function ogImageCanonicalUrls(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:overrides-and-canonical-urls",
+      hooks: {
+        "tags:resolve": async (ctx2) => {
+          const hasPrimaryPayload = ctx2.tags.some((tag) => tag.tag === "script" && tag.props.id === "nuxt-og-image-options");
+          let overrides;
+          for (const tag of ctx2.tags) {
+            if (tag.tag === "script" && tag.props.id === "nuxt-og-image-overrides") {
+              if (hasPrimaryPayload) {
+                overrides = separateProps(parse(tag.innerHTML || "{}"));
+                delete ctx2.tags[ctx2.tags.indexOf(tag)];
+              } else {
+                tag.props.id = "nuxt-og-image-options";
+                tag.innerHTML = stringify(separateProps(parse(tag.innerHTML || "{}")));
+                tag._d = "script:id:nuxt-og-image-options";
+              }
+              break;
+            }
+          }
+          ctx2.tags = ctx2.tags.filter(Boolean);
+          for (const tag of ctx2.tags) {
+            if (tag.tag === "meta" && (tag.props.property === "og:image" || ["twitter:image:src", "twitter:image"].includes(tag.props.name))) {
+              if (!tag.props.content.startsWith("https")) {
+                await nuxtApp.runWithContext(() => {
+                  tag.props.content = toValue(withSiteUrl(tag.props.content, {
+                    withBase: true
+                  }));
+                });
+              }
+            } else if (overrides && tag.tag === "script" && tag.props.id === "nuxt-og-image-options") {
+              tag.innerHTML = stringify(defu(overrides, parse(tag.innerHTML)));
+            }
+          }
+        }
+      }
+    });
+  });
+}
+export function routeRuleOgImage(nuxtApp) {
+  nuxtApp.hooks.hook("app:rendered", async (ctx) => {
+    const { ssrContext } = ctx;
+    const e = useRequestEvent();
+    const path = parseURL(e.path).pathname;
+    if (isInternalRoute(path))
+      return;
+    const _routeRulesMatcher = toRouteMatcher(
+      createRadixRouter({ routes: ssrContext?.runtimeConfig?.nitro?.routeRules })
+    );
+    let routeRules = defu({}, ..._routeRulesMatcher.matchAll(
+      withoutBase(path.split("?")[0], ssrContext?.runtimeConfig?.app.baseURL)
+    ).reverse()).ogImage;
+    if (typeof routeRules === "undefined")
+      return;
+    const ogImageInstances = nuxtApp.ssrContext._ogImageInstances || [];
+    if (routeRules === false) {
+      ogImageInstances?.forEach((e2) => {
+        e2.dispose();
+      });
+      nuxtApp.ssrContext._ogImagePayload = void 0;
+      nuxtApp.ssrContext._ogImageInstances = void 0;
+      return;
+    }
+    const { defaults } = useOgImageRuntimeConfig();
+    routeRules = normaliseOptions(defu(nuxtApp.ssrContext?.event.context._nitro?.routeRules?.ogImage, routeRules, {
+      component: defaults.component
+    }));
+    const resolvedOptions = normaliseOptions(defu(routeRules, defaults));
+    const src = getOgImagePath(ssrContext.url, resolvedOptions);
+    createOgImageMeta(src, routeRules, resolvedOptions, nuxtApp.ssrContext);
+  });
+}

package/dist/runtime/nuxt/utils.d.ts

@@ -1,3 +1,4 @@
-import type { DefineOgImageInput, OgImageOptions, OgImagePrebuilt } from '../types';
-export declare function createOgImageMeta(src: string | null, input: OgImageOptions | OgImagePrebuilt, resolvedOptions: OgImageOptions, ssrContext: Record<string, any>): void;
+import type { NuxtSSRContext } from 'nuxt/app';
+import type { DefineOgImageInput, OgImageOptions, OgImagePrebuilt } from '../types.js';
+export declare function createOgImageMeta(src: string | null, input: OgImageOptions | OgImagePrebuilt, resolvedOptions: OgImageOptions, ssrContext: NuxtSSRContext): void;
 export declare function normaliseOptions(_options: DefineOgImageInput): OgImageOptions | OgImagePrebuilt;

package/dist/runtime/nuxt/{utils.mjs → utils.js}

@@ -1,8 +1,10 @@
+import { componentNames } from "#build/nuxt-og-image/components.mjs";
+import { unref, useServerHead } from "#imports";
+import { resolveUnrefHeadInput } from "@unhead/vue";
 import { defu } from "defu";
+import { stringify } from "devalue";
 import { withQuery } from "ufo";
-import { getExtension, separateProps } from "../utils.mjs";
-import { unref, useServerHead } from "#imports";
-import { componentNames } from "#build/nuxt-og-image/components.mjs";
+import { getExtension, separateProps } from "../shared.js";
 export function createOgImageMeta(src, input, resolvedOptions, ssrContext) {
   const _input = separateProps(defu(input, ssrContext._ogImagePayload));
   let url = src || input.url || resolvedOptions.url;
@@ -41,10 +43,11 @@ export function createOgImageMeta(src, input, resolvedOptions, ssrContext) {
       type: "application/json",
       processTemplateParams: true,
       innerHTML: () => {
-        if (!_input.props.title)
-          _input.props.title = "%s";
-        delete _input.url;
-        return _input;
+        const payload = resolveUnrefHeadInput(_input);
+        if (typeof payload.props.title === "undefined")
+          payload.props.title = "%s";
+        delete payload.url;
+        return stringify(payload);
       },
       // we want this to be last in our head
       tagPosition: "bodyClose"
@@ -71,6 +74,8 @@ export function normaliseOptions(_options) {
         break;
       }
     }
+  } else if (!options.component) {
+    options.component = componentNames[0]?.pascalName;
   }
   return options;
 }

package/dist/runtime/{utils.pure.d.ts → pure.d.ts}

@@ -1,4 +1,5 @@
-import type { InputFontConfig, OgImageOptions, ResolvedFontConfig } from './types';
+import type { InputFontConfig, OgImageOptions, ResolvedFontConfig } from './types.js';
+export declare function toBase64Image(data: string | ArrayBuffer): string;
 export declare function isInternalRoute(path: string): boolean;
 export declare function separateProps(options: OgImageOptions | undefined, ignoreKeys?: string[]): {
     props: Record<string, any>;

package/dist/runtime/{utils.pure.mjs → pure.js}

@@ -1,7 +1,26 @@
 import { defu } from "defu";
+function detectBase64MimeType(data) {
+  const signatures = {
+    "R0lGODdh": "image/gif",
+    "R0lGODlh": "image/gif",
+    "iVBORw0KGgo": "image/png",
+    "/9j/": "image/jpeg",
+    "UklGR": "image/webp",
+    "AAABAA": "image/x-icon"
+  };
+  for (const s in signatures) {
+    if (data.indexOf(s) === 0)
+      return signatures[s];
+  }
+  return "image/svg+xml";
+}
+export function toBase64Image(data) {
+  const base64 = typeof data === "string" ? data : Buffer.from(data).toString("base64");
+  const type = detectBase64MimeType(base64);
+  return `data:${type};base64,${base64}`;
+}
 export function isInternalRoute(path) {
-  const lastSegment = path.split("/").pop() || path;
-  return lastSegment.includes(".") || path.startsWith("/__") || path.startsWith("@");
+  return path.startsWith("/_") || path.startsWith("@");
 }
 function filterIsOgImageOption(key) {
   const keys = [
@@ -49,7 +68,7 @@ export function normaliseFontInput(fonts) {
       return {
         cacheKey: f,
         name,
-        weight: weight || "400",
+        weight: weight || 400,
         style: "normal",
         path: void 0
       };

package/dist/runtime/{utils.d.ts → shared.d.ts}

@@ -1,4 +1,4 @@
-import type { OgImageOptions, OgImageRuntimeConfig } from './types';
-export * from './utils.pure';
+import type { OgImageOptions, OgImageRuntimeConfig } from './types.js';
+export * from './pure.js';
 export declare function getOgImagePath(pagePath: string, _options?: Partial<OgImageOptions>): string;
 export declare function useOgImageRuntimeConfig(): OgImageRuntimeConfig;

package/dist/runtime/{utils.mjs → shared.js}

@@ -1,10 +1,11 @@
-import { joinURL } from "ufo";
-import { defu } from "defu";
 import { useRuntimeConfig } from "#imports";
-export * from "./utils.pure.mjs";
+import { defu } from "defu";
+import { joinURL } from "ufo";
+export * from "./pure.js";
 export function getOgImagePath(pagePath, _options) {
+  const baseURL = useRuntimeConfig().app.baseURL;
   const options = defu(_options, useOgImageRuntimeConfig().defaults);
-  return joinURL("/__og-image__/image", pagePath, `og.${options.extension}`);
+  return joinURL("/", baseURL, `__og-image__/${import.meta.prerender ? "static" : "image"}`, pagePath, `og.${options.extension}`);
 }
 export function useOgImageRuntimeConfig() {
   return useRuntimeConfig()["nuxt-og-image"];