npm - nuxt-og-image - Versions diffs - 3.0.0-rc.3 → 3.0.0-rc.31 - Mend

nuxt-og-image 3.0.0-rc.3 → 3.0.0-rc.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (385) hide show

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

@@ -1,7 +1,8 @@
 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";
@@ -12,12 +13,13 @@ 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,

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

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 RENAMED Viewed

@@ -1,10 +1,6 @@
 declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<{
-    siteConfigUrl: {
-        value: any;
-        source: any;
-    };
     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 RENAMED Viewed

@@ -1,17 +1,11 @@
 import { defineEventHandler, setHeader } from "h3";
-import { useOgImageRuntimeConfig } from "../../../utils.mjs";
-import { useSiteConfig } from "#imports";
+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) => {
   setHeader(e, "Content-Type", "application/json");
   const runtimeConfig = useOgImageRuntimeConfig();
-  const siteConfig = await useSiteConfig(e, { debug: true });
   return {
-    siteConfigUrl: {
-      value: siteConfig.url,
-      source: siteConfig._context.url || "unknown"
-    },
     componentNames,
     runtimeConfig,
     compatibility

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

@@ -1,10 +1,29 @@
-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("/");
-  if (!name || !weight)
+  const [_name, _weight] = path.split("/font/")[1].split(".")[0].split("/");
+  if (!_name || !_weight)
     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 RENAMED Viewed

@@ -1,13 +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 { useSiteConfig } from "#imports";
+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;
@@ -19,21 +16,21 @@ 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,
-      siteConfig: useSiteConfig(e),
       ...options.renderer === "satori" ? await renderer.debug(ctx) : void 0
     };
   }
   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 ADDED Viewed

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,15 @@
+export function htmlDecodeQuotes(html) {
+  return html.replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 RENAMED Viewed

@@ -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 RENAMED Viewed

@@ -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/{components → nuxt/components}/Templates/Community/NuxtSeo.vue RENAMED Viewed

@@ -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
@@ -117,7 +117,7 @@ if (typeof props.icon === 'string' && !runtimeConfig.hasNuxtIcon && process.dev)
             {{ description }}
           </p>
         </div>
-        <div v-if="icon" style="width: 30%;" class="flex justify-end">
+        <div v-if="Boolean(icon)" style="width: 30%;" class="flex justify-end">
           <IconComponent :name="icon" size="250px" style="margin: 0 auto; opacity: 0.7;" />
         </div>
       </div>

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

@@ -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 RENAMED Viewed

@@ -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 RENAMED Viewed

@@ -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 } 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(basePath.split("?")[0], 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 RENAMED Viewed

@@ -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 RENAMED Viewed

@@ -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.d.ts ADDED Viewed

File without changes

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

@@ -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 CHANGED Viewed

@@ -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,11 +15,18 @@ 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;
               }
             }

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,14 +1,16 @@
 import { defu } from "defu";
 import { withQuery } from "ufo";
-import { 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) {
   const _input = separateProps(defu(input, ssrContext._ogImagePayload));
   let url = src || input.url || resolvedOptions.url;
-  if (input._query && url)
+  if (!url)
+    return;
+  if (input._query && Object.keys(input._query).length && url)
     url = withQuery(url, { _query: input._query });
-  let urlExtension = (url.split("/").pop() || url).split(".").pop() || resolvedOptions.extension;
+  let urlExtension = getExtension(url) || resolvedOptions.extension;
   if (urlExtension === "jpg")
     urlExtension = "jpeg";
   const meta = [

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

@@ -1,6 +1,9 @@
 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>;
 };
 export declare function normaliseFontInput(fonts: InputFontConfig[]): ResolvedFontConfig[];
+export declare function withoutQuery(path: string): string;
+export declare function getExtension(path: string): string;

package/dist/runtime/{utils.pure.mjs → pure.mjs} RENAMED Viewed

@@ -1,4 +1,14 @@
 import { defu } from "defu";
+export function toBase64Image(fileName, data) {
+  const base64 = typeof data === "string" ? data : Buffer.from(data).toString("base64");
+  let type = "image/jpeg";
+  const ext = fileName.split(".").pop();
+  if (ext === "svg")
+    type = "image/svg+xml";
+  else if (ext === "png")
+    type = "image/png";
+  return `data:${type};base64,${base64}`;
+}
 export function isInternalRoute(path) {
   const lastSegment = path.split("/").pop() || path;
   return lastSegment.includes(".") || path.startsWith("/__") || path.startsWith("@");
@@ -49,7 +59,7 @@ export function normaliseFontInput(fonts) {
       return {
         cacheKey: f,
         name,
-        weight: weight || "400",
+        weight: weight || 400,
         style: "normal",
         path: void 0
       };
@@ -62,3 +72,11 @@ export function normaliseFontInput(fonts) {
     };
   });
 }
+export function withoutQuery(path) {
+  return path.split("?")[0];
+}
+export function getExtension(path) {
+  path = withoutQuery(path);
+  const lastSegment = path.split("/").pop() || path;
+  return lastSegment.split(".").pop() || lastSegment;
+}

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

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

package/dist/runtime/{utils.mjs → shared.mjs} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { joinURL } from "ufo";
 import { defu } from "defu";
 import { useRuntimeConfig } from "#imports";
-export * from "./utils.pure.mjs";
+export * from "./pure.mjs";
 export function getOgImagePath(pagePath, _options) {
   const options = defu(_options, useOgImageRuntimeConfig().defaults);
   return joinURL("/__og-image__/image", pagePath, `og.${options.extension}`);

package/dist/runtime/types.d.ts CHANGED Viewed

@@ -28,6 +28,7 @@ export interface OgImageRuntimeConfig {
     fonts: FontConfig[];
     hasNuxtIcon: boolean;
     colorPreference: 'light' | 'dark';
+    isNuxtContentDocumentDriven: boolean;
 }
 export interface OgImageComponent {
     path?: string;
@@ -60,7 +61,7 @@ export interface ScreenshotOptions {
 }
 export type OgImagePrebuilt = {
     url: string;
-} & Pick<OgImageOptions, 'width' | 'height' | 'alt'>;
+} & Pick<OgImageOptions, 'width' | 'height' | 'alt' | '_query'>;
 export type DefineOgImageInput = OgImageOptions | OgImagePrebuilt | false;
 export interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
     /**
@@ -113,6 +114,7 @@ export interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
 }
 export interface FontConfig {
     name: string;
+    style?: string;
     weight?: string | number;
     path?: string;
     key?: string;
@@ -123,8 +125,8 @@ export interface ResolvedFontConfig extends FontConfig {
 }
 export type InputFontConfig = (`${string}:${number}` | string | FontConfig);
 export interface RuntimeCompatibilitySchema {
-    chromium: 'node' | false;
-    ['css-inline']: 'node' | false;
+    chromium: 'chrome-launcher' | 'on-demand' | 'playwright' | false;
+    ['css-inline']: 'node' | 'wasm' | 'wasm-fs' | false;
     resvg: 'node' | 'wasm' | 'wasm-fs' | false;
     satori: 'node' | 'wasm' | 'wasm-fs' | false;
     sharp: 'node' | false;
@@ -152,3 +154,7 @@ export interface SatoriTransformer {
     filter: (node: VNode) => boolean;
     transform: (node: VNode, e: OgImageRenderEventContext) => Promise<void>;
 }
+export interface SocialPreviewMetaData {
+    twitter?: Record<string, string>;
+    og?: Record<string, string>;
+}