nuxt-og-image 6.1.2 → 6.2.0

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

@@ -7,7 +7,7 @@ import { useNitroApp } from "nitropack/runtime";
 import { hash } from "ohash";
 import { parseURL, withoutLeadingSlash, withoutTrailingSlash, withQuery } from "ufo";
 import { normalizeKey } from "unstorage";
-import { decodeOgImageParams, separateProps } from "../../shared.js";
+import { decodeOgImageParams, extractEncodedSegment, separateProps } from "../../shared.js";
 import { autoEjectCommunityTemplate } from "../util/auto-eject.js";
 import { createNitroRouteRuleMatcher } from "../util/kit.js";
 import { normaliseOptions } from "../util/options.js";
@@ -41,7 +41,7 @@ export async function resolveContext(e) {
   if (!extension || !path.includes(".") || extension.includes("/") || !["png", "jpeg", "jpg", "webp", "svg", "html", "json"].includes(extension)) {
     extension = "png";
   }
-  const encodedSegment = path.split("/").pop().replace(new RegExp(`\\.${extension}$`), "");
+  const encodedSegment = extractEncodedSegment(path, extension);
   const hashMatch = encodedSegment.match(RE_HASH_MODE);
   let urlOptions = {};
   if (hashMatch) {

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

@@ -1,4 +1,4 @@
-import { useNitroOrigin } from "#site-config/server/composables/useNitroOrigin";
+import { getNitroOrigin } from "#site-config/server/composables/getNitroOrigin";
 import { useStorage } from "nitropack/runtime";
 import { withBase, withoutLeadingSlash } from "ufo";
 import { toBase64Image } from "../../../../shared.js";
@@ -38,7 +38,7 @@ export default defineTransformer([
           });
           if (!imageBuffer && !import.meta.prerender) {
             imageBuffer = await e.$fetch(src, {
-              baseURL: useNitroOrigin(e),
+              baseURL: getNitroOrigin(e),
               responseType: "arrayBuffer"
             }).catch(() => {
             });
@@ -83,7 +83,7 @@ export default defineTransformer([
           const buffer = imageBuffer instanceof ArrayBuffer ? imageBuffer : imageBuffer.buffer;
           node.props.src = toBase64Image(buffer);
         } else {
-          node.props.src = `${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()}`;
+          node.props.src = `${withBase(src, `${getNitroOrigin(e)}`)}?${Date.now()}`;
         }
       }
     }
@@ -108,7 +108,7 @@ export default defineTransformer([
           });
           if (!imageBuffer && !import.meta.prerender) {
             imageBuffer = await e.$fetch(src, {
-              baseURL: useNitroOrigin(e),
+              baseURL: getNitroOrigin(e),
               responseType: "arrayBuffer"
             }).catch(() => {
             });

package/dist/runtime/server/og-image/fonts.d.ts

@@ -1,19 +1,14 @@
 import type { H3Event } from 'h3';
 import type { OgImageRenderEventContext, RuntimeFontConfig } from '../../types.js';
 export { codepointsIntersectRanges, extractCodepoints, parseUnicodeRange } from './unicode-range.js';
+type FontFormat = 'ttf' | 'otf' | 'woff' | 'woff2';
 export interface LoadFontsOptions {
     /**
-     * Whether the renderer supports WOFF2.
-     * When false, WOFF2 fonts will use satoriSrc (converted TTF) if available,
-     * otherwise they will be skipped.
+     * Font formats the renderer can parse.
+     * Satori: ttf, otf, woff
+     * Takumi: ttf, woff2
      */
-    supportsWoff2: boolean;
-    /**
-     * Prefer static (satoriSrc) fonts over WOFF2 when available.
-     * Used by Takumi to avoid WOFF2 subset decompression bugs while still
-     * falling through to WOFF2 when no static alternative exists.
-     */
-    preferStatic?: boolean;
+    supportedFormats: Set<FontFormat>;
     /** Component pascalName — filters fonts to only what this component needs */
     component?: string;
     /** When set, ensures this font family is included even if not in requirements */

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

@@ -6,6 +6,15 @@ import { logger } from "../../logger.js";
 import { fontArrayCache, fontCache } from "./cache/lru.js";
 import { codepointsIntersectRanges, parseUnicodeRange } from "./unicode-range.js";
 export { codepointsIntersectRanges, extractCodepoints, parseUnicodeRange } from "./unicode-range.js";
+function fontFormat(src) {
+  if (src.endsWith(".woff2"))
+    return "woff2";
+  if (src.endsWith(".woff"))
+    return "woff";
+  if (src.endsWith(".otf"))
+    return "otf";
+  return "ttf";
+}
 async function loadFont(event, font, src) {
   const cacheKey = `${font.family}-${font.weight}-${font.style}-${src}`;
   const cached = fontCache.get(cacheKey);
@@ -107,16 +116,16 @@ export async function loadAllFonts(event, options) {
   const results = await Promise.all(
     fonts.map(async (f) => {
       let src = f.src;
-      const isWoff2 = f.src.endsWith(".woff2");
-      if (isWoff2 && (options.preferStatic || !options.supportsWoff2)) {
-        if (f.satoriSrc) {
+      const srcFormat = fontFormat(f.src);
+      if (!options.supportedFormats.has(srcFormat)) {
+        if (f.satoriSrc && options.supportedFormats.has(fontFormat(f.satoriSrc))) {
           src = f.satoriSrc;
-        } else if (!options.supportsWoff2) {
+        } else {
           return null;
         }
       }
       let data = await loadFont(event, f, src);
-      if (!data && src !== f.src && options.supportsWoff2) {
+      if (!data && src !== f.src && options.supportedFormats.has(srcFormat)) {
         data = await loadFont(event, f, f.src);
         if (data)
           src = f.src;
@@ -137,7 +146,7 @@ export async function loadAllFonts(event, options) {
     return cachedArray;
   fontArrayCache.set(fingerprint, loaded);
   const isCommunity = options.component && map[options.component]?.category === "community";
-  if (!options.supportsWoff2 && loaded.length === 0 && fonts.length > 0 && !isCommunity) {
+  if (!options.supportedFormats.has("woff2") && loaded.length === 0 && fonts.length > 0 && !isCommunity) {
     const variableFamilies = [...new Set(fonts.map((f) => f.family))];
     const warnKey = `variable-fonts-${variableFamilies.join(",")}`;
     if (!_warnedFontKeys.has(warnKey)) {

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

@@ -33,7 +33,7 @@ export async function createSvg(event) {
   const codepoints = extractCodepoints(vnodes);
   const hasCustomFonts = Array.isArray(options.fonts) && options.fonts.length > 0;
   const fonts = await loadFontsForRenderer(event, {
-    supportsWoff2: false,
+    supportedFormats: /* @__PURE__ */ new Set(["ttf", "otf", "woff"]),
     component: options.component,
     fontFamilyOverride: fontFamilyOverride || defaultFont,
     codepoints,

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

@@ -71,7 +71,7 @@ async function createImage(event, format) {
   const { fontFamilyOverride, defaultFont } = getDefaultFontFamily(options);
   const nodes = await createTakumiNodes(event);
   const codepoints = extractCodepoints(nodes);
-  const fonts = await loadFontsForRenderer(event, { supportsWoff2: true, preferStatic: true, component: options.component, fontFamilyOverride: fontFamilyOverride || defaultFont, codepoints });
+  const fonts = await loadFontsForRenderer(event, { supportedFormats: /* @__PURE__ */ new Set(["ttf", "woff2"]), component: options.component, fontFamilyOverride: fontFamilyOverride || defaultFont, codepoints });
   await event._nitro.hooks.callHook("nuxt-og-image:takumi:nodes", nodes, event);
   const state = await getTakumiState(event);
   await loadFontsIntoRenderer(state, fonts);
@@ -129,7 +129,7 @@ const TakumiRenderer = {
   async debug(e) {
     const [vnodes, fonts] = await Promise.all([
       createTakumiNodes(e),
-      loadFontsForRenderer(e, { supportsWoff2: true, preferStatic: true, component: e.options.component })
+      loadFontsForRenderer(e, { supportedFormats: /* @__PURE__ */ new Set(["ttf", "woff2"]), component: e.options.component })
     ]);
     return {
       vnodes,

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/app';
+export { withoutQuery } from 'nuxtseo-shared/utils';
 export declare function fetchIsland(e: H3Event, component: string, props: Record<string, any>): Promise<NuxtIslandResponse>;
-export declare function withoutQuery(path: string): string | undefined;
 export declare function createNitroRouteRuleMatcher(): ((path: string) => NitroRouteRules);

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

@@ -3,6 +3,7 @@ import { useRuntimeConfig } from "nitropack/runtime";
 import { hash } from "ohash";
 import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
 import { withoutBase, withoutTrailingSlash } from "ufo";
+export { withoutQuery } from "nuxtseo-shared/utils";
 export function fetchIsland(e, component, props) {
   const hashId = hash([component, props]).replaceAll("_", "-");
   return e.$fetch(`/__nuxt_island/${component}_${hashId}.json`, {
@@ -11,9 +12,6 @@ export function fetchIsland(e, component, props) {
     }
   });
 }
-export function withoutQuery(path) {
-  return path.split("?")[0];
-}
 export function createNitroRouteRuleMatcher() {
   const { nitro, app } = useRuntimeConfig();
   const _routeRulesMatcher = toRouteMatcher(
@@ -25,8 +23,7 @@ export function createNitroRouteRuleMatcher() {
   );
   return (path) => {
     return defu({}, ..._routeRulesMatcher.matchAll(
-      // radix3 does not support trailing slashes
-      withoutBase(withoutTrailingSlash(withoutQuery(path)), app.baseURL)
+      withoutBase(withoutTrailingSlash(path.split("?")[0]), app.baseURL)
     ).reverse());
   };
 }

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

@@ -62,3 +62,10 @@ export declare function parseOgImageUrl(url: string): {
     isStatic: boolean;
     hash?: string;
 };
+/**
+ * Extract the encoded segment from the full path, handling the case where
+ * %2F in prop values has been decoded to / by intermediaries (#522).
+ * Uses the full catch-all match after /_og/d/ (or /_og/s/) instead of
+ * only the last path segment.
+ */
+export declare function extractEncodedSegment(path: string, extension: string): string;

package/dist/runtime/shared/urlEncoding.js

@@ -10,6 +10,7 @@ const RE_PERCENT20 = /%20/g;
 const RE_PLUS = /\+/g;
 const RE_SINGLE_UNDERSCORE = /(?<!_)_(?!_)/;
 const RE_OG_PATH_PREFIX = /^\/_og\/[ds]\//;
+const RE_OG_ROUTE_PREFIX = /\/_og\/[ds]\//;
 const RE_FILE_EXTENSION_WITH_CAPTURE = /\.(\w+)$/;
 const RE_FILE_EXTENSION = /\.\w+$/;
 const RE_HASH_SEGMENT = /^o_([a-z0-9]+)$/i;
@@ -144,7 +145,11 @@ export function encodeOgImageParams(options, defaults) {
       } else {
         const escaped = str.startsWith("~") ? `~${str}` : str;
         const encoded = encodeURIComponent(escaped.replace(RE_UNDERSCORE, "__")).replace(RE_PERCENT20, "+");
-        parts.push(`${alias}_${encoded}`);
+        if (encoded.includes("%")) {
+          parts.push(`${alias}_~${b64Encode(str)}`);
+        } else {
+          parts.push(`${alias}_${encoded}`);
+        }
       }
     }
   }
@@ -255,3 +260,10 @@ export function parseOgImageUrl(url) {
     isStatic
   };
 }
+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 path.split("/").pop().replace(new RegExp(`\\.${extension}$`), "");
+}

package/dist/runtime/shared.d.ts

@@ -1,7 +1,7 @@
 import type { ResolvableMeta } from '@unhead/vue';
 import type { OgImageOptions, OgImagePrebuilt } from './types.js';
 export { extractSocialPreviewTags, toBase64Image } from './pure.js';
-export { buildOgImageUrl, decodeOgImageParams, encodeOgImageParams, hashOgImageOptions, parseOgImageUrl } from './shared/urlEncoding.js';
+export { buildOgImageUrl, decodeOgImageParams, encodeOgImageParams, extractEncodedSegment, hashOgImageOptions, parseOgImageUrl } from './shared/urlEncoding.js';
 export declare function generateMeta(url: OgImagePrebuilt['url'] | string, resolvedOptions: OgImageOptions | OgImagePrebuilt): ResolvableMeta[];
 export declare function isInternalRoute(path: string): boolean;
 export declare function separateProps(options: OgImageOptions | undefined, ignoreKeys?: string[]): OgImageOptions;

package/dist/runtime/shared.js

@@ -1,7 +1,7 @@
 import { defu } from "defu";
 import { toValue } from "vue";
 export { extractSocialPreviewTags, toBase64Image } from "./pure.js";
-export { buildOgImageUrl, decodeOgImageParams, encodeOgImageParams, hashOgImageOptions, parseOgImageUrl } from "./shared/urlEncoding.js";
+export { buildOgImageUrl, decodeOgImageParams, encodeOgImageParams, extractEncodedSegment, hashOgImageOptions, parseOgImageUrl } from "./shared/urlEncoding.js";
 const RE_KEBAB_CASE = /-([a-z])/g;
 export function generateMeta(url, resolvedOptions) {
   const key = resolvedOptions.key || "og";