nuxt-og-image 1.0.0-beta.9 → 1.1.1

package/dist/client/_nuxt/{error-404.0c49154a.js → error-404.8c9bfe7d.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.2a315a2c.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.df5ad46e.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.f3eec0bb.js → error-500.cb171c6a.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.2a315a2c.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.df5ad46e.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.7c753c74.js → error-component.c6b1c57b.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.2a315a2c.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.df5ad46e.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.0c49154a.js"),["./error-404.0c49154a.js","./entry.2a315a2c.js","./entry.dc5450bf.css","./error-404.68aa58b4.css"],import.meta.url).then(e=>e.default||e)),l=n(()=>o(()=>import("./error-500.f3eec0bb.js"),["./error-500.f3eec0bb.js","./entry.2a315a2c.js","./entry.dc5450bf.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.8c9bfe7d.js"),["./error-404.8c9bfe7d.js","./entry.df5ad46e.js","./entry.dc5450bf.css","./error-404.68aa58b4.css"],import.meta.url).then(e=>e.default||e)),l=n(()=>o(()=>import("./error-500.cb171c6a.js"),["./error-500.cb171c6a.js","./entry.df5ad46e.js","./entry.dc5450bf.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.2a315a2c.js"><link rel="preload" as="style" href="/__nuxt_og_image__/client/_nuxt/entry.dc5450bf.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-component.7c753c74.js"><link rel="stylesheet" href="/__nuxt_og_image__/client/_nuxt/entry.dc5450bf.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.df5ad46e.js"><link rel="preload" as="style" href="/__nuxt_og_image__/client/_nuxt/entry.dc5450bf.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-component.c6b1c57b.js"><link rel="stylesheet" href="/__nuxt_og_image__/client/_nuxt/entry.dc5450bf.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.2a315a2c.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.df5ad46e.js" crossorigin></script></body>
 </html>

package/dist/module.d.ts

@@ -39,9 +39,7 @@ interface ModuleOptions {
     host: string;
     defaults: OgImageOptions;
     experimentalNitroBrowser: boolean;
-    satoriFonts: Array<Partial<SatoriOptions['fonts'][number]> & {
-        publicPath: string;
-    }>;
+    fonts: `${string}:${number}`[];
     satoriOptions: Partial<SatoriOptions>;
     forcePrerender: boolean;
 }

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "nuxt-og-image",
   "compatibility": {
-    "nuxt": "^3.0.0",
+    "nuxt": "^3.1.0",
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "1.0.0-beta.9"
+  "version": "1.1.1"
 }

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { mkdir, writeFile } from 'node:fs/promises';
 import { existsSync } from 'fs';
-import { useNuxt, addTemplate, defineNuxtModule, createResolver, getNuxtVersion, useLogger, addServerHandler, addImports, addComponent } from '@nuxt/kit';
+import { useNuxt, addTemplate, defineNuxtModule, createResolver, addServerHandler, addImports, addComponent } from '@nuxt/kit';
 import { execa } from 'execa';
 import chalk from 'chalk';
 import defu from 'defu';
@@ -9,6 +9,7 @@ import { joinURL } from 'ufo';
 import { resolve, relative } from 'pathe';
 import { tinyws } from 'tinyws';
 import sirv from 'sirv';
+import { copy } from 'fs-extra';
 import { createBirpcGroup } from 'birpc';
 import { stringify, parse } from 'flatted';
 
@@ -57,24 +58,6 @@ async function screenshot(browser, url, options) {
   return await page.screenshot();
 }
 
-function exposeConfig(alias, filename, config) {
-  const exports = Object.entries(config).map(([k, v]) => `export const ${k} = ${JSON.stringify(v)}`).join("\n");
-  useNuxt().options.alias[alias] = addTemplate({
-    filename,
-    getContents: () => exports
-  }).dst;
-  useNuxt().hooks.hook("nitro:config", (nitroConfig) => {
-    nitroConfig.virtual[alias] = exports;
-  });
-}
-function extractOgImageOptions(html) {
-  const options = html.match(/<script id="nuxt-og-image-options" type="application\/json">(.+?)<\/script>/)?.[1];
-  return options ? JSON.parse(options) : false;
-}
-function stripOgImageOptions(html) {
-  return html.replace(/<script id="nuxt-og-image-options" type="application\/json">(.*?)<\/script>/, "");
-}
-
 function setupPlaygroundRPC(nuxt, config) {
   const serverFunctions = {
     getConfig() {
@@ -157,6 +140,48 @@ function getBodyJson(req) {
   });
 }
 
+function exposeModuleConfig(moduleName, config) {
+  const nuxt = useNuxt();
+  const jsExports = Object.entries(config).map(([k, v]) => `export const ${k} = ${JSON.stringify(v)}`).join("\n");
+  const alias = `#${moduleName}/config`;
+  nuxt.options.alias[alias] = addTemplate({
+    filename: `modules/config/${moduleName}.mjs`,
+    getContents: () => jsExports
+  }).dst;
+  nuxt.hooks.hook("nitro:config", (nitroConfig) => {
+    nitroConfig.virtual[alias] = jsExports;
+  });
+  const typeDefName = `modules/config/${moduleName}.d.ts`;
+  const tsExports = Object.keys(config).map((k) => {
+    if (nuxt.options.dev)
+      return `  export const ${k}: ${JSON.stringify(config[k])} | ModuleOptions['${k}']`;
+    return `  export const ${k}: ModuleOptions['${k}']`;
+  }).join("\n");
+  addTemplate({
+    filename: typeDefName,
+    getContents: () => {
+      return `// generated by ${moduleName}
+import type { ModuleOptions } from '${moduleName}'
+declare module '${alias}' {
+${tsExports}
+}
+`;
+    }
+  });
+  nuxt.hooks.hook("prepare:types", ({ references }) => {
+    references.push({ path: resolve(nuxt.options.buildDir, typeDefName) });
+  });
+  return alias;
+}
+
+function extractOgImageOptions(html) {
+  const options = html.match(/<script id="nuxt-og-image-options" type="application\/json">(.+?)<\/script>/)?.[1];
+  return options ? JSON.parse(options) : false;
+}
+function stripOgImageOptions(html) {
+  return html.replace(/<script id="nuxt-og-image-options" type="application\/json">(.*?)<\/script>/, "");
+}
+
 const PATH = "/__nuxt_og_image__";
 const PATH_ENTRY = `${PATH}/entry`;
 const PATH_PLAYGROUND = `${PATH}/client`;
@@ -164,7 +189,7 @@ const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
     compatibility: {
-      nuxt: "^3.0.0",
+      nuxt: "^3.1.0",
       bridge: false
     },
     configKey: "ogImage"
@@ -179,25 +204,14 @@ const module = defineNuxtModule({
         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"
-        }
-      ],
+      fonts: [],
       satoriOptions: {}
     };
   },
   async setup(config, nuxt) {
     const { resolve } = createResolver(import.meta.url);
+    if (!config.fonts.length)
+      config.fonts = ["Inter:400", "Inter:700"];
     const distResolve = (p) => {
       const cwd = resolve(".");
       if (cwd.endsWith("/dist"))
@@ -206,10 +220,6 @@ 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: () => {
@@ -233,6 +243,10 @@ export {}
         handler: resolve(`./runtime/nitro/routes/__og_image__/${type}`)
       });
     });
+    addServerHandler({
+      route: "/api/og-image-font",
+      handler: resolve("./runtime/nitro/routes/__og_image__/font")
+    });
     if (nuxt.options.dev) {
       const playgroundDir = distResolve("./client");
       const {
@@ -269,13 +283,18 @@ export {}
     });
     const runtimeDir = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimeDir);
-    exposeConfig("#nuxt-og-image/config", "nuxt-og-image-config.mjs", config);
+    const fontDir = resolve(nuxt.options.buildDir, "nuxt-og-image");
+    const publicDirs = [`${nuxt.options.rootDir}/public`, fontDir];
+    exposeModuleConfig("nuxt-og-image", { ...config, publicDirs });
+    nuxt.hooks.hook("build:before", async () => {
+      await copy(resolve("./runtime/public"), resolve(nuxt.options.buildDir, "nuxt-og-image"));
+    });
     nuxt.hooks.hook("nitro:config", (nitroConfig) => {
       nitroConfig.externals = defu(nitroConfig.externals || {}, {
         inline: [runtimeDir]
       });
       nitroConfig.publicAssets = nitroConfig.publicAssets || [];
-      nitroConfig.publicAssets.push({ dir: resolve("./runtime/public"), maxAge: 31536e3 });
+      nitroConfig.publicAssets.push({ dir: fontDir, 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'

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

@@ -2,11 +2,13 @@ import { html as convertHtmlToSatori } from "satori-html";
 import satori from "satori";
 import { parseURL } from "ufo";
 import { Resvg } from "@resvg/resvg-js";
-import { parseFont, walkSatoriTree } from "./utils.mjs";
+import twemoji from "twemoji";
+import { loadFont, walkSatoriTree } from "./utils.mjs";
 import imageSrc from "./plugins/imageSrc.mjs";
 import twClasses from "./plugins/twClasses.mjs";
 import flex from "./plugins/flex.mjs";
-import { satoriFonts, satoriOptions } from "#nuxt-og-image/config";
+import emojis from "./plugins/emojis.mjs";
+import { fonts, satoriOptions } from "#nuxt-og-image/config";
 export default {
   name: "satori",
   createPng: async function createPng(baseUrl, options) {
@@ -19,11 +21,13 @@ export default {
     const url = parseURL(baseUrl);
     const html = await $fetch(url.pathname);
     const body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1];
-    satoriOptions.fonts = satoriOptions.fonts || [];
-    for (const font of satoriFonts)
-      satoriOptions.fonts.push(await parseFont(url, font));
-    const satoriTree = convertHtmlToSatori(body);
+    const emojiedFont = twemoji.parse(body, {
+      folder: "svg",
+      ext: ".svg"
+    });
+    const satoriTree = convertHtmlToSatori(emojiedFont);
     await walkSatoriTree(url, satoriTree, [
+      emojis(url),
       twClasses(url),
       imageSrc(url),
       flex(url)
@@ -31,9 +35,15 @@ export default {
     return satoriTree;
   },
   createSvg: async function createSvg(baseUrl, options) {
+    const url = parseURL(baseUrl);
     const vnodes = await this.createVNode(baseUrl, options);
+    const satoriFonts = [];
+    for (const font of fonts)
+      satoriFonts.push(await loadFont(url, font));
     return await satori(vnodes, {
       ...satoriOptions,
+      fonts: satoriFonts,
+      embedFont: true,
       width: options.width,
       height: options.height
     });

package/dist/runtime/nitro/providers/satori/plugins/emojis.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (url: import("ufo").ParsedURL) => import("../../../../../types").SatoriTransformer;
+export default _default;

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

@@ -0,0 +1,13 @@
+import { defineSatoriTransformer } from "../utils.mjs";
+export default defineSatoriTransformer(() => {
+  return {
+    filter: (node) => node.type === "img" && node.props?.class?.includes("emoji"),
+    transform: async (node) => {
+      node.props.style = node.props.style || {};
+      node.props.style.height = "1em";
+      node.props.style.width = "1em";
+      node.props.style.margin = "0 .05em 0 .1em";
+      node.props.style.verticalAlign = "0.1em";
+    }
+  };
+});

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

@@ -1,7 +1,7 @@
 import { defineSatoriTransformer } from "../utils.mjs";
 export default defineSatoriTransformer(() => {
   return {
-    filter: (node) => node.type === "div" && (Array.isArray(node.props.children) && node.props.children.length >= 1) && (!node.props.style?.display && !node.props.class?.includes("flex")),
+    filter: (node) => node.type === "div" && (Array.isArray(node.props?.children) && node.props?.children.length >= 1) && (!node.props.style?.display && !node.props?.class?.includes("flex")),
     transform: async (node) => {
       node.props.style = node.props.style || {};
       node.props.style.display = "flex";

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

@@ -1,23 +1,16 @@
-import { fileURLToPath } from "node:url";
-import { promises as fsp } from "node:fs";
 import { withBase } from "ufo";
-import { dirname, resolve } from "pathe";
-import { defineSatoriTransformer } from "../utils.mjs";
-import { getAsset } from "#internal/nitro/virtual/public-assets";
+import { defineSatoriTransformer, readPublicAssetBase64 } from "../utils.mjs";
 export default defineSatoriTransformer((url) => {
   return {
     filter: (node) => node.type === "img",
     transform: async (node) => {
       const src = node.props?.src;
       if (src && src.startsWith("/")) {
-        const file = getAsset(src);
-        if (file) {
-          const serverDir = dirname(fileURLToPath(import.meta.url));
-          const path = resolve(serverDir, file.path);
-          node.props.src = `data:${file.type};base64,${await fsp.readFile(path, { encoding: "base64" })}`;
-        } else {
+        const file = await readPublicAssetBase64(src);
+        if (file)
+          node.props.src = file;
+        else
           node.props.src = withBase(src, `${url.protocol}//${url.host}`);
-        }
       }
     }
   };

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

@@ -1,10 +1,8 @@
-import type { SatoriOptions } from 'satori';
+/// <reference types="node" />
 import type { ParsedURL } from 'ufo';
 import type { SatoriTransformer, VNode } from '../../../../types';
-export declare function parseFont(url: ParsedURL, font: SatoriOptions['fonts'][number] & {
-    publicPath?: string;
-}): Promise<import("satori").Font & {
-    publicPath?: string | undefined;
-}>;
+export declare function readPublicAsset(file: string, encoding?: BufferEncoding): Promise<string | Buffer | undefined>;
+export declare function readPublicAssetBase64(file: string): Promise<string | undefined>;
+export declare function loadFont(url: ParsedURL, font: string): Promise<any>;
 export declare function walkSatoriTree(url: ParsedURL, node: VNode, plugins: SatoriTransformer[]): Promise<void>;
 export declare function defineSatoriTransformer(transformer: (url: ParsedURL) => SatoriTransformer): (url: ParsedURL) => SatoriTransformer;

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

@@ -1,29 +1,67 @@
-import { fileURLToPath } from "node:url";
-import { promises as fsp } from "node:fs";
-import { dirname, resolve } from "pathe";
-import { withBase } from "ufo";
-import { getAsset } from "#internal/nitro/virtual/public-assets";
-export async function parseFont(url, 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));
+import { existsSync, promises as fsp } from "fs";
+import { join } from "pathe";
+import { useStorage } from "#internal/nitro";
+import { publicDirs } from "#nuxt-og-image/config";
+const cachedFonts = {};
+const r = (base, key) => {
+  return join(base, key.replace(/:/g, "/"));
+};
+export async function readPublicAsset(file, encoding) {
+  for (const d of publicDirs) {
+    const path = r(d, file);
+    if (existsSync(path))
+      return await fsp.readFile(path, { encoding });
+  }
+}
+export async function readPublicAssetBase64(file) {
+  const base64 = await readPublicAsset(file, "base64");
+  if (base64) {
+    let type = "image/jpeg";
+    const ext = file.split(".").pop();
+    if (ext === "svg")
+      type = "image/svg+xml";
+    else if (ext === "png")
+      type = "image/png";
+    return `data:${type};base64,${base64}`;
+  }
+}
+export async function loadFont(url, font) {
+  if (cachedFonts[font])
+    return cachedFonts[font];
+  const [name, weight] = font.split(":");
+  if (name === "Inter" && ["400", "700"].includes(weight)) {
+    const data2 = await readPublicAsset(`/inter-latin-ext-${weight}-normal.woff`);
+    if (data2) {
+      return cachedFonts[font] = { name, weight: weight === "400" ? "500" : weight, data: data2, style: "normal" };
     }
-    if (!font.data)
-      font.data = await (await $fetch(withBase(font.publicPath, `${url.protocol}//${url.host}`))).arrayBuffer();
   }
-  return font;
+  const fontUrl = await $fetch("/api/og-image-font", {
+    query: { name, weight }
+  });
+  let data;
+  const storageKey = `nuxt-og-image:font:${font}`;
+  const hasStoredFont = await useStorage().hasItem(storageKey);
+  if (!hasStoredFont) {
+    data = await $fetch(fontUrl, {
+      responseType: "arrayBuffer"
+    });
+    await useStorage().setItem(storageKey, data);
+  } else {
+    data = await useStorage().getItem(storageKey);
+  }
+  return cachedFonts[font] = { name, weight, data, style: "normal" };
 }
 export async function walkSatoriTree(url, node, plugins) {
   if (!node.props?.children)
     return;
   for (const child of node.props.children || []) {
-    for (const plugin of plugins) {
-      if (plugin.filter(child))
-        await plugin.transform(child, url);
+    if (child) {
+      for (const plugin of plugins) {
+        if (plugin.filter(child))
+          await plugin.transform(child);
+      }
+      await walkSatoriTree(url, child, plugins);
     }
-    await walkSatoriTree(url, child, plugins);
   }
 }
 export function defineSatoriTransformer(transformer) {

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

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

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

@@ -0,0 +1,21 @@
+import { getQuery } from "h3";
+import { defineCachedEventHandler } from "#internal/nitro";
+export default defineCachedEventHandler(async (e) => {
+  const { name, weight } = getQuery(e);
+  if (!name || !weight)
+    return "Provide a font name and weight";
+  const css = await await $fetch(`https://fonts.googleapis.com/css2?family=${name}:wght@${weight}`, {
+    headers: {
+      "User-Agent": "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"
+    }
+  });
+  const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/);
+  if (!resource)
+    return;
+  return resource[1];
+}, {
+  getKey: (e) => {
+    const query = getQuery(e);
+    return `nuxt-og-image:font-url:${query.name}:${query.weight}`;
+  }
+});

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

@@ -3,7 +3,7 @@ import { renderSSRHead } from "@unhead/ssr";
 import { createHeadCore } from "@unhead/vue";
 import { defineEventHandler, getQuery, sendRedirect } from "h3";
 import { fetchOptions, renderIsland, useHostname } from "../../utils.mjs";
-import { defaults } from "#nuxt-og-image/config";
+import { defaults, fonts } from "#nuxt-og-image/config";
 export default defineEventHandler(async (e) => {
   const path = parseURL(e.path).pathname;
   if (!path.endsWith("__og_image__/html"))
@@ -19,16 +19,28 @@ export default defineEventHandler(async (e) => {
   head.push({
     style: [
       {
-        innerHTML: "body { font-family: 'Inter', sans-serif;  }"
+        innerHTML: `body { font-family: '${fonts[0].split(":")[0].replace("+", " ")}', sans-serif;  }`
       },
       scale ? {
         innerHTML: `body {
     transform: scale(${scale});
     transform-origin: top left;
     max-height: 100vh;
+}
+img.emoji {
+   height: 1em;
+   width: 1em;
+   margin: 0 .05em 0 .1em;
+   vertical-align: -0.1em;
+}
 `
       } : {}
     ],
+    meta: [
+      {
+        charset: "utf-8"
+      }
+    ],
     script: [
       {
         src: "https://cdn.tailwindcss.com"
@@ -46,10 +58,13 @@ export default defineEventHandler(async (e) => {
         href: "https://cdn.jsdelivr.net/npm/gardevoir",
         rel: "stylesheet"
       },
-      {
-        href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap",
-        rel: "stylesheet"
-      }
+      ...fonts.map((font) => {
+        const [name, weight] = font.split(":");
+        return {
+          href: `https://fonts.googleapis.com/css2?family=${name}:wght@${weight}&display=swap`,
+          rel: "stylesheet"
+        };
+      })
     ]
   });
   const headChunk = await renderSSRHead(head);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "1.0.0-beta.9",
+  "version": "1.1.1",
   "packageManager": "pnpm@7.8.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -26,38 +26,40 @@
     "dist"
   ],
   "dependencies": {
-    "@nuxt/kit": "3.0.0",
+    "@nuxt/kit": "3.1.0",
     "@resvg/resvg-js": "^2.2.0",
+    "@types/fs-extra": "^11.0.1",
     "birpc": "^0.2.3",
     "chalk": "^5.2.0",
     "chrome-launcher": "^0.15.1",
-    "defu": "^6.1.1",
+    "defu": "^6.1.2",
     "execa": "^6.1.0",
     "fast-glob": "^3.2.12",
     "flatted": "^3.2.7",
+    "fs-extra": "^11.1.0",
     "launch-editor": "^2.6.0",
     "ohash": "^1.0.0",
-    "pathe": "^1.0.0",
+    "pathe": "^1.1.0",
     "playwright-core": "^1.29.2",
     "radix3": "^1.0.0",
     "satori": "^0.1.1",
     "satori-html": "^0.3.2",
     "sirv": "^2.0.2",
     "tinyws": "^0.1.0",
+    "twemoji": "^14.0.2",
     "ufo": "^1.0.1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.34.1",
-    "@nuxt/kit": "3.0.0",
     "@nuxt/module-builder": "^0.2.1",
-    "@nuxt/test-utils": "3.0.0",
+    "@nuxt/test-utils": "3.1.0",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/ws": "^8.5.4",
     "bumpp": "^8.2.1",
     "eslint": "8.32.0",
     "nuxt": "npm:nuxt3@latest",
-    "puppeteer": "^19.5.2",
-    "vitest": "^0.27.2"
+    "puppeteer": "^19.6.0",
+    "vitest": "^0.28.1"
   },
   "scripts": {
     "build": "pnpm dev:prepare && pnpm build:module && pnpm build:client",