nuxt-og-image 6.10.3 → 7.0.0

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

@@ -1,12 +1,17 @@
-import { appendResponseHeader, createError, getRequestHost, H3Error, setHeader } from "#nuxtseo/h3";
+import { appendResponseHeader, createError, getRequestHost, H3Error, sendRedirect, setHeader } from "#nuxtseo/h3";
+import { useStorage } from "#nuxtseo/nitro";
 import { getSiteConfig } from "#site-config/server/composables/getSiteConfig";
 import { logger } from "../../logger.js";
 import { getBuildCachedImage, setBuildCachedImage } from "../og-image/cache/buildCache.js";
+import { getPublishedImage, getPublishKey, publishImage } from "../og-image/cache/publish.js";
+import { getPublishedImageCache, getPublishedImageCacheKey } from "../og-image/cache/published.js";
 import { resolveContext } from "../og-image/context.js";
 import { fetchPathHtmlAndExtractOptions } from "../og-image/devtools.js";
 import { html } from "../og-image/templates/html.js";
 import { useOgImageRuntimeConfig } from "../utils.js";
 import { useOgImageBufferCache } from "./cache.js";
+import { warnPublishUnavailable } from "./publishWarnings.js";
+import { getEventQuery } from "./query.js";
 export async function imageEventHandler(e) {
   const reqStart = performance.now();
   const ctx = await resolveContext(e).catch((err) => {
@@ -29,7 +34,8 @@ export async function imageEventHandler(e) {
 async function renderOgImage(e, ctx) {
   const timings = ctx.timings;
   const { isDevToolsContextRequest, extension, renderer } = ctx;
-  const { debug, baseCacheKey, security } = useOgImageRuntimeConfig(e);
+  const config = useOgImageRuntimeConfig(e);
+  const { debug, baseCacheKey, security, publish } = config;
   if (!import.meta.prerender && !import.meta.dev && security?.restrictRuntimeImagesToOrigin) {
     const requestHost = getRequestHost(e, { xForwardedHost: true });
     let requestHostname;
@@ -116,11 +122,43 @@ async function renderOgImage(e, ctx) {
     timings.record("cache-hit", 0);
     return buildCachedImage;
   }
+  const purge = typeof getEventQuery(e).purge !== "undefined";
+  let publication = publish && !import.meta.dev && !import.meta.prerender ? (() => {
+    const key = getPublishKey(new URL(e.path, getSiteConfig(e).url).href, config.defaults, publish.cacheVersion);
+    return {
+      cache: getPublishedImageCache(ctx._nitro),
+      cacheKey: getPublishedImageCacheKey(publish, key, extension),
+      input: {
+        storage: useStorage(),
+        mount: publish.storage,
+        baseURL: publish.baseURL,
+        key,
+        extension,
+        maxAgeSeconds: Number(ctx.options.cacheMaxAgeSeconds),
+        timeoutMs: security.renderTimeout,
+        now: Date.now
+      }
+    };
+  })() : void 0;
+  if (publication && !purge && !publication.cache.isPublishing(publication.cacheKey, Date.now())) {
+    const result = await getPublishedImage(publication.input);
+    if (result._tag === "Published" && result.expiresAt > Date.now()) {
+      publication.cache.remember(publication.cacheKey, result, Date.now());
+      const remainingAge = Math.max(0, Math.floor((result.expiresAt - Date.now()) / 1e3));
+      setHeader(e, "Cache-Control", `public, max-age=${remainingAge}, s-maxage=${remainingAge}`);
+      return sendRedirect(e, result.url, 302);
+    }
+    publication.cache.forget(publication.cacheKey);
+    if (result._tag === "Unavailable") {
+      warnPublishUnavailable(ctx._nitro, result.reason, logger);
+      publication = void 0;
+    }
+  }
   const endCacheLookup = timings.start("cache-lookup");
   const cacheApi = await useOgImageBufferCache(ctx, {
     cacheMaxAgeSeconds: ctx.options.cacheMaxAgeSeconds,
     baseCacheKey,
-    secret: security?.secret
+    secret: security?.secret || void 0
   }).finally(endCacheLookup);
   if (typeof cacheApi === "undefined") {
     return;
@@ -128,6 +166,8 @@ async function renderOgImage(e, ctx) {
   if (cacheApi instanceof H3Error) {
     return cacheApi;
   }
+  if (publication && purge)
+    publication.cache.forget(publication.cacheKey);
   let image = cacheApi.cachedItem;
   if (image) {
     timings.record("cache-hit", 0);
@@ -166,5 +206,31 @@ async function renderOgImage(e, ctx) {
       setBuildCachedImage(ctx.options, extension, image, ctx.options.cacheMaxAgeSeconds);
     }
   }
+  if (publication) {
+    const maxAge = Number(ctx.options.cacheMaxAgeSeconds);
+    const expiresAt = cacheApi.expiresAt || Date.now() + (Number.isFinite(maxAge) ? Math.max(0, maxAge) : 0) * 1e3;
+    const remainingAge = Math.max(0, (expiresAt - Date.now()) / 1e3);
+    const { cache, cacheKey, input } = publication;
+    const token = cache.begin(cacheKey, Date.now(), input.timeoutMs);
+    if (token) {
+      const bytes = new Uint8Array(image);
+      const app = ctx._nitro;
+      const task = publishImage({
+        ...input,
+        maxAgeSeconds: remainingAge,
+        expiresAt,
+        force: true,
+        render: async () => bytes
+      }).then((result) => {
+        cache.complete(cacheKey, token, result, Date.now());
+        if (result._tag === "Unavailable")
+          warnPublishUnavailable(app, result.reason, logger);
+      }).catch((reason) => {
+        cache.complete(cacheKey, token, { _tag: "Unavailable" }, Date.now());
+        warnPublishUnavailable(app, reason, logger);
+      });
+      e.waitUntil(task);
+    }
+  }
   return image;
 }

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

@@ -1,7 +1,7 @@
 import { $fetch } from "ofetch";
 import { fetchWithEvent } from "#nuxtseo/nitro";
-import { getNitroOrigin } from "#site-config/server/composables";
 import { tryCloudflareAssetsFetch } from "./cloudflareAssets.js";
+import { getOgImageOrigin } from "./origin.js";
 export async function fetchLocalAsset(event, path, options) {
   const { fetchTimeout, headers, includeExternalFallback = false, onStepFailure } = options;
   const deadline = AbortSignal.timeout(fetchTimeout);
@@ -30,7 +30,7 @@ export async function fetchLocalAsset(event, path, options) {
   }));
   if (result || expired || !includeExternalFallback)
     return result;
-  const absolute = `${getNitroOrigin(event)}${path}`;
+  const absolute = `${getOgImageOrigin(event)}${path}`;
   return await race($fetch(absolute, {
     responseType: "arrayBuffer",
     signal: deadline,

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

@@ -0,0 +1,3 @@
+import type { RequestEvent } from 'nuxt/server';
+/** Site Config captures the request origin before renderer and cache hooks run. */
+export declare function getOgImageOrigin(event: Pick<RequestEvent, 'context'>): string;

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

@@ -0,0 +1,4 @@
+import { getNitroOrigin } from "#site-config/server/composables";
+export function getOgImageOrigin(event) {
+  return getNitroOrigin({ context: event.context });
+}

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

@@ -0,0 +1,6 @@
+import type { OgImageRenderEventContext } from '../../types.js';
+export declare function warnPublishUnavailable(app: OgImageRenderEventContext['_nitro'] & {
+    _ogImagePublishWarned?: boolean;
+}, reason: unknown, logger: {
+    warn: (message: string, reason: unknown) => void;
+}): void;

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

@@ -0,0 +1,6 @@
+export function warnPublishUnavailable(app, reason, logger) {
+  if (app._ogImagePublishWarned)
+    return;
+  app._ogImagePublishWarned = true;
+  logger.warn("[Nuxt OG Image] Publish storage is unavailable. Keeping app image URLs. Check the storage driver and credentials.", reason);
+}

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

@@ -1,8 +1,8 @@
-import type { H3Event } from '#nuxtseo/h3';
+import type { RequestEvent } from 'nuxt/server';
 import type { OgImageOptionsInternal, OgImageRuntimeConfig } from '../types.js';
 export interface GetOgImagePathResult {
     path: string;
     hash?: string;
 }
-export declare function getOgImagePath(event: H3Event, _pagePath: string, _options?: Partial<OgImageOptionsInternal>): GetOgImagePathResult;
-export declare function useOgImageRuntimeConfig(e?: H3Event): OgImageRuntimeConfig;
+export declare function getOgImagePath(event: Pick<RequestEvent, 'context'>, _pagePath: string, _options?: Partial<OgImageOptionsInternal>): GetOgImagePathResult;
+export declare function useOgImageRuntimeConfig(e?: Pick<RequestEvent, 'context'>): OgImageRuntimeConfig;

package/dist/runtime/server/utils.js

@@ -1,10 +1,9 @@
+import { useRuntimeConfig } from "nuxt/server";
 import { joinURL } from "ufo";
-import { useRuntimeConfig } from "#nuxtseo/nitro";
 import { componentNames } from "#og-image-virtual/component-names.mjs";
 import { buildOgImageUrl } from "../shared.js";
-import { getCloudflareEnv } from "./util/cloudflare.js";
 export function getOgImagePath(event, _pagePath, _options) {
-  const baseURL = useRuntimeConfig(event).app.baseURL;
+  const baseURL = useRuntimeConfig().app.baseURL;
   const { defaults, security } = useOgImageRuntimeConfig(event);
   const extension = _options?.extension || defaults.extension;
   const isStatic = import.meta.prerender && !(security?.secret && security?.strict);
@@ -20,15 +19,11 @@ export function getOgImagePath(event, _pagePath, _options) {
   };
 }
 export function useOgImageRuntimeConfig(e) {
-  const c = useRuntimeConfig(e);
+  const c = useRuntimeConfig();
   const moduleCfg = c["nuxt-og-image"];
-  const cloudflareEnv = getCloudflareEnv(e);
-  const runtimeSecret = c.ogImage?.secret;
-  const cloudflareSecret = cloudflareEnv?.NUXT_OG_IMAGE_SECRET;
-  const overrideSecret = typeof runtimeSecret === "string" && runtimeSecret ? runtimeSecret : typeof cloudflareSecret === "string" ? cloudflareSecret : void 0;
-  const security = overrideSecret ? { ...moduleCfg.security || {}, secret: overrideSecret } : moduleCfg.security;
+  const secret = e?.context._ogImageSigningSecret;
+  const security = secret ? { ...moduleCfg.security, secret } : moduleCfg.security;
   return {
-    defaults: {},
     ...moduleCfg,
     security,
     app: {

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

@@ -0,0 +1,13 @@
+interface PublishConfig {
+    storage: string;
+    baseURL: string;
+}
+export declare function parsePublishConfig(input: unknown): {
+    _tag: 'Ok';
+    value: PublishConfig;
+} | {
+    _tag: 'Err';
+    reason: string;
+};
+export declare function hasPublishMount(mount: string, storage: Record<string, unknown>): boolean;
+export {};

package/dist/runtime/shared/publish.js

@@ -0,0 +1,17 @@
+import { normalizeKey } from "unstorage";
+export function parsePublishConfig(input) {
+  if (!input || typeof input !== "object")
+    return { _tag: "Err", reason: "Set publish.storage and publish.baseURL." };
+  const config = input;
+  if (typeof config.storage !== "string" || !config.storage.trim() || !normalizeKey(config.storage))
+    return { _tag: "Err", reason: "Set publish.storage to a Nitro storage mount name." };
+  if (typeof config.baseURL !== "string" || !URL.canParse(config.baseURL))
+    return { _tag: "Err", reason: "Set publish.baseURL to the public HTTP URL for uploaded images." };
+  const url = new URL(config.baseURL);
+  if (!["https:", "http:"].includes(url.protocol) || url.username || url.password || url.href.includes("?") || url.href.includes("#"))
+    return { _tag: "Err", reason: "Set publish.baseURL to an HTTP URL without credentials, query, or fragment." };
+  return { _tag: "Ok", value: { storage: normalizeKey(config.storage), baseURL: url.href.replace(/\/+$/, "") } };
+}
+export function hasPublishMount(mount, storage) {
+  return Object.keys(storage).some((key) => normalizeKey(key) === normalizeKey(mount));
+}

package/dist/runtime/shared/urlEncoding.js

@@ -9,6 +9,8 @@ const RE_UNDERSCORE = /_/g;
 const RE_DOUBLE_UNDERSCORE = /__/g;
 const RE_PERCENT20 = /%20/g;
 const RE_PLUS = /\+/g;
+const RE_ENCODED_COMMA = /%2c/gi;
+const RE_ENCODED_PLUS = /%2b/gi;
 const RE_SINGLE_UNDERSCORE = /(?<!_)_(?!_)/;
 const RE_OG_PATH_PREFIX = /^\/_og\/[ds]\//;
 const RE_OG_ROUTE_PREFIX = /\/_og\/[ds]\//;
@@ -260,9 +262,12 @@ export function buildOgImageUrl(options, extension = "png", isStatic = false, de
   const segment = encoded || "default";
   const signed = secret && !isStatic ? `${segment},s_${signEncodedParams(segment, secret)}` : segment;
   return {
-    url: `${prefix}/${signed}.${extension}`
+    url: `${prefix}/${signed.replace(/,/g, "%2C").replace(RE_PLUS, "%2B")}.${extension}`
   };
 }
+function normalizeUrlSegment(segment) {
+  return segment.replace(RE_ENCODED_COMMA, ",").replace(RE_ENCODED_PLUS, "+");
+}
 export function signEncodedParams(encoded, secret) {
   return digest(`${secret}:${encoded}`).slice(0, 16);
 }
@@ -280,7 +285,7 @@ export function parseOgImageUrl(url) {
   const path = url.replace(RE_OG_PATH_PREFIX, "");
   const extMatch = path.match(RE_FILE_EXTENSION_WITH_CAPTURE);
   const extension = extMatch?.[1] || "png";
-  const encoded = path.replace(RE_FILE_EXTENSION, "");
+  const encoded = normalizeUrlSegment(path.replace(RE_FILE_EXTENSION, ""));
   const hashMatch = encoded.match(RE_HASH_SEGMENT);
   if (hashMatch) {
     return {
@@ -300,7 +305,7 @@ export function parseOgImageUrl(url) {
 export function extractEncodedSegment(path, extension) {
   const match = path.match(RE_OG_ROUTE_PREFIX);
   if (match?.index != null) {
-    return path.slice(match.index + match[0].length).replace(new RegExp(`\\.${extension}$`), "");
+    return normalizeUrlSegment(path.slice(match.index + match[0].length).replace(new RegExp(`\\.${extension}$`), ""));
   }
-  return path.split("/").pop().replace(new RegExp(`\\.${extension}$`), "");
+  return normalizeUrlSegment(path.split("/").pop().replace(new RegExp(`\\.${extension}$`), ""));
 }

package/dist/runtime/types.d.ts

@@ -41,16 +41,21 @@ export interface OgImageRuntimeConfig {
     debug: boolean;
     /** Whether twitter:* meta tags are emitted alongside og:image tags */
     includeTwitter: boolean;
-    baseCacheKey: string;
+    baseCacheKey: string | false;
     hasNuxtIcon: boolean;
     hasNuxtContent?: boolean;
     colorPreference: 'light' | 'dark';
-    isNuxtContentDocumentDriven: boolean;
     zeroRuntime: boolean;
     cssFramework: 'tailwind' | 'unocss' | 'none';
     componentDirs?: string[];
     /** Directory for persistent build cache (CI caching) */
     buildCacheDir?: string;
+    /** Publish rendered images to a public storage mount. */
+    publish?: {
+        storage: string;
+        baseURL: string;
+        cacheVersion: string;
+    };
     /** Source directory for auto-eject (dev only) */
     srcDir?: string;
     /** Root directory for relative path display (dev only) */
@@ -69,7 +74,7 @@ export interface OgImageRuntimeConfig {
         imageFetchTimeout: number;
         maxQueryParamSize: number | null;
         restrictRuntimeImagesToOrigin: false | string[];
-        secret: string;
+        secret: string | false;
         strict: boolean;
     };
     app: {
@@ -164,15 +169,6 @@ export interface OgImageOptions {
             src: string;
             data: ArrayBuffer | Uint8Array;
         }>;
-        fetchedResources?: Array<{
-            src: string;
-            data: ArrayBuffer | Uint8Array;
-        }>;
-        /** @deprecated Use `images` instead. */
-        persistentImages?: Array<{
-            src: string;
-            data: ArrayBuffer;
-        }>;
         devicePixelRatio?: number;
     };
     /** @deprecated Legacy font override — no longer used at runtime */
@@ -208,6 +204,8 @@ export interface OgImageOptions {
  * Extends OgImageOptions with fields set by defineOgImage() and the module internals.
  */
 export interface OgImageOptionsInternal extends OgImageOptions {
+    /** Completed page content supplied during prerender publishing. */
+    _prerenderHtml?: string;
     /** Set by defineOgImage() — the resolved component PascalName */
     component?: string;
     /** Determined by component filename suffix (.satori.vue, .takumi.vue, .browser.vue) */
@@ -246,10 +244,7 @@ export interface RuntimeCompatibilitySchema {
     fetch?: 'node' | 'web';
     wasm?: any;
 }
-export interface RuntimeCompatibilityMeta {
-    takumiVersion?: 1 | 2;
-}
-export type RuntimeCompatibilityPayload = Partial<Omit<RuntimeCompatibilitySchema, 'wasm'>> & RuntimeCompatibilityMeta;
+export type RuntimeCompatibilityPayload = Partial<Omit<RuntimeCompatibilitySchema, 'wasm'>>;
 export type CompatibilityFlags = Partial<Omit<RuntimeCompatibilitySchema, 'wasm'>>;
 export interface CompatibilityFlagEnvOverrides {
     dev?: CompatibilityFlags;