nuxt-og-image 3.0.0-rc.5 → 3.0.0-rc.50

package/dist/runtime/{core/html/applyInlineCss.d.ts → nitro/og-image/satori/transforms/inlineCss.d.ts}

@@ -1,3 +1,3 @@
 import type { NuxtIslandResponse } from 'nuxt/dist/core/runtime/nitro/renderer';
-import type { OgImageRenderEventContext } from '../../types';
+import type { OgImageRenderEventContext } from '../../../../types';
 export declare function applyInlineCss({ e }: OgImageRenderEventContext, island: NuxtIslandResponse): Promise<boolean>;

package/dist/runtime/nitro/og-image/satori/transforms/inlineCss.mjs

@@ -0,0 +1,41 @@
+import { useCssInline } from "../instances.mjs";
+import { useNitroOrigin } from "#imports";
+import cssInline from "#nuxt-og-image/bindings/css-inline";
+export async function applyInlineCss({ e }, island) {
+  let html = island.html;
+  if (!cssInline.__unenv__) {
+    let css = island.head.style.map((s) => s.innerHTML).join("\n");
+    const componentInlineStyles = island.head.link.filter((l) => l.href.startsWith("/_nuxt/components"));
+    if (process.dev) {
+      const linksToCss = componentInlineStyles.length ? (await Promise.all(
+        componentInlineStyles.map((l) => {
+          const url = l.href.endsWith("lang.css") ? `${l.href}&hmr=false` : l.href;
+          return e.$fetch(url, {
+            responseType: "text",
+            baseURL: useNitroOrigin(e)
+          }).then((res) => {
+            if (res.includes("__vite__css"))
+              return res.match(/__vite__css = "([^"]+)"/)?.[1];
+            return res.trim().split("\n").filter((l2) => !l2.startsWith("//")).join("\n").trim();
+          }).catch(() => {
+            return "";
+          });
+        })
+      )).join("\n") : "";
+      css = `${linksToCss}${css}`;
+    }
+    if (!css.trim().length)
+      return false;
+    const cssInline2 = await useCssInline();
+    html = cssInline2.inline(island.html, {
+      loadRemoteStylesheets: false,
+      extraCss: css
+    });
+    const classes = css.match(/\.([a-zA-Z0-9-_]+)/g)?.map((c) => c.replace(".", ""));
+    if (classes)
+      html = html.replace(new RegExp(`class="(${classes.join("|")})"`, "g"), "");
+    island.html = html;
+    return true;
+  }
+  return false;
+}

package/dist/runtime/{core/renderers → nitro/og-image}/satori/vnodes.mjs

@@ -1,28 +1,30 @@
 import { html as convertHtmlToSatori } from "satori-html";
-import { fetchIsland } from "../../html/fetchIsland.mjs";
-import { applyInlineCss } from "../../html/applyInlineCss.mjs";
-import { applyEmojis } from "../../html/applyEmojis.mjs";
+import { fetchIsland } from "../../util/kit.mjs";
+import { htmlDecodeQuotes } from "../../util/encoding.mjs";
+import { applyInlineCss } from "./transforms/inlineCss.mjs";
+import { applyEmojis } from "./transforms/emojis.mjs";
 import { walkSatoriTree } from "./utils.mjs";
 import unocss from "./plugins/unocss.mjs";
 import emojis from "./plugins/emojis.mjs";
-import twClasses from "./plugins/twClasses.mjs";
+import classes from "./plugins/classes.mjs";
 import imageSrc from "./plugins/imageSrc.mjs";
 import flex from "./plugins/flex.mjs";
 import encoding from "./plugins/encoding.mjs";
 export async function createVNodes(ctx) {
   let html = ctx.options.html;
   if (!html) {
-    const island = await fetchIsland(ctx);
+    const island = await fetchIsland(ctx.e, ctx.options.component, typeof ctx.options.props !== "undefined" ? ctx.options.props : ctx.options);
+    island.html = htmlDecodeQuotes(island.html);
     await applyInlineCss(ctx, island);
     await applyEmojis(ctx, island);
     html = island.html;
   }
-  const template = `<div data-v-inspector-ignore="true" style="position: relative; display: flex; margin: 0 auto; width: ${ctx.options.width}px; height: ${ctx.options.height}px; overflow: hidden;">${html}</div>`;
+  const template = `<div style="position: relative; display: flex; margin: 0 auto; width: ${ctx.options.width}px; height: ${ctx.options.height}px; overflow: hidden;">${html}</div>`;
   const satoriTree = convertHtmlToSatori(template);
   await walkSatoriTree(ctx, satoriTree, [
     unocss,
     emojis,
-    twClasses,
+    classes,
     imageSrc,
     flex,
     encoding

package/dist/runtime/nitro/og-image/templates/html.d.ts

@@ -0,0 +1,2 @@
+import type { OgImageRenderEventContext } from '../../../types';
+export declare function html(ctx: OgImageRenderEventContext): Promise<string>;

package/dist/runtime/{core/html/devIframeTemplate.mjs → nitro/og-image/templates/html.mjs}

@@ -1,21 +1,29 @@
 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 { createError } from "h3";
+import { normaliseFontInput, useOgImageRuntimeConfig } from "../../../shared.mjs";
+import { fetchIsland } from "../../util/kit.mjs";
+import { applyEmojis } from "../satori/transforms/emojis.mjs";
 import { theme } from "#nuxt-og-image/unocss-config.mjs";
-export async function devIframeTemplate(ctx) {
+export async function html(ctx) {
   const { options } = ctx;
   const { fonts } = useOgImageRuntimeConfig();
-  const island = await fetchIsland(ctx);
+  if (!options.component) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `[Nuxt OG Image] Rendering an invalid component. Received options: ${JSON.stringify(options)}.`
+    });
+  }
+  const island = await fetchIsland(ctx.e, ctx.options.component, typeof ctx.options.props !== "undefined" ? ctx.options.props : ctx.options);
   const head = createHeadCore();
   head.push(island.head);
   let defaultFontFamily = "sans-serif";
-  const firstFont = fonts[0];
+  const normalisedFonts = normaliseFontInput([...options.fonts || [], ...fonts]);
+  const firstFont = normalisedFonts[0];
   if (firstFont)
     defaultFontFamily = firstFont.name;
   await applyEmojis(ctx, island);
-  let html = island.html;
+  let html2 = island.html;
   const googleFonts = {};
   fonts.filter((font) => !font.path).forEach((font) => {
     if (!googleFonts[font.name])
@@ -98,11 +106,11 @@ svg[data-emoji] {
       })
     ]
   });
-  html = html.replaceAll(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
+  html2 = html2.replaceAll(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
   const headChunk = await renderSSRHead(head);
   return `<!DOCTYPE html>
 <html ${headChunk.htmlAttrs}>
 <head>${headChunk.headTags}</head>
-<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div data-v-inspector-ignore="true" style="position: relative; display: flex; margin: 0 auto; width: ${options.width}px; height: ${options.height}px; overflow: hidden;">${html}</div>${headChunk.bodyTags}</body>
+<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div data-v-inspector-ignore="true" style="position: relative; display: flex; margin: 0 auto; width: ${options.width}px; height: ${options.height}px; overflow: hidden;">${html2}</div>${headChunk.bodyTags}</body>
 </html>`;
 }

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

@@ -1,15 +1,18 @@
 import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
 import { defu } from "defu";
-import { getOgImagePath, useOgImageRuntimeConfig } from "../../utils.mjs";
+import { getOgImagePath, useOgImageRuntimeConfig } from "../../shared.mjs";
 export default defineNitroPlugin((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)
+      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,

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

@@ -1,2 +1,2 @@
-declare const _default: import("nitropack").NitroAppPlugin;
+declare const _default: import("nitropack/dist/runtime/plugin").NitroAppPlugin;
 export default _default;

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

@@ -1,12 +1,9 @@
-import { parseURL, withoutBase } from "ufo";
+import { parseURL } 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 { prerenderOptionsCache } from "../../core/cache/prerender.mjs";
-import { isInternalRoute } from "../../utils.pure.mjs";
-import { resolvePathCacheKey } from "../utils.mjs";
-import { useRuntimeConfig } from "#internal/nitro";
+import { extractAndNormaliseOgImageOptions, resolvePathCacheKey } from "../og-image/context.mjs";
+import { prerenderOptionsCache } from "../og-image/cache.mjs";
+import { isInternalRoute } from "../../pure.mjs";
+import { createNitroRouteRuleMatcher } from "../util/kit.mjs";
 export default defineNitroPlugin(async (nitro) => {
   if (!import.meta.prerender)
     return;
@@ -15,14 +12,9 @@ export default defineNitroPlugin(async (nitro) => {
     const path = parseURL(ctx.event.path).pathname;
     if (isInternalRoute(path))
       return;
-    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)
+    const routeRuleMatcher = createNitroRouteRuleMatcher();
+    const routeRules = routeRuleMatcher(path);
+    if (routeRules.ogImage === false)
       return;
     const options = extractAndNormaliseOgImageOptions([
       head.join("\n"),

package/dist/runtime/{server/routes/__og-image__ → nitro/routes}/debug.json.d.ts

@@ -1,6 +1,6 @@
 declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<{
     componentNames: any;
-    runtimeConfig: import("../../../types").OgImageRuntimeConfig;
+    runtimeConfig: import("../../types").OgImageRuntimeConfig;
     compatibility: any;
 }>>;
 export default _default;

package/dist/runtime/{server/routes/__og-image__ → nitro/routes}/debug.json.mjs

@@ -1,5 +1,5 @@
 import { defineEventHandler, setHeader } from "h3";
-import { useOgImageRuntimeConfig } from "../../../utils.mjs";
+import { useOgImageRuntimeConfig } from "../../shared.mjs";
 import compatibility from "#nuxt-og-image/compatibility";
 import { componentNames } from "#nuxt-og-image/component-names.mjs";
 export default defineEventHandler(async (e) => {

package/dist/runtime/{server/routes/__og-image__/font-[name]-[weight].[extension].mjs → nitro/routes/font.mjs}

@@ -1,5 +1,6 @@
-import { createError, defineEventHandler, proxyRequest, sendRedirect } from "h3";
+import { createError, defineEventHandler, getQuery, proxyRequest, sendRedirect } from "h3";
 import { parseURL } from "ufo";
+import { normaliseFontInput, useOgImageRuntimeConfig } from "../../shared.mjs";
 export default defineEventHandler(async (e) => {
   const path = parseURL(e.path).pathname;
   const [_name, _weight] = path.split("/font/")[1].split(".")[0].split("/");
@@ -7,6 +8,22 @@ export default defineEventHandler(async (e) => {
     return "Provide a font name and weight";
   const name = _name[0].toUpperCase() + _name.slice(1);
   const weight = Math.round(Number.parseInt(_weight) / 100) * 100;
+  const config = useOgImageRuntimeConfig();
+  const normalisedFonts = normaliseFontInput(config.fonts);
+  let font;
+  if (typeof getQuery(e).font === "string")
+    font = JSON.parse(getQuery(e).font);
+  if (!font) {
+    font = normalisedFonts.find((font2) => {
+      return font2.name.toLowerCase() === name.toLowerCase() && weight === Number(font2.weight);
+    });
+  }
+  if (!font) {
+    return createError({
+      statusCode: 404,
+      statusMessage: `[Nuxt OG Image] Font ${name}:${weight} not found`
+    });
+  }
   const css = await globalThis.$fetch(`https://fonts.googleapis.com/css2?family=${name}:wght@${weight}`, {
     headers: {
       // Make sure it returns TTF.

package/dist/runtime/{server/routes/__og-image__ → nitro/routes}/image.mjs

@@ -1,12 +1,10 @@
 import { H3Error, createError, defineEventHandler, getQuery, setHeader } from "h3";
-import { resolveRendererContext } from "../../../core/utils/resolveRendererContext.mjs";
-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 { useOgImageRuntimeConfig } from "../../../utils.mjs";
+import { useOgImageBufferCache } from "../util/cache.mjs";
+import { useOgImageRuntimeConfig } from "../../shared.mjs";
+import { resolveContext } from "../og-image/context.mjs";
+import { html } from "../og-image/templates/html.mjs";
 export default defineEventHandler(async (e) => {
-  const ctx = await resolveRendererContext(e);
+  const ctx = await resolveContext(e);
   if (ctx instanceof H3Error)
     return ctx;
   const { isDebugJsonPayload, extension, options, renderer } = ctx;
@@ -18,10 +16,11 @@ export default defineEventHandler(async (e) => {
       compatibilityHints.push("Converting PNGs to JPEGs requires Sharp which only runs on Node based systems.");
     if (options.renderer === "chromium")
       compatibilityHints.push("Using Chromium to generate images is only supported in Node based environments. It's recommended to only use this if you're prerendering");
-    if (options.component !== "PageScreenshot" && await applyInlineCss(ctx, await fetchIsland(ctx)))
-      compatibilityHints.push("Inlining CSS is only supported in Node based environments.");
     setHeader(e, "Content-Type", "application/json");
     return {
+      siteConfig: {
+        url: e.context.siteConfig.get().url
+      },
       compatibilityHints,
       cacheKey: ctx.key,
       options: ctx.options,
@@ -31,7 +30,7 @@ export default defineEventHandler(async (e) => {
   switch (extension) {
     case "html":
       setHeader(e, "Content-Type", `text/html`);
-      return devIframeTemplate(ctx);
+      return html(ctx);
     case "svg":
       if (!debug && !import.meta.dev) {
         return createError({

package/dist/runtime/nitro/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json"
+}

package/dist/runtime/{cache.d.ts → nitro/util/cache.d.ts}

@@ -1,5 +1,5 @@
 import { type H3Error } from 'h3';
-import type { OgImageRenderEventContext } from './types';
+import type { OgImageRenderEventContext } from '../../types';
 export declare function useOgImageBufferCache(ctx: OgImageRenderEventContext, options: {
     baseCacheKey: string | false;
     cacheMaxAgeSeconds?: number;

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

@@ -0,0 +1,3 @@
+export declare function htmlDecodeQuotes(html: string): string;
+export declare function decodeHtml(html: string): string;
+export declare function decodeObjectHtmlEntities(obj: Record<string, string | any>): Record<string, any>;

package/dist/runtime/nitro/util/encoding.mjs

@@ -0,0 +1,15 @@
+export function htmlDecodeQuotes(html) {
+  return html.replace(/"/g, '"').replace(/'/g, "'").replace(/'/g, "'");
+}
+export function decodeHtml(html) {
+  return html.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&cent;/g, "\xA2").replace(/&pound;/g, "\xA3").replace(/&yen;/g, "\xA5").replace(/&euro;/g, "\u20AC").replace(/&copy;/g, "\xA9").replace(/&reg;/g, "\xAE").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/").replace(/&#([0-9]+);/g, (full, int) => {
+    return String.fromCharCode(Number.parseInt(int));
+  });
+}
+export function decodeObjectHtmlEntities(obj) {
+  Object.entries(obj).forEach(([key, value]) => {
+    if (typeof value === "string")
+      obj[key] = decodeHtml(value);
+  });
+  return obj;
+}

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

@@ -0,0 +1,6 @@
+import type { NitroRouteRules } from 'nitropack';
+import type { H3Event } from 'h3';
+import type { NuxtIslandResponse } from 'nuxt/dist/core/runtime/nitro/renderer';
+export declare function fetchIsland(e: H3Event, component: string, props: Record<string, any>): Promise<NuxtIslandResponse>;
+export declare function withoutQuery(path: string): string;
+export declare function createNitroRouteRuleMatcher(): ((path: string) => NitroRouteRules);

package/dist/runtime/nitro/util/kit.mjs

@@ -0,0 +1,32 @@
+import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
+import { defu } from "defu";
+import { withoutBase, withoutTrailingSlash } from "ufo";
+import { hash } from "ohash";
+import { useRuntimeConfig } from "#imports";
+export function fetchIsland(e, component, props) {
+  const hashId = hash([component, props]);
+  return e.$fetch(`/__nuxt_island/${component}_${hashId}.json`, {
+    params: {
+      props: JSON.stringify(props)
+    }
+  });
+}
+export function withoutQuery(path) {
+  return path.split("?")[0];
+}
+export function createNitroRouteRuleMatcher() {
+  const { nitro, app } = useRuntimeConfig();
+  const _routeRulesMatcher = toRouteMatcher(
+    createRadixRouter({
+      routes: Object.fromEntries(
+        Object.entries(nitro?.routeRules || {}).map(([path, rules]) => [withoutTrailingSlash(path), rules])
+      )
+    })
+  );
+  return (path) => {
+    return defu({}, ..._routeRulesMatcher.matchAll(
+      // radix3 does not support trailing slashes
+      withoutBase(withoutTrailingSlash(withoutQuery(path)), app.baseURL)
+    ).reverse());
+  };
+}

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

@@ -1,5 +1,5 @@
-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">>, {
+import type { OgImageOptions } from '../../../types';
+declare const _default: import("vue").DefineComponent<OgImageOptions<"NuxtSeo">, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OgImageOptions<"NuxtSeo">>, {
     props?: any;
 }, {}>;
 export default _default;

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

@@ -1,5 +1,5 @@
-import type { OgImagePageScreenshotOptions } from '../../types';
-declare const _default: import("vue").DefineComponent<OgImagePageScreenshotOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<OgImagePageScreenshotOptions>, {
+import type { OgImagePageScreenshotOptions } from '../../../types';
+declare const _default: import("vue").DefineComponent<OgImagePageScreenshotOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OgImagePageScreenshotOptions>, {
     props?: 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/NuxtSeo.vue

@@ -4,7 +4,7 @@
  */
 
 import { computed, defineComponent, h, resolveComponent } from 'vue'
-import { useOgImageRuntimeConfig } from '../../../utils'
+import { useOgImageRuntimeConfig } from '../../../../shared'
 import { useSiteConfig } from '#imports'
 
 // convert to typescript props

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';
 export declare function defineOgImage(_options?: DefineOgImageInput): void;

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

@@ -1,10 +1,9 @@
 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 { getOgImagePath, separateProps, useOgImageRuntimeConfig } from "../../shared.mjs";
+import { createOgImageMeta, normaliseOptions } from "../utils.mjs";
+import { createNitroRouteRuleMatcher } from "../../nitro/util/kit.mjs";
+import { useNuxtApp, useRequestEvent, useRoute } from "#imports";
 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();

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 import { parseURL } from "ufo";
 import { toValue } from "vue";
 import { defu } from "defu";
-import { isInternalRoute, separateProps } from "../../utils.pure.mjs";
+import { isInternalRoute, separateProps } from "../../pure.mjs";
 import { defineNuxtPlugin, useRequestEvent, withSiteUrl } from "#imports";
 export default defineNuxtPlugin({
   setup(nuxtApp) {
@@ -15,20 +15,29 @@ export default defineNuxtPlugin({
         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") {
-                overrides = separateProps(JSON.parse(tag.innerHTML || "{}"));
-                delete ctx2.tags[ctx2.tags.indexOf(tag)];
+                if (hasPrimaryPayload) {
+                  overrides = separateProps(JSON.parse(tag.innerHTML || "{}"));
+                  delete ctx2.tags[ctx2.tags.indexOf(tag)];
+                } else {
+                  tag.props.id = "nuxt-og-image-options";
+                  tag.innerHTML = JSON.stringify(separateProps(JSON.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" || tag.props.name === "twitter:image:src")) {
+              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));
+                    tag.props.content = toValue(withSiteUrl(tag.props.content, {
+                      withBase: true
+                    }));
                   });
                 }
               } else if (overrides && tag.tag === "script" && tag.props.id === "nuxt-og-image-options") {

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

@@ -1,7 +1,7 @@
 import { defu } from "defu";
 import { parseURL, withoutBase } from "ufo";
 import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
-import { getOgImagePath, isInternalRoute, useOgImageRuntimeConfig } from "../../utils.mjs";
+import { getOgImagePath, isInternalRoute, useOgImageRuntimeConfig } from "../../shared.mjs";
 import { createOgImageMeta, normaliseOptions } from "../utils.mjs";
 import { defineNuxtPlugin, useRequestEvent } from "#imports";
 export default defineNuxtPlugin((nuxtApp) => {

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

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

@@ -1,6 +1,6 @@
 import { defu } from "defu";
 import { withQuery } from "ufo";
-import { getExtension, separateProps } from "../utils.mjs";
+import { getExtension, separateProps } from "../shared.mjs";
 import { unref, useServerHead } from "#imports";
 import { componentNames } from "#build/nuxt-og-image/components.mjs";
 export function createOgImageMeta(src, input, resolvedOptions, ssrContext) {

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

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