nuxt-og-image 3.0.0-beta.33 → 3.0.0-beta.35

package/dist/client/_nuxt/{error-404.e1c8b413.js → error-404.6cd8cf5f.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.741e99b6.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.1e907f84.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.56ec434a.js → error-500.5e35eed4.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.741e99b6.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.1e907f84.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,12 +3,12 @@
 <head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="/__nuxt-og-image/_nuxt/entry.f47d0628.css">
-<link rel="modulepreload" as="script" crossorigin href="/__nuxt-og-image/_nuxt/entry.741e99b6.js">
+<link rel="modulepreload" as="script" crossorigin href="/__nuxt-og-image/_nuxt/entry.1e907f84.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.e1c8b413.js">
+<link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/error-404.6cd8cf5f.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.56ec434a.js">
-<script type="module" src="/__nuxt-og-image/_nuxt/entry.741e99b6.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.5e35eed4.js">
+<script type="module" src="/__nuxt-og-image/_nuxt/entry.1e907f84.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

@@ -83,6 +83,7 @@ interface FontConfig {
     name: string;
     weight: string | number;
     path?: string;
+    key?: string;
 }
 type InputFontConfig = (`${string}:${number}` | FontConfig);
 

package/dist/module.d.ts

@@ -83,6 +83,7 @@ interface FontConfig {
     name: string;
     weight: string | number;
     path?: string;
+    key?: string;
 }
 type InputFontConfig = (`${string}:${number}` | FontConfig);
 

package/dist/module.json

@@ -5,5 +5,5 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "3.0.0-beta.33"
+  "version": "3.0.0-beta.35"
 }

package/dist/module.mjs

@@ -11,7 +11,7 @@ import { onDevToolsInitialized, extendServerRpc } from '@nuxt/devtools-kit';
 import { readFile, writeFile } from 'node:fs/promises';
 import { createHash } from 'node:crypto';
 
-const version = "3.0.0-beta.33";
+const version = "3.0.0-beta.35";
 
 const autodetectableProviders = {
   azure_static: "azure",
@@ -383,17 +383,32 @@ const module = defineNuxtModule({
     await installNuxtSiteConfig();
     if (hasNuxtModule("@nuxt/content"))
       addServerPlugin(resolve("./runtime/nitro/plugins/nuxt-content"));
-    if (preset !== "stackblitz" && config.fonts) {
-      config.fonts = config.fonts.map((f) => {
-        if (typeof f === "string" || !f.path) {
+    if (!config.fonts.length)
+      config.fonts = ["Inter:400", "Inter:700"];
+    config.fonts = config.fonts.map((font) => {
+      if (typeof font === "string" && font.startsWith("Inter:")) {
+        const [_, weight] = font.split(":");
+        return {
+          name: "Inter",
+          weight,
+          // nuxt server assets
+          key: `nuxt-og-image:fonts:inter-latin-ext-${weight}-normal.woff`
+        };
+      }
+      return font;
+    });
+    nuxt.hooks.hook("nitro:config", (nitroConfig) => {
+      nitroConfig.serverAssets = nitroConfig.serverAssets || [];
+      nitroConfig.serverAssets.push({ baseName: "nuxt-og-image:fonts", dir: resolve("./runtime/server/assets") });
+    });
+    if (preset === "stackblitz") {
+      config.fonts = (config.fonts || []).map((f) => {
+        if (typeof f === "string" || !f.path && !f.key) {
           logger.warn(`The ${typeof f === "string" ? f : `${f.name}:${f.weight}`} font was skipped because remote fonts are not available in StackBlitz, please use a local font.`);
           return false;
         }
         return f;
       }).filter(Boolean);
-    } else {
-      if (!config.fonts.length)
-        config.fonts = ["Inter:400", "Inter:700"];
     }
     nuxt.options.experimental.componentIslands = true;
     addServerHandler({
@@ -535,7 +550,7 @@ ${componentImports}
       if (!nuxt.options._generate && nuxt.options.build) {
         nuxt.options.nitro.prerender = nuxt.options.nitro.prerender || {};
         nuxt.options.nitro.prerender.routes = nuxt.options.nitro.prerender.routes || [];
-        normalisedFonts.filter((f) => !f.path).forEach(({ name, weight }) => {
+        normalisedFonts.filter((f) => !f.path && !f.key).forEach(({ name, weight }) => {
           nuxt.options.nitro.prerender.routes.push(`/__og-image__/font/${name}/${weight}.ttf`);
         });
       }
@@ -568,8 +583,8 @@ ${componentImports}
     } else if (nuxt.options.build) {
       await setupBuildHandler(config, resolve);
     }
-    if (nuxt.options.nitro.prerender?.routes?.length || nuxt.options.nitro.prerender?.crawlLinks || nuxt.options._generate)
-      addServerPlugin(resolve("./runtime/nitro/plugins/prerender.ts"));
+    if (nuxt.options.build)
+      addServerPlugin(resolve("./runtime/nitro/plugins/prerender"));
     setupPrerenderHandler(config, resolve);
   }
 });

package/dist/runtime/components/Templates/Community/NuxtSeo.vue

@@ -104,9 +104,9 @@ if (typeof props.icon === 'string' && !runtimeConfig.hasNuxtIcon && process.dev)
       }"
     />
     <div class="h-full w-full justify-between relative">
-      <div class="flex flex-row justify-between items-center">
-        <div class="flex flex-col w-full" :style="icon ? { width: '65%' } : {}">
-          <h1 class="font-bold mb-[30px] text-[75px] max-w-[70%]">
+      <div class="flex flex-row justify-between items-start">
+        <div class="flex flex-col w-full max-w-[65%]">
+          <h1 class="m-0 font-bold mb-[30px] text-[75px]">
             {{ title }}
           </h1>
           <p
@@ -118,7 +118,7 @@ if (typeof props.icon === 'string' && !runtimeConfig.hasNuxtIcon && process.dev)
           </p>
         </div>
         <div v-if="icon" style="width: 30%;" class="flex justify-end">
-          <IconComponent :name="icon" size="250px" style="margin: 0 auto 0 100px;opacity: 0.9;" />
+          <IconComponent :name="icon" size="250px" style="margin: 0 auto; opacity: 0.7;" />
         </div>
       </div>
       <div class="flex flex-row justify-center items-center text-left w-full">

package/dist/runtime/composables/defineOgImageScreenshot.mjs

@@ -1,7 +1,7 @@
 import { defineOgImage, useRouter } from "#imports";
 export function defineOgImageScreenshot(options = {}) {
   const router = useRouter();
-  const route = router.currentRoute.value?.path || "";
+  const route = router.currentRoute.value?.path || "/";
   return defineOgImage({
     alt: `Web page screenshot${route ? ` of ${route}` : ""}.`,
     renderer: "chromium",

package/dist/runtime/core/cache/prerender.d.ts

@@ -1,6 +1,6 @@
 import type { Browser } from 'playwright-core';
 import type { OgImageOptions } from '../../types';
-export declare const prerenderCache: import("unstorage/dist/shared/unstorage.745f9650").a<OgImageOptions<"NuxtSeo">> | undefined;
+export declare const prerenderOptionsCache: import("unstorage/dist/shared/unstorage.745f9650").a<OgImageOptions<"NuxtSeo">> | undefined;
 export declare const prerenderChromiumContext: {
     browser?: Browser;
 };

package/dist/runtime/core/cache/prerender.mjs

@@ -1,6 +1,6 @@
 import { createStorage } from "unstorage";
 import lruCacheDriver from "unstorage/drivers/lru-cache";
-export const prerenderCache = import.meta.prerender ? createStorage({
+export const prerenderOptionsCache = import.meta.prerender ? createStorage({
   driver: lruCacheDriver({ max: 1e3 })
 }) : void 0;
 export const prerenderChromiumContext = { browser: void 0 };

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

@@ -1,22 +1,28 @@
-import { Buffer } from "node:buffer";
 import { createError } from "h3";
 import { base64ToArrayBuffer } from "../env/assets.mjs";
 import { fontCache } from "./cache.mjs";
 import { useNitroOrigin, useStorage } from "#imports";
+import { assets } from "#internal/nitro/virtual/server-assets";
 export async function loadFont({ e }, font) {
-  const fontKey = `${font.name}:${font.weight}`;
-  const storageKey = `assets:nuxt-og-image:font:${fontKey}`;
+  const fontKey = font.key || `${font.name}:${font.weight}`;
+  const storageKey = `assets:nuxt-og-image:fonts:${fontKey}`;
   if (fontCache[fontKey])
     return fontCache[fontKey];
-  const [name, weight] = fontKey.split(":");
+  const { name, weight } = font;
   let data;
-  if (await useStorage().hasItem(storageKey))
-    data = base64ToArrayBuffer(await useStorage().getItem(storageKey));
+  if (await assets.hasItem(storageKey))
+    data = base64ToArrayBuffer(await assets.getItem(storageKey));
   if (!data) {
     if (font.path) {
-      if (import.meta.prerender) {
+      if (import.meta.dev || import.meta.prerender) {
         const key = `root:public${font.path.replace("./", ":").replace("/", ":")}`;
-        data = await useStorage().getItemRaw(key);
+        if (await useStorage().hasItem(key))
+          data = await useStorage().getItemRaw(key);
+        if (!data) {
+          data = await e.$fetch(font.path, {
+            responseType: "arrayBuffer"
+          });
+        }
       } else {
         data = await e.$fetch(font.path, {
           baseURL: useNitroOrigin(e),
@@ -31,7 +37,6 @@ export async function loadFont({ e }, font) {
   }
   if (data) {
     fontCache[fontKey] = { name, weight: Number(weight), data, style: "normal" };
-    await useStorage().setItem(storageKey, Buffer.from(data).toString("base64"));
     return fontCache[fontKey];
   }
   return createError({

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

@@ -1,22 +1,21 @@
 import { joinURL, withQuery } from "ufo";
 import { useNitroOrigin } from "#imports";
 export async function createScreenshot({ basePath, e, options, extension }, browser) {
-  const path = options.component === "PageScreenshot" ? options.path : joinURL("/__og-image__/image", basePath, `og.html`);
+  const path = options.component === "PageScreenshot" ? basePath : joinURL("/__og-image__/image", basePath, `og.html`);
   const page = await browser.newPage({
     colorScheme: options.colorScheme,
     baseURL: useNitroOrigin(e)
   });
   if (import.meta.prerender && !options.html) {
-    options.html = await e.$fetch(options.path);
+    options.html = await e.$fetch(path);
   }
   try {
     await page.setViewportSize({
       width: options.width || 1200,
       height: options.height || 630
     });
-    const isHtml = options.html || options.path?.startsWith("html:");
-    if (isHtml) {
-      const html = options.html || options.path?.substring(5);
+    if (options.html) {
+      const html = options.html;
       await page.evaluate((html2) => {
         document.open("text/html");
         document.write(html2);

package/dist/runtime/core/renderers/satori/plugins/imageSrc.mjs

@@ -3,7 +3,7 @@ import { withBase } from "ufo";
 import sizeOf from "image-size";
 import { defineSatoriTransformer } from "../utils.mjs";
 import { toBase64Image } from "../../../env/assets.mjs";
-import { useNitroOrigin } from "#imports";
+import { useNitroOrigin, useStorage } from "#imports";
 export default defineSatoriTransformer({
   filter: (node) => node.type === "img",
   transform: async (node, { e }) => {
@@ -12,23 +12,32 @@ export default defineSatoriTransformer({
     if (src) {
       let updated = false;
       let dimensions;
-      if (!updated) {
-        let valid = true;
-        const response = await e.$fetch(src, {
+      let imageBuffer;
+      let valid = true;
+      if (import.meta.prerender || import.meta.dev) {
+        const key = `root:public${src.replace("./", ":").replace("/", ":")}`;
+        if (await useStorage().hasItem(key)) {
+          imageBuffer = await useStorage().getItemRaw(key);
+          updated = !!imageBuffer;
+        }
+      }
+      if (!import.meta.prerender && !updated) {
+        imageBuffer = await e.$fetch(src, {
           baseURL: useNitroOrigin(e),
           responseType: "arrayBuffer"
         }).catch(() => {
           valid = false;
         });
-        if (valid) {
-          node.props.src = toBase64Image(src, response);
-          try {
-            const imageSize = sizeOf(Buffer.from(response));
-            dimensions = { width: imageSize.width, height: imageSize.height };
-          } catch (e2) {
-          }
-          updated = true;
+        valid = !!imageBuffer;
+      }
+      if (valid) {
+        node.props.src = toBase64Image(src, imageBuffer);
+        try {
+          const imageSize = sizeOf(Buffer.from(imageBuffer));
+          dimensions = { width: imageSize.width, height: imageSize.height };
+        } catch (e2) {
         }
+        updated = true;
       }
       if (dimensions?.width && dimensions?.height) {
         const naturalAspectRatio = dimensions.width / dimensions.height;

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

@@ -1,13 +1,13 @@
-import { parseURL, withoutBase, withoutLeadingSlash, withoutTrailingSlash } from "ufo";
+import { parseURL, withoutBase, withoutTrailingSlash } from "ufo";
 import { createError, getQuery } from "h3";
 import { defu } from "defu";
 import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
-import { hash } from "ohash";
 import { fetchPathHtmlAndExtractOptions } from "../options/fetch.mjs";
-import { prerenderCache } from "../cache/prerender.mjs";
+import { prerenderOptionsCache } from "../cache/prerender.mjs";
 import { useChromiumRenderer, useSatoriRenderer } from "../renderers/satori/instances.mjs";
 import { separateProps, useOgImageRuntimeConfig } from "../../utils.mjs";
-import { useRuntimeConfig, useSiteConfig } from "#imports";
+import { resolvePathCacheKey } from "../../nitro/utils.mjs";
+import { useRuntimeConfig } from "#imports";
 export async function resolveRendererContext(e) {
   const runtimeConfig = useOgImageRuntimeConfig();
   const path = parseURL(e.path).pathname;
@@ -31,20 +31,12 @@ export async function resolveRendererContext(e) {
   queryParams.props = JSON.parse(queryParams.props || "{}");
   queryParams = separateProps(queryParams);
   const isDebugJsonPayload = extension === "json" && runtimeConfig.debug;
-  const siteConfig = useSiteConfig(e);
-  const key = [
-    withoutLeadingSlash(basePath === "/" || !basePath ? "index" : basePath).replaceAll("/", "-"),
-    hash([
-      basePath,
-      siteConfig.url,
-      hash(queryParams)
-    ])
-  ].join(":");
+  const key = resolvePathCacheKey(e, basePath);
   let options = queryParams.options;
   if (!options) {
-    if (import.meta.prerender) {
-      options = await prerenderCache?.getItem(key);
-    } else {
+    if (import.meta.prerender)
+      options = await prerenderOptionsCache?.getItem(key);
+    if (!options) {
       const payload = await fetchPathHtmlAndExtractOptions(e, basePath, key);
       if (payload instanceof Error)
         return payload;

package/dist/runtime/nitro/plugins/prerender.mjs

@@ -1,16 +1,18 @@
-import { parseURL, withoutBase, withoutLeadingSlash } from "ufo";
+import { parseURL, withoutBase } from "ufo";
 import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
 import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
 import { defu } from "defu";
 import { extractAndNormaliseOgImageOptions } from "../../core/options/extract.mjs";
-import { prerenderCache, prerenderChromiumContext } from "../../core/cache/prerender.mjs";
+import { prerenderChromiumContext, prerenderOptionsCache } from "../../core/cache/prerender.mjs";
 import { isInternalRoute } from "../../utils.pure.mjs";
+import { resolvePathCacheKey } from "../utils.mjs";
 import { useRuntimeConfig } from "#imports";
 export default defineNitroPlugin(async (nitro) => {
   if (!import.meta.prerender)
     return;
-  nitro.hooks.hook("render:html", async ({ head, bodyAppend }, e) => {
-    const path = parseURL(e.event.path).pathname;
+  nitro.hooks.hook("render:html", async (html, ctx) => {
+    const { head, bodyAppend } = html;
+    const path = parseURL(ctx.event.path).pathname;
     if (isInternalRoute(path))
       return;
     const runtimeConfig = useRuntimeConfig();
@@ -28,10 +30,8 @@ export default defineNitroPlugin(async (nitro) => {
     ].join("\n"));
     if (!options)
       return;
-    const key = [
-      withoutLeadingSlash(path === "/" || !path ? "index" : path).replaceAll("/", "-")
-    ].join(":");
-    await prerenderCache.setItem(key, options);
+    const key = resolvePathCacheKey(ctx.event);
+    await prerenderOptionsCache.setItem(key, options);
   });
   nitro.hooks.hook("close", () => {
     if (prerenderChromiumContext.browser) {

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

@@ -0,0 +1,2 @@
+import type { H3Event } from 'h3';
+export declare function resolvePathCacheKey(e: H3Event, path?: string): string;

package/dist/runtime/nitro/utils.mjs

@@ -0,0 +1,17 @@
+import { withoutLeadingSlash, withoutTrailingSlash } from "ufo";
+import { hash } from "ohash";
+import { normalizeKey } from "unstorage";
+import { getQuery } from "h3";
+import { useSiteConfig } from "#imports";
+export function resolvePathCacheKey(e, path) {
+  const siteConfig = useSiteConfig(e);
+  const basePath = withoutTrailingSlash(withoutLeadingSlash(normalizeKey(path || e.path)));
+  return [
+    !basePath ? "index" : basePath,
+    hash([
+      basePath,
+      siteConfig.url,
+      hash(getQuery(e))
+    ])
+  ].join(":");
+}

package/dist/runtime/types.d.ts

@@ -110,6 +110,7 @@ export interface FontConfig {
     name: string;
     weight: string | number;
     path?: string;
+    key?: string;
 }
 export type InputFontConfig = (`${string}:${number}` | FontConfig);
 export type RendererOptions = Omit<OgImageOptions, 'extension'> & {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "3.0.0-beta.33",
+  "version": "3.0.0-beta.35",
   "packageManager": "pnpm@8.11.0",
   "description": "Enlightened OG Image generation for Nuxt.",
   "author": {
@@ -65,7 +65,7 @@
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.2.2",
+    "@antfu/eslint-config": "2.3.1",
     "@img/sharp-linux-x64": "0.33.0",
     "@nuxt/content": "^2.9.0",
     "@nuxt/devtools": "1.0.4",
@@ -73,7 +73,7 @@
     "@nuxt/test-utils": "3.8.1",
     "@nuxt/ui": "^2.11.0",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
-    "@nuxtjs/i18n": "8.0.0-rc.6",
+    "@nuxtjs/i18n": "8.0.0-rc.7",
     "@nuxtjs/tailwindcss": "^6.10.1",
     "@unocss/nuxt": "^0.58.0",
     "bumpp": "^9.2.0",
@@ -83,7 +83,7 @@
     "nuxt-icon": "0.6.6",
     "playwright": "^1.40.1",
     "sass": "^1.69.5",
-    "vitest": "^0.34.6"
+    "vitest": "^1.0.1"
   },
   "build": {
     "externals": [

package/dist/client/_nuxt/builds/meta/604ade75-02af-4204-a79e-6b976b1bce82.json

@@ -1 +0,0 @@
-{"id":"604ade75-02af-4204-a79e-6b976b1bce82","timestamp":1701700068664,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}