nuxt-og-image 5.1.13 → 6.0.0-beta.1

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

@@ -1,18 +1,52 @@
 import { componentNames } from "#og-image-virtual/component-names.mjs";
+import { createError } from "h3";
 export function normaliseOptions(_options) {
   const options = { ..._options };
-  if (!options)
-    return options;
+  let resolved;
+  if (options.component === "PageScreenshot") {
+    return {
+      options,
+      renderer: options.renderer || "chromium",
+      component: void 0
+    };
+  }
   if (options.component && componentNames) {
     const originalName = options.component;
     for (const component of componentNames) {
-      if (component.pascalName.endsWith(originalName) || component.kebabName.endsWith(originalName)) {
+      const basePascalName = component.pascalName.replace(/(Satori|Chromium|Takumi)$/, "");
+      const baseKebabName = component.kebabName.replace(/-(satori|chromium|takumi)$/, "");
+      if (basePascalName.endsWith(originalName) || baseKebabName.endsWith(originalName)) {
         options.component = component.pascalName;
+        resolved = component;
         break;
       }
     }
-  } else if (!options.component) {
-    options.component = componentNames[0]?.pascalName;
   }
-  return options;
+  if (!resolved && options.component) {
+    resolved = componentNames.find((c) => c.pascalName === options.component);
+  }
+  if (!resolved) {
+    resolved = componentNames[0];
+    options.component = resolved?.pascalName;
+  }
+  if (!resolved) {
+    throw createError({
+      statusCode: 500,
+      message: `[Nuxt OG Image] No OG Image components found. Create a component in components/OgImage/ with a renderer suffix (e.g., Default.satori.vue)`
+    });
+  }
+  if (resolved.category === "community") {
+    if (!import.meta.dev) {
+      throw createError({
+        statusCode: 500,
+        message: `Community template "${resolved.pascalName}" must be ejected before production use. Run: npx nuxt-og-image eject ${resolved.pascalName}`
+      });
+    }
+  }
+  const renderer = options.renderer || resolved.renderer;
+  return {
+    options,
+    renderer,
+    component: resolved
+  };
 }

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

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

package/dist/runtime/server/utils.js

@@ -1,17 +1,21 @@
 import { useRuntimeConfig } from "nitropack/runtime";
-import { joinURL, withQuery } from "ufo";
-export function getOgImagePath(pagePath, _options) {
+import { joinURL } from "ufo";
+import { buildOgImageUrl } from "../shared.js";
+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;
+  const { defaults } = useOgImageRuntimeConfig();
+  const extension = _options?.extension || defaults.extension;
+  const isStatic = import.meta.prerender;
+  const result = buildOgImageUrl({ ..._options, _path: _pagePath }, extension, isStatic, defaults);
+  return {
+    path: joinURL("/", baseURL, result.url),
+    hash: result.hash
+  };
 }
 export function useOgImageRuntimeConfig(e) {
   const c = useRuntimeConfig(e);
   return {
+    defaults: {},
     ...c["nuxt-og-image"],
     app: {
       baseURL: c.app.baseURL

package/dist/runtime/shared/urlEncoding.d.ts

@@ -0,0 +1,64 @@
+/**
+ * URL encoding for OG image options (Cloudinary/IPX style)
+ *
+ * Format: /_og/s/w_1200,h_630,c_NuxtSeo,title_Hello+World.png
+ *
+ * When the encoded path exceeds MAX_PATH_LENGTH (200 chars), falls back to hash mode:
+ * Format: /_og/s/o_<hash>.png
+ *
+ * - Known OgImageOptions use short aliases (w, h, c, etc.)
+ * - Component props are encoded directly (title_Hello)
+ * - Complex objects are base64 encoded JSON
+ */
+/**
+ * Generate a deterministic hash from options object
+ * Excludes _path so images with same options can be cached across pages
+ * Optionally includes componentHash and version for cache busting
+ */
+export declare function hashOgImageOptions(options: Record<string, any>, componentHash?: string, version?: string): string;
+/**
+ * Encode OG image options into a URL path segment
+ * @param options - The options to encode
+ * @param defaults - Optional defaults to skip (values matching defaults won't be encoded)
+ * @example encodeOgImageParams({ width: 1200, props: { title: 'Hello' } })
+ * // Returns: "w_1200,title_Hello"
+ */
+export declare function encodeOgImageParams(options: Record<string, any>, defaults?: Record<string, any>): string;
+/**
+ * Decode URL path segment back into OG image options
+ * @example decodeOgImageParams("w_1200,title_Hello")
+ * // Returns: { width: 1200, props: { title: 'Hello' } }
+ */
+export declare function decodeOgImageParams(encoded: string): Record<string, any>;
+export interface BuildOgImageUrlResult {
+    url: string;
+    hash?: string;
+}
+/**
+ * Build full OG image URL
+ *
+ * When encoded params exceed MAX_PATH_LENGTH, falls back to hash mode:
+ * - Returns short path: /_og/s/o_<hash>.png
+ * - Returns hash in result for cache storage
+ *
+ * @param options - The options to encode
+ * @param extension - Image extension (png, jpeg, etc.)
+ * @param isStatic - Whether this is a static/prerendered image
+ * @param defaults - Optional defaults to skip from URL (keeps URLs shorter)
+ * @example buildOgImageUrl({ width: 1200, props: { title: 'Hello' } }, 'png', true)
+ * // Returns: { url: "/_og/s/w_1200,title_Hello.png" }
+ */
+export declare function buildOgImageUrl(options: Record<string, any>, extension?: string, isStatic?: boolean, defaults?: Record<string, any>): BuildOgImageUrlResult;
+/**
+ * Parse OG image URL back into options
+ * @example parseOgImageUrl("/_og/s/w_1200,h_630.png")
+ * // Returns: { options: { width: 1200, height: 630 }, extension: 'png', isStatic: true, hash: undefined }
+ * @example parseOgImageUrl("/_og/s/o_abc123.png")
+ * // Returns: { options: {}, extension: 'png', isStatic: true, hash: 'abc123' }
+ */
+export declare function parseOgImageUrl(url: string): {
+    options: Record<string, any>;
+    extension: string;
+    isStatic: boolean;
+    hash?: string;
+};

package/dist/runtime/shared/urlEncoding.js

@@ -0,0 +1,194 @@
+const MAX_PATH_LENGTH = 200;
+const PARAM_ALIASES = {
+  w: "width",
+  h: "height",
+  c: "component",
+  em: "emojis",
+  k: "key",
+  a: "alt",
+  u: "url",
+  cache: "cacheMaxAgeSeconds",
+  p: "_path",
+  // page path - needs alias since _path starts with underscore
+  q: "_query"
+  // query params - needs alias since _query starts with underscore
+};
+const PARAM_TO_ALIAS = Object.fromEntries(
+  Object.entries(PARAM_ALIASES).map(([alias, param]) => [param, alias])
+);
+const KNOWN_PARAMS = /* @__PURE__ */ new Set([
+  "width",
+  "height",
+  "component",
+  "emojis",
+  "key",
+  "alt",
+  "url",
+  "cacheMaxAgeSeconds",
+  "extension",
+  "html",
+  "satori",
+  "resvg",
+  "sharp",
+  "screenshot",
+  "fonts",
+  "_query",
+  "socialPreview",
+  "props",
+  "_path"
+]);
+const COMPLEX_PARAMS = /* @__PURE__ */ new Set(["satori", "resvg", "sharp", "screenshot", "fonts", "_query", "_path"]);
+function b64Encode(str) {
+  if (typeof btoa === "function") {
+    const utf8 = new TextEncoder().encode(str);
+    const binary = String.fromCharCode(...utf8);
+    return btoa(binary).replace(/=/g, "");
+  }
+  return Buffer.from(str, "utf8").toString("base64").replace(/=/g, "");
+}
+function b64Decode(str) {
+  const padded = str + "=".repeat((4 - str.length % 4) % 4);
+  if (typeof atob === "function") {
+    const binary = atob(padded);
+    const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
+    return new TextDecoder().decode(bytes);
+  }
+  return Buffer.from(padded, "base64").toString("utf8");
+}
+function simpleHash(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash).toString(36);
+}
+export function hashOgImageOptions(options, componentHash, version) {
+  const { _path, _hash, ...hashableOptions } = options;
+  const hashInput = componentHash || version ? [hashableOptions, componentHash || "", version || ""] : hashableOptions;
+  return simpleHash(JSON.stringify(hashInput));
+}
+export function encodeOgImageParams(options, defaults) {
+  const parts = [];
+  const flattened = {};
+  for (const [key, value] of Object.entries(options)) {
+    if (key === "props" && typeof value === "object") {
+      for (const [propKey, propValue] of Object.entries(value)) {
+        if (typeof propValue === "string" || typeof propValue === "number" || typeof propValue === "boolean") {
+          flattened[propKey] = propValue;
+        } else {
+          flattened.props = flattened.props || {};
+          flattened.props[propKey] = propValue;
+        }
+      }
+    } else {
+      flattened[key] = value;
+    }
+  }
+  for (const [key, value] of Object.entries(flattened)) {
+    if (value === void 0 || value === null)
+      continue;
+    if (key === "extension" || key === "socialPreview")
+      continue;
+    if (defaults && key in defaults && defaults[key] === value)
+      continue;
+    const alias = PARAM_TO_ALIAS[key] || key;
+    if (COMPLEX_PARAMS.has(key)) {
+      const b64 = b64Encode(JSON.stringify(value));
+      parts.push(`${alias}_${b64}`);
+    } else if (typeof value === "object") {
+      const b64 = b64Encode(JSON.stringify(value));
+      parts.push(`${alias}_${b64}`);
+    } else {
+      const encoded = encodeURIComponent(String(value).replace(/_/g, "__")).replace(/%20/g, "+");
+      parts.push(`${alias}_${encoded}`);
+    }
+  }
+  return parts.join(",");
+}
+export function decodeOgImageParams(encoded) {
+  if (!encoded || encoded === "default")
+    return {};
+  const options = {};
+  const parts = encoded.split(",");
+  for (const part of parts) {
+    const idx = part.search(/(?<!_)_(?!_)/);
+    if (idx === -1)
+      continue;
+    const alias = part.slice(0, idx);
+    let value = part.slice(idx + 1);
+    const paramName = PARAM_ALIASES[alias] || alias;
+    if (COMPLEX_PARAMS.has(paramName)) {
+      try {
+        const json = b64Decode(value);
+        options[paramName] = JSON.parse(json);
+      } catch {
+        options[paramName] = value;
+      }
+    } else if (paramName === "props") {
+      try {
+        const json = b64Decode(value);
+        options.props = { ...options.props, ...JSON.parse(json) };
+      } catch {
+      }
+    } else if (KNOWN_PARAMS.has(paramName)) {
+      value = decodeURIComponent(value.replace(/\+/g, "%20")).replace(/__/g, "_");
+      if (value === "true") {
+        options[paramName] = true;
+      } else if (value === "false") {
+        options[paramName] = false;
+      } else {
+        const num = Number(value);
+        options[paramName] = Number.isNaN(num) ? value : num;
+      }
+    } else {
+      value = decodeURIComponent(value.replace(/\+/g, "%20")).replace(/__/g, "_");
+      options.props = options.props || {};
+      if (value === "true") {
+        options.props[paramName] = true;
+      } else if (value === "false") {
+        options.props[paramName] = false;
+      } else {
+        const num = Number(value);
+        options.props[paramName] = Number.isNaN(num) ? value : num;
+      }
+    }
+  }
+  return options;
+}
+export function buildOgImageUrl(options, extension = "png", isStatic = false, defaults) {
+  const encoded = encodeOgImageParams(options, defaults);
+  const prefix = isStatic ? "/_og/s" : "/_og/d";
+  if (encoded.length > MAX_PATH_LENGTH) {
+    const hash = hashOgImageOptions(options);
+    return {
+      url: `${prefix}/o_${hash}.${extension}`,
+      hash
+    };
+  }
+  return {
+    url: encoded ? `${prefix}/${encoded}.${extension}` : `${prefix}/default.${extension}`
+  };
+}
+export function parseOgImageUrl(url) {
+  const isStatic = url.includes("/_og/s/");
+  const path = url.replace(/^\/_og\/[ds]\//, "");
+  const extMatch = path.match(/\.(\w+)$/);
+  const extension = extMatch?.[1] || "png";
+  const encoded = path.replace(/\.\w+$/, "");
+  const hashMatch = encoded.match(/^o_([a-z0-9]+)$/i);
+  if (hashMatch) {
+    return {
+      options: {},
+      extension,
+      isStatic,
+      hash: hashMatch[1]
+    };
+  }
+  return {
+    options: decodeOgImageParams(encoded),
+    extension,
+    isStatic
+  };
+}

package/dist/runtime/shared.d.ts

@@ -1,15 +1,10 @@
 import type { ResolvableMeta } from '@unhead/vue';
-import type { InputFontConfig, OgImageOptions, OgImagePrebuilt, ResolvedFontConfig } from './types.js';
+import type { OgImageOptions, OgImagePrebuilt } from './types.js';
+export { extractSocialPreviewTags } from './pure.js';
+export { buildOgImageUrl, decodeOgImageParams, encodeOgImageParams, hashOgImageOptions, parseOgImageUrl } from './shared/urlEncoding.js';
 export declare function generateMeta(url: OgImagePrebuilt['url'] | string, resolvedOptions: OgImageOptions | OgImagePrebuilt): ResolvableMeta[];
 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 separateProps(options: OgImageOptions | undefined, ignoreKeys?: string[]): OgImageOptions;
 export declare function withoutQuery(path: string): string | undefined;
 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,25 +1,38 @@
 import { defu } from "defu";
 import { toValue } from "vue";
+export { extractSocialPreviewTags } from "./pure.js";
+export { buildOgImageUrl, decodeOgImageParams, encodeOgImageParams, hashOgImageOptions, parseOgImageUrl } from "./shared/urlEncoding.js";
 export function generateMeta(url, resolvedOptions) {
-  const meta = [
-    { property: "og:image", content: url },
-    { property: "og:image:type", content: () => `image/${getExtension(toValue(url)) || resolvedOptions.extension}` },
-    { name: "twitter:card", content: "summary_large_image" },
-    // we don't need this but avoids issue when using useSeoMeta({ twitterImage })
-    { name: "twitter:image", content: url },
-    { name: "twitter:image:src", content: url }
-  ];
+  const key = resolvedOptions.key || "og";
+  const isTwitterOnly = key === "twitter";
+  const includeTwitter = key === "og" || key === "twitter";
+  const meta = [];
+  if (!isTwitterOnly) {
+    meta.push({ property: "og:image", content: url });
+    meta.push({ property: "og:image:type", content: () => `image/${getExtension(toValue(url)) || resolvedOptions.extension}` });
+  }
+  if (includeTwitter) {
+    meta.push({ name: "twitter:card", content: "summary_large_image" });
+    meta.push({ name: "twitter:image", content: url });
+    meta.push({ name: "twitter:image:src", content: url });
+  }
   if (resolvedOptions.width) {
-    meta.push({ property: "og:image:width", content: resolvedOptions.width });
-    meta.push({ name: "twitter:image:width", content: resolvedOptions.width });
+    if (!isTwitterOnly)
+      meta.push({ property: "og:image:width", content: resolvedOptions.width });
+    if (includeTwitter)
+      meta.push({ name: "twitter:image:width", content: resolvedOptions.width });
   }
   if (resolvedOptions.height) {
-    meta.push({ property: "og:image:height", content: resolvedOptions.height });
-    meta.push({ name: "twitter:image:height", content: resolvedOptions.height });
+    if (!isTwitterOnly)
+      meta.push({ property: "og:image:height", content: resolvedOptions.height });
+    if (includeTwitter)
+      meta.push({ name: "twitter:image:height", content: resolvedOptions.height });
   }
   if (resolvedOptions.alt) {
-    meta.push({ property: "og:image:alt", content: resolvedOptions.alt });
-    meta.push({ name: "twitter:image:alt", content: resolvedOptions.alt });
+    if (!isTwitterOnly)
+      meta.push({ property: "og:image:alt", content: resolvedOptions.alt });
+    if (includeTwitter)
+      meta.push({ name: "twitter:image:alt", content: resolvedOptions.alt });
   }
   return meta;
 }
@@ -53,20 +66,21 @@ function filterIsOgImageOption(key) {
     "extension",
     "width",
     "height",
-    "fonts",
     "alt",
     "props",
     "renderer",
+    // internal use only (screenshots)
     "html",
     "component",
-    "renderer",
     "emojis",
     "_query",
+    "_hash",
     "satori",
     "resvg",
     "sharp",
     "screenshot",
-    "cacheMaxAgeSeconds"
+    "cacheMaxAgeSeconds",
+    "key"
   ];
   return keys.includes(key);
 }
@@ -86,36 +100,6 @@ export function separateProps(options, ignoreKeys = []) {
     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];
 }
@@ -127,6 +111,3 @@ export function getExtension(path) {
     return "jpeg";
   return extension;
 }
-export function useOgImageRuntimeConfig() {
-  return {};
-}