nuxt-og-image 5.1.6 → 5.1.8

package/dist/runtime/server/og-image/context.js

@@ -11,11 +11,12 @@ import { useNitroApp } from "nitropack/runtime";
 import { hash } from "ohash";
 import { parseURL, withoutLeadingSlash, withoutTrailingSlash, withQuery } from "ufo";
 import { normalizeKey } from "unstorage";
-import { separateProps, useOgImageRuntimeConfig } from "../../shared.js";
+import { separateProps } from "../../shared.js";
 import { decodeObjectHtmlEntities } from "../util/encoding.js";
 import { createNitroRouteRuleMatcher } from "../util/kit.js";
 import { logger } from "../util/logger.js";
 import { normaliseOptions } from "../util/options.js";
+import { useOgImageRuntimeConfig } from "../utils.js";
 import { useChromiumRenderer, useSatoriRenderer } from "./instances.js";
 export function resolvePathCacheKey(e, path) {
   const siteConfig = useSiteConfig(e, {
@@ -248,16 +249,17 @@ async function fetchPathHtmlAndExtractOptions(e, path, key) {
   }
   if (!_payload) {
     const payload2 = extractAndNormaliseOgImageOptions(html);
-    if (payload2?.socialPreview?.og?.image) {
+    if (payload2 && typeof payload2 === "object" && payload2.socialPreview?.og?.image) {
+      const image = payload2.socialPreview.og.image;
       const p = {
         custom: true,
-        url: payload2.socialPreview.og.image
+        url: typeof image === "string" ? image : image
       };
-      if (payload2.socialPreview.og.image["image:width"]) {
-        p.width = payload2.socialPreview.og.image["image:width"];
+      if (typeof image === "object" && image["image:width"]) {
+        p.width = image["image:width"];
       }
-      if (payload2.socialPreview.og.image["image:height"]) {
-        p.height = payload2.socialPreview.og.image["image:height"];
+      if (typeof image === "object" && image["image:height"]) {
+        p.height = image["image:height"];
       }
       return p;
     }
@@ -274,5 +276,8 @@ async function fetchPathHtmlAndExtractOptions(e, path, key) {
       value: payload
     });
   }
-  return payload;
+  return typeof payload === "object" ? payload : createError({
+    statusCode: 500,
+    statusMessage: "[Nuxt OG Image] Invalid payload type."
+  });
 }

package/dist/runtime/server/og-image/satori/font.js

@@ -1,4 +1,5 @@
-import { useNitroOrigin, useStorage } from "#imports";
+import { useNitroOrigin } from "#site-config/server/composables";
+import { useStorage } from "nitropack/runtime";
 import { prefixStorage } from "unstorage";
 export const assets = prefixStorage(useStorage(), "/assets");
 export async function loadFont({ e, publicStoragePath }, font) {
@@ -11,7 +12,7 @@ export async function loadFont({ e, publicStoragePath }, font) {
       const decoder = new TextDecoder();
       fontData = decoder.decode(fontData);
     }
-    font.data = Buffer.from(fontData, "base64");
+    font.data = Buffer.from(String(fontData), "base64");
     return font;
   }
   let data;
@@ -19,7 +20,7 @@ export async function loadFont({ e, publicStoragePath }, font) {
     if (import.meta.dev || import.meta.prerender) {
       const key = `${publicStoragePath}${font.path.replace("./", ":").replace("/", ":")}`;
       if (await useStorage().hasItem(key))
-        data = await useStorage().getItemRaw(key);
+        data = await useStorage().getItemRaw(key) || void 0;
     } else {
       data = await e.$fetch(font.path, {
         baseURL: useNitroOrigin(e),

package/dist/runtime/server/og-image/satori/plugins/flex.js

@@ -43,7 +43,7 @@ export default defineSatoriTransformer({
     }
     if (node.type === "div") {
       node.props.style.display = "flex";
-      if (!node.props?.class?.includes("flex-") && node.props.children.some((child) => BLOCK_ELEMENTS.includes(child.type))) {
+      if (!node.props?.class?.includes("flex-") && Array.isArray(node.props.children) && node.props.children.some((child) => BLOCK_ELEMENTS.includes(child.type))) {
         node.props.style.flexDirection = "column";
         return;
       }

package/dist/runtime/server/og-image/satori/plugins/imageSrc.js

@@ -1,7 +1,8 @@
-import { useNitroOrigin, useStorage } from "#imports";
+import { useNitroOrigin } from "#site-config/server/composables/useNitroOrigin";
 import sizeOf from "image-size";
+import { useStorage } from "nitropack/runtime/storage";
 import { withBase, withoutLeadingSlash } from "ufo";
-import { toBase64Image } from "../../../../pure.js";
+import { toBase64Image } from "../../../../shared.js";
 import { decodeHtml } from "../../../util/encoding.js";
 import { logger } from "../../../util/logger.js";
 import { defineSatoriTransformer } from "../utils.js";
@@ -41,8 +42,10 @@ export default defineSatoriTransformer([
             });
           }
         }
-        if (imageBuffer)
-          node.props.src = toBase64Image(imageBuffer);
+        if (imageBuffer) {
+          const buffer = imageBuffer instanceof ArrayBuffer ? imageBuffer : imageBuffer.buffer;
+          node.props.src = toBase64Image(buffer);
+        }
       } else if (!src.startsWith("data:")) {
         src = decodeHtml(src);
         node.props.src = src;
@@ -71,7 +74,8 @@ export default defineSatoriTransformer([
       }
       if (typeof node.props.src === "string" && node.props.src.startsWith("/")) {
         if (imageBuffer) {
-          node.props.src = toBase64Image(imageBuffer);
+          const buffer = imageBuffer instanceof ArrayBuffer ? imageBuffer : imageBuffer.buffer;
+          node.props.src = toBase64Image(buffer);
         } else {
           node.props.src = `${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()}`;
         }
@@ -90,7 +94,8 @@ export default defineSatoriTransformer([
           const srcWithoutBase = src.replace(runtimeConfig.app.baseURL, "/");
           const imageBuffer = await resolveLocalFilePathImage(publicStoragePath, srcWithoutBase);
           if (imageBuffer) {
-            const base64 = toBase64Image(Buffer.from(imageBuffer));
+            const buffer = imageBuffer instanceof ArrayBuffer ? imageBuffer : imageBuffer.buffer;
+            const base64 = toBase64Image(buffer);
             node.props.style.backgroundImage = `url(${base64})`;
           }
         } else {

package/dist/runtime/server/og-image/satori/renderer.js

@@ -3,7 +3,8 @@ import { theme } from "#og-image-virtual/unocss-config.mjs";
 import compatibility from "#og-image/compatibility";
 import { defu } from "defu";
 import { sendError } from "h3";
-import { normaliseFontInput, useOgImageRuntimeConfig } from "../../../shared.js";
+import { normaliseFontInput } from "../../../shared.js";
+import { useOgImageRuntimeConfig } from "../../utils.js";
 import { loadFont } from "./font.js";
 import { useResvg, useSatori, useSharp } from "./instances.js";
 import { createVNodes } from "./vnodes.js";
@@ -16,7 +17,7 @@ async function resolveFonts(event) {
   if (fontCache) {
     for (const font of normalisedFonts) {
       if (await fontCache.hasItem(font.cacheKey)) {
-        font.data = await fontCache.getItemRaw(font.cacheKey);
+        font.data = await fontCache.getItemRaw(font.cacheKey) || void 0;
         preloadedFonts.push(font);
       } else {
         if (!fontPromises[font.cacheKey]) {
@@ -58,6 +59,8 @@ export async function createSvg(event) {
 async function createPng(event) {
   const { resvgOptions } = useOgImageRuntimeConfig();
   const svg = await createSvg(event);
+  if (!svg)
+    throw new Error("Failed to create SVG");
   const Resvg = await useResvg();
   const resvg = new Resvg(svg, defu(
     event.options.resvg,

package/dist/runtime/server/og-image/satori/transforms/emojis.d.ts

@@ -1,3 +1,3 @@
-import type { NuxtIslandResponse } from 'nuxt/dist/core/runtime/nitro/renderer';
+import type { NuxtIslandResponse } from 'nuxt/app';
 import type { OgImageRenderEventContext } from '../../../../types.js';
-export declare function applyEmojis(ctx: OgImageRenderEventContext, island: NuxtIslandResponse): Promise<any>;
+export declare function applyEmojis(ctx: OgImageRenderEventContext, island: NuxtIslandResponse): Promise<string | boolean>;

package/dist/runtime/server/og-image/satori/transforms/inlineCss.d.ts

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

package/dist/runtime/server/og-image/satori/transforms/inlineCss.js

@@ -1,4 +1,4 @@
-import { useNitroOrigin } from "#imports";
+import { useNitroOrigin } from "#site-config/server/composables/useNitroOrigin";
 import { createConsola } from "consola";
 import { useCssInline } from "../instances.js";
 export async function applyInlineCss(ctx, island) {
@@ -11,7 +11,7 @@ export async function applyInlineCss(ctx, island) {
   }
   let linksToCss = [];
   if (import.meta.dev) {
-    linksToCss = componentInlineStyles.length ? (await Promise.all(
+    const cssResults = 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, {
@@ -19,14 +19,15 @@ export async function applyInlineCss(ctx, island) {
           baseURL: useNitroOrigin(e)
         }).then((res) => {
           if (res.includes("__vite__css"))
-            return res.match(/__vite__css = "([^"]+)"/)?.[1];
+            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].join("\n");
+    ) : [];
+    linksToCss = cssResults;
+    css = [linksToCss.join("\n"), css].join("\n");
   }
   if (!css.trim().length)
     return false;

package/dist/runtime/server/og-image/templates/html.js

@@ -2,8 +2,9 @@ import { theme } from "#og-image-virtual/unocss-config.mjs";
 import { createHeadCore } from "@unhead/vue";
 import { renderSSRHead } from "@unhead/vue/server";
 import { createError } from "h3";
-import { normaliseFontInput, useOgImageRuntimeConfig } from "../../../shared.js";
+import { normaliseFontInput } from "../../../shared.js";
 import { fetchIsland } from "../../util/kit.js";
+import { useOgImageRuntimeConfig } from "../../utils.js";
 import { applyEmojis } from "../satori/transforms/emojis.js";
 export async function html(ctx) {
   const { options } = ctx;

package/dist/runtime/server/plugins/__zero-runtime/nuxt-content-v2.d.ts

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

package/dist/runtime/server/plugins/__zero-runtime/nuxt-content-v2.js

@@ -1,4 +1,4 @@
-import { defineNitroPlugin } from "#imports";
+import { defineNitroPlugin } from "nitropack/runtime";
 import { nuxtContentPlugin } from "../../util/plugins.js";
 export default defineNitroPlugin((nitroApp) => {
   if (import.meta.dev || import.meta.prerender) {

package/dist/runtime/server/plugins/nuxt-content-v2.d.ts

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

package/dist/runtime/server/plugins/nuxt-content-v2.js

@@ -1,4 +1,4 @@
-import { defineNitroPlugin } from "#imports";
+import { defineNitroPlugin } from "nitropack/runtime";
 import { nuxtContentPlugin } from "../util/plugins.js";
 export default defineNitroPlugin((nitroApp) => {
   nuxtContentPlugin(nitroApp);

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

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

package/dist/runtime/server/plugins/prerender.js

@@ -1,8 +1,8 @@
-import { defineNitroPlugin } from "#imports";
 import { prerenderOptionsCache } from "#og-image-cache";
 import { createSitePathResolver } from "#site-config/server/composables/utils";
+import { defineNitroPlugin } from "nitropack/runtime";
 import { parseURL } from "ufo";
-import { isInternalRoute } from "../../pure.js";
+import { isInternalRoute } from "../../shared.js";
 import { extractAndNormaliseOgImageOptions, resolvePathCacheKey } from "../og-image/context.js";
 import { createNitroRouteRuleMatcher } from "../util/kit.js";
 export default defineNitroPlugin(async (nitro) => {

package/dist/runtime/server/routes/debug.json.js

@@ -1,8 +1,8 @@
-import { useSiteConfig } from "#imports";
 import { componentNames } from "#og-image-virtual/component-names.mjs";
 import compatibility from "#og-image/compatibility";
+import { useSiteConfig } from "#site-config/server/composables/useSiteConfig";
 import { defineEventHandler, setHeader } from "h3";
-import { useOgImageRuntimeConfig } from "../../shared.js";
+import { useOgImageRuntimeConfig } from "../utils.js";
 export default defineEventHandler(async (e) => {
   setHeader(e, "Content-Type", "application/json");
   const runtimeConfig = useOgImageRuntimeConfig();

package/dist/runtime/server/util/cache.js

@@ -1,11 +1,11 @@
-import { useStorage } from "#imports";
 import { createError, getQuery, handleCacheHeaders, setHeader, setHeaders } from "h3";
+import { useStorage } from "nitropack/runtime";
 import { hash } from "ohash";
 import { withTrailingSlash } from "ufo";
 import { prefixStorage } from "unstorage";
 export async function useOgImageBufferCache(ctx, options) {
   const maxAge = Number(options.cacheMaxAgeSeconds);
-  let enabled = !import.meta.dev && import.meta.env.MODE !== "test" && maxAge > 0;
+  let enabled = !import.meta.dev && import.meta.env?.MODE !== "test" && maxAge > 0;
   const cache = prefixStorage(useStorage(), withTrailingSlash(options.baseCacheKey || "/"));
   const key = ctx.key;
   let cachedItem = false;

package/dist/runtime/server/util/eventHandlers.js

@@ -1,9 +1,10 @@
 import { createError, getQuery, H3Error, proxyRequest, sendRedirect, setHeader, setResponseHeader } from "h3";
 import { parseURL } from "ufo";
-import { normaliseFontInput, useOgImageRuntimeConfig } from "../../shared.js";
+import { normaliseFontInput } from "../../shared.js";
 import { resolveContext } from "../og-image/context.js";
 import { assets } from "../og-image/satori/font.js";
 import { html } from "../og-image/templates/html.js";
+import { useOgImageRuntimeConfig } from "../utils.js";
 import { useOgImageBufferCache } from "./cache.js";
 export async function fontEventHandler(e) {
   const path = parseURL(e.path).pathname;

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

@@ -1,6 +1,6 @@
 import type { H3Event } from 'h3';
 import type { NitroRouteRules } from 'nitropack';
-import type { NuxtIslandResponse } from 'nuxt/dist/core/runtime/nitro/renderer';
+import type { NuxtIslandResponse } from 'nuxt/app';
 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/server/util/kit.js

@@ -1,5 +1,5 @@
-import { useRuntimeConfig } from "#imports";
 import { defu } from "defu";
+import { useRuntimeConfig } from "nitropack/runtime";
 import { hash } from "ohash";
 import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
 import { withoutBase, withoutTrailingSlash } from "ufo";

package/dist/runtime/server/util/plugins.js

@@ -1,7 +1,8 @@
 import { defu } from "defu";
 import { stringify } from "devalue";
 import { withQuery } from "ufo";
-import { generateMeta, getOgImagePath, useOgImageRuntimeConfig } from "../../shared.js";
+import { generateMeta } from "../../shared.js";
+import { getOgImagePath, useOgImageRuntimeConfig } from "../utils.js";
 import { normaliseOptions } from "./options.js";
 export function nuxtContentPlugin(nitroApp) {
   const { isNuxtContentDocumentDriven, strictNuxtContentPaths, defaults } = useOgImageRuntimeConfig();

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

@@ -0,0 +1,4 @@
+import type { OgImageOptions, OgImageRuntimeConfig } from '#og-image/types';
+import type { H3Event } from 'h3';
+export declare function getOgImagePath(pagePath: string, _options?: Partial<OgImageOptions>): string;
+export declare function useOgImageRuntimeConfig(e?: H3Event): OgImageRuntimeConfig;

package/dist/runtime/server/utils.js

@@ -0,0 +1,20 @@
+import { useRuntimeConfig } from "nitropack/runtime";
+import { joinURL, withQuery } from "ufo";
+export function getOgImagePath(pagePath, _options) {
+  const baseURL = useRuntimeConfig().app.baseURL;
+  const extension = _options?.extension || useOgImageRuntimeConfig().defaults.extension;
+  const path = joinURL("/", baseURL, `__og-image__/${import.meta.prerender ? "static" : "image"}`, pagePath, `og.${extension}`);
+  if (Object.keys(_options?._query || {}).length) {
+    return withQuery(path, _options._query);
+  }
+  return path;
+}
+export function useOgImageRuntimeConfig(e) {
+  const c = useRuntimeConfig(e);
+  return {
+    ...c["nuxt-og-image"],
+    app: {
+      baseURL: c.app.baseURL
+    }
+  };
+}

package/dist/runtime/shared.d.ts

@@ -1,6 +1,15 @@
 import type { ResolvableMeta } from '@unhead/vue';
-import type { OgImageOptions, OgImagePrebuilt, OgImageRuntimeConfig } from './types.js';
-export * from './pure.js';
+import type { InputFontConfig, OgImageOptions, OgImagePrebuilt, ResolvedFontConfig } from './types.js';
 export declare function generateMeta(url: OgImagePrebuilt['url'] | string, resolvedOptions: OgImageOptions | OgImagePrebuilt): ResolvableMeta[];
-export declare function getOgImagePath(pagePath: string, _options?: Partial<OgImageOptions>): string;
-export declare function useOgImageRuntimeConfig(): OgImageRuntimeConfig;
+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>;
+};
+export declare function normaliseFontInput(fonts: InputFontConfig[]): ResolvedFontConfig[];
+export declare function withoutQuery(path: string): string;
+export declare function getExtension(path: string): string;
+/**
+ * @deprecated Please use `#og-image/app/utils` instead.
+ */
+export declare function useOgImageRuntimeConfig(): {};

package/dist/runtime/shared.js

@@ -1,8 +1,5 @@
-import { useRuntimeConfig } from "#imports";
-import { joinURL, withQuery } from "ufo";
+import { defu } from "defu";
 import { toValue } from "vue";
-import { getExtension } from "./pure.js";
-export * from "./pure.js";
 export function generateMeta(url, resolvedOptions) {
   const meta = [
     { property: "og:image", content: url },
@@ -26,21 +23,110 @@ export function generateMeta(url, resolvedOptions) {
   }
   return meta;
 }
-export function getOgImagePath(pagePath, _options) {
-  const baseURL = useRuntimeConfig().app.baseURL;
-  const extension = _options?.extension || useOgImageRuntimeConfig().defaults.extension;
-  const path = joinURL("/", baseURL, `__og-image__/${import.meta.prerender ? "static" : "image"}`, pagePath, `og.${extension}`);
-  if (Object.keys(_options?._query || {}).length) {
-    return withQuery(path, _options._query);
+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.startsWith(s)) {
+      return signatures[s];
+    }
   }
-  return path;
+  return "image/svg+xml";
 }
-export function useOgImageRuntimeConfig() {
-  const c = useRuntimeConfig();
+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) {
+  return path.startsWith("/_") || path.startsWith("@");
+}
+function filterIsOgImageOption(key) {
+  const keys = [
+    "url",
+    "extension",
+    "width",
+    "height",
+    "fonts",
+    "alt",
+    "props",
+    "renderer",
+    "html",
+    "component",
+    "renderer",
+    "emojis",
+    "_query",
+    "satori",
+    "resvg",
+    "sharp",
+    "screenshot",
+    "cacheMaxAgeSeconds"
+  ];
+  return keys.includes(key);
+}
+export function separateProps(options, ignoreKeys = []) {
+  options = options || {};
+  const _props = defu(options.props, Object.fromEntries(
+    Object.entries({ ...options }).filter(([k]) => !filterIsOgImageOption(k) && !ignoreKeys.includes(k))
+  ));
+  const props = {};
+  Object.entries(_props).forEach(([key, val]) => {
+    props[key.replace(/-([a-z])/g, (g) => g[1].toUpperCase())] = val;
+  });
   return {
-    ...c["nuxt-og-image"],
-    app: {
-      baseURL: c.app.baseURL
-    }
+    ...Object.fromEntries(
+      Object.entries({ ...options }).filter(([k]) => filterIsOgImageOption(k) || ignoreKeys.includes(k))
+    ),
+    props
   };
 }
+export function normaliseFontInput(fonts) {
+  return fonts.map((f) => {
+    if (typeof f === "string") {
+      const vals = f.split(":");
+      const includesStyle = vals.length === 3;
+      let name, weight, style;
+      if (includesStyle) {
+        name = vals[0];
+        style = vals[1];
+        weight = vals[2];
+      } else {
+        name = vals[0];
+        weight = vals[1];
+      }
+      return {
+        cacheKey: f,
+        name,
+        weight: weight || 400,
+        style: style || "normal",
+        path: void 0
+      };
+    }
+    return {
+      cacheKey: f.key || `${f.name}:${f.style}:${f.weight}`,
+      style: "normal",
+      weight: 400,
+      ...f
+    };
+  });
+}
+export function withoutQuery(path) {
+  return path.split("?")[0];
+}
+export function getExtension(path) {
+  path = withoutQuery(path);
+  const lastSegment = path.split("/").pop() || path;
+  const extension = lastSegment.split(".").pop() || lastSegment;
+  if (extension === "jpg")
+    return "jpeg";
+  return extension;
+}
+export function useOgImageRuntimeConfig() {
+  return {};
+}

package/dist/runtime/types.d.ts

@@ -119,6 +119,11 @@ export interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
     sharp?: SharpOptions & JpegOptions;
     fonts?: InputFontConfig[];
     cacheMaxAgeSeconds?: number;
+    /**
+     * Social preview metadata
+     * @internal
+     */
+    socialPreview?: SocialPreviewMetaData;
     /**
      * @internal
      */
@@ -169,5 +174,14 @@ export interface SatoriTransformer {
 }
 export interface SocialPreviewMetaData {
     twitter?: Record<string, string>;
-    og?: Record<string, string>;
+    og?: Record<string, string> & {
+        image?: string | {
+            'image:width'?: string | number;
+            'image:height'?: string | number;
+            [key: string]: any;
+        };
+    };
+}
+export interface RouteRulesOgImage extends Partial<OgImageOptions> {
+    [key: string]: any;
 }