nuxt-og-image 3.0.0-beta.56 → 3.0.0-beta.57

package/dist/client/_nuxt/{error-404.98ecfc89.js → error-404.bda968de.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.b9ee0ddb.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.79f3f186.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.372010ac.js → error-500.174afb83.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.b9ee0ddb.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.79f3f186.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.0c999acd.css">
-<link rel="modulepreload" as="script" crossorigin href="/__nuxt-og-image/_nuxt/entry.b9ee0ddb.js">
+<link rel="modulepreload" as="script" crossorigin href="/__nuxt-og-image/_nuxt/entry.79f3f186.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.98ecfc89.js">
+<link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/error-404.bda968de.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.372010ac.js">
-<script type="module" src="/__nuxt-og-image/_nuxt/entry.b9ee0ddb.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.174afb83.js">
+<script type="module" src="/__nuxt-og-image/_nuxt/entry.79f3f186.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

@@ -78,15 +78,16 @@ interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
     satori?: SatoriOptions;
     screenshot?: Partial<ScreenshotOptions>;
     sharp?: SharpOptions;
+    fonts?: InputFontConfig[];
     cacheMaxAgeSeconds?: number;
 }
 interface FontConfig {
     name: string;
-    weight: string | number;
+    weight?: string | number;
     path?: string;
     key?: string;
 }
-type InputFontConfig = (`${string}:${number}` | FontConfig);
+type InputFontConfig = (`${string}:${number}` | string | FontConfig);
 interface RuntimeCompatibilitySchema {
     chromium: 'node' | false;
     ['css-inline']: 'node' | false;

package/dist/module.d.ts

@@ -78,15 +78,16 @@ interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
     satori?: SatoriOptions;
     screenshot?: Partial<ScreenshotOptions>;
     sharp?: SharpOptions;
+    fonts?: InputFontConfig[];
     cacheMaxAgeSeconds?: number;
 }
 interface FontConfig {
     name: string;
-    weight: string | number;
+    weight?: string | number;
     path?: string;
     key?: string;
 }
-type InputFontConfig = (`${string}:${number}` | FontConfig);
+type InputFontConfig = (`${string}:${number}` | string | FontConfig);
 interface RuntimeCompatibilitySchema {
     chromium: 'node' | false;
     ['css-inline']: 'node' | false;

package/dist/module.json

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

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-beta.56";
+const version = "3.0.0-beta.57";
 
 const autodetectableProviders = {
   azure_static: "azure",
@@ -358,6 +358,27 @@ async function ensureChromium(logger) {
   installChromeProcess.pid && terminate(installChromeProcess.pid);
 }
 
+function normaliseFontInput(fonts) {
+  return fonts.map((f) => {
+    if (typeof f === "string") {
+      const [name, weight] = f.split(":");
+      return {
+        cacheKey: f,
+        name,
+        weight: weight || "400",
+        style: "normal",
+        path: void 0
+      };
+    }
+    return {
+      cacheKey: f.key || `${f.name}:${f.weight}`,
+      style: "normal",
+      weight: 400,
+      ...f
+    };
+  });
+}
+
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
@@ -421,13 +442,13 @@ const module = defineNuxtModule({
         prerender: { sharp: false }
       });
     }
+    let hasChromeLocally = false;
+    try {
+      hasChromeLocally = !!Launcher.getFirstInstallation();
+    } catch {
+    }
     const isUndefinedOrTruthy = (v) => typeof v === "undefined" || v !== false;
     if (isUndefinedOrTruthy(config.compatibility?.prerender?.chromium) && isUndefinedOrTruthy(config.compatibility?.runtime?.chromium)) {
-      let hasChromeLocally = false;
-      try {
-        hasChromeLocally = !!Launcher.getFirstInstallation();
-      } catch {
-      }
       if (isCI)
         await ensureChromium(logger);
       const hasPlaywrightDependency = !!await tryResolveModule("playwright");
@@ -444,12 +465,23 @@ const module = defineNuxtModule({
           prerender: { chromium: "node" }
         });
       }
+    } else if (!hasChromeLocally && nuxt.options.dev && config.compatibility?.dev?.chromium === "node") {
+      await ensureChromium(logger);
     }
     await installNuxtSiteConfig();
     if (hasNuxtModule("@nuxt/content"))
       addServerPlugin(resolve("./runtime/nitro/plugins/nuxt-content"));
     if (!config.fonts.length)
       config.fonts = ["Inter:400", "Inter:700"];
+    if (preset === "cloudflare") {
+      config.fonts = config.fonts.filter((f) => {
+        if (typeof f !== "string" && f.path) {
+          logger.warn(`The ${f.name}:${f.weight} font was skipped because remote fonts are not available in Cloudflare Workers, please use a Google font.`);
+          return false;
+        }
+        return true;
+      });
+    }
     if (preset === "stackblitz") {
       config.fonts = config.fonts.map((f) => {
         if (typeof f === "string" && f.startsWith("Inter:")) {
@@ -584,7 +616,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) => void | Promise<void>
+    'nuxt-og-image:satori:vnodes': (vnodes: import('${typesPath}').VNode, ctx: ctx: import('${typesPath}').OgImageRenderEventContext) => void | Promise<void>
   }
 }
 
@@ -601,17 +633,7 @@ ${componentImports}
     if (!cacheEnabled)
       baseCacheKey = false;
     nuxt.hooks.hook("modules:done", async () => {
-      const normalisedFonts = config.fonts.map((f) => {
-        if (typeof f === "string") {
-          const [name, weight] = f.split(":");
-          return {
-            name,
-            weight,
-            path: void 0
-          };
-        }
-        return f;
-      });
+      const normalisedFonts = normaliseFontInput(config.fonts);
       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 || [];
@@ -619,8 +641,12 @@ ${componentImports}
           nuxt.options.nitro.prerender.routes.push(`/__og-image__/font/${name}/${weight}.ttf`);
         });
       }
-      let colorPreference = hasNuxtModule("@nuxtjs/color-mode") ? (await getNuxtModuleOptions("@nuxtjs/color-mode")).preference : "light";
-      if (!colorPreference || !["dark", "light"].includes(colorPreference))
+      const hasColorModeModule = hasNuxtModule("@nuxtjs/color-mode");
+      const colorModeOptions = hasColorModeModule ? await getNuxtModuleOptions("@nuxtjs/color-mode") : {};
+      let colorPreference = colorModeOptions.preference;
+      if (!colorPreference || colorPreference === "system")
+        colorPreference = colorModeOptions.fallback;
+      if (!colorPreference || colorPreference === "system")
         colorPreference = "light";
       const runtimeConfig = {
         version,

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

@@ -0,0 +1,3 @@
+import type { ResolvedFontConfig } from '../../types';
+export declare const fontPromises: Record<string, Promise<ResolvedFontConfig>>;
+export declare const fontCache: import("unstorage/dist/shared/unstorage.745f9650").a<BufferSource>;

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

@@ -0,0 +1,6 @@
+import { createStorage } from "unstorage";
+import lruCacheDriver from "unstorage/drivers/lru-cache";
+export const fontPromises = {};
+export const fontCache = createStorage({
+  driver: lruCacheDriver({ max: 10 })
+});

package/dist/runtime/core/font/fetch.d.ts

@@ -1,2 +1,2 @@
-import type { FontConfig, OgImageRenderEventContext } from '../../types';
-export declare function loadFont({ e }: OgImageRenderEventContext, font: FontConfig): Promise<any>;
+import type { OgImageRenderEventContext, ResolvedFontConfig } from '../../types';
+export declare function loadFont({ e }: OgImageRenderEventContext, font: ResolvedFontConfig): Promise<ResolvedFontConfig>;

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

@@ -1,11 +1,7 @@
-import { createError } from "h3";
-import { fontCache } from "./cache.mjs";
-import { useNitroOrigin, useStorage } from "#imports";
+import { useStorage } from "#internal/nitro";
+import { useNitroOrigin } from "#imports";
 import { assets } from "#internal/nitro/virtual/server-assets";
 export async function loadFont({ e }, font) {
-  const fontKey = font.key || `${font.name}:${font.weight}`;
-  if (fontCache[fontKey])
-    return fontCache[fontKey];
   const { name, weight } = font;
   let data;
   if (import.meta.dev || import.meta.prerender) {
@@ -35,12 +31,6 @@ export async function loadFont({ e }, font) {
       });
     }
   }
-  if (data) {
-    fontCache[fontKey] = { name, weight: Number(weight), data, style: "normal" };
-    return fontCache[fontKey];
-  }
-  return createError({
-    statusCode: 500,
-    statusMessage: `Failed to fetch font: ${fontKey}`
-  });
+  font.data = data;
+  return font;
 }

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

@@ -1,18 +1,40 @@
 import { defu } from "defu";
-import { useOgImageRuntimeConfig } from "../../../utils.mjs";
+import { normaliseFontInput, useOgImageRuntimeConfig } from "../../../utils.mjs";
+import { loadFont } from "../../font/fetch.mjs";
+import { fontCache, fontPromises } from "../../cache/fonts.mjs";
 import { createVNodes } from "./vnodes.mjs";
-import { loadFonts, satoriFonts } from "./fonts.mjs";
 import { useResvg, useSatori, useSharp } from "./instances.mjs";
+import { theme } from "#nuxt-og-image/unocss-config.mjs";
 export async function createSvg(event) {
   const { options } = event;
   const { fonts, satoriOptions } = useOgImageRuntimeConfig();
   const vnodes = await createVNodes(event);
-  await event._nitro.hooks.callHook("nuxt-og-image:satori:vnodes", vnodes);
-  if (!satoriFonts.length)
-    satoriFonts.push(...await loadFonts(event, fonts));
+  await event._nitro.hooks.callHook("nuxt-og-image:satori:vnodes", vnodes, event);
+  const normalisedFonts = normaliseFontInput([...fonts, ...event.options.fonts || []]);
+  const localFontPromises = [];
+  const preloadedFonts = [];
+  for (const font of normalisedFonts) {
+    if (await fontCache.hasItem(font.cacheKey)) {
+      font.data = await fontCache.getItemRaw(font.cacheKey);
+      preloadedFonts.push(font);
+    } else {
+      if (!fontPromises[font.cacheKey]) {
+        fontPromises[font.cacheKey] = loadFont(event, font).then(async (_font) => {
+          if (_font?.data)
+            await fontCache.setItemRaw(_font.cacheKey, _font.data);
+          return _font;
+        });
+      }
+      localFontPromises.push(fontPromises[font.cacheKey]);
+    }
+  }
+  const awaitedFonts = await Promise.all(localFontPromises);
   const satori = await useSatori();
   return satori(vnodes, defu(options.satori, satoriOptions, {
-    fonts: satoriFonts,
+    fonts: [...preloadedFonts, ...awaitedFonts].map((_f) => {
+      return { ..._f, weight: Number(_f.weight) };
+    }),
+    tailwindConfig: { theme },
     embedFont: true,
     width: options.width,
     height: options.height

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

@@ -3,56 +3,73 @@ import { withBase } from "ufo";
 import sizeOf from "image-size";
 import { defineSatoriTransformer } from "../utils.mjs";
 import { toBase64Image } from "../../../env/assets.mjs";
-import { useNitroOrigin, useStorage } from "#imports";
-export default defineSatoriTransformer({
-  filter: (node) => node.type === "img",
-  transform: async (node, { e }) => {
-    const src = node.props?.src;
-    const isRelative = src?.startsWith("/");
-    if (src) {
-      let updated = false;
-      let dimensions;
-      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;
+import { useStorage } from "#internal/nitro";
+import { useNitroOrigin } from "#imports";
+export default defineSatoriTransformer([
+  // fix <img src="">
+  {
+    filter: (node) => node.type === "img",
+    transform: async (node, { e }) => {
+      const src = node.props?.src;
+      const isRelative = src?.startsWith("/");
+      if (src) {
+        let updated = false;
+        let dimensions;
+        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;
-        });
-        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) {
+        if (!import.meta.prerender && !updated) {
+          imageBuffer = await e.$fetch(src, {
+            baseURL: useNitroOrigin(e),
+            responseType: "arrayBuffer"
+          }).catch(() => {
+            valid = false;
+          });
+          valid = !!imageBuffer;
         }
-        updated = true;
-      }
-      if (dimensions?.width && dimensions?.height) {
-        const naturalAspectRatio = dimensions.width / dimensions.height;
-        if (node.props.width && !node.props.height) {
-          node.props.height = Math.round(node.props.width / naturalAspectRatio);
-        } else if (node.props.height && !node.props.width) {
-          node.props.width = Math.round(node.props.height * naturalAspectRatio);
-        } else if (!node.props.width && !node.props.height) {
-          node.props.width = dimensions.width;
-          node.props.height = dimensions.height;
+        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;
+          if (node.props.width && !node.props.height) {
+            node.props.height = Math.round(node.props.width / naturalAspectRatio);
+          } else if (node.props.height && !node.props.width) {
+            node.props.width = Math.round(node.props.height * naturalAspectRatio);
+          } else if (!node.props.width && !node.props.height) {
+            node.props.width = dimensions.width;
+            node.props.height = dimensions.height;
+          }
+        }
+        if (!updated && isRelative) {
+          node.props.src = `${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()}`;
         }
       }
-      if (!updated && isRelative) {
-        node.props.src = `${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()}`;
+    }
+  },
+  // fix style="background-image: url('')"
+  {
+    filter: (node) => node.props.style?.backgroundImage?.includes("url("),
+    transform: async (node, { e }) => {
+      const backgroundImage = node.props.style.backgroundImage;
+      if (backgroundImage) {
+        const src = backgroundImage.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "");
+        const isRelative = src?.startsWith("/");
+        if (isRelative)
+          node.props.style.backgroundImage = `url(${withBase(src, `${useNitroOrigin(e)}`)}?${Date.now()})`;
       }
     }
   }
-});
+]);

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

@@ -7,7 +7,7 @@ import { prerenderOptionsCache } from "../cache/prerender.mjs";
 import { useChromiumRenderer, useSatoriRenderer } from "../renderers/satori/instances.mjs";
 import { separateProps, useOgImageRuntimeConfig } from "../../utils.mjs";
 import { resolvePathCacheKey } from "../../nitro/utils.mjs";
-import { useNitroApp, useRuntimeConfig } from "#imports";
+import { useNitroApp, useRuntimeConfig } from "#internal/nitro";
 export async function resolveRendererContext(e) {
   const runtimeConfig = useOgImageRuntimeConfig();
   const path = parseURL(e.path).pathname;

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

@@ -6,7 +6,7 @@ import { extractAndNormaliseOgImageOptions } from "../../core/options/extract.mj
 import { prerenderOptionsCache } from "../../core/cache/prerender.mjs";
 import { isInternalRoute } from "../../utils.pure.mjs";
 import { resolvePathCacheKey } from "../utils.mjs";
-import { useRuntimeConfig } from "#imports";
+import { useRuntimeConfig } from "#internal/nitro";
 export default defineNitroPlugin(async (nitro) => {
   if (!import.meta.prerender)
     return;

package/dist/runtime/types.d.ts

@@ -104,15 +104,20 @@ export interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
     satori?: SatoriOptions;
     screenshot?: Partial<ScreenshotOptions>;
     sharp?: SharpOptions;
+    fonts?: InputFontConfig[];
     cacheMaxAgeSeconds?: number;
 }
 export interface FontConfig {
     name: string;
-    weight: string | number;
+    weight?: string | number;
     path?: string;
     key?: string;
 }
-export type InputFontConfig = (`${string}:${number}` | FontConfig);
+export interface ResolvedFontConfig extends FontConfig {
+    cacheKey: string;
+    data?: BufferSource;
+}
+export type InputFontConfig = (`${string}:${number}` | string | FontConfig);
 export interface RuntimeCompatibilitySchema {
     chromium: 'node' | false;
     ['css-inline']: 'node' | false;

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

@@ -1,5 +1,6 @@
-import type { OgImageOptions } from './types';
+import type { InputFontConfig, OgImageOptions, ResolvedFontConfig } from './types';
 export declare function isInternalRoute(path: string): boolean;
 export declare function separateProps(options: OgImageOptions | undefined, ignoreKeys?: string[]): {
     props: Record<string, any>;
 };
+export declare function normaliseFontInput(fonts: InputFontConfig[]): ResolvedFontConfig[];

package/dist/runtime/utils.pure.mjs

@@ -9,6 +9,7 @@ function filterIsOgImageOption(key) {
     "extension",
     "width",
     "height",
+    "fonts",
     "alt",
     "props",
     "renderer",
@@ -20,8 +21,7 @@ function filterIsOgImageOption(key) {
     "resvg",
     "sharp",
     "screenshot",
-    "cacheMaxAgeSeconds",
-    "componentHash"
+    "cacheMaxAgeSeconds"
   ];
   return keys.includes(key);
 }
@@ -41,3 +41,23 @@ export function separateProps(options, ignoreKeys = []) {
     props
   };
 }
+export function normaliseFontInput(fonts) {
+  return fonts.map((f) => {
+    if (typeof f === "string") {
+      const [name, weight] = f.split(":");
+      return {
+        cacheKey: f,
+        name,
+        weight: weight || "400",
+        style: "normal",
+        path: void 0
+      };
+    }
+    return {
+      cacheKey: f.key || `${f.name}:${f.weight}`,
+      style: "normal",
+      weight: 400,
+      ...f
+    };
+  });
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "3.0.0-beta.56",
+  "version": "3.0.0-beta.57",
   "packageManager": "pnpm@8.11.0",
   "description": "Enlightened OG Image generation for Nuxt.",
   "author": {

package/dist/client/_nuxt/builds/meta/28b1469d-fd08-4832-8243-eb0cf430bf2b.json

@@ -1 +0,0 @@
-{"id":"28b1469d-fd08-4832-8243-eb0cf430bf2b","timestamp":1701958017527,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}

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

@@ -1 +0,0 @@
-export declare const fontCache: Record<string, any>;

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

@@ -1 +0,0 @@
-export const fontCache = {};

package/dist/runtime/core/renderers/satori/fonts.d.ts

@@ -1,3 +0,0 @@
-import type { FontConfig, OgImageRenderEventContext } from '../../../types';
-export declare const satoriFonts: any[];
-export declare function loadFonts(e: OgImageRenderEventContext, fonts: FontConfig[]): Promise<any>;

package/dist/runtime/core/renderers/satori/fonts.mjs

@@ -1,8 +0,0 @@
-import { loadFont } from "../../font/fetch.mjs";
-export const satoriFonts = [];
-let fontLoadPromise = null;
-export function loadFonts(e, fonts) {
-  if (fontLoadPromise)
-    return fontLoadPromise;
-  return fontLoadPromise = Promise.all(fonts.map((font) => loadFont(e, font)));
-}