nuxt-og-image 3.0.0-beta.43 → 3.0.0-beta.45

package/dist/client/_nuxt/{error-404.3bd94f61.js → error-404.8ae425bf.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.e02bad90.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.b64dd084.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.f289d6ba.js → error-500.a5bb9a8b.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.e02bad90.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.b64dd084.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

@@ -2,13 +2,13 @@
 <html >
 <head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<link rel="stylesheet" href="/__nuxt-og-image/_nuxt/entry.47aab0b4.css">
-<link rel="modulepreload" as="script" crossorigin href="/__nuxt-og-image/_nuxt/entry.e02bad90.js">
+<link rel="stylesheet" href="/__nuxt-og-image/_nuxt/entry.33a59bbf.css">
+<link rel="modulepreload" as="script" crossorigin href="/__nuxt-og-image/_nuxt/entry.b64dd084.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.3bd94f61.js">
+<link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/error-404.8ae425bf.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.f289d6ba.js">
-<script type="module" src="/__nuxt-og-image/_nuxt/entry.e02bad90.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.a5bb9a8b.js">
+<script type="module" src="/__nuxt-og-image/_nuxt/entry.b64dd084.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

@@ -2,8 +2,8 @@ import * as _nuxt_schema from '@nuxt/schema';
 import { SatoriOptions } from 'satori';
 import { ResvgRenderOptions } from '@resvg/resvg-js';
 import { SharpOptions } from 'sharp';
+import { WasmOptions } from 'nitropack';
 import { OgImageComponents } from '#nuxt-og-image/components';
-import { WasmOptions } from 'nitropack/types';
 
 type IconifyEmojiIconSets = 'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'streamline-emojis' | 'openmoji';
 interface OgImageComponent {
@@ -86,17 +86,21 @@ interface FontConfig {
     key?: string;
 }
 type InputFontConfig = (`${string}:${number}` | FontConfig);
-
 interface RuntimeCompatibilitySchema {
     bindings: {
         chromium: 'node' | false;
         ['css-inline']: 'node' | false;
-        resvg: 'node' | 'wasm' | 'stackblitz' | false;
-        satori: 'node' | 'wasm' | 'stackblitz' | false;
+        resvg: 'node' | 'wasm' | 'wasm-fs' | false;
+        satori: 'node' | 'wasm' | 'wasm-fs' | false;
         sharp: 'node' | false;
     };
     wasm?: WasmOptions;
 }
+interface CompatibilityConfig {
+    dev?: Partial<RuntimeCompatibilitySchema>;
+    runtime?: Partial<RuntimeCompatibilitySchema>;
+    prerender?: Partial<RuntimeCompatibilitySchema>;
+}
 
 interface ModuleOptions {
     /**
@@ -137,19 +141,6 @@ interface ModuleOptions {
      * @see https://sharp.pixelplumbing.com/api-constructor
      */
     sharpOptions?: Partial<SharpOptions>;
-    /**
-     * Include Satori runtime.
-     *
-     * @default true
-     */
-    runtimeSatori: boolean;
-    /**
-     * Include the Browser runtime.
-     * This will need to be manually enabled for production environments.
-     *
-     * @default `process.dev`
-     */
-    runtimeChromium: boolean;
     /**
      * Enables debug logs and a debug endpoint.
      *
@@ -177,9 +168,9 @@ interface ModuleOptions {
      */
     componentDirs: string[];
     /**
-     * Manually modify the deployment compatibility.
+     * Manually modify the compatibility.
      */
-    runtimeCompatibility?: RuntimeCompatibilitySchema;
+    compatibility?: CompatibilityConfig;
 }
 interface ModuleHooks {
     'nuxt-og-image:components': (ctx: {

package/dist/module.d.ts

@@ -2,8 +2,8 @@ import * as _nuxt_schema from '@nuxt/schema';
 import { SatoriOptions } from 'satori';
 import { ResvgRenderOptions } from '@resvg/resvg-js';
 import { SharpOptions } from 'sharp';
+import { WasmOptions } from 'nitropack';
 import { OgImageComponents } from '#nuxt-og-image/components';
-import { WasmOptions } from 'nitropack/types';
 
 type IconifyEmojiIconSets = 'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'streamline-emojis' | 'openmoji';
 interface OgImageComponent {
@@ -86,17 +86,21 @@ interface FontConfig {
     key?: string;
 }
 type InputFontConfig = (`${string}:${number}` | FontConfig);
-
 interface RuntimeCompatibilitySchema {
     bindings: {
         chromium: 'node' | false;
         ['css-inline']: 'node' | false;
-        resvg: 'node' | 'wasm' | 'stackblitz' | false;
-        satori: 'node' | 'wasm' | 'stackblitz' | false;
+        resvg: 'node' | 'wasm' | 'wasm-fs' | false;
+        satori: 'node' | 'wasm' | 'wasm-fs' | false;
         sharp: 'node' | false;
     };
     wasm?: WasmOptions;
 }
+interface CompatibilityConfig {
+    dev?: Partial<RuntimeCompatibilitySchema>;
+    runtime?: Partial<RuntimeCompatibilitySchema>;
+    prerender?: Partial<RuntimeCompatibilitySchema>;
+}
 
 interface ModuleOptions {
     /**
@@ -137,19 +141,6 @@ interface ModuleOptions {
      * @see https://sharp.pixelplumbing.com/api-constructor
      */
     sharpOptions?: Partial<SharpOptions>;
-    /**
-     * Include Satori runtime.
-     *
-     * @default true
-     */
-    runtimeSatori: boolean;
-    /**
-     * Include the Browser runtime.
-     * This will need to be manually enabled for production environments.
-     *
-     * @default `process.dev`
-     */
-    runtimeChromium: boolean;
     /**
      * Enables debug logs and a debug endpoint.
      *
@@ -177,9 +168,9 @@ interface ModuleOptions {
      */
     componentDirs: string[];
     /**
-     * Manually modify the deployment compatibility.
+     * Manually modify the compatibility.
      */
-    runtimeCompatibility?: RuntimeCompatibilitySchema;
+    compatibility?: CompatibilityConfig;
 }
 interface ModuleHooks {
     'nuxt-og-image:components': (ctx: {

package/dist/module.json

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

package/dist/module.mjs

@@ -1,17 +1,20 @@
 import * as fs from 'node:fs';
 import { existsSync } from 'node:fs';
-import { loadNuxtModuleInstance, useNuxt, createResolver, addTemplate, resolvePath, defineNuxtModule, useLogger, hasNuxtModule, addServerPlugin, addServerHandler, addImports, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
+import { useNuxt, addTemplate, loadNuxtModuleInstance, createResolver, resolvePath, defineNuxtModule, useLogger, tryResolveModule, hasNuxtModule, addServerPlugin, addServerHandler, addImports, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
 import { assertSiteConfig, installNuxtSiteConfig } from 'nuxt-site-config-kit';
 import { provider, env, isDevelopment } from 'std-env';
 import { hash } from 'ohash';
 import { relative, dirname } from 'pathe';
 import { defu } from 'defu';
-import 'nypm';
+import { Launcher } from 'chrome-launcher';
+import { addDependency } from 'nypm';
 import { onDevToolsInitialized, extendServerRpc } from '@nuxt/devtools-kit';
 import { readFile, writeFile } from 'node:fs/promises';
 import { createHash } from 'node:crypto';
+import { execa } from 'execa';
+import terminate from 'terminate';
 
-const version = "3.0.0-beta.43";
+const version = "3.0.0-beta.45";
 
 const autodetectableProviders = {
   azure_static: "azure",
@@ -54,7 +57,8 @@ const awsLambda = {
     "css-inline": "node",
     "resvg": "node",
     "satori": "node",
-    "sharp": "node"
+    "sharp": false
+    // 0.33.x has issues
   }
 };
 const RuntimeCompatibility = {
@@ -65,13 +69,13 @@ const RuntimeCompatibility = {
     bindings: {
       "chromium": false,
       "css-inline": false,
-      "resvg": "stackblitz",
-      "satori": "stackblitz",
+      "resvg": "wasm-fs",
+      "satori": "wasm-fs",
       "sharp": false
     }
   },
   "aws-lambda": awsLambda,
-  "netlify": awsLambda,
+  "netlify": defu({ bindings: { sharp: false } }, awsLambda),
   "netlify-edge": {
     bindings: {
       "chromium": false,
@@ -125,11 +129,11 @@ function getPresetNitroPresetCompatibility(target) {
   return compatibility;
 }
 function applyNitroPresetCompatibility(nitroConfig, options) {
-  let compatibility = options?.compatibility;
   const target = resolveNitroPreset(nitroConfig);
-  if (!compatibility)
-    compatibility = getPresetNitroPresetCompatibility(target);
-  const resolve = options.resolve;
+  const compatibility = defu(options.compatibility, getPresetNitroPresetCompatibility(target));
+  const { resolve } = options;
+  nitroConfig.alias["#nuxt-og-image/renderers/satori"] = compatibility.bindings.satori ? resolve("./runtime/core/renderers/satori") : "unenv/runtime/mock/empty";
+  nitroConfig.alias["#nuxt-og-image/renderers/chromium"] = compatibility.bindings.chromium ? resolve("./runtime/core/renderers/chromium") : "unenv/runtime/mock/empty";
   function applyBinding(key) {
     const binding = compatibility.bindings[key];
     if (binding === false)
@@ -150,8 +154,21 @@ function applyNitroPresetCompatibility(nitroConfig, options) {
   }
   nitroConfig.rollupConfig = nitroConfig.rollupConfig || {};
   nitroConfig.wasm = defu(compatibility.wasm, nitroConfig.wasm);
+  nitroConfig.virtual["#nuxt-og-image/compatibility"] = () => `export default ${JSON.stringify(compatibility)}`;
+  addTemplate({
+    filename: "nuxt-og-image/compatibility.mjs",
+    getContents() {
+      return `export default ${JSON.stringify(compatibility)}`;
+    },
+    options: { mode: "server" }
+  });
   return compatibility;
 }
+function ensureDependencies(dep, nuxt = useNuxt()) {
+  return Promise.all(dep.map((d) => {
+    return addDependency(d, { cwd: nuxt.options.rootDir, dev: true });
+  }));
+}
 
 async function getNuxtModuleOptions(module, nuxt = useNuxt()) {
   const moduleMeta = (typeof module === "string" ? { name: module } : await module.getMeta?.()) || {};
@@ -253,16 +270,12 @@ function setupDevToolsUI(options, resolve, nuxt = useNuxt()) {
 
 function setupDevHandler(options, resolve, nuxt = useNuxt()) {
   nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
-    nitroConfig.alias["#nuxt-og-image/renderers/satori"] = options.runtimeSatori ? resolve("./runtime/core/renderers/satori") : "unenv/runtime/mock/empty";
-    nitroConfig.alias["#nuxt-og-image/renderers/chromium"] = options.runtimeChromium ? resolve("./runtime/core/renderers/chromium") : "unenv/runtime/mock/empty";
-    applyNitroPresetCompatibility(nitroConfig, { resolve, compatibility: options.runtimeCompatibility });
+    applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility?.dev, resolve });
   });
 }
 
 function setupGenerateHandler(options, resolve, nuxt = useNuxt()) {
   nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
-    nitroConfig.alias["#nuxt-og-image/renderers/satori"] = "unenv/runtime/mock/empty";
-    nitroConfig.alias["#nuxt-og-image/renderers/chromium"] = "unenv/runtime/mock/empty";
     applyNitroPresetCompatibility(nitroConfig, {
       compatibility: {
         bindings: {
@@ -286,9 +299,7 @@ function setupGenerateHandler(options, resolve, nuxt = useNuxt()) {
 function setupPrerenderHandler(options, resolve, nuxt = useNuxt()) {
   nuxt.hooks.hook("nitro:init", async (nitro) => {
     nitro.hooks.hook("prerender:config", async (nitroConfig) => {
-      nitroConfig.alias["#nuxt-og-image/renderers/satori"] = resolve("./runtime/core/renderers/satori");
-      nitroConfig.alias["#nuxt-og-image/renderers/chromium"] = resolve("./runtime/core/renderers/chromium");
-      applyNitroPresetCompatibility(nitroConfig, { resolve });
+      applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility.prerender, resolve });
       nitroConfig.wasm = nitroConfig.wasm || {};
       nitroConfig.wasm.esmImport = false;
       const prerenderingPages = (nuxt.options.nitro.prerender?.routes || []).some((r) => r && (!r.includes(".") || r.includes("*")));
@@ -306,9 +317,7 @@ async function setupBuildHandler(config, resolve, nuxt = useNuxt()) {
   if (typeof config.runtimeCacheStorage === "object")
     nuxt.options.nitro.storage["og-image"] = config.runtimeCacheStorage;
   nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
-    nitroConfig.alias["#nuxt-og-image/renderers/satori"] = config.runtimeSatori ? resolve("./runtime/core/renderers/satori") : "unenv/runtime/mock/empty";
-    nitroConfig.alias["#nuxt-og-image/renderers/chromium"] = config.runtimeChromium ? resolve("./runtime/core/renderers/chromium") : "unenv/runtime/mock/empty";
-    applyNitroPresetCompatibility(nitroConfig, { resolve, compatibility: config.runtimeCompatibility });
+    applyNitroPresetCompatibility(nitroConfig, { compatibility: config.compatibility?.runtime, resolve });
     nitroConfig.alias.electron = "unenv/runtime/mock/proxy-cjs";
     nitroConfig.alias.bufferutil = "unenv/runtime/mock/proxy-cjs";
     nitroConfig.alias["utf-8-validate"] = "unenv/runtime/mock/proxy-cjs";
@@ -337,6 +346,22 @@ function sha1(source) {
   return createHash("sha1").update(source).digest("hex").slice(0, 16);
 }
 
+async function ensureChromium(logger) {
+  logger.info("Ensuring Chromium install for og:image generation...");
+  const installChromeProcess = execa("npx", ["playwright", "install", "chromium"], {
+    stdio: "inherit"
+  });
+  installChromeProcess.stderr?.pipe(process.stderr);
+  await new Promise((resolve) => {
+    installChromeProcess.on("exit", (e) => {
+      if (e !== 0)
+        logger.error("Failed to install Playwright dependency for og:image generation. Trying anyway...");
+      resolve(true);
+    });
+  });
+  installChromeProcess.pid && terminate(installChromeProcess.pid);
+}
+
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
@@ -346,7 +371,7 @@ const module = defineNuxtModule({
     },
     configKey: "ogImage"
   },
-  defaults(nuxt) {
+  defaults() {
     return {
       enabled: true,
       defaults: {
@@ -361,8 +386,6 @@ const module = defineNuxtModule({
       componentDirs: ["OgImage", "OgImageTemplate"],
       fonts: [],
       runtimeCacheStorage: true,
-      runtimeSatori: true,
-      runtimeChromium: nuxt.options.dev,
       debug: isDevelopment
     };
   },
@@ -379,17 +402,55 @@ const module = defineNuxtModule({
     }
     const { resolve } = createResolver(import.meta.url);
     const preset = resolveNitroPreset(nuxt.options.nitro);
-    const compatibility = getPresetNitroPresetCompatibility(preset);
+    const targetCompatibility = getPresetNitroPresetCompatibility(preset);
+    const hasSharpDependency = !!await tryResolveModule("sharp");
     const userConfiguredExtension = config.defaults.extension;
-    config.defaults.extension = userConfiguredExtension || "png";
-    if (!compatibility.bindings.sharp && config.defaults.renderer !== "chromium") {
-      if (userConfiguredExtension && ["jpeg", "jpg"].includes(userConfiguredExtension))
-        logger.warn("The sharp runtime is not available for this target, disabling sharp and using png instead.");
-      config.defaults.extension = "png";
+    const hasConfiguredJpegs = userConfiguredExtension && ["jpeg", "jpg"].includes(userConfiguredExtension);
+    config.defaults.extension = userConfiguredExtension || (hasSharpDependency && targetCompatibility.bindings.sharp ? "jpg" : "png");
+    if (hasConfiguredJpegs && config.defaults.renderer !== "chromium") {
+      if (hasSharpDependency && !targetCompatibility.bindings.sharp) {
+        logger.warn(`Rendering JPEGs requires sharp which does not work with ${preset}. Images will be rendered as PNG at runtime.`);
+        config.compatibility = defu({
+          runtime: {
+            sharp: false
+          }
+        }, config.compatibility);
+      } else if (!hasSharpDependency) {
+        logger.warn("You have enabled `JPEG` images. These require the `sharp` dependency which is missing, installing it for you.");
+        await ensureDependencies(["sharp"]);
+        logger.warn("Support for `sharp` is limited so check the compatibility guide.");
+      }
+    } else if (!hasSharpDependency) {
+      config.compatibility = defu({
+        runtime: { sharp: false },
+        dev: { sharp: false },
+        prerender: { sharp: false }
+      }, config.compatibility);
     }
-    if (config.runtimeChromium && !compatibility.bindings.chromium) {
-      logger.warn("The Chromium runtime is not available for this target, disabling runtimeChromium.");
-      config.runtimeChromium = false;
+    const hasChromeLocally = !!Launcher.getFirstInstallation();
+    const hasPlaywrightDependency = !!await tryResolveModule("playwright");
+    if (!hasChromeLocally && !hasPlaywrightDependency) {
+      if (nuxt.options._generate)
+        await ensureChromium(logger);
+      else if (nuxt.options.build)
+        logger.info("You are missing a chromium install. You will not be able to prerender images using the chromium render.");
+      config.compatibility = defu({
+        runtime: { chromium: false },
+        dev: { chromium: false },
+        prerender: { chromium: false }
+      }, config.compatibility);
+    } else if (hasChromeLocally) {
+      config.compatibility = defu({
+        runtime: { chromium: false },
+        dev: { chromium: true },
+        prerender: { chromium: true }
+      }, config.compatibility);
+    } else if (hasPlaywrightDependency && targetCompatibility.bindings.chromium) {
+      config.compatibility = defu({
+        runtime: { chromium: true },
+        dev: { chromium: true },
+        prerender: { chromium: true }
+      }, config.compatibility);
     }
     await installNuxtSiteConfig();
     if (hasNuxtModule("@nuxt/content"))
@@ -495,7 +556,7 @@ const module = defineNuxtModule({
       nuxt.hooks.hook("nuxt-og-image:components", ogImageComponentCtx);
     });
     addTemplate({
-      filename: "og-image-component-names.mjs",
+      filename: "nuxt-og-image/components.mjs",
       getContents() {
         return `export const componentNames = ${JSON.stringify(ogImageComponentCtx.components)}`;
       },
@@ -574,8 +635,6 @@ ${componentImports}
         satoriOptions: config.satoriOptions || {},
         resvgOptions: config.resvgOptions || {},
         sharpOptions: config.sharpOptions || {},
-        runtimeSatori: config.runtimeSatori,
-        runtimeChromium: config.runtimeChromium,
         defaults: config.defaults,
         debug: config.debug,
         // avoid adding credentials

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

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+/**
+ * @credits Pergel <https://nuxtlabs.com/>
+ * @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/OgImageDocs.vue
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
+  title: 'title',
+  description: 'description',
+  headline: 'headline',
+})
+
+const title = computed(() => props.title.slice(0, 60))
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col justify-center bg-[#212121]">
+    <svg class="absolute top-0 right-0" width="1200" height="675" viewBox="0 0 1200 675" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g style="mix-blend-mode:overlay" opacity="0.7" filter="url(#filter0_f_448_25)">
+        <circle cx="901.5" cy="45.5" r="199.5" fill="#FFA7A7" />
+        <circle cx="600.5" cy="216.5" r="199.5" fill="#FFCC49" />
+        <circle cx="179.5" cy="317.5" r="199.5" fill="#FFA149" />
+      </g>
+      <defs>
+        <filter id="filter0_f_448_25" x="-240" y="-374" width="1561" height="1111" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur stdDeviation="110" result="effect1_foregroundBlur_448_25" />
+        </filter>
+      </defs>
+    </svg>
+
+    <div class="w-[600px] pl-[100px]">
+      <p v-if="headline" class="uppercase text-[24px] text-[#FEC476] mb-4 font-semibold">
+        Oku - Pergel
+      </p>
+      <h1 class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white flex items-center">
+        <span>{{ title }}</span>
+      </h1>
+      <p class="text-[32px] text-[#E4E4E7] leading-tight">
+        {{ description.slice(0, 200) }}
+      </p>
+    </div>
+
+    <svg class="absolute top-[250px] right-[190px]" width="241" height="184" viewBox="0 0 241 184" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g filter="url(#filter0_ddd_563_6)">
+        <path d="M204.852 126.822C204.852 127.098 204.677 128.114 202.583 129.748C200.551 131.335 197.276 133.034 192.613 134.687C183.325 137.979 169.872 140.62 153.875 142.19C137.92 143.755 120.334 144.166 103.363 143.367C86.3776 142.566 70.8801 140.594 58.8213 137.738C52.7901 136.31 47.8449 134.713 44.0617 133.037C40.1988 131.325 37.891 129.679 36.7621 128.335C36.2309 127.702 36.0703 127.267 36.0227 127.035C35.9829 126.842 35.9842 126.629 36.1192 126.305C36.459 125.488 37.6413 124.038 40.7165 122.28C46.7614 118.823 57.5073 115.641 71.9244 113.359C86.2251 111.096 103.109 109.879 120.426 109.879" stroke="url(#paint0_angular_563_6)" stroke-width="8" />
+      </g>
+      <g clip-path="url(#clip0_563_6)">
+        <g filter="url(#filter1_i_563_6)">
+          <path d="M211.514 112.29L209.41 124.066L200.573 115.781L182.897 61.0337C186.772 60.5223 190.442 59.2291 193.777 57.2455L211.514 112.29ZM196.523 35.7822C195.733 40.2018 193.22 44.1268 189.537 46.6936C185.853 49.2604 181.301 50.2588 176.881 49.4691L174.437 49.0324L131.693 103.474L120.534 108.187L122.638 96.4106L165.598 41.721C160.708 33.7969 163.149 23.3421 171.139 18.407C174.615 16.2766 178.781 15.416 182.836 16.1405L184.821 5.03095C186.294 5.29416 187.603 6.13183 188.458 7.35968C189.314 8.58752 189.647 10.105 189.383 11.5782L188.212 18.1328C194.461 21.6568 197.783 28.7276 196.523 35.7822ZM185.413 33.7973C185.677 32.3241 185.344 30.8066 184.488 29.5788C183.633 28.3509 182.324 27.5133 180.851 27.25C179.378 26.9868 177.861 27.3196 176.633 28.1752C175.405 29.0308 174.567 30.3391 174.304 31.8123C174.041 33.2856 174.374 34.803 175.229 36.0308C176.085 37.2587 177.393 38.0964 178.866 38.3596C180.339 38.6228 181.857 38.29 183.085 37.4344C184.313 36.5788 185.15 35.2705 185.413 33.7973Z" fill="url(#paint1_diamond_563_6)" />
+        </g>
+      </g>
+      <defs>
+        <filter id="filter0_ddd_563_6" x="-3.8147e-05" y="77.8786" width="240.852" height="105.886" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+          <feOffset dy="3.62319" />
+          <feGaussianBlur stdDeviation="7.24638" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.667391 0 0 0 0 0.3625 0 0 0 0.75 0" />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_563_6" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+          <feOffset dy="4" />
+          <feGaussianBlur stdDeviation="16" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.854792 0 0 0 0 0.4875 0 0 0 0.25 0" />
+          <feBlend mode="normal" in2="effect1_dropShadow_563_6" result="effect2_dropShadow_563_6" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+          <feOffset dy="4" />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+          <feBlend mode="normal" in2="effect2_dropShadow_563_6" result="effect3_dropShadow_563_6" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_563_6" result="shape" />
+        </filter>
+        <filter id="filter1_i_563_6" x="120.534" y="5.03094" width="94.9804" height="123.035" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+          <feOffset dx="7" dy="5" />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+          <feBlend mode="normal" in2="shape" result="effect1_innerShadow_563_6" />
+        </filter>
+        <radialGradient id="paint0_angular_563_6" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(120.426 126.822) rotate(90) scale(20.943 88.4261)">
+          <stop offset="0.0677083" stop-color="#FFE092" />
+          <stop offset="0.333333" stop-color="#FFD792" />
+          <stop offset="0.666667" stop-color="#FFD192" />
+          <stop offset="1" stop-color="#FFAC5F" />
+        </radialGradient>
+        <radialGradient id="paint1_diamond_563_6" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(303.899 145.741) rotate(-155.036) scale(253.361 239.508)">
+          <stop offset="0.333674" stop-color="#FEC479" />
+          <stop offset="1" stop-color="white" stop-opacity="0" />
+        </radialGradient>
+        <clipPath id="clip0_563_6">
+          <rect width="135.426" height="135.426" fill="white" transform="translate(96.5743)" />
+        </clipPath>
+      </defs>
+    </svg>
+  </div>
+</template>

package/dist/runtime/composables/defineOgImage.mjs

@@ -3,8 +3,7 @@ import { appendHeader } from "h3";
 import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
 import { withoutBase } from "ufo";
 import { getOgImagePath, separateProps, useOgImageRuntimeConfig } from "../utils.mjs";
-import { normaliseOptions } from "../core/options/normalise.mjs";
-import { createOgImageMeta } from "../nuxt/utils.mjs";
+import { createOgImageMeta, normaliseOptions } from "../nuxt/utils.mjs";
 import { useNuxtApp, useRequestEvent, useRouter, useRuntimeConfig } from "#imports";
 export function defineOgImage(_options = {}) {
   if (!import.meta.server)
@@ -29,7 +28,7 @@ export function defineOgImage(_options = {}) {
     ..._options
   });
   const { defaults } = useOgImageRuntimeConfig();
-  const resolvedOptions = normaliseOptions(defu(separateProps(options), separateProps(routeRules), defaults));
+  const resolvedOptions = normaliseOptions(defu(separateProps(_options), separateProps(routeRules), defaults));
   if (_options.url) {
     createOgImageMeta(null, options, resolvedOptions, nuxtApp.ssrContext);
   } else {

package/dist/runtime/nuxt/plugins/route-rule-og-image.server.mjs

@@ -1,9 +1,8 @@
 import { defu } from "defu";
 import { parseURL, withoutBase } from "ufo";
 import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
-import { normaliseOptions } from "../../core/options/normalise.mjs";
 import { getOgImagePath, isInternalRoute, useOgImageRuntimeConfig } from "../../utils.mjs";
-import { createOgImageMeta } from "../utils.mjs";
+import { createOgImageMeta, normaliseOptions } from "../utils.mjs";
 import { defineNuxtPlugin, useRequestEvent } from "#imports";
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hooks.hook("app:rendered", async (ctx) => {

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

@@ -1,2 +1,3 @@
-import type { OgImageOptions, OgImagePrebuilt } from '../types';
+import type { DefineOgImageInput, OgImageOptions, OgImagePrebuilt } from '../types';
 export declare function createOgImageMeta(src: string | null, input: OgImageOptions | OgImagePrebuilt, resolvedOptions: OgImageOptions, ssrContext: Record<string, any>): void;
+export declare function normaliseOptions(_options: DefineOgImageInput): OgImageOptions | OgImagePrebuilt;

package/dist/runtime/nuxt/utils.mjs

@@ -1,6 +1,8 @@
 import { defu } from "defu";
 import { separateProps } from "../utils.mjs";
-import { useServerHead } from "#imports";
+import { unref, useServerHead } from "#imports";
+import { componentNames } from "#build/nuxt-og-image/components.mjs";
+import compatibility from "#build/nuxt-og-image/compatibility.mjs";
 export function createOgImageMeta(src, input, resolvedOptions, ssrContext) {
   const _input = separateProps(defu(input, ssrContext._ogImagePayload));
   const url = src || input.url || resolvedOptions.url;
@@ -51,3 +53,22 @@ export function createOgImageMeta(src, input, resolvedOptions, ssrContext) {
   ssrContext._ogImagePayload = _input;
   ssrContext._ogImageInstances.push(instance);
 }
+export function normaliseOptions(_options) {
+  const options = { ...unref(_options) };
+  if (!options)
+    return options;
+  if (options.component && componentNames) {
+    const originalName = options.component;
+    for (const component of componentNames) {
+      if (component.pascalName.endsWith(originalName) || component.kebabName.endsWith(originalName)) {
+        options.component = component.pascalName;
+        break;
+      }
+    }
+  }
+  if (["jpeg", "jpg"].includes(options.extension || "") && !compatibility.bindings.sharp)
+    options.extension = "png";
+  if (options.renderer === "chromium" && !compatibility.bindings.chromium)
+    options.renderer = "satori";
+  return options;
+}