nuxt-og-image 4.0.1 → 4.0.3

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

@@ -1,11 +1,12 @@
-import { useNitroApp } from "#imports";
 import { htmlPayloadCache, prerenderOptionsCache } from "#og-image-cache";
 import { theme } from "#og-image-virtual/unocss-config.mjs";
+import { createSitePathResolver } from "#site-config/server/composables/utils";
 import { createGenerator } from "@unocss/core";
 import presetWind from "@unocss/preset-wind";
 import { defu } from "defu";
 import { parse } from "devalue";
 import { createError, getQuery } from "h3";
+import { useNitroApp } from "nitropack/runtime";
 import { hash } from "ohash";
 import { parseURL, withoutLeadingSlash, withoutTrailingSlash, withQuery } from "ufo";
 import { normalizeKey } from "unstorage";
@@ -17,7 +18,7 @@ import { normaliseOptions } from "../util/options.js";
 import { useChromiumRenderer, useSatoriRenderer } from "./instances.js";
 export function resolvePathCacheKey(e, path) {
   const siteConfig = e.context.siteConfig.get();
-  const basePath = withoutTrailingSlash(withoutLeadingSlash(normalizeKey(path || e.path)));
+  const basePath = withoutTrailingSlash(withoutLeadingSlash(normalizeKey(path)));
   return [
     !basePath || basePath === "/" ? "index" : basePath,
     hash([
@@ -29,7 +30,11 @@ export function resolvePathCacheKey(e, path) {
 }
 export async function resolveContext(e) {
   const runtimeConfig = useOgImageRuntimeConfig();
-  const path = parseURL(e.path).pathname;
+  const resolvePathWithBase = createSitePathResolver(e, {
+    absolute: false,
+    withBase: true
+  });
+  const path = resolvePathWithBase(parseURL(e.path).pathname);
   const extension = path.split(".").pop();
   if (!extension) {
     return createError({
@@ -108,6 +113,7 @@ export async function resolveContext(e) {
     key,
     renderer,
     isDebugJsonPayload,
+    runtimeConfig,
     publicStoragePath: runtimeConfig.publicStoragePath,
     extension,
     basePath,
@@ -167,48 +173,48 @@ export function extractAndNormaliseOgImageOptions(html) {
   }
   return payload;
 }
-function handleNon200Response(res, path) {
+async function doFetchWithErrorHandling(fetch, path) {
+  const res = await fetch(path, {
+    redirect: "follow",
+    headers: {
+      accept: "text/html"
+    }
+  }).catch((err) => {
+    return err;
+  });
   let errorDescription;
   if (res.status >= 300 && res.status < 400) {
+    if (res.headers.has("location")) {
+      return await doFetchWithErrorHandling(fetch, res.headers.get("location") || "");
+    }
     errorDescription = `${res.status} redirected to ${res.headers.get("location") || "unknown"}`;
   } else if (res.status >= 400) {
     errorDescription = `${res.status} error: ${res.statusText}`;
   }
   if (errorDescription) {
-    return createError({
+    return [null, createError({
       statusCode: 500,
       statusMessage: `[Nuxt OG Image] Failed to parse \`${path}\` for og-image extraction. ${errorDescription}`
-    });
+    })];
   }
+  return [res._data || await res.text(), null];
 }
 async function fetchPathHtmlAndExtractOptions(e, path, key) {
   const cachedHtmlPayload = await htmlPayloadCache.getItem(key);
   if (!import.meta.dev && cachedHtmlPayload && cachedHtmlPayload.expiresAt < Date.now())
     return cachedHtmlPayload.value;
   let _payload = null;
-  let html;
-  const fetchOptions = {
-    // follow redirects
-    redirect: "follow",
-    ignoreResponseError: true,
-    headers: {
-      accept: "text/html"
-    }
-  };
-  const htmlRes = await e.fetch(path, fetchOptions);
-  const err = handleNon200Response(htmlRes, path);
+  let [html, err] = await doFetchWithErrorHandling(e.fetch, path);
   if (err) {
     logger.warn(err);
+  } else {
+    _payload = getPayloadFromHtml(html);
   }
-  html = await htmlRes.text();
-  _payload = getPayloadFromHtml(html);
   if (!_payload) {
-    const fallbackHtmlRes = await globalThis.$fetch.raw(path, fetchOptions);
-    const err2 = handleNon200Response(fallbackHtmlRes, path);
+    const [fallbackHtml, err2] = await doFetchWithErrorHandling(globalThis.$fetch.raw, path);
     if (err2) {
       return err2;
     }
-    const fallbackHtml = await fallbackHtmlRes.text();
     _payload = getPayloadFromHtml(fallbackHtml);
     if (_payload) {
       html = fallbackHtml;

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

@@ -1,11 +1,14 @@
 import { useNitroOrigin, useStorage } from "#imports";
 import sizeOf from "image-size";
-import { withBase } from "ufo";
+import { withBase, withoutLeadingSlash } from "ufo";
 import { toBase64Image } from "../../../../pure.js";
 import { logger } from "../../../util/logger.js";
 import { defineSatoriTransformer } from "../utils.js";
 async function resolveLocalFilePathImage(publicStoragePath, src) {
-  const key = `${publicStoragePath}${src.replace("./", ":").replace("/", ":")}`;
+  const normalizedSrc = withoutLeadingSlash(
+    src.replace("_nuxt/@fs/", "").replace("_nuxt/", "").replace("./", "")
+  );
+  const key = `${publicStoragePath}:${normalizedSrc}`;
   if (await useStorage().hasItem(key))
     return await useStorage().getItemRaw(key);
 }
@@ -13,7 +16,7 @@ export default defineSatoriTransformer([
   // fix <img src="">
   {
     filter: (node) => node.type === "img" && node.props?.src,
-    transform: async (node, { e, publicStoragePath }) => {
+    transform: async (node, { e, publicStoragePath, runtimeConfig }) => {
       const src = node.props.src;
       const isRelative = src.startsWith("/");
       let dimensions;
@@ -23,13 +26,19 @@ export default defineSatoriTransformer([
       }
       if (isRelative) {
         if (import.meta.prerender || import.meta.dev) {
-          imageBuffer = await resolveLocalFilePathImage(publicStoragePath, src);
-        } else {
-          imageBuffer = await e.$fetch(src, {
-            baseURL: useNitroOrigin(e),
-            responseType: "arrayBuffer"
-          }).catch(() => {
+          const srcWithoutBase = src.replace(runtimeConfig.app.baseURL, "");
+          imageBuffer = await resolveLocalFilePathImage(publicStoragePath, srcWithoutBase);
+        }
+        if (!imageBuffer) {
+          imageBuffer = await e.$fetch(src, { responseType: "arrayBuffer" }).catch(() => {
           });
+          if (!imageBuffer && !import.meta.prerender) {
+            imageBuffer = await e.$fetch(src, {
+              baseURL: useNitroOrigin(e),
+              responseType: "arrayBuffer"
+            }).catch(() => {
+            });
+          }
         }
         if (imageBuffer)
           node.props.src = toBase64Image(imageBuffer);
@@ -69,13 +78,14 @@ export default defineSatoriTransformer([
   // fix style="background-image: url('')"
   {
     filter: (node) => node.props?.style?.backgroundImage?.includes("url("),
-    transform: async (node, { e, publicStoragePath }) => {
+    transform: async (node, { e, publicStoragePath, runtimeConfig }) => {
       const backgroundImage = node.props.style.backgroundImage;
       const src = backgroundImage.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "");
       const isRelative = src?.startsWith("/");
       if (isRelative) {
         if (import.meta.prerender || import.meta.dev) {
-          const imageBuffer = await resolveLocalFilePathImage(publicStoragePath, src);
+          const srcWithoutBase = src.replace(runtimeConfig.app.baseURL, "/");
+          const imageBuffer = await resolveLocalFilePathImage(publicStoragePath, srcWithoutBase);
           if (imageBuffer) {
             const base64 = toBase64Image(Buffer.from(imageBuffer));
             node.props.style.backgroundImage = `url(${base64})`;

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

@@ -1,4 +1,4 @@
 import type { OgImageRenderEventContext, Renderer } from '../../../types.js';
-export declare function createSvg(event: OgImageRenderEventContext): Promise<string>;
+export declare function createSvg(event: OgImageRenderEventContext): Promise<string | void>;
 declare const SatoriRenderer: Renderer;
 export default SatoriRenderer;

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

@@ -1,6 +1,7 @@
 import { fontCache } from "#og-image-cache";
 import { theme } from "#og-image-virtual/unocss-config.mjs";
 import { defu } from "defu";
+import { sendError } from "h3";
 import { normaliseFontInput, useOgImageRuntimeConfig } from "../../../shared.js";
 import { loadFont } from "./font.js";
 import { useResvg, useSatori, useSharp } from "./instances.js";
@@ -49,7 +50,9 @@ export async function createSvg(event) {
     width: options.width,
     height: options.height
   });
-  return satori(vnodes, satoriOptions);
+  return satori(vnodes, satoriOptions).catch((err) => {
+    return sendError(event.e, err, import.meta.dev);
+  });
 }
 async function createPng(event) {
   const { resvgOptions } = useOgImageRuntimeConfig();
@@ -81,9 +84,13 @@ const SatoriRenderer = {
     }
   },
   async debug(e) {
+    const [vnodes, svg] = await Promise.all([
+      createVNodes(e),
+      createSvg(e)
+    ]);
     return {
-      vnodes: await createVNodes(e),
-      svg: await createSvg(e)
+      vnodes,
+      svg
     };
   }
 };

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

@@ -21,14 +21,14 @@ export async function html(ctx) {
   const normalisedFonts = normaliseFontInput([...options.fonts || [], ...fonts]);
   const firstFont = normalisedFonts[0];
   if (firstFont)
-    defaultFontFamily = firstFont.name;
+    defaultFontFamily = firstFont.name.replaceAll("+", " ");
   await applyEmojis(ctx, island);
   let html2 = island.html;
   head.push({
     style: [
       {
         // default font is the first font family
-        innerHTML: `body { font-family: '${defaultFontFamily.replace("+", " ")}', sans-serif;  }`
+        innerHTML: `body { font-family: '${defaultFontFamily}', sans-serif;  }`
       },
       {
         innerHTML: `body {
@@ -62,7 +62,7 @@ svg[data-emoji] {
       ...fonts.map((font) => {
         return `
           @font-face {
-            font-family: '${font.name}';
+            font-family: '${font.name.replaceAll("+", " ")}';
             font-style: normal;
             font-weight: ${font.weight};
             src: url('/__og-image__/font/${font.key}') format('truetype');

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

@@ -1,5 +1,6 @@
 import { defineNitroPlugin } from "#imports";
 import { prerenderOptionsCache } from "#og-image-cache";
+import { createSitePathResolver } from "#site-config/server/composables/utils";
 import { parseURL } from "ufo";
 import { isInternalRoute } from "../../pure.js";
 import { extractAndNormaliseOgImageOptions, resolvePathCacheKey } from "../og-image/context.js";
@@ -22,7 +23,11 @@ export default defineNitroPlugin(async (nitro) => {
     ].join("\n"));
     if (!options)
       return;
-    const key = resolvePathCacheKey(ctx.event);
+    const resolvePathWithBase = createSitePathResolver(ctx.event, {
+      absolute: false,
+      withBase: true
+    });
+    const key = resolvePathCacheKey(ctx.event, resolvePathWithBase(path));
     await prerenderOptionsCache.setItem(key, options);
     const index = html.bodyAppend.findIndex((script) => script.includes('id="nuxt-og-image-options"'));
     if (index !== -1) {

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

@@ -1,6 +1,6 @@
 import { useSiteConfig } from "#imports";
-import compatibility from "#og-image/compatibility";
 import { componentNames } from "#og-image-virtual/component-names.mjs";
+import compatibility from "#og-image/compatibility";
 import { defineEventHandler, setHeader } from "h3";
 import { useOgImageRuntimeConfig } from "../../shared.js";
 export default defineEventHandler(async (e) => {

package/dist/runtime/shared.js

@@ -1,6 +1,6 @@
 import { useRuntimeConfig } from "#imports";
 import { defu } from "defu";
-import { joinURL } from "ufo";
+import { joinURL, withQuery } from "ufo";
 import { getExtension } from "./pure.js";
 export * from "./pure.js";
 export function generateMeta(url, resolvedOptions) {
@@ -32,8 +32,18 @@ export function generateMeta(url, resolvedOptions) {
 export function getOgImagePath(pagePath, _options) {
   const baseURL = useRuntimeConfig().app.baseURL;
   const options = defu(_options, useOgImageRuntimeConfig().defaults);
-  return joinURL("/", baseURL, `__og-image__/${import.meta.prerender ? "static" : "image"}`, pagePath, `og.${options.extension}`);
+  const path = joinURL("/", baseURL, `__og-image__/${import.meta.prerender ? "static" : "image"}`, pagePath, `og.${options.extension}`);
+  if (Object.keys(options._query || {}).length) {
+    return withQuery(path, options._query);
+  }
+  return path;
 }
 export function useOgImageRuntimeConfig() {
-  return useRuntimeConfig()["nuxt-og-image"];
+  const c = useRuntimeConfig();
+  return {
+    ...c["nuxt-og-image"],
+    app: {
+      baseURL: c.app.baseURL
+    }
+  };
 }

package/dist/runtime/types.d.ts

@@ -18,6 +18,7 @@ export interface OgImageRenderEventContext {
     options: OgImageOptions;
     isDebugJsonPayload: boolean;
     publicStoragePath: string;
+    runtimeConfig: OgImageRuntimeConfig;
     _nitro: NitroApp;
 }
 export type IconifyEmojiIconSets = 'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'streamline-emojis' | 'openmoji';
@@ -37,6 +38,9 @@ export interface OgImageRuntimeConfig {
     isNuxtContentDocumentDriven: boolean;
     strictNuxtContentPaths: boolean;
     zeroRuntime: boolean;
+    app: {
+        baseURL: string;
+    };
 }
 export interface OgImageComponent {
     path?: string;
@@ -122,7 +126,7 @@ export interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
 }
 export interface FontConfig {
     name: string;
-    style?: string;
+    style?: 'normal' | 'ital';
     weight?: string | number;
     path?: string;
     key?: string;
@@ -132,7 +136,7 @@ export interface ResolvedFontConfig extends FontConfig {
     cacheKey: string;
     data?: BufferSource;
 }
-export type InputFontConfig = (`${string}:${number}` | string | FontConfig);
+export type InputFontConfig = (`${string}:${number}` | `${string}:${'normal' | 'ital'}:${number}` | string | FontConfig);
 export interface RuntimeCompatibilitySchema {
     chromium: 'chrome-launcher' | 'on-demand' | 'playwright' | false;
     ['css-inline']: 'node' | 'wasm' | 'wasm-fs' | false;

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "4.0.1",
-  "packageManager": "pnpm@9.14.2",
+  "version": "4.0.3",
   "description": "Enlightened OG Image generation for Nuxt.",
   "author": {
     "website": "https://harlanzw.com",
@@ -36,78 +35,76 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@nuxt/devtools-kit": "^1.6.3",
-    "@nuxt/kit": "^3.14.1592",
+    "@nuxt/devtools-kit": "^1.7.0",
+    "@nuxt/kit": "^3.15.1",
     "@resvg/resvg-js": "^2.6.2",
     "@resvg/resvg-wasm": "^2.6.2",
-    "@unocss/core": "^0.65.1",
-    "@unocss/preset-wind": "^0.65.1",
+    "@unocss/core": "^65.4.0",
+    "@unocss/preset-wind": "^65.4.0",
     "chrome-launcher": "^1.1.2",
+    "consola": "^3.4.0",
     "defu": "^6.1.4",
     "execa": "^9.5.2",
-    "image-size": "^1.1.1",
-    "magic-string": "^0.30.14",
+    "image-size": "^1.2.0",
+    "magic-string": "^0.30.17",
     "nuxt-site-config": "^3.0.6",
     "nypm": "^0.4.1",
     "ofetch": "^1.4.1",
     "ohash": "^1.1.4",
-    "pathe": "^1.1.2",
-    "pkg-types": "^1.2.1",
-    "playwright-core": "^1.49.0",
+    "pathe": "^2.0.1",
+    "pkg-types": "^1.3.0",
+    "playwright-core": "^1.49.1",
     "radix3": "^1.1.2",
-    "satori": "^0.12.0",
+    "satori": "^0.12.1",
     "satori-html": "^0.3.2",
     "sirv": "^3.0.0",
     "std-env": "^3.8.0",
     "strip-literal": "^2.1.1",
     "ufo": "^1.5.4",
-    "unplugin": "^2.0.0",
+    "unplugin": "^2.1.2",
     "unwasm": "^0.3.9",
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^3.11.2",
+    "@antfu/eslint-config": "^3.14.0",
     "@css-inline/css-inline": "^0.14.3",
     "@headlessui/vue": "^1.7.23",
-    "@iconify-json/carbon": "^1.2.4",
-    "@iconify-json/logos": "^1.2.3",
-    "@iconify-json/noto": "^1.2.1",
-    "@iconify-json/ri": "^1.2.3",
-    "@iconify-json/tabler": "^1.2.10",
+    "@iconify-json/carbon": "^1.2.5",
+    "@iconify-json/logos": "^1.2.4",
+    "@iconify-json/noto": "^1.2.2",
+    "@iconify-json/ri": "^1.2.5",
+    "@iconify-json/tabler": "^1.2.14",
     "@img/sharp-linux-x64": "0.33.5",
     "@nuxt/content": "^2.13.4",
-    "@nuxt/devtools": "1.6.3",
-    "@nuxt/devtools-ui-kit": "^1.6.3",
-    "@nuxt/icon": "^1.9.1",
-    "@nuxt/image": "^1.8.1",
+    "@nuxt/devtools": "1.7.0",
+    "@nuxt/devtools-ui-kit": "^1.7.0",
+    "@nuxt/icon": "^1.10.3",
+    "@nuxt/image": "^1.9.0",
     "@nuxt/module-builder": "^0.8.4",
-    "@nuxt/test-utils": "3.15.1",
-    "@nuxt/ui": "^2.19.2",
+    "@nuxt/test-utils": "3.15.4",
+    "@nuxt/ui": "^2.20.0",
     "@nuxtjs/color-mode": "^3.5.2",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@nuxtjs/i18n": "^9.1.1",
-    "@nuxtjs/tailwindcss": "^6.12.2",
-    "@unocss/nuxt": "^0.65.1",
-    "@unocss/preset-icons": "^0.65.1",
-    "@unocss/preset-uno": "^0.65.1",
-    "@unocss/runtime": "^0.65.1",
-    "@vueuse/nuxt": "^12.0.0",
-    "bumpp": "^9.8.1",
-    "eslint": "9.16.0",
+    "@nuxtjs/tailwindcss": "^6.13.0",
+    "@unocss/nuxt": "^65.4.0",
+    "@unocss/preset-icons": "^65.4.0",
+    "@unocss/preset-uno": "^65.4.0",
+    "@unocss/runtime": "^65.4.0",
+    "@vueuse/nuxt": "^12.4.0",
+    "bumpp": "^9.10.0",
+    "eslint": "9.18.0",
     "jest-image-snapshot": "^6.4.0",
-    "nuxt": "^3.14.1592",
-    "playwright": "^1.49.0",
-    "sass": "^1.82.0",
+    "nuxt": "^3.15.1",
+    "playwright": "^1.49.1",
+    "sass": "^1.83.3",
     "sharp": "^0.33.5",
     "typescript": "5.6.3",
-    "unocss": "^0.65.1",
+    "unocss": "^65.4.0",
     "vitest": "^2.1.8"
   },
   "resolutions": {
-    "typescript": "5.6.3",
-    "@vue/server-renderer": "3.5.13",
-    "vue": "3.5.13",
-    "vue-router": "4.5.0"
+    "typescript": "5.6.3"
   },
   "build": {
     "externals": [