nuxt-og-image 0.6.0 → 1.0.0-beta.0

package/dist/client/_nuxt/error-404.556d8899.js

@@ -0,0 +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.ce848650.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-404.68aa58b4.css

@@ -0,0 +1 @@
+.spotlight[data-v-18337f8d]{background:linear-gradient(45deg,#00dc82,#36e4da 50%,#0047e1);bottom:-30vh;filter:blur(20vh);height:40vh}.gradient-border[data-v-18337f8d]{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:.5rem;position:relative}@media (prefers-color-scheme:light){.gradient-border[data-v-18337f8d]{background-color:#ffffff4d}.gradient-border[data-v-18337f8d]:before{background:linear-gradient(90deg,#e2e2e2,#e2e2e2 25%,#00dc82 50%,#36e4da 75%,#0047e1)}}@media (prefers-color-scheme:dark){.gradient-border[data-v-18337f8d]{background-color:#1414144d}.gradient-border[data-v-18337f8d]:before{background:linear-gradient(90deg,#303030,#303030 25%,#00dc82 50%,#36e4da 75%,#0047e1)}}.gradient-border[data-v-18337f8d]:before{background-size:400% auto;border-radius:.5rem;content:"";inset:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;padding:2px;position:absolute;transition:background-position .3s ease-in-out,opacity .2s ease-in-out;width:100%}.gradient-border[data-v-18337f8d]:hover:before{background-position:-50% 0;opacity:1}.bg-white[data-v-18337f8d]{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.cursor-pointer[data-v-18337f8d]{cursor:pointer}.flex[data-v-18337f8d]{display:flex}.grid[data-v-18337f8d]{display:grid}.place-content-center[data-v-18337f8d]{place-content:center}.items-center[data-v-18337f8d]{align-items:center}.justify-center[data-v-18337f8d]{justify-content:center}.font-sans[data-v-18337f8d]{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}.font-medium[data-v-18337f8d]{font-weight:500}.font-light[data-v-18337f8d]{font-weight:300}.text-8xl[data-v-18337f8d]{font-size:6rem;line-height:1}.text-xl[data-v-18337f8d]{font-size:1.25rem;line-height:1.75rem}.leading-tight[data-v-18337f8d]{line-height:1.25}.mb-8[data-v-18337f8d]{margin-bottom:2rem}.mb-16[data-v-18337f8d]{margin-bottom:4rem}.max-w-520px[data-v-18337f8d]{max-width:520px}.min-h-screen[data-v-18337f8d]{min-height:100vh}.overflow-hidden[data-v-18337f8d]{overflow:hidden}.px-8[data-v-18337f8d]{padding-left:2rem;padding-right:2rem}.py-2[data-v-18337f8d]{padding-bottom:.5rem;padding-top:.5rem}.px-4[data-v-18337f8d]{padding-left:1rem;padding-right:1rem}.fixed[data-v-18337f8d]{position:fixed}.left-0[data-v-18337f8d]{left:0}.right-0[data-v-18337f8d]{right:0}.text-center[data-v-18337f8d]{text-align:center}.text-black[data-v-18337f8d]{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.antialiased[data-v-18337f8d]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-full[data-v-18337f8d]{width:100%}.z-10[data-v-18337f8d]{z-index:10}.z-20[data-v-18337f8d]{z-index:20}@media (min-width:640px){.sm\:text-4xl[data-v-18337f8d]{font-size:2.25rem;line-height:2.5rem}.sm\:text-xl[data-v-18337f8d]{font-size:1.25rem;line-height:1.75rem}.sm\:text-10xl[data-v-18337f8d]{font-size:10rem;line-height:1}.sm\:px-0[data-v-18337f8d]{padding-left:0;padding-right:0}.sm\:py-3[data-v-18337f8d]{padding-bottom:.75rem;padding-top:.75rem}.sm\:px-6[data-v-18337f8d]{padding-left:1.5rem;padding-right:1.5rem}}@media (prefers-color-scheme:dark){.dark\:bg-black[data-v-18337f8d]{--tw-bg-opacity:1;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.dark\:text-white[data-v-18337f8d]{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}}

package/dist/client/_nuxt/error-500.70731718.js

@@ -0,0 +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.ce848650.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-500.dc5710d1.css

@@ -0,0 +1 @@
+.spotlight[data-v-428e244b]{background:linear-gradient(45deg,#00dc82,#36e4da 50%,#0047e1);filter:blur(20vh)}.bg-white[data-v-428e244b]{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.grid[data-v-428e244b]{display:grid}.place-content-center[data-v-428e244b]{place-content:center}.font-sans[data-v-428e244b]{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}.font-medium[data-v-428e244b]{font-weight:500}.font-light[data-v-428e244b]{font-weight:300}.h-1\/2[data-v-428e244b]{height:50%}.text-8xl[data-v-428e244b]{font-size:6rem;line-height:1}.text-xl[data-v-428e244b]{font-size:1.25rem;line-height:1.75rem}.leading-tight[data-v-428e244b]{line-height:1.25}.mb-8[data-v-428e244b]{margin-bottom:2rem}.mb-16[data-v-428e244b]{margin-bottom:4rem}.max-w-520px[data-v-428e244b]{max-width:520px}.min-h-screen[data-v-428e244b]{min-height:100vh}.overflow-hidden[data-v-428e244b]{overflow:hidden}.px-8[data-v-428e244b]{padding-left:2rem;padding-right:2rem}.fixed[data-v-428e244b]{position:fixed}.left-0[data-v-428e244b]{left:0}.right-0[data-v-428e244b]{right:0}.-bottom-1\/2[data-v-428e244b]{bottom:-50%}.text-center[data-v-428e244b]{text-align:center}.text-black[data-v-428e244b]{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.antialiased[data-v-428e244b]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (min-width:640px){.sm\:text-4xl[data-v-428e244b]{font-size:2.25rem;line-height:2.5rem}.sm\:text-10xl[data-v-428e244b]{font-size:10rem;line-height:1}.sm\:px-0[data-v-428e244b]{padding-left:0;padding-right:0}}@media (prefers-color-scheme:dark){.dark\:bg-black[data-v-428e244b]{--tw-bg-opacity:1;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.dark\:text-white[data-v-428e244b]{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}}

package/dist/client/_nuxt/error-component.418ebd67.js

@@ -0,0 +1,3 @@
+import{d as n,_ as o,o as _,c as f,n as g,g as E,u as r}from"./entry.ce848650.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.556d8899.js"),["./error-404.556d8899.js","./entry.ce848650.js","./entry.0827acf4.css","./error-404.68aa58b4.css"],import.meta.url).then(e=>e.default||e)),l=n(()=>o(()=>import("./error-500.70731718.js"),["./error-500.70731718.js","./entry.ce848650.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

@@ -0,0 +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.ce848650.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.418ebd67.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.ce848650.js" crossorigin></script></body>
+</html>

package/dist/client/nuxt.svg

@@ -0,0 +1,3 @@
+<svg width="324" height="324" viewBox="0 0 324 324" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M181.767 270H302.211C306.037 270 309.795 269.003 313.108 267.107C316.421 265.211 319.172 262.484 321.084 259.2C322.996 255.915 324.002 252.19 324 248.399C323.998 244.607 322.989 240.883 321.074 237.601L240.187 98.7439C238.275 95.4607 235.525 92.7342 232.213 90.8385C228.901 88.9429 225.143 87.9449 221.318 87.9449C217.494 87.9449 213.736 88.9429 210.424 90.8385C207.112 92.7342 204.361 95.4607 202.449 98.7439L181.767 134.272L141.329 64.7975C139.416 61.5145 136.664 58.7884 133.351 56.8931C130.038 54.9978 126.28 54 122.454 54C118.629 54 114.871 54.9978 111.558 56.8931C108.245 58.7884 105.493 61.5145 103.58 64.7975L2.92554 237.601C1.01067 240.883 0.00166657 244.607 2.06272e-06 248.399C-0.00166244 252.19 1.00407 255.915 2.91605 259.2C4.82803 262.484 7.57884 265.211 10.8918 267.107C14.2047 269.003 17.963 270 21.7886 270H97.3936C127.349 270 149.44 256.959 164.641 231.517L201.546 168.172L221.313 134.272L280.637 236.1H201.546L181.767 270ZM96.1611 236.065L43.3984 236.054L122.49 100.291L161.953 168.172L135.531 213.543C125.436 230.051 113.968 236.065 96.1611 236.065Z" fill="#00DC82"/>
+</svg>

package/dist/module.d.ts

@@ -21,28 +21,29 @@ interface ScreenshotOptions {
      */
     delay?: number;
 }
+interface OgImagePayload extends Partial<ScreenshotOptions> {
+    provider?: 'browser' | 'satori';
+    prerender?: boolean;
+    title?: string;
+    description?: string;
+    component?: string;
+    alt?: string;
+    [key: string]: any;
+}
+type OgImageScreenshotPayload = Omit<OgImagePayload, 'component'>;
 declare module 'nitropack' {
     interface NitroRouteRules {
-        ogImage?: 'screenshot' | string | false;
-        ogImagePayload?: Record<string, any>;
+        ogImage?: false | OgImageScreenshotPayload | OgImagePayload;
     }
 }
 
 interface ModuleOptions extends ScreenshotOptions {
-    /**
-     * The directory within `public` where the og images will be stored.
-     *
-     * @default "_og-images"
-     */
-    outputDir: string;
     /**
      * The hostname of your website.
      */
     host: string;
-    /**
-     * Are we edge-side rendering images.
-     */
-    serverSideRender: boolean;
+    experimentalNitroBrowser: boolean;
+    forcePrerender: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 

package/dist/module.json

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

package/dist/module.mjs

@@ -1,13 +1,16 @@
-import { readFile, writeFile, rm, mkdir } from 'node:fs/promises';
-import { defineNuxtModule, createResolver, addTemplate, getNuxtVersion, addServerHandler, addImports, addComponent } from '@nuxt/kit';
+import { mkdir, writeFile } from 'node:fs/promises';
+import { existsSync } from 'fs';
+import { useNuxt, addTemplate, defineNuxtModule, createResolver, addServerHandler, addImports, addComponent } from '@nuxt/kit';
 import { execa } from 'execa';
-import { hash } from 'ohash';
 import chalk from 'chalk';
 import defu from 'defu';
 import { toRouteMatcher, createRouter } from 'radix3';
-import { withBase, joinURL } from 'ufo';
-import fg from 'fast-glob';
-import { join } from 'pathe';
+import { joinURL } from 'ufo';
+import { resolve, relative } from 'pathe';
+import { tinyws } from 'tinyws';
+import sirv from 'sirv';
+import { createBirpcGroup } from 'birpc';
+import { stringify, parse } from 'flatted';
 
 async function createBrowser() {
   try {
@@ -54,19 +57,104 @@ async function screenshot(browser, url, options) {
   return await page.screenshot();
 }
 
-const HtmlRendererRoute = "__og_image";
 const PayloadScriptId = "nuxt-og-image-payload";
-const MetaOgImageContentPlaceholder = "__NUXT_OG_IMAGE_PLACEHOLDER__";
-const LinkPrerenderId = "nuxt-og-image-screenshot-path";
-const DefaultRuntimeImageSuffix = "og-image.png";
 const Constants = {
-  HtmlRendererRoute,
-  PayloadScriptId,
-  MetaOgImageContentPlaceholder,
-  LinkPrerenderId,
-  DefaultRuntimeImageSuffix
+  PayloadScriptId
 };
 
+function exposeConfig(alias, filename, config) {
+  const exports = Object.entries(config).map(([k, v]) => `export const ${k} = '${v}'`).join("\n");
+  useNuxt().options.alias[alias] = addTemplate({
+    filename,
+    getContents: () => exports
+  }).dst;
+  useNuxt().hooks.hook("nitro:config", (nitroConfig) => {
+    nitroConfig.virtual[alias] = exports;
+  });
+}
+
+function setupPlaygroundRPC(nuxt, config) {
+  const serverFunctions = {
+    getConfig() {
+      return config;
+    },
+    async openInEditor(input) {
+      if (input.startsWith("./"))
+        input = resolve(process.cwd(), input);
+      const match = input.match(/^(.*?)([:\d]*)$/);
+      let suffix = "";
+      if (match) {
+        input = match[1];
+        suffix = match[2];
+      }
+      const file = [
+        input,
+        `${input}.js`,
+        `${input}.mjs`,
+        `${input}.ts`
+      ].find((i) => existsSync(i));
+      if (file) {
+        await import('launch-editor').then((r) => (r.default || r)(file + suffix));
+      } else {
+        console.error("File not found:", input);
+      }
+    }
+  };
+  const clients = /* @__PURE__ */ new Set();
+  const birpc = createBirpcGroup(serverFunctions, []);
+  nuxt.hook("builder:watch", (e, path) => {
+    if (e === "change")
+      birpc.boardcast.refresh.asEvent(path);
+  });
+  const middleware = async (req, res) => {
+    if (req.ws) {
+      const ws = await req.ws();
+      clients.add(ws);
+      const channel = {
+        post: (d) => ws.send(d),
+        on: (fn) => ws.on("message", fn),
+        serialize: stringify,
+        deserialize: parse
+      };
+      birpc.updateChannels((c) => {
+        c.push(channel);
+      });
+      ws.on("close", () => {
+        clients.delete(ws);
+        birpc.updateChannels((c) => {
+          const index = c.indexOf(channel);
+          if (index >= 0)
+            c.splice(index, 1);
+        });
+      });
+    } else if (req.method === "POST") {
+      const body = await getBodyJson(req);
+      if (body.method === "setPayload") ; else {
+        res.statusCode = 400;
+      }
+      res.end();
+    }
+  };
+  return {
+    middleware,
+    birpc
+  };
+}
+function getBodyJson(req) {
+  return new Promise((resolve2, reject) => {
+    let body = "";
+    req.on("data", (chunk) => body += chunk);
+    req.on("error", reject);
+    req.on("end", () => {
+      try {
+        resolve2(JSON.parse(body) || {});
+      } catch (e) {
+        reject(e);
+      }
+    });
+  });
+}
+
 function extractOgPayload(html) {
   const payload = html.match(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.+?)<\/script>`))?.[1];
   if (payload) {
@@ -74,6 +162,9 @@ function extractOgPayload(html) {
   }
   return false;
 }
+const PATH = "/__nuxt_og_image__";
+const PATH_ENTRY = `${PATH}/entry`;
+const PATH_PLAYGROUND = `${PATH}/client`;
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
@@ -85,57 +176,74 @@ const module = defineNuxtModule({
   },
   defaults(nuxt) {
     return {
+      experimentalNitroBrowser: false,
+      forcePrerender: !nuxt.options.dev && nuxt.options._generate,
       host: nuxt.options.runtimeConfig.public?.siteUrl,
       width: 1200,
-      height: 630,
-      defaultIslandComponent: "OgImageTemplate",
-      outputDir: "_og-images",
-      serverSideRender: nuxt.options.dev || (process.env.NITRO_PRESET || "").includes("edge")
+      height: 630
     };
   },
   async setup(config, nuxt) {
     const { resolve } = createResolver(import.meta.url);
+    const distResolve = (p) => {
+      const cwd = resolve(".");
+      if (cwd.endsWith("/dist"))
+        return resolve(p);
+      return resolve(`../dist/${p}`);
+    };
     nuxt.options.experimental.componentIslands = true;
     const isEdge = (process.env.NITRO_PRESET || "").includes("edge");
     addTemplate({
       filename: "nuxt-og-image.d.ts",
       getContents: () => {
         return `// Generated by nuxt-og-image
+interface NuxtOgImageNitroRules {
+  ogImage?: false | Record<string, any>
+}
 declare module 'nitropack' {
-  interface NitroRouteRules {
-    ogImage?: 'screenshot' | string | false
-  }
+  interface NitroRouteRules extends NuxtOgImageNitroRules {}
+  interface NitroRouteConfig extends NuxtOgImageNitroRules {}
 }
+export {}
 `;
       }
     });
     nuxt.hooks.hook("prepare:types", ({ references }) => {
       references.push({ path: resolve(nuxt.options.buildDir, "nuxt-og-image.d.ts") });
     });
-    if (getNuxtVersion(nuxt) !== "3.0.0") {
+    ["html", "payload", "svg", "og.png"].forEach((type) => {
       addServerHandler({
-        handler: resolve("./runtime/nitro/html")
+        handler: resolve(`./runtime/nitro/routes/__og_image__/${type}`)
       });
-      if (config.serverSideRender) {
-        addServerHandler({
-          handler: resolve("./runtime/nitro/image")
-        });
-      }
-    }
-    addImports({
-      name: "defineOgImage",
-      from: resolve("./runtime/composables/defineOgImage")
     });
-    addImports({
-      name: "defineOgImageScreenshot",
-      from: resolve("./runtime/composables/defineOgImage")
+    if (nuxt.options.dev) {
+      const playgroundDir = distResolve("./client");
+      const {
+        middleware: rpcMiddleware
+      } = setupPlaygroundRPC(nuxt, config);
+      nuxt.hook("vite:serverCreated", (server) => {
+        server.middlewares.use(PATH_ENTRY, tinyws());
+        server.middlewares.use(PATH_ENTRY, rpcMiddleware);
+        if (existsSync(playgroundDir))
+          server.middlewares.use(PATH_PLAYGROUND, sirv(playgroundDir, { single: true, dev: true }));
+      });
+      addServerHandler({
+        handler: resolve("./runtime/nitro/routes/__og_image__/index")
+      });
+    }
+    ["defineOgImageDynamic", "defineOgImageStatic", "defineOgImageScreenshot"].forEach((name) => {
+      addImports({
+        name,
+        from: resolve("./runtime/composables/defineOgImage")
+      });
     });
     await addComponent({
       name: "OgImageTemplate",
       filePath: resolve("./runtime/components/OgImageTemplate.island.vue"),
+      global: true,
       island: true
     });
-    ["OgImage", "OgImageScreenshot"].forEach((name) => {
+    ["OgImageStatic", "OgImageDynamic", "OgImageScreenshot"].forEach((name) => {
       addComponent({
         name,
         filePath: resolve(`./runtime/components/${name}`),
@@ -144,67 +252,65 @@ declare module 'nitropack' {
     });
     const runtimeDir = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimeDir);
-    const constScript = Object.entries(Constants).map(([k, v]) => `export const ${k} = '${v}'`).join("\n");
-    nuxt.options.alias["#nuxt-og-image/constants"] = addTemplate({
-      filename: "nuxt-og-image-constants.mjs",
-      getContents: () => constScript
-    }).dst;
+    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 || {}, {
         inline: [runtimeDir]
       });
-      nitroConfig.virtual["#nuxt-og-image/constants"] = constScript;
-      nitroConfig.virtual["#nuxt-og-image/browser"] = `export { createBrowser } from '${runtimeDir}/browsers/${isEdge ? "lambda" : "default"}'`;
-      if (isEdge) {
-        ["puppeteer", "bufferutil", "utf-8-validate"].forEach((name) => {
-          nitroConfig.alias[name] = "unenv/runtime/mock/proxy";
-        });
+      nitroConfig.publicAssets = nitroConfig.publicAssets || [];
+      nitroConfig.publicAssets.push({ dir: resolve("./runtime/public"), maxAge: 31536e3 });
+      nitroConfig.virtual["#nuxt-og-image/browser"] = `export { createBrowser } from '${runtimeDir}/nitro/browsers/${isEdge ? "lambda" : "default"}'`;
+      nitroConfig.virtual["#nuxt-og-image/provider"] = `
+      import satori from '${runtimeDir}/nitro/providers/satori'
+      import browser from '${runtimeDir}/nitro/providers/browser'
+
+      export function useProvider(provider) {
+        if (provider === 'satori')
+          return satori
+        if (provider === 'browser')
+          return browser
+      }
+      `;
+      if (config.experimentalNitroBrowser) {
+        nitroConfig.virtual["#nuxt-og-image/providers/browser"] = `export * from '${runtimeDir}/nitro/providers/browser'`;
+        if (isEdge) {
+          ["puppeteer", "bufferutil", "utf-8-validate"].forEach((name) => {
+            nitroConfig.alias[name] = "unenv/runtime/mock/proxy";
+          });
+        }
       }
     });
     nuxt.hooks.hook("nitro:init", async (nitro) => {
-      let entries = [];
-      let cleanupEntries = [];
+      let screenshotQueue = [];
       const _routeRulesMatcher = toRouteMatcher(
         createRouter({ routes: nitro.options.routeRules })
       );
-      const outputPath = join(nitro.options.output.publicDir, config.outputDir);
       nitro.hooks.hook("prerender:generate", async (ctx) => {
-        if (ctx.route.includes(".") || ctx.route.endsWith(HtmlRendererRoute))
+        if (ctx.route.includes(".") || ctx.route.endsWith("__og_image__/html"))
           return;
-        let html = ctx.contents;
+        const html = ctx.contents;
         if (!html)
           return;
-        if (!html.includes(`id="${PayloadScriptId}"`))
-          return;
+        const extractedPayload = extractOgPayload(html);
+        ctx.contents = html.replace(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.*?)<\/script>`), "");
         const routeRules = defu({}, ..._routeRulesMatcher.matchAll(ctx.route).reverse());
-        if (routeRules.ogImage === false)
+        if (!extractedPayload || routeRules.ogImage === false)
           return;
-        const screenshotPath = ctx._contents.match(new RegExp(`<link id="${LinkPrerenderId}" rel="prerender" href="(.*?)">`))?.[1];
-        const fileName = `${hash({ route: ctx.route })}.png`;
-        const absoluteUrl = withBase(`${config.outputDir}/${fileName}`, config.host);
-        const entry = {
-          fileName,
-          absoluteUrl,
-          outputPath: joinURL(nitro.options.output.publicDir, config.outputDir, fileName),
-          linkingHtml: joinURL(nitro.options.output.publicDir, ctx.fileName),
-          route: ctx.route,
-          payload: extractOgPayload(ctx._contents),
-          routeRules: routeRules.ogImage || "",
-          screenshotPath: screenshotPath || ctx.route
+        const payload = {
+          path: ctx.route,
+          ...extractedPayload,
+          ...routeRules.ogImage || {},
+          ctx
         };
-        entries.push(entry);
-        html = html.replace(MetaOgImageContentPlaceholder, entry.absoluteUrl);
-        ctx.contents = html;
+        if ((nuxt.options._generate || payload.prerender) && payload.provider === "browser")
+          screenshotQueue.push(payload);
       });
       if (nuxt.options.dev)
         return;
-      const outputOgImages = async () => {
-        if (entries.length === 0)
+      const captureScreenshots = async () => {
+        if (screenshotQueue.length === 0)
           return;
-        try {
-          await mkdir(outputPath, { recursive: true });
-        } catch (e) {
-        }
         const previewProcess = execa("npx", ["serve", nitro.options.output.publicDir]);
         let browser = null;
         try {
@@ -218,24 +324,30 @@ declare module 'nitropack' {
           })).trim();
           browser = await createBrowser();
           if (browser) {
-            nitro.logger.info(`Generating ${entries.length} og:images...`);
-            for (const k in entries) {
-              const entry = entries[k];
+            nitro.logger.info(`Pre-rendering ${screenshotQueue.length} og:image screenshots...`);
+            for (const k in screenshotQueue) {
+              const entry = screenshotQueue[k];
               const start = Date.now();
               let hasError = false;
+              const dirname = joinURL(nitro.options.output.publicDir, `${entry.ctx.fileName.replace("index.html", "")}__og_image__/`);
+              const filename = joinURL(dirname, "/og.png");
               try {
-                const imgBuffer = await screenshot(browser, `${host}${entry.screenshotPath}`, {
+                const imgBuffer = await screenshot(browser, `${host}${entry.path}`, {
                   ...config,
-                  ...entry.payload || {}
+                  ...entry
                 });
-                await writeFile(entry.outputPath, imgBuffer);
+                try {
+                  await mkdir(dirname, { recursive: true });
+                } catch (e) {
+                }
+                await writeFile(filename, imgBuffer);
               } catch (e) {
                 hasError = true;
                 console.error(e);
               }
               const generateTimeMS = Date.now() - start;
               nitro.logger.log(chalk[hasError ? "red" : "gray"](
-                `  ${Number(k) === entries.length - 1 ? "\u2514\u2500" : "\u251C\u2500"} /${config.outputDir}/${entry.fileName} (${generateTimeMS}ms) ${Math.round(Number(k) / (entries.length - 1) * 100)}%`
+                `  ${Number(k) === screenshotQueue.length - 1 ? "\u2514\u2500" : "\u251C\u2500"} ${relative(nitro.options.output.publicDir, filename)} (${generateTimeMS}ms) ${Math.round((Number(k) + 1) / screenshotQueue.length * 100)}%`
               ));
             }
           } else {
@@ -247,28 +359,13 @@ declare module 'nitropack' {
           await browser?.close();
           previewProcess.kill();
         }
-        cleanupEntries = [...entries];
-        entries = [];
+        screenshotQueue = [];
       };
       nitro.hooks.hook("rollup:before", async () => {
-        await outputOgImages();
+        await captureScreenshots();
       });
       nitro.hooks.hook("close", async () => {
-        await outputOgImages();
-        for (const entry of cleanupEntries) {
-          try {
-            const html = await readFile(entry.linkingHtml, "utf-8");
-            const newHtml = html.replace("__OG_IMAGE_SCREENSHOT_ALT", `Web page screenshot of ${entry.route}.`).replace(new RegExp(`<link id="${LinkPrerenderId}" rel="prerender" href="(.*?)">`), "").replace(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.*?)<\/script>`), "").replace("\n\n", "\n");
-            if (html !== newHtml) {
-              await writeFile(entry.linkingHtml, newHtml, { encoding: "utf-8" });
-            }
-          } catch (e) {
-            console.error(e);
-          }
-        }
-        const ogImageFolders = await fg([`**/${HtmlRendererRoute}`], { cwd: nitro.options.output.publicDir, onlyDirectories: true });
-        for (const ogImageFolder of ogImageFolders)
-          await rm(join(nitro.options.output.publicDir, ogImageFolder), { recursive: true, force: true });
+        await captureScreenshots();
       });
     });
   }

package/dist/runtime/components/OgImageDynamic.mjs

@@ -0,0 +1,9 @@
+import { defineComponent } from "vue";
+import { defineOgImageDynamic } from "#imports";
+export default defineComponent({
+  name: "OgImageDynamic",
+  setup(_, { attrs }) {
+    defineOgImageDynamic(attrs);
+    return () => null;
+  }
+});

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

@@ -0,0 +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>>, {
+    [x: string]: any;
+}>;
+export default _default;

package/dist/runtime/components/{OgImage.mjs → OgImageStatic.mjs}

@@ -1,9 +1,9 @@
 import { defineComponent } from "vue";
-import { defineOgImage } from "#imports";
+import { defineOgImageStatic } from "#imports";
 export default defineComponent({
-  name: "OgImage",
+  name: "OgImageStatic",
   setup(_, { attrs }) {
-    defineOgImage(attrs);
+    defineOgImageStatic(attrs);
     return () => null;
   }
 });

package/dist/runtime/components/OgImageTemplate.island.vue

@@ -7,89 +7,14 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="wrap">
-    <div class="bg1" />
-    <div class="bg2" />
-    <div>
-      <p>This is the default og:image template from <a href="https://github.com/harlan-zw/nuxt-og-image" target="_blank">nuxt-og-image</a>.</p>
-      <p>Create your own at <code>components/islands/OgImageTemplate.vue</code>.</p>
-    </div>
-    <div>
-      <strong>Payload</strong>
-      <code>
-        <pre>{{ props }}</pre>
-      </code>
+  <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 }}
+      </p>
+      <p :style="{ fontSize: '26px' }">
+        {{ description }}
+      </p>
     </div>
   </div>
 </template>
-
-<style scoped>
-.wrap {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  color: white;
-  font-weight: bold;
-  font-family: sans-serif;
-  background-color: #0c0c0c;
-  position: relative;
-}
-
-.bg1 {
-  top: 0;
-  left: 0;
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  padding: 0 !important;
-  margin: 0 !important;
-  background-color: #0c0c0c;
-}
-
-.bg2 {
-  top: 0;
-  left: 0;
-  z-index: 1;
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  padding: 0 !important;
-  margin: 0 !important;
-  background: radial-gradient(at 100% 100%, #0f766e, rgba(12, 12, 12, 0.1) 60%);
-}
-
-a {
-  color: inherit;
-  padding-bottom: 3px;
-  text-decoration: none;
-  border-bottom: 3px solid #ff8235;
-}
-
-.wrap > div {
-  z-index: 2;
-  padding: 2rem;
-}
-
-code pre {
-  background: #333;
-  color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  font-weight: lighter;
-  font-size: 1.1rem;
-}
-
-p {
-  font-size: 1.5em;
-  font-weight: normal;
-}
-
-h1 {
-  font-size: 4rem;
-  margin: 0;
-}
-</style>