nuxt-og-image 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/client/_nuxt/{error-404.15b637ef.js → error-404.1c1c2700.js}

@@ -1 +1 @@
-import{s as n,v as a,o as r,l,x as e,t as s,y as d,z as c,A as p,B as f,C as x,D as h}from"./entry.a0824e7e.js";const m=t=>(x("data-v-18337f8d"),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)),_={class:"max-w-520px text-center z-20"},b=["textContent"],y=["textContent"],w={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 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}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=p;return r(),l("div",u,[g,e("div",_,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,b),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,y),e("div",w,[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(()=>[f(s(t.backHome),1)]),_:1})])])])}}},z=n(S,[["__scopeId","data-v-18337f8d"]]);export{z as default};
+import{s as n,v as a,o as r,l,x as e,t as s,y as d,z as c,A as p,B as f,C as x,D as h}from"./entry.db5a4449.js";const m=t=>(x("data-v-18337f8d"),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)),_={class:"max-w-520px text-center z-20"},b=["textContent"],y=["textContent"],w={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 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}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=p;return r(),l("div",u,[g,e("div",_,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,b),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,y),e("div",w,[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(()=>[f(s(t.backHome),1)]),_:1})])])])}}},z=n(S,[["__scopeId","data-v-18337f8d"]]);export{z as default};

package/dist/client/_nuxt/{error-500.037a45db.js → error-500.6a615525.js}

@@ -1 +1 @@
-import{s as i,v as a,o as r,l as n,x as e,t as s,C as l,D as d}from"./entry.a0824e7e.js";const c=t=>(l("data-v-428e244b"),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}'}]}),(b,u)=>(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-428e244b"]]);export{w as default};
+import{s as i,v as a,o as r,l as n,x as e,t as s,C as l,D as d}from"./entry.db5a4449.js";const c=t=>(l("data-v-428e244b"),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}'}]}),(b,u)=>(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-428e244b"]]);export{w as default};

package/dist/client/_nuxt/{error-component.541b3e05.js → error-component.834f3c34.js}

@@ -1,3 +1,3 @@
-import{d as n,_ as o,o as _,c as f,n as g,g as E,u as r}from"./entry.a0824e7e.js";const k={__name:"nuxt-error-page",props:{error:Object},setup(t){(t.error.stack||"").split(`
+import{d as n,_ as o,o as _,c as f,n as g,g as E,u as r}from"./entry.db5a4449.js";const k={__name:"nuxt-error-page",props:{error:Object},setup(t){(t.error.stack||"").split(`
 `).splice(1).map(e=>({text:e.replace("webpack:/","").replace(".vue",".js").trim(),internal:e.includes("node_modules")&&!e.includes(".cache")||e.includes("internal")||e.includes("new Promise")})).map(e=>`<span class="stack${e.internal?" internal":""}">${e.text}</span>`).join(`
-`);const s=Number(t.error.statusCode||500),a=s===404,c=t.error.statusMessage??(a?"Page Not Found":"Internal Server Error"),u=t.error.message||t.error.toString(),i=void 0,d=n(()=>o(()=>import("./error-404.15b637ef.js"),["./error-404.15b637ef.js","./entry.a0824e7e.js","./entry.0827acf4.css","./error-404.68aa58b4.css"],import.meta.url).then(e=>e.default||e)),l=n(()=>o(()=>import("./error-500.037a45db.js"),["./error-500.037a45db.js","./entry.a0824e7e.js","./entry.0827acf4.css","./error-500.dc5710d1.css"],import.meta.url).then(e=>e.default||e)),m=a?d:l;return(e,p)=>(_(),f(r(m),g(E({statusCode:r(s),statusMessage:r(c),description:r(u),stack:r(i)})),null,16))}},v=k;export{v as default};
+`);const s=Number(t.error.statusCode||500),a=s===404,c=t.error.statusMessage??(a?"Page Not Found":"Internal Server Error"),u=t.error.message||t.error.toString(),i=void 0,d=n(()=>o(()=>import("./error-404.1c1c2700.js"),["./error-404.1c1c2700.js","./entry.db5a4449.js","./entry.0827acf4.css","./error-404.68aa58b4.css"],import.meta.url).then(e=>e.default||e)),l=n(()=>o(()=>import("./error-500.6a615525.js"),["./error-500.6a615525.js","./entry.db5a4449.js","./entry.0827acf4.css","./error-500.dc5710d1.css"],import.meta.url).then(e=>e.default||e)),m=a?d:l;return(e,p)=>(_(),f(r(m),g(E({statusCode:r(s),statusMessage:r(c),description:r(u),stack:r(i)})),null,16))}},v=k;export{v as default};

package/dist/client/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html >
 <head><meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/entry.a0824e7e.js"><link rel="preload" as="style" href="/__nuxt_og_image__/client/_nuxt/entry.0827acf4.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-component.541b3e05.js"><link rel="stylesheet" href="/__nuxt_og_image__/client/_nuxt/entry.0827acf4.css"><script>"use strict";const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"system";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
+<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/entry.db5a4449.js"><link rel="preload" as="style" href="/__nuxt_og_image__/client/_nuxt/entry.0827acf4.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-component.834f3c34.js"><link rel="stylesheet" href="/__nuxt_og_image__/client/_nuxt/entry.0827acf4.css"><script>"use strict";const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"system";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
 </script></head>
-<body ><div id="__nuxt"></div><script>window.__NUXT__={serverRendered:false,config:{public:{},app:{baseURL:"\u002F__nuxt_og_image__\u002Fclient",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:""}},data:{},state:{}}</script><script type="module" src="/__nuxt_og_image__/client/_nuxt/entry.a0824e7e.js" crossorigin></script></body>
+<body ><div id="__nuxt"></div><script>window.__NUXT__={serverRendered:false,config:{public:{},app:{baseURL:"\u002F__nuxt_og_image__\u002Fclient",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:""}},data:{},state:{}}</script><script type="module" src="/__nuxt_og_image__/client/_nuxt/entry.db5a4449.js" crossorigin></script></body>
 </html>

package/dist/module.d.ts

@@ -1,4 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { SatoriOptions } from 'satori';
 
 interface ScreenshotOptions {
     colorScheme?: 'dark' | 'light';
@@ -21,7 +22,7 @@ interface ScreenshotOptions {
      */
     delay?: number;
 }
-interface OgImagePayload extends Partial<ScreenshotOptions> {
+interface OgImageOptions extends Partial<ScreenshotOptions> {
     provider?: 'browser' | 'satori';
     prerender?: boolean;
     title?: string;
@@ -30,19 +31,18 @@ interface OgImagePayload extends Partial<ScreenshotOptions> {
     alt?: string;
     [key: string]: any;
 }
-type OgImageScreenshotPayload = Omit<OgImagePayload, 'component'>;
-declare module 'nitropack' {
-    interface NitroRouteRules {
-        ogImage?: false | OgImageScreenshotPayload | OgImagePayload;
-    }
-}
 
-interface ModuleOptions extends ScreenshotOptions {
+interface ModuleOptions {
     /**
      * The hostname of your website.
      */
     host: string;
+    defaults: OgImageOptions;
     experimentalNitroBrowser: boolean;
+    satoriFonts: Array<Partial<SatoriOptions['fonts'][number]> & {
+        publicPath: string;
+    }>;
+    satoriOptions: Partial<SatoriOptions>;
     forcePrerender: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;

package/dist/module.json

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

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { mkdir, writeFile } from 'node:fs/promises';
 import { existsSync } from 'fs';
-import { useNuxt, addTemplate, defineNuxtModule, createResolver, addServerHandler, addImports, addComponent } from '@nuxt/kit';
+import { useNuxt, addTemplate, defineNuxtModule, createResolver, getNuxtVersion, useLogger, addServerHandler, addImports, addComponent } from '@nuxt/kit';
 import { execa } from 'execa';
 import chalk from 'chalk';
 import defu from 'defu';
@@ -57,13 +57,8 @@ async function screenshot(browser, url, options) {
   return await page.screenshot();
 }
 
-const PayloadScriptId = "nuxt-og-image-payload";
-const Constants = {
-  PayloadScriptId
-};
-
 function exposeConfig(alias, filename, config) {
-  const exports = Object.entries(config).map(([k, v]) => `export const ${k} = '${v}'`).join("\n");
+  const exports = Object.entries(config).map(([k, v]) => `export const ${k} = ${JSON.stringify(v)}`).join("\n");
   useNuxt().options.alias[alias] = addTemplate({
     filename,
     getContents: () => exports
@@ -72,6 +67,16 @@ function exposeConfig(alias, filename, config) {
     nitroConfig.virtual[alias] = exports;
   });
 }
+function extractOgImageOptions(html) {
+  const options = html.match(/<script id="nuxt-og-image-options" type="application\/json">(.+?)<\/script>/)?.[1];
+  if (options) {
+    return JSON.parse(options);
+  }
+  return false;
+}
+function stripOgImageOptions(html) {
+  return html.replace(/<script id="nuxt-og-image-options" type="application\/json">(.*?)<\/script>/, "");
+}
 
 function setupPlaygroundRPC(nuxt, config) {
   const serverFunctions = {
@@ -155,13 +160,6 @@ function getBodyJson(req) {
   });
 }
 
-function extractOgPayload(html) {
-  const payload = html.match(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.+?)<\/script>`))?.[1];
-  if (payload) {
-    return JSON.parse(payload);
-  }
-  return false;
-}
 const PATH = "/__nuxt_og_image__";
 const PATH_ENTRY = `${PATH}/entry`;
 const PATH_PLAYGROUND = `${PATH}/client`;
@@ -179,8 +177,26 @@ const module = defineNuxtModule({
       experimentalNitroBrowser: false,
       forcePrerender: !nuxt.options.dev && nuxt.options._generate,
       host: nuxt.options.runtimeConfig.public?.siteUrl,
-      width: 1200,
-      height: 630
+      defaults: {
+        component: "OgImageBasic",
+        width: 1200,
+        height: 630
+      },
+      satoriFonts: [
+        {
+          name: "Inter",
+          weight: 400,
+          style: "normal",
+          publicPath: "/inter-latin-ext-400-normal.woff"
+        },
+        {
+          name: "Inter",
+          weight: 700,
+          style: "normal",
+          publicPath: "/inter-latin-ext-700-normal.woff"
+        }
+      ],
+      satoriOptions: {}
     };
   },
   async setup(config, nuxt) {
@@ -193,6 +209,10 @@ const module = defineNuxtModule({
     };
     nuxt.options.experimental.componentIslands = true;
     const isEdge = (process.env.NITRO_PRESET || "").includes("edge");
+    const hasIslandSupport = getNuxtVersion(nuxt) !== "3.0.0";
+    const logger = useLogger("nuxt-og-image");
+    if (!hasIslandSupport)
+      logger.warn("You are using Nuxt 3.0.0 with `nuxt-og-image`, which only supports screenshots.\nPlease upgrade to Nuxt 3.0.1 or the edge channel: https://nuxt.com/docs/guide/going-further/edge-channel.");
     addTemplate({
       filename: "nuxt-og-image.d.ts",
       getContents: () => {
@@ -211,7 +231,7 @@ export {}
     nuxt.hooks.hook("prepare:types", ({ references }) => {
       references.push({ path: resolve(nuxt.options.buildDir, "nuxt-og-image.d.ts") });
     });
-    ["html", "payload", "svg", "og.png"].forEach((type) => {
+    ["html", "options", "svg", "og.png"].forEach((type) => {
       addServerHandler({
         handler: resolve(`./runtime/nitro/routes/__og_image__/${type}`)
       });
@@ -238,8 +258,8 @@ export {}
       });
     });
     await addComponent({
-      name: "OgImageTemplate",
-      filePath: resolve("./runtime/components/OgImageTemplate.island.vue"),
+      name: "OgImageBasic",
+      filePath: resolve("./runtime/components/OgImageBasic.island.vue"),
       global: true,
       island: true
     });
@@ -252,7 +272,6 @@ export {}
     });
     const runtimeDir = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimeDir);
-    exposeConfig("#nuxt-og-image/constants", "nuxt-og-image-constants.mjs", Constants);
     exposeConfig("#nuxt-og-image/config", "nuxt-og-image-config.mjs", config);
     nuxt.hooks.hook("nitro:config", (nitroConfig) => {
       nitroConfig.externals = defu(nitroConfig.externals || {}, {
@@ -292,19 +311,19 @@ export {}
         const html = ctx.contents;
         if (!html)
           return;
-        const extractedPayload = extractOgPayload(html);
-        ctx.contents = html.replace(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.*?)<\/script>`), "");
+        const extractedOptions = extractOgImageOptions(html);
+        ctx.contents = stripOgImageOptions(html);
         const routeRules = defu({}, ..._routeRulesMatcher.matchAll(ctx.route).reverse());
-        if (!extractedPayload || routeRules.ogImage === false)
+        if (!extractedOptions || routeRules.ogImage === false)
           return;
-        const payload = {
+        const options = {
           path: ctx.route,
-          ...extractedPayload,
+          ...extractedOptions,
           ...routeRules.ogImage || {},
           ctx
         };
-        if ((nuxt.options._generate || payload.prerender) && payload.provider === "browser")
-          screenshotQueue.push(payload);
+        if ((nuxt.options._generate || options.prerender) && options.provider === "browser")
+          screenshotQueue.push(options);
       });
       if (nuxt.options.dev)
         return;
@@ -333,8 +352,8 @@ export {}
               const filename = joinURL(dirname, "/og.png");
               try {
                 const imgBuffer = await screenshot(browser, `${host}${entry.path}`, {
-                  ...config,
-                  ...entry
+                  ...config.defaults || {},
+                  ...entry || {}
                 });
                 try {
                   await mkdir(dirname, { recursive: true });

package/dist/runtime/components/{OgImageTemplate.island.vue → OgImageBasic.island.vue}

@@ -10,10 +10,10 @@ const props = defineProps({
   <div :style="{ padding: '0 60px', width: '100%', height: '100%', backgroundColor: '#0c0c0c', backgroundImage: 'linear-gradient(to bottom, #dbf4ff, #fff1f1)', display: 'flex', alignItems: 'center' }">
     <div :style="{ padding: '0 30px', display: 'flex', flexDirection: 'column' }">
       <p :style="{ fontSize: '60px', fontWeight: 'bold', marginBottom: '20px' }">
-        {{ title }}
+        {{ title || 'Og Image Template' }}
       </p>
       <p :style="{ fontSize: '26px' }">
-        {{ description }}
+        {{ description || 'Set a description to change me.' }}
       </p>
     </div>
   </div>

package/dist/runtime/components/OgImageDynamic.d.ts

@@ -1,5 +1,5 @@
-import type { OgImagePayload } from '../../types';
-declare const _default: import("vue").DefineComponent<OgImagePayload, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImagePayload>>, {
+import type { OgImageOptions } from '../../types';
+declare const _default: import("vue").DefineComponent<OgImageOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImageOptions>>, {
     [x: string]: any;
 }>;
 export default _default;

package/dist/runtime/components/OgImageScreenshot.d.ts

@@ -1,5 +1,5 @@
-import type { OgImageScreenshotPayload } from '../../types';
-declare const _default: import("vue").DefineComponent<OgImageScreenshotPayload, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImageScreenshotPayload>>, {
+import type { OgImageScreenshotOptions } from '../../types';
+declare const _default: import("vue").DefineComponent<OgImageScreenshotOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImageScreenshotOptions>>, {
     [x: string]: any;
     [x: number]: any;
 }>;

package/dist/runtime/components/OgImageStatic.d.ts

@@ -1,5 +1,5 @@
-import type { OgImagePayload } from '../../types';
-declare const _default: import("vue").DefineComponent<OgImagePayload, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImagePayload>>, {
+import type { OgImageOptions } from '../../types';
+declare const _default: import("vue").DefineComponent<OgImageOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImageOptions>>, {
     [x: string]: any;
 }>;
 export default _default;

package/dist/runtime/composables/defineOgImage.d.ts

@@ -1,5 +1,5 @@
-import type { OgImagePayload, OgImageScreenshotPayload } from '../../types';
-export declare function defineOgImageScreenshot(options?: OgImageScreenshotPayload): void;
-export declare function defineOgImageDynamic(options?: OgImageScreenshotPayload): void;
-export declare function defineOgImageStatic(options?: OgImageScreenshotPayload): void;
-export declare function defineOgImage(options?: OgImagePayload): void;
+import type { OgImageOptions, OgImageScreenshotOptions } from '../../types';
+export declare function defineOgImageScreenshot(options?: OgImageScreenshotOptions): void;
+export declare function defineOgImageDynamic(options?: OgImageOptions): void;
+export declare function defineOgImageStatic(options?: OgImageOptions): void;
+export declare function defineOgImage(options?: OgImageOptions): void;

package/dist/runtime/composables/defineOgImage.mjs

@@ -2,8 +2,7 @@ import { useServerHead } from "@vueuse/head";
 import { withBase } from "ufo";
 import { useRequestEvent } from "#app";
 import { useRouter } from "#imports";
-import { PayloadScriptId } from "#nuxt-og-image/constants";
-import { forcePrerender, height, host, width } from "#nuxt-og-image/config";
+import { defaults, forcePrerender, host } from "#nuxt-og-image/config";
 export function defineOgImageScreenshot(options = {}) {
   const router = useRouter();
   const route = router?.currentRoute?.value?.path || "";
@@ -45,11 +44,11 @@ export function defineOgImage(options = {}) {
       },
       {
         property: "og:image:width",
-        content: width
+        content: options.width || defaults.width
       },
       {
         property: "og:image:height",
-        content: height
+        content: options.height || defaults.height
       }
     ];
     if (options.alt) {
@@ -62,9 +61,15 @@ export function defineOgImage(options = {}) {
       meta,
       script: [
         {
-          id: PayloadScriptId,
+          id: "nuxt-og-image-options",
           type: "application/json",
-          children: () => JSON.stringify(options)
+          children: () => {
+            const payload = {};
+            Object.entries(options).forEach(([key, val]) => {
+              payload[key.replace(/-([a-z])/g, (g) => g[1].toUpperCase())] = val;
+            });
+            return payload;
+          }
         }
       ]
     });

package/dist/runtime/nitro/providers/browser.mjs

@@ -1,16 +1,12 @@
 import { screenshot } from "../../browserUtil.mjs";
-import { height, width } from "#nuxt-og-image/config";
 import { createBrowser } from "#nuxt-og-image/browser";
 export default {
   name: "browser",
   createSvg: function createSvg() {
     throw new Error("Browser provider isn't able to create SVGs.");
   },
-  createPng: async function createPng(basePath) {
+  createPng: async function createPng(basePath, options) {
     const browser = await createBrowser();
-    return screenshot(browser, basePath, {
-      width: Number(width),
-      height: Number(height)
-    });
+    return screenshot(browser, basePath, options);
   }
 };

package/dist/runtime/nitro/providers/satori.mjs

@@ -2,47 +2,43 @@ import { fileURLToPath } from "node:url";
 import { promises as fsp } from "node:fs";
 import { html as convertHtmlToSatori } from "satori-html";
 import satori from "satori";
-import { parseURL } from "ufo";
+import { parseURL, withBase } from "ufo";
 import { Resvg } from "@resvg/resvg-js";
 import { dirname, resolve } from "pathe";
-import { height, width } from "#nuxt-og-image/config";
 import { getAsset } from "#internal/nitro/virtual/public-assets";
+import { satoriFonts, satoriOptions } from "#nuxt-og-image/config";
 export default {
   name: "satori",
-  createPng: async function createPng(baseUrl) {
-    const svg = await this.createSvg(baseUrl);
+  createPng: async function createPng(baseUrl, options) {
+    const svg = await this.createSvg(baseUrl, options);
     const resvg = new Resvg(svg, {});
     const pngData = resvg.render();
     return pngData.asPng();
   },
-  createSvg: async function createSvg(baseUrl) {
+  createSvg: async function createSvg(baseUrl, options) {
     const url = parseURL(baseUrl);
     const html = await $fetch(url.pathname);
     const body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1];
-    const font = async (weight) => {
-      let fontData;
-      const file = getAsset(`/inter-latin-ext-${weight}-normal.woff`);
-      if (file) {
-        const serverDir = dirname(fileURLToPath(import.meta.url));
-        fontData = await fsp.readFile(resolve(serverDir, file.path));
+    const parseFont = async (font) => {
+      if (typeof font.publicPath === "string") {
+        const file = getAsset(font.publicPath);
+        if (file) {
+          const serverDir = dirname(fileURLToPath(import.meta.url));
+          font.data = await fsp.readFile(resolve(serverDir, file.path));
+        }
+        if (!font.data)
+          font.data = await (await $fetch(withBase(font.publicPath, `${url.protocol}//${url.host}`))).arrayBuffer();
       }
-      if (!fontData)
-        fontData = await (await $fetch(`${url.protocol}//${url.host}/inter-latin-ext-${weight}-normal.woff`)).arrayBuffer();
-      return {
-        name: "Inter",
-        weight,
-        style: "normal",
-        data: fontData
-      };
+      return font;
     };
+    satoriOptions.fonts = satoriOptions.fonts || [];
+    for (const font of satoriFonts)
+      satoriOptions.fonts.push(await parseFont(font));
     const satoriTree = convertHtmlToSatori(body);
     return await satori(satoriTree, {
-      width,
-      height,
-      fonts: [
-        await font(400),
-        await font(700)
-      ]
+      ...satoriOptions,
+      width: options.width,
+      height: options.height
     });
   }
 };

package/dist/runtime/nitro/routes/__og_image__/html.mjs

@@ -2,19 +2,17 @@ import { parseURL, withBase, withoutTrailingSlash } from "ufo";
 import { renderSSRHead } from "@unhead/ssr";
 import { createHeadCore } from "@unhead/vue";
 import { defineEventHandler, sendRedirect } from "h3";
-import { fetchPayload, renderIsland, useHostname } from "../../utils.mjs";
-import { height, width } from "#nuxt-og-image/config";
+import { fetchOptions, renderIsland, useHostname } from "../../utils.mjs";
+import { defaults } from "#nuxt-og-image/config";
 export default defineEventHandler(async (e) => {
   const path = parseURL(e.path).pathname;
   if (!path.endsWith("__og_image__/html"))
     return;
   const basePath = withoutTrailingSlash(path.replace("__og_image__/html", ""));
-  const payload = await fetchPayload(basePath);
-  if (payload.provider === "browser")
+  const options = await fetchOptions(basePath);
+  if (options.provider === "browser")
     return sendRedirect(e, withBase(basePath, useHostname(e)));
-  const component = payload.component || "OgImageTemplate";
-  delete payload.component;
-  const island = await renderIsland(component, payload);
+  const island = await renderIsland(options);
   const head = createHeadCore();
   head.push(island.head);
   head.push({
@@ -38,6 +36,6 @@ export default defineEventHandler(async (e) => {
   return `<!DOCTYPE html>
 <html ${headChunk.htmlAttrs}>
 <head>${headChunk.headTags}</head>
-<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div style="width: ${width}px; height: ${height}px; display: flex; margin: 0 auto;">${island.html}</div>${headChunk.bodyTags}</body>
+<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div style="width: ${defaults.width}px; height: ${defaults.height}px; display: flex; margin: 0 auto;">${island.html}</div>${headChunk.bodyTags}</body>
 </html>`;
 });

package/dist/runtime/nitro/routes/__og_image__/index.mjs

@@ -1,13 +1,13 @@
 import { defineEventHandler } from "h3";
 import { parseURL, withoutTrailingSlash } from "ufo";
-import { fetchPayload, useHostname } from "../../utils.mjs";
+import { fetchOptions, useHostname } from "../../utils.mjs";
 export default defineEventHandler(async (e) => {
   const path = parseURL(e.path).pathname;
   if (!path.endsWith("/__og_image__"))
     return;
   const basePath = withoutTrailingSlash(path.replace("__og_image__", ""));
-  const payload = await fetchPayload(basePath);
-  if (!payload)
+  const options = await fetchOptions(basePath);
+  if (!options)
     return `The route ${basePath} has not been set up for og:image generation.`;
   return `
 <style>

package/dist/runtime/nitro/routes/__og_image__/og.png.mjs

@@ -1,6 +1,6 @@
 import { defineEventHandler, setHeader } from "h3";
 import { joinURL, parseURL, withBase, withoutTrailingSlash } from "ufo";
-import { fetchPayload, useHostname } from "../../utils.mjs";
+import { fetchOptions, useHostname } from "../../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
 export default defineEventHandler(async (e) => {
   const path = parseURL(e.path).pathname;
@@ -9,15 +9,11 @@ export default defineEventHandler(async (e) => {
   const basePath = withoutTrailingSlash(
     path.replace("__og_image__/og.png", "")
   );
-  const { provider: providerName, prerender } = await fetchPayload(basePath);
+  const options = await fetchOptions(basePath);
   setHeader(e, "Content-Type", "image/png");
-  if (prerender && !process.dev) {
-    setHeader(e, "Cache-Control", "public, max-age=86400");
-  } else {
-    setHeader(e, "Cache-Control", "no-cache, no-store, must-revalidate");
-    setHeader(e, "Pragma", "no-cache");
-    setHeader(e, "Expires", "0");
-  }
-  const provider = await useProvider(providerName);
-  return provider.createPng(withBase(joinURL(basePath, "/__og_image__/html"), useHostname(e)));
+  setHeader(e, "Cache-Control", "no-cache, no-store, must-revalidate");
+  setHeader(e, "Pragma", "no-cache");
+  setHeader(e, "Expires", "0");
+  const provider = await useProvider(options.provider);
+  return provider.createPng(withBase(joinURL(basePath, "/__og_image__/html"), useHostname(e)), options);
 });

package/dist/runtime/nitro/routes/__og_image__/options.d.ts

@@ -0,0 +1,4 @@
+import type { OgImageOptions } from '../../../../types';
+export declare const inferOgImageOptions: (html: string) => OgImageOptions;
+declare const _default: import("h3").EventHandler<false | OgImageOptions | undefined>;
+export default _default;

package/dist/runtime/nitro/routes/__og_image__/{payload.mjs → options.mjs}

@@ -1,31 +1,29 @@
 import { parseURL, withoutTrailingSlash } from "ufo";
 import { defineEventHandler, getQuery } from "h3";
-import { PayloadScriptId } from "#nuxt-og-image/constants";
+import { extractOgImageOptions } from "../../../../utils";
 import { getRouteRules } from "#internal/nitro";
-export const extractOgPayload = (html) => {
-  const payload = html.match(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.+?)<\/script>`))?.[1];
-  if (payload) {
-    return JSON.parse(payload);
-  }
-  return false;
-};
-export const inferOgPayload = (html) => {
-  const payload = {};
+import { defaults } from "#nuxt-og-image/config";
+export const inferOgImageOptions = (html) => {
+  const options = {};
   const title = html.match(/<meta property="og:title" content="(.*?)">/)?.[1];
   if (title)
-    payload.title = title;
+    options.title = title;
+  else
+    options.title = html.match(/<title>(.*?)<\/title>/)?.[1];
   const description = html.match(/<meta property="og:description" content="(.*?)">/)?.[1];
   if (description)
-    payload.description = description;
-  return payload;
+    options.description = description;
+  else
+    options.description = html.match(/<meta name="description" content="(.*?)">/)?.[1];
+  return options;
 };
 export default defineEventHandler(async (e) => {
   const path = parseURL(e.path).pathname;
-  if (!path.endsWith("__og_image__/payload"))
+  if (!path.endsWith("__og_image__/options"))
     return;
-  const basePath = withoutTrailingSlash(path.replace("__og_image__/payload", ""));
+  const basePath = withoutTrailingSlash(path.replace("__og_image__/options", ""));
   const html = await $fetch(basePath);
-  const extractedPayload = extractOgPayload(html);
+  const extractedPayload = extractOgImageOptions(html);
   if (!extractedPayload)
     return false;
   e.node.req.url = basePath;
@@ -34,20 +32,12 @@ export default defineEventHandler(async (e) => {
   e.node.req.url = e.path;
   if (routeRules === false)
     return false;
-  let payload = {
+  return {
     path: basePath,
-    ...extractOgPayload(html),
-    ...inferOgPayload(html),
+    ...defaults,
+    ...inferOgImageOptions(html),
     ...routeRules || {},
+    ...extractedPayload,
     ...getQuery(e)
   };
-  if (payload.provider === "satori") {
-    payload = {
-      title: "Hello World",
-      description: "Example description",
-      image: "https://example.com/image.png",
-      ...payload
-    };
-  }
-  return payload;
 });

package/dist/runtime/nitro/routes/__og_image__/svg.mjs

@@ -1,6 +1,6 @@
 import { defineEventHandler, setHeader } from "h3";
 import { joinURL, parseURL, withBase, withoutTrailingSlash } from "ufo";
-import { fetchPayload, useHostname } from "../../utils.mjs";
+import { fetchOptions, useHostname } from "../../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
 export default defineEventHandler(async (e) => {
   const path = parseURL(e.path).pathname;
@@ -9,8 +9,8 @@ export default defineEventHandler(async (e) => {
   const basePath = withoutTrailingSlash(
     path.replace("__og_image__/svg", "")
   );
-  const { provider: providerName } = await fetchPayload(basePath);
+  const options = await fetchOptions(basePath);
   setHeader(e, "Content-Type", "image/svg+xml");
-  const provider = await useProvider(providerName);
-  return provider.createSvg(withBase(joinURL(basePath, "/__og_image__/html"), useHostname(e)));
+  const provider = await useProvider(options.provider);
+  return provider.createSvg(withBase(joinURL(basePath, "/__og_image__/html"), useHostname(e)), options);
 });