nuxt-og-image 3.0.0-rc.2 → 3.0.0-rc.4

package/dist/client/_nuxt/{error-404.4c6f5cb5.js → error-404.3430ff98.js}

@@ -1 +1 @@
-import{_ as a,u as n,o as r,c as l,a as e,t as s,b as d,w as c,d as p,e as f,p as x,f as h}from"./entry.e9f3db7f.js";const m=t=>(x("data-v-05a2b8a3"),t=t(),h(),t),u={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},g=m(()=>e("div",{class:"fixed left-0 right-0 spotlight z-10"},null,-1)),b={class:"max-w-520px text-center z-20"},_=["textContent"],w=["textContent"],y={class:"w-full flex items-center justify-center"},S={__name:"error-404",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:404},statusMessage:{type:String,default:"Not Found"},description:{type:String,default:"Sorry, the page you are looking for could not be found."},backHome:{type:String,default:"Go back home"}},setup(t){const o=t;return n({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(k,v)=>{const i=f;return r(),l("div",u,[g,e("div",b,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,_),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,w),e("div",y,[d(i,{to:"/",class:"gradient-border text-md sm:text-xl py-2 px-4 sm:py-3 sm:px-6 cursor-pointer"},{default:c(()=>[p(s(t.backHome),1)]),_:1})])])])}}},z=a(S,[["__scopeId","data-v-05a2b8a3"]]);export{z as default};
+import{_ as a,u as n,o as r,c as l,a as e,t as s,b as d,w as c,d as p,e as f,p as x,f as h}from"./entry.81e38674.js";const m=t=>(x("data-v-05a2b8a3"),t=t(),h(),t),u={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},g=m(()=>e("div",{class:"fixed left-0 right-0 spotlight z-10"},null,-1)),b={class:"max-w-520px text-center z-20"},_=["textContent"],w=["textContent"],y={class:"w-full flex items-center justify-center"},S={__name:"error-404",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:404},statusMessage:{type:String,default:"Not Found"},description:{type:String,default:"Sorry, the page you are looking for could not be found."},backHome:{type:String,default:"Go back home"}},setup(t){const o=t;return n({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(k,v)=>{const i=f;return r(),l("div",u,[g,e("div",b,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,_),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,w),e("div",y,[d(i,{to:"/",class:"gradient-border text-md sm:text-xl py-2 px-4 sm:py-3 sm:px-6 cursor-pointer"},{default:c(()=>[p(s(t.backHome),1)]),_:1})])])])}}},z=a(S,[["__scopeId","data-v-05a2b8a3"]]);export{z as default};

package/dist/client/_nuxt/{error-500.64875434.js → error-500.17781b5f.js}

@@ -1 +1 @@
-import{_ as i,u as a,o as r,c as n,a as e,t as s,p as l,f as d}from"./entry.e9f3db7f.js";const c=t=>(l("data-v-c967d9a9"),t=t(),d(),t),p={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},h=c(()=>e("div",{class:"fixed -bottom-1/2 left-0 right-0 h-1/2 spotlight"},null,-1)),f={class:"max-w-520px text-center"},g=["textContent"],m=["textContent"],x={__name:"error-500",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:500},statusMessage:{type:String,default:"Server error"},description:{type:String,default:"This page is temporarily unavailable."}},setup(t){const o=t;return a({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(u,b)=>(r(),n("div",p,[h,e("div",f,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,g),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,m)])]))}},w=i(x,[["__scopeId","data-v-c967d9a9"]]);export{w as default};
+import{_ as i,u as a,o as r,c as n,a as e,t as s,p as l,f as d}from"./entry.81e38674.js";const c=t=>(l("data-v-c967d9a9"),t=t(),d(),t),p={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},h=c(()=>e("div",{class:"fixed -bottom-1/2 left-0 right-0 h-1/2 spotlight"},null,-1)),f={class:"max-w-520px text-center"},g=["textContent"],m=["textContent"],x={__name:"error-500",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:500},statusMessage:{type:String,default:"Server error"},description:{type:String,default:"This page is temporarily unavailable."}},setup(t){const o=t;return a({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(u,b)=>(r(),n("div",p,[h,e("div",f,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,g),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,m)])]))}},w=i(x,[["__scopeId","data-v-c967d9a9"]]);export{w as default};

package/dist/client/index.html

@@ -3,13 +3,13 @@
 <head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="/__nuxt-og-image/_nuxt/entry.a30f63d0.css">
-<link rel="modulepreload" as="script" crossorigin href="/__nuxt-og-image/_nuxt/entry.e9f3db7f.js">
+<link rel="modulepreload" as="script" crossorigin href="/__nuxt-og-image/_nuxt/entry.81e38674.js">
 <link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/vanilla-picker-NKbIFE8h.23409a58.js">
 <link rel="prefetch" as="style" href="/__nuxt-og-image/_nuxt/error-404.b751fa02.css">
-<link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/error-404.4c6f5cb5.js">
+<link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/error-404.3430ff98.js">
 <link rel="prefetch" as="style" href="/__nuxt-og-image/_nuxt/error-500.69009e70.css">
-<link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/error-500.64875434.js">
-<script type="module" src="/__nuxt-og-image/_nuxt/entry.e9f3db7f.js" crossorigin></script><script>"use strict";(()=>{const a=window,e=document.documentElement,m=["dark","light"],c=window&&window.localStorage&&window.localStorage.getItem&&window.localStorage.getItem("nuxt-color-mode")||"system";let n=c==="system"?d():c;const l=e.getAttribute("data-color-mode-forced");l&&(n=l),i(n),a["__NUXT_COLOR_MODE__"]={preference:c,value:n,getColorScheme:d,addColorScheme:i,removeColorScheme:f};function i(o){const t=""+o+"",s="";e.classList?e.classList.add(t):e.className+=" "+t,s&&e.setAttribute("data-"+s,o)}function f(o){const t=""+o+"",s="";e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp(t,"g"),""),s&&e.removeAttribute("data-"+s)}function r(o){return a.matchMedia("(prefers-color-scheme"+o+")")}function d(){if(a.matchMedia&&r("").media!=="not all"){for(const o of m)if(r(":"+o).matches)return o}return"light"}})();
+<link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/error-500.17781b5f.js">
+<script type="module" src="/__nuxt-og-image/_nuxt/entry.81e38674.js" crossorigin></script><script>"use strict";(()=>{const a=window,e=document.documentElement,m=["dark","light"],c=window&&window.localStorage&&window.localStorage.getItem&&window.localStorage.getItem("nuxt-color-mode")||"system";let n=c==="system"?d():c;const l=e.getAttribute("data-color-mode-forced");l&&(n=l),i(n),a["__NUXT_COLOR_MODE__"]={preference:c,value:n,getColorScheme:d,addColorScheme:i,removeColorScheme:f};function i(o){const t=""+o+"",s="";e.classList?e.classList.add(t):e.className+=" "+t,s&&e.setAttribute("data-"+s,o)}function f(o){const t=""+o+"",s="";e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp(t,"g"),""),s&&e.removeAttribute("data-"+s)}function r(o){return a.matchMedia("(prefers-color-scheme"+o+")")}function d(){if(a.matchMedia&&r("").media!=="not all"){for(const o of m)if(r(":"+o).matches)return o}return"light"}})();
 </script></head>
 <body ><div id="__nuxt"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4},{},false,{},{}]</script>
 <script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-og-image",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body>

package/dist/module.d.mts

@@ -80,6 +80,10 @@ interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
     sharp?: SharpOptions;
     fonts?: InputFontConfig[];
     cacheMaxAgeSeconds?: number;
+    /**
+     * @internal
+     */
+    _query?: Record<string, any>;
 }
 interface FontConfig {
     name: string;

package/dist/module.d.ts

@@ -80,6 +80,10 @@ interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
     sharp?: SharpOptions;
     fonts?: InputFontConfig[];
     cacheMaxAgeSeconds?: number;
+    /**
+     * @internal
+     */
+    _query?: Record<string, any>;
 }
 interface FontConfig {
     name: string;

package/dist/module.json

@@ -5,5 +5,5 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "3.0.0-rc.2"
+  "version": "3.0.0-rc.4"
 }

package/dist/module.mjs

@@ -14,7 +14,7 @@ import { createHash } from 'node:crypto';
 import { execa } from 'execa';
 import terminate from 'terminate';
 
-const version = "3.0.0-rc.2";
+const version = "3.0.0-rc.4";
 
 const autodetectableProviders = {
   azure_static: "azure",
@@ -628,7 +628,7 @@ declare module 'nitropack' {
   }
   interface NitroRuntimeHooks {
     'nuxt-og-image:context': (ctx: import('${typesPath}').OgImageRenderEventContext) => void | Promise<void>
-    'nuxt-og-image:satori:vnodes': (vnodes: import('${typesPath}').VNode, ctx: ctx: import('${typesPath}').OgImageRenderEventContext) => void | Promise<void>
+    'nuxt-og-image:satori:vnodes': (vnodes: import('${typesPath}').VNode, ctx: import('${typesPath}').OgImageRenderEventContext) => void | Promise<void>
   }
 }
 
@@ -641,9 +641,13 @@ ${componentImports}
     });
     const cacheEnabled = typeof config.runtimeCacheStorage !== "undefined" && config.runtimeCacheStorage !== false;
     const runtimeCacheStorage = typeof config.runtimeCacheStorage === "boolean" ? "default" : config.runtimeCacheStorage.driver;
-    let baseCacheKey = runtimeCacheStorage === "default" ? `/cache/nuxt-og-image@${version}` : `/nuxt-og-image@${version}`;
+    let baseCacheKey = runtimeCacheStorage === "default" ? `/cache/nuxt-og-image@${version}` : `/nuxt-og-image/${version}`;
     if (!cacheEnabled)
       baseCacheKey = false;
+    if (!nuxt.options.dev && config.runtimeCacheStorage && typeof config.runtimeCacheStorage === "object") {
+      nuxt.options.nitro.storage = nuxt.options.nitro.storage || {};
+      nuxt.options.nitro.storage["nuxt-og-image"] = config.runtimeCacheStorage;
+    }
     nuxt.hooks.hook("modules:done", async () => {
       const normalisedFonts = normaliseFontInput(config.fonts);
       if (!nuxt.options._generate && nuxt.options.build) {

package/dist/runtime/cache.d.ts

@@ -1,8 +1,9 @@
+import { type H3Error } from 'h3';
 import type { OgImageRenderEventContext } from './types';
 export declare function useOgImageBufferCache(ctx: OgImageRenderEventContext, options: {
     baseCacheKey: string | false;
     cacheMaxAgeSeconds?: number;
-}): Promise<void | {
+}): Promise<void | H3Error | {
     cachedItem: false | BufferSource;
     enabled: boolean;
     update: (image: BufferSource) => Promise<void>;

package/dist/runtime/cache.mjs

@@ -1,31 +1,46 @@
 import { prefixStorage } from "unstorage";
-import { getQuery, handleCacheHeaders, setHeader, setHeaders } from "h3";
+import { createError, getQuery, handleCacheHeaders, setHeader, setHeaders } from "h3";
 import { withTrailingSlash } from "ufo";
 import { hash } from "ohash";
 import { useStorage } from "#imports";
 export async function useOgImageBufferCache(ctx, options) {
   const maxAge = Number(options.cacheMaxAgeSeconds);
-  const 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;
-  if (enabled && await cache.hasItem(key).catch(() => false)) {
-    const { value, expiresAt, headers } = await cache.getItem(key).catch(() => ({ value: null, expiresAt: Date.now() }));
-    if (typeof getQuery(ctx.e).purge !== "undefined") {
-      await cache.removeItem(key).catch(() => {
-      });
-    } else if (expiresAt > Date.now()) {
-      cachedItem = Buffer.from(value, "base64");
-      if (handleCacheHeaders(ctx.e, {
-        modifiedTime: new Date(headers["last-modified"]),
-        etag: headers.etag,
-        maxAge
-      }))
-        return;
-      setHeaders(ctx.e, headers);
-    } else {
-      await cache.removeItem(key).catch(() => {
+  if (enabled) {
+    const hasItem = await cache.hasItem(key).catch((e) => {
+      enabled = false;
+      return createError({
+        cause: e,
+        statusCode: 500,
+        statusMessage: `[Nuxt OG Image] Failed to connect to cache ${options.baseCacheKey}. Response from cache: ${e.message}`
       });
+    });
+    if (hasItem instanceof Error)
+      return hasItem;
+    if (hasItem) {
+      const { value, expiresAt, headers } = await cache.getItem(key).catch(() => ({
+        value: null,
+        expiresAt: Date.now()
+      }));
+      if (typeof getQuery(ctx.e).purge !== "undefined") {
+        await cache.removeItem(key).catch(() => {
+        });
+      } else if (expiresAt > Date.now()) {
+        cachedItem = Buffer.from(value, "base64");
+        if (handleCacheHeaders(ctx.e, {
+          modifiedTime: new Date(headers["last-modified"]),
+          etag: headers.etag,
+          maxAge
+        }))
+          return;
+        setHeaders(ctx.e, headers);
+      } else {
+        await cache.removeItem(key).catch(() => {
+        });
+      }
     }
   }
   if (!enabled) {

package/dist/runtime/composables/defineOgImage.mjs

@@ -4,13 +4,14 @@ import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
 import { withoutBase } from "ufo";
 import { getOgImagePath, separateProps, useOgImageRuntimeConfig } from "../utils.mjs";
 import { createOgImageMeta, normaliseOptions } from "../nuxt/utils.mjs";
-import { useNuxtApp, useRequestEvent, useRouter, useRuntimeConfig } from "#imports";
+import { useNuxtApp, useRequestEvent, useRoute, useRuntimeConfig } from "#imports";
 export function defineOgImage(_options = {}) {
   if (!import.meta.server)
     return;
   const nuxtApp = useNuxtApp();
   const ogImageInstances = nuxtApp.ssrContext._ogImageInstances || [];
-  const basePath = useRouter().currentRoute.value?.path || "/";
+  const route = useRoute();
+  const basePath = route.path || "/";
   const _routeRulesMatcher = toRouteMatcher(
     createRadixRouter({ routes: useRuntimeConfig().nitro?.routeRules })
   );
@@ -27,6 +28,8 @@ export function defineOgImage(_options = {}) {
   const options = normaliseOptions({
     ..._options
   });
+  if (route.query)
+    options._query = route.query;
   const { defaults } = useOgImageRuntimeConfig();
   const resolvedOptions = normaliseOptions(defu(separateProps(_options), separateProps(routeRules), defaults));
   if (_options.url) {

package/dist/runtime/core/html/fetchIsland.mjs

@@ -4,7 +4,7 @@ export function fetchIsland({ options, e }) {
   if (!options.component) {
     throw createError({
       statusCode: 500,
-      statusMessage: `Nuxt OG Image trying to render an invalid component. Received options ${JSON.stringify(options)}`
+      statusMessage: `[Nuxt OG Image] Rendering an invalid component. Received options: ${JSON.stringify(options)}.`
     });
   }
   const hashId = hash([options.component, options]);

package/dist/runtime/core/options/fetch.mjs

@@ -11,7 +11,13 @@ export async function fetchPathHtmlAndExtractOptions(e, path, key) {
   } catch (err) {
     return createError({
       statusCode: 500,
-      statusMessage: `Failed to read the path ${path} for og-image extraction. ${err.message}.`
+      statusMessage: `[Nuxt OG Image] Failed to read the path ${path} for og-image extraction. ${err.message}.`
+    });
+  }
+  if (typeof html !== "string") {
+    return createError({
+      statusCode: 500,
+      statusMessage: `[Nuxt OG Image] Got invalid response from ${path} for og-image extraction.`
     });
   }
   const payload = extractAndNormaliseOgImageOptions(html);

package/dist/runtime/core/renderers/chromium/index.mjs

@@ -14,7 +14,8 @@ const ChromiumRenderer = {
     if (screenshot instanceof Error) {
       return createError({
         statusCode: 400,
-        statusMessage: `Failed to create screenshot ${screenshot.message}.`
+        cause: screenshot,
+        statusMessage: `[Nuxt OG Image] Failed to create screenshot ${screenshot.message}.`
       });
     }
     return screenshot;

package/dist/runtime/core/utils/resolveRendererContext.mjs

@@ -1,4 +1,4 @@
-import { parseURL, withoutBase, withoutTrailingSlash } from "ufo";
+import { parseURL, withQuery, withoutBase, withoutTrailingSlash } from "ufo";
 import { createError, getQuery } from "h3";
 import { defu } from "defu";
 import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
@@ -15,21 +15,23 @@ export async function resolveRendererContext(e) {
   if (!extension) {
     return createError({
       statusCode: 400,
-      statusMessage: `Missing OG Image type.`
+      statusMessage: `[Nuxt OG Image] Missing OG Image type.`
     });
   }
   if (!["png", "jpeg", "jpg", "svg", "html", "json"].includes(extension)) {
     return createError({
       statusCode: 400,
-      statusMessage: `Unknown OG Image type ${extension}.`
+      statusMessage: `[Nuxt OG Image] Unknown OG Image type ${extension}.`
     });
   }
-  const basePath = withoutTrailingSlash(
-    path.replace(`/__og-image__/image`, "").replace(`/og.${extension}`, "")
-  );
   let queryParams = { ...getQuery(e) };
   queryParams.props = JSON.parse(queryParams.props || "{}");
   queryParams = separateProps(queryParams);
+  let basePath = withoutTrailingSlash(
+    path.replace(`/__og-image__/image`, "").replace(`/og.${extension}`, "")
+  );
+  if (queryParams._query)
+    basePath = withQuery(basePath, JSON.parse(queryParams._query));
   const isDebugJsonPayload = extension === "json" && runtimeConfig.debug;
   const key = resolvePathCacheKey(e, basePath);
   let options = queryParams.options;
@@ -61,7 +63,7 @@ export async function resolveRendererContext(e) {
   if (!options) {
     return createError({
       statusCode: 404,
-      statusMessage: "OG Image not found."
+      statusMessage: "[Nuxt OG Image] OG Image not found."
     });
   }
   let renderer;
@@ -76,7 +78,7 @@ export async function resolveRendererContext(e) {
   if (!renderer || renderer.__unenv__) {
     throw createError({
       statusCode: 400,
-      statusMessage: `Renderer ${options.renderer} is missing.`
+      statusMessage: `[Nuxt OG Image] Renderer ${options.renderer} is missing.`
     });
   }
   const ctx = {

package/dist/runtime/nitro/utils.mjs

@@ -7,7 +7,7 @@ export function resolvePathCacheKey(e, path) {
   const siteConfig = useSiteConfig(e);
   const basePath = withoutTrailingSlash(withoutLeadingSlash(normalizeKey(path || e.path)));
   return [
-    !basePath ? "index" : basePath,
+    !basePath || basePath === "/" ? "index" : basePath,
     hash([
       basePath,
       siteConfig.url,

package/dist/runtime/nuxt/utils.mjs

@@ -1,10 +1,13 @@
 import { defu } from "defu";
+import { withQuery } from "ufo";
 import { separateProps } from "../utils.mjs";
 import { unref, useServerHead } from "#imports";
 import { componentNames } from "#build/nuxt-og-image/components.mjs";
 export function createOgImageMeta(src, input, resolvedOptions, ssrContext) {
   const _input = separateProps(defu(input, ssrContext._ogImagePayload));
-  const url = src || input.url || resolvedOptions.url;
+  let url = src || input.url || resolvedOptions.url;
+  if (input._query && url)
+    url = withQuery(url, { _query: input._query });
   let urlExtension = (url.split("/").pop() || url).split(".").pop() || resolvedOptions.extension;
   if (urlExtension === "jpg")
     urlExtension = "jpeg";

package/dist/runtime/server/routes/__og-image__/font-[name]-[weight].[extension].mjs

@@ -14,7 +14,7 @@ export default defineEventHandler(async (e) => {
   if (!css) {
     return createError({
       statusCode: 500,
-      statusMessage: `Invalid Google Font ${name}:${weight}`
+      statusMessage: `[Nuxt OG Image] Invalid Google Font ${name}:${weight}`
     });
   }
   const ttfResource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/);
@@ -25,6 +25,6 @@ export default defineEventHandler(async (e) => {
     return sendRedirect(e, woff2Resource[1]);
   return createError({
     statusCode: 500,
-    statusMessage: `Malformed Google Font CSS ${css}`
+    statusMessage: `[Nuxt OG Image] Malformed Google Font CSS ${css}`
   });
 });

package/dist/runtime/server/routes/__og-image__/image.mjs

@@ -43,7 +43,7 @@ export default defineEventHandler(async (e) => {
       if (ctx.renderer.name !== "satori") {
         return createError({
           statusCode: 400,
-          statusMessage: `Generating ${extension}'s with ${renderer.name} is not supported.`
+          statusMessage: `[Nuxt OG Image] Generating ${extension}'s with ${renderer.name} is not supported.`
         });
       }
       setHeader(e, "Content-Type", `image/svg+xml`);
@@ -54,7 +54,7 @@ export default defineEventHandler(async (e) => {
       if (!renderer.supportedFormats.includes(extension)) {
         return createError({
           statusCode: 400,
-          statusMessage: `Generating ${extension}'s with ${renderer.name} is not supported.`
+          statusMessage: `[Nuxt OG Image] Generating ${extension}'s with ${renderer.name} is not supported.`
         });
       }
       setHeader(e, "Content-Type", `image/${extension === "jpg" ? "jpeg" : extension}`);
@@ -62,7 +62,7 @@ export default defineEventHandler(async (e) => {
     default:
       return createError({
         statusCode: 400,
-        statusMessage: `Invalid request for og.${extension}.`
+        statusMessage: `[Nuxt OG Image] Invalid request for og.${extension}.`
       });
   }
   const cacheApi = await useOgImageBufferCache(ctx, {
@@ -71,6 +71,8 @@ export default defineEventHandler(async (e) => {
   });
   if (typeof cacheApi === "undefined")
     return;
+  if (cacheApi instanceof H3Error)
+    return cacheApi;
   let image = cacheApi.cachedItem;
   if (!image) {
     image = await renderer.createImage(ctx);

package/dist/runtime/types.d.ts

@@ -106,6 +106,10 @@ export interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
     sharp?: SharpOptions;
     fonts?: InputFontConfig[];
     cacheMaxAgeSeconds?: number;
+    /**
+     * @internal
+     */
+    _query?: Record<string, any>;
 }
 export interface FontConfig {
     name: string;

package/dist/runtime/utils.pure.mjs

@@ -17,6 +17,7 @@ function filterIsOgImageOption(key) {
     "component",
     "renderer",
     "emojis",
+    "_query",
     "satori",
     "resvg",
     "sharp",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "3.0.0-rc.2",
+  "version": "3.0.0-rc.4",
   "packageManager": "pnpm@8.12.0",
   "description": "Enlightened OG Image generation for Nuxt.",
   "author": {
@@ -42,7 +42,7 @@
     "@unocss/preset-wind": "^0.58.0",
     "@vueuse/core": "^10.7.0",
     "chrome-launcher": "^1.1.0",
-    "css-inline": "^0.11.0",
+    "css-inline": "^0.11.2",
     "defu": "^6.1.3",
     "execa": "^8.0.1",
     "floating-vue": "2.0.0-beta.24",
@@ -74,7 +74,7 @@
     "@nuxtjs/i18n": "8.0.0-rc.8",
     "@nuxtjs/tailwindcss": "^6.10.1",
     "@unocss/nuxt": "^0.58.0",
-    "bumpp": "^9.2.0",
+    "bumpp": "^9.2.1",
     "eslint": "8.55.0",
     "jest-image-snapshot": "^6.3.0",
     "nuxt": "^3.8.2",
@@ -82,7 +82,7 @@
     "playwright": "^1.40.1",
     "sass": "^1.69.5",
     "sharp": "^0.33.0",
-    "vitest": "^1.0.2"
+    "vitest": "^1.0.4"
   },
   "build": {
     "externals": [

package/dist/client/_nuxt/builds/meta/5aeabb75-f7c0-4eb8-a883-25ad30a518dd.json

@@ -1 +0,0 @@
-{"id":"5aeabb75-f7c0-4eb8-a883-25ad30a518dd","timestamp":1702111998335,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}