nuxt-og-image 3.0.0-rc.2 → 3.0.0-rc.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/README.md +0 -4
  2. package/dist/client/200.html +9 -9
  3. package/dist/client/404.html +9 -9
  4. package/dist/client/_nuxt/IconCSS.5O0-SmyH.js +1 -0
  5. package/dist/client/_nuxt/IconCSS.6C__fd0x.css +1 -0
  6. package/dist/client/_nuxt/builds/latest.json +1 -1
  7. package/dist/client/_nuxt/builds/meta/dadcb033-8bc6-47cc-a46a-9ba69b83d96c.json +1 -0
  8. package/dist/client/_nuxt/entry.1-ZveGsq.css +1 -0
  9. package/dist/client/_nuxt/{entry.e9f3db7f.js → entry.Nh9pQ4Ti.js} +64 -58
  10. package/dist/client/_nuxt/error-404.DkXpI38i.css +1 -0
  11. package/dist/client/_nuxt/{error-404.4c6f5cb5.js → error-404.F86mkCGj.js} +1 -1
  12. package/dist/client/_nuxt/{error-500.64875434.js → error-500.L0AVuHMw.js} +1 -1
  13. package/dist/client/index.html +9 -9
  14. package/dist/module.d.mts +6 -1
  15. package/dist/module.d.ts +6 -1
  16. package/dist/module.json +2 -2
  17. package/dist/module.mjs +42 -20
  18. package/dist/runtime/cache.d.ts +2 -1
  19. package/dist/runtime/cache.mjs +33 -18
  20. package/dist/runtime/components/OgImage/OgImage.d.ts +1 -1
  21. package/dist/runtime/components/OgImage/OgImageScreenshot.d.ts +1 -1
  22. package/dist/runtime/components/Templates/Community/NuxtSeo.vue +1 -1
  23. package/dist/runtime/components/Templates/Community/UnJs.vue +2 -2
  24. package/dist/runtime/composables/defineOgImage.mjs +8 -10
  25. package/dist/runtime/core/bindings/css-inline/node.d.ts +8 -2
  26. package/dist/runtime/core/bindings/css-inline/node.mjs +7 -2
  27. package/dist/runtime/core/bindings/css-inline/wasm-fs.d.ts +8 -0
  28. package/dist/runtime/core/bindings/css-inline/wasm-fs.mjs +8 -0
  29. package/dist/runtime/core/bindings/css-inline/wasm.d.ts +8 -0
  30. package/dist/runtime/core/bindings/css-inline/wasm.mjs +8 -0
  31. package/dist/runtime/core/font/fetch.mjs +4 -1
  32. package/dist/runtime/core/html/applyInlineCss.mjs +23 -19
  33. package/dist/runtime/core/html/devIframeTemplate.mjs +3 -2
  34. package/dist/runtime/core/html/fetchIsland.mjs +1 -1
  35. package/dist/runtime/core/options/extract.d.ts +1 -0
  36. package/dist/runtime/core/options/extract.mjs +9 -0
  37. package/dist/runtime/core/options/fetch.mjs +7 -1
  38. package/dist/runtime/core/renderers/chromium/index.mjs +2 -1
  39. package/dist/runtime/core/renderers/satori/index.mjs +6 -5
  40. package/dist/runtime/core/renderers/satori/instances.mjs +2 -1
  41. package/dist/runtime/core/renderers/satori/plugins/encoding.mjs +14 -5
  42. package/dist/runtime/core/renderers/satori/vnodes.mjs +3 -1
  43. package/dist/runtime/core/utils/resolveRendererContext.mjs +14 -16
  44. package/dist/runtime/nitro/kit.d.ts +3 -0
  45. package/dist/runtime/nitro/kit.mjs +23 -0
  46. package/dist/runtime/nitro/plugins/prerender.d.ts +1 -1
  47. package/dist/runtime/nitro/plugins/prerender.mjs +5 -12
  48. package/dist/runtime/nitro/tsconfig.json +3 -0
  49. package/dist/runtime/nitro/utils.mjs +2 -3
  50. package/dist/runtime/nuxt/plugins/og-image-canonical-urls.server.mjs +9 -2
  51. package/dist/runtime/nuxt/utils.mjs +8 -3
  52. package/dist/runtime/server/routes/__og-image__/debug.json.d.ts +0 -4
  53. package/dist/runtime/server/routes/__og-image__/debug.json.mjs +0 -6
  54. package/dist/runtime/server/routes/__og-image__/font-[name]-[weight].[extension].mjs +31 -5
  55. package/dist/runtime/server/routes/__og-image__/image.mjs +8 -5
  56. package/dist/runtime/types.d.ts +6 -1
  57. package/dist/runtime/utils.pure.d.ts +2 -0
  58. package/dist/runtime/utils.pure.mjs +10 -1
  59. package/dist/types.d.mts +2 -2
  60. package/package.json +40 -36
  61. package/dist/client/_nuxt/IconCSS.12878ccd.js +0 -1
  62. package/dist/client/_nuxt/IconCSS.f0b56d3e.css +0 -1
  63. package/dist/client/_nuxt/builds/meta/5aeabb75-f7c0-4eb8-a883-25ad30a518dd.json +0 -1
  64. package/dist/client/_nuxt/entry.a30f63d0.css +0 -1
  65. package/dist/client/_nuxt/error-404.b751fa02.css +0 -1
  66. /package/dist/client/_nuxt/{error-500.69009e70.css → error-500.SLhS9LVu.css} +0 -0
  67. /package/dist/client/_nuxt/{vanilla-picker-NKbIFE8h.23409a58.js → vanilla-picker-NKbIFE8h.vtyeXros.js} +0 -0
@@ -0,0 +1 @@
1
+ .spotlight[data-v-05a2b8a3]{background:linear-gradient(45deg,#00dc82,#36e4da 50%,#0047e1);bottom:-30vh;filter:blur(20vh);height:40vh}.gradient-border[data-v-05a2b8a3]{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:.5rem;position:relative}@media (prefers-color-scheme:light){.gradient-border[data-v-05a2b8a3]{background-color:#ffffff4d}.gradient-border[data-v-05a2b8a3]:before{background:linear-gradient(90deg,#e2e2e2,#e2e2e2 25%,#00dc82,#36e4da 75%,#0047e1)}}@media (prefers-color-scheme:dark){.gradient-border[data-v-05a2b8a3]{background-color:#1414144d}.gradient-border[data-v-05a2b8a3]:before{background:linear-gradient(90deg,#303030,#303030 25%,#00dc82,#36e4da 75%,#0047e1)}}.gradient-border[data-v-05a2b8a3]:before{background-size:400% auto;border-radius:.5rem;bottom:0;content:"";left: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;right:0;top:0;transition:background-position .3s ease-in-out,opacity .2s ease-in-out;width:100%}.gradient-border[data-v-05a2b8a3]:hover:before{background-position:-50% 0;opacity:1}.bg-white[data-v-05a2b8a3]{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.cursor-pointer[data-v-05a2b8a3]{cursor:pointer}.flex[data-v-05a2b8a3]{display:flex}.grid[data-v-05a2b8a3]{display:grid}.place-content-center[data-v-05a2b8a3]{place-content:center}.items-center[data-v-05a2b8a3]{align-items:center}.justify-center[data-v-05a2b8a3]{justify-content:center}.font-sans[data-v-05a2b8a3]{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-05a2b8a3]{font-weight:500}.font-light[data-v-05a2b8a3]{font-weight:300}.text-8xl[data-v-05a2b8a3]{font-size:6rem;line-height:1}.text-xl[data-v-05a2b8a3]{font-size:1.25rem;line-height:1.75rem}.leading-tight[data-v-05a2b8a3]{line-height:1.25}.mb-8[data-v-05a2b8a3]{margin-bottom:2rem}.mb-16[data-v-05a2b8a3]{margin-bottom:4rem}.max-w-520px[data-v-05a2b8a3]{max-width:520px}.min-h-screen[data-v-05a2b8a3]{min-height:100vh}.overflow-hidden[data-v-05a2b8a3]{overflow:hidden}.px-8[data-v-05a2b8a3]{padding-left:2rem;padding-right:2rem}.py-2[data-v-05a2b8a3]{padding-bottom:.5rem;padding-top:.5rem}.px-4[data-v-05a2b8a3]{padding-left:1rem;padding-right:1rem}.fixed[data-v-05a2b8a3]{position:fixed}.left-0[data-v-05a2b8a3]{left:0}.right-0[data-v-05a2b8a3]{right:0}.text-center[data-v-05a2b8a3]{text-align:center}.text-black[data-v-05a2b8a3]{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.antialiased[data-v-05a2b8a3]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-full[data-v-05a2b8a3]{width:100%}.z-10[data-v-05a2b8a3]{z-index:10}.z-20[data-v-05a2b8a3]{z-index:20}@media (min-width:640px){.sm\:text-4xl[data-v-05a2b8a3]{font-size:2.25rem;line-height:2.5rem}.sm\:text-xl[data-v-05a2b8a3]{font-size:1.25rem;line-height:1.75rem}.sm\:text-10xl[data-v-05a2b8a3]{font-size:10rem;line-height:1}.sm\:px-0[data-v-05a2b8a3]{padding-left:0;padding-right:0}.sm\:py-3[data-v-05a2b8a3]{padding-bottom:.75rem;padding-top:.75rem}.sm\:px-6[data-v-05a2b8a3]{padding-left:1.5rem;padding-right:1.5rem}}@media (prefers-color-scheme:dark){.dark\:bg-black[data-v-05a2b8a3]{--tw-bg-opacity:1;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.dark\:text-white[data-v-05a2b8a3]{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}}
@@ -1 +1 @@
1
- import{_ as a,u as n,o as r,c as l,a as e,t as s,b as d,w as c,d as p,e as f,p as x,f as h}from"./entry.e9f3db7f.js";const m=t=>(x("data-v-05a2b8a3"),t=t(),h(),t),u={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},g=m(()=>e("div",{class:"fixed left-0 right-0 spotlight z-10"},null,-1)),b={class:"max-w-520px text-center z-20"},_=["textContent"],w=["textContent"],y={class:"w-full flex items-center justify-center"},S={__name:"error-404",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:404},statusMessage:{type:String,default:"Not Found"},description:{type:String,default:"Sorry, the page you are looking for could not be found."},backHome:{type:String,default:"Go back home"}},setup(t){const o=t;return n({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(k,v)=>{const i=f;return r(),l("div",u,[g,e("div",b,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,_),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,w),e("div",y,[d(i,{to:"/",class:"gradient-border text-md sm:text-xl py-2 px-4 sm:py-3 sm:px-6 cursor-pointer"},{default:c(()=>[p(s(t.backHome),1)]),_:1})])])])}}},z=a(S,[["__scopeId","data-v-05a2b8a3"]]);export{z as default};
1
+ import{_ as a,u as n,o as r,c as l,a as e,t as s,b as d,w as c,d as p,e as f,p as h,f as m}from"./entry.Nh9pQ4Ti.js";const x=t=>(h("data-v-05a2b8a3"),t=t(),m(),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=x(()=>e("div",{class:"fixed left-0 right-0 spotlight z-10"},null,-1)),b={class:"max-w-520px text-center z-20"},_=["textContent"],w=["textContent"],y={class:"w-full flex items-center justify-center"},S={__name:"error-404",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:404},statusMessage:{type:String,default:"Not Found"},description:{type:String,default:"Sorry, the page you are looking for could not be found."},backHome:{type:String,default:"Go back home"}},setup(t){const o=t;return n({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(k,N)=>{const i=f;return r(),l("div",u,[g,e("div",b,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,_),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,w),e("div",y,[d(i,{to:"/",class:"gradient-border text-md sm:text-xl py-2 px-4 sm:py-3 sm:px-6 cursor-pointer"},{default:c(()=>[p(s(t.backHome),1)]),_:1})])])])}}},z=a(S,[["__scopeId","data-v-05a2b8a3"]]);export{z as default};
@@ -1 +1 @@
1
- import{_ as i,u as a,o as r,c as n,a as e,t as s,p as l,f as d}from"./entry.e9f3db7f.js";const c=t=>(l("data-v-c967d9a9"),t=t(),d(),t),p={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},h=c(()=>e("div",{class:"fixed -bottom-1/2 left-0 right-0 h-1/2 spotlight"},null,-1)),f={class:"max-w-520px text-center"},g=["textContent"],m=["textContent"],x={__name:"error-500",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:500},statusMessage:{type:String,default:"Server error"},description:{type:String,default:"This page is temporarily unavailable."}},setup(t){const o=t;return a({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(u,b)=>(r(),n("div",p,[h,e("div",f,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,g),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,m)])]))}},w=i(x,[["__scopeId","data-v-c967d9a9"]]);export{w as default};
1
+ import{_ as i,u as a,o as r,c as n,a as e,t as s,p as l,f as d}from"./entry.Nh9pQ4Ti.js";const c=t=>(l("data-v-c967d9a9"),t=t(),d(),t),p={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},h=c(()=>e("div",{class:"fixed -bottom-1/2 left-0 right-0 h-1/2 spotlight"},null,-1)),f={class:"max-w-520px text-center"},g=["textContent"],m=["textContent"],x={__name:"error-500",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:500},statusMessage:{type:String,default:"Server error"},description:{type:String,default:"This page is temporarily unavailable."}},setup(t){const o=t;return a({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(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)])]))}},_=i(x,[["__scopeId","data-v-c967d9a9"]]);export{_ as default};
@@ -2,15 +2,15 @@
2
2
  <html >
3
3
  <head><meta charset="utf-8">
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1">
5
- <link rel="stylesheet" href="/__nuxt-og-image/_nuxt/entry.a30f63d0.css">
6
- <link rel="modulepreload" as="script" crossorigin href="/__nuxt-og-image/_nuxt/entry.e9f3db7f.js">
7
- <link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/vanilla-picker-NKbIFE8h.23409a58.js">
8
- <link rel="prefetch" as="style" href="/__nuxt-og-image/_nuxt/error-404.b751fa02.css">
9
- <link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/error-404.4c6f5cb5.js">
10
- <link rel="prefetch" as="style" href="/__nuxt-og-image/_nuxt/error-500.69009e70.css">
11
- <link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/error-500.64875434.js">
12
- <script type="module" src="/__nuxt-og-image/_nuxt/entry.e9f3db7f.js" crossorigin></script><script>"use strict";(()=>{const a=window,e=document.documentElement,m=["dark","light"],c=window&&window.localStorage&&window.localStorage.getItem&&window.localStorage.getItem("nuxt-color-mode")||"system";let n=c==="system"?d():c;const l=e.getAttribute("data-color-mode-forced");l&&(n=l),i(n),a["__NUXT_COLOR_MODE__"]={preference:c,value:n,getColorScheme:d,addColorScheme:i,removeColorScheme:f};function i(o){const t=""+o+"",s="";e.classList?e.classList.add(t):e.className+=" "+t,s&&e.setAttribute("data-"+s,o)}function f(o){const t=""+o+"",s="";e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp(t,"g"),""),s&&e.removeAttribute("data-"+s)}function r(o){return a.matchMedia("(prefers-color-scheme"+o+")")}function d(){if(a.matchMedia&&r("").media!=="not all"){for(const o of m)if(r(":"+o).matches)return o}return"light"}})();
5
+ <link rel="stylesheet" href="/__nuxt-og-image/_nuxt/entry.1-ZveGsq.css">
6
+ <link rel="modulepreload" as="script" crossorigin href="/__nuxt-og-image/_nuxt/entry.Nh9pQ4Ti.js">
7
+ <link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/vanilla-picker-NKbIFE8h.vtyeXros.js">
8
+ <link rel="prefetch" as="style" href="/__nuxt-og-image/_nuxt/error-404.DkXpI38i.css">
9
+ <link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/error-404.F86mkCGj.js">
10
+ <link rel="prefetch" as="style" href="/__nuxt-og-image/_nuxt/error-500.SLhS9LVu.css">
11
+ <link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/error-500.L0AVuHMw.js">
12
+ <script type="module" src="/__nuxt-og-image/_nuxt/entry.Nh9pQ4Ti.js" crossorigin></script><script>"use strict";(()=>{const a=window,e=document.documentElement,m=["dark","light"],c=window&&window.localStorage&&window.localStorage.getItem&&window.localStorage.getItem("nuxt-color-mode")||"system";let n=c==="system"?d():c;const l=e.getAttribute("data-color-mode-forced");l&&(n=l),i(n),a["__NUXT_COLOR_MODE__"]={preference:c,value:n,getColorScheme:d,addColorScheme:i,removeColorScheme:f};function i(o){const t=""+o+"",s="";e.classList?e.classList.add(t):e.className+=" "+t,s&&e.setAttribute("data-"+s,o)}function f(o){const t=""+o+"",s="";e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp(t,"g"),""),s&&e.removeAttribute("data-"+s)}function r(o){return a.matchMedia("(prefers-color-scheme"+o+")")}function d(){if(a.matchMedia&&r("").media!=="not all"){for(const o of m)if(r(":"+o).matches)return o}return"light"}})();
13
13
  </script></head>
14
- <body ><div id="__nuxt"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4},{},false,{},{}]</script>
14
+ <body ><div id="__nuxt"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4,"once":5},{},false,{},{},["Set"]]</script>
15
15
  <script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-og-image",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body>
16
16
  </html>
package/dist/module.d.mts CHANGED
@@ -80,9 +80,14 @@ interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
80
80
  sharp?: SharpOptions;
81
81
  fonts?: InputFontConfig[];
82
82
  cacheMaxAgeSeconds?: number;
83
+ /**
84
+ * @internal
85
+ */
86
+ _query?: Record<string, any>;
83
87
  }
84
88
  interface FontConfig {
85
89
  name: string;
90
+ style?: string;
86
91
  weight?: string | number;
87
92
  path?: string;
88
93
  key?: string;
@@ -90,7 +95,7 @@ interface FontConfig {
90
95
  type InputFontConfig = (`${string}:${number}` | string | FontConfig);
91
96
  interface RuntimeCompatibilitySchema {
92
97
  chromium: 'node' | false;
93
- ['css-inline']: 'node' | false;
98
+ ['css-inline']: 'node' | 'wasm' | 'wasm-fs' | false;
94
99
  resvg: 'node' | 'wasm' | 'wasm-fs' | false;
95
100
  satori: 'node' | 'wasm' | 'wasm-fs' | false;
96
101
  sharp: 'node' | false;
package/dist/module.d.ts CHANGED
@@ -80,9 +80,14 @@ interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
80
80
  sharp?: SharpOptions;
81
81
  fonts?: InputFontConfig[];
82
82
  cacheMaxAgeSeconds?: number;
83
+ /**
84
+ * @internal
85
+ */
86
+ _query?: Record<string, any>;
83
87
  }
84
88
  interface FontConfig {
85
89
  name: string;
90
+ style?: string;
86
91
  weight?: string | number;
87
92
  path?: string;
88
93
  key?: string;
@@ -90,7 +95,7 @@ interface FontConfig {
90
95
  type InputFontConfig = (`${string}:${number}` | string | FontConfig);
91
96
  interface RuntimeCompatibilitySchema {
92
97
  chromium: 'node' | false;
93
- ['css-inline']: 'node' | false;
98
+ ['css-inline']: 'node' | 'wasm' | 'wasm-fs' | false;
94
99
  resvg: 'node' | 'wasm' | 'wasm-fs' | false;
95
100
  satori: 'node' | 'wasm' | 'wasm-fs' | false;
96
101
  sharp: 'node' | false;
package/dist/module.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "nuxt-og-image",
3
3
  "compatibility": {
4
- "nuxt": "^3.8.2",
4
+ "nuxt": "^3.9.0",
5
5
  "bridge": false
6
6
  },
7
7
  "configKey": "ogImage",
8
- "version": "3.0.0-rc.2"
8
+ "version": "3.0.0-rc.19"
9
9
  }
package/dist/module.mjs CHANGED
@@ -14,7 +14,7 @@ import { createHash } from 'node:crypto';
14
14
  import { execa } from 'execa';
15
15
  import terminate from 'terminate';
16
16
 
17
- const version = "3.0.0-rc.2";
17
+ const version = "3.0.0-rc.19";
18
18
 
19
19
  const autodetectableProviders = {
20
20
  azure_static: "azure",
@@ -40,7 +40,7 @@ const NodeRuntime = {
40
40
  };
41
41
  const cloudflare = {
42
42
  "chromium": false,
43
- "css-inline": false,
43
+ "css-inline": "wasm",
44
44
  "resvg": "wasm",
45
45
  "satori": "node",
46
46
  "sharp": false,
@@ -62,7 +62,7 @@ const RuntimeCompatibility = {
62
62
  "node-server": NodeRuntime,
63
63
  "stackblitz": {
64
64
  "chromium": false,
65
- "css-inline": false,
65
+ "css-inline": "wasm-fs",
66
66
  "resvg": "wasm-fs",
67
67
  "satori": "wasm-fs",
68
68
  "sharp": false
@@ -71,7 +71,7 @@ const RuntimeCompatibility = {
71
71
  "netlify": awsLambda,
72
72
  "netlify-edge": {
73
73
  "chromium": false,
74
- "css-inline": false,
74
+ "css-inline": "wasm",
75
75
  "resvg": "wasm",
76
76
  "satori": "node",
77
77
  "sharp": false,
@@ -86,7 +86,7 @@ const RuntimeCompatibility = {
86
86
  "vercel": awsLambda,
87
87
  "vercel-edge": {
88
88
  "chromium": false,
89
- "css-inline": false,
89
+ "css-inline": "wasm",
90
90
  "resvg": "wasm",
91
91
  "satori": "node",
92
92
  "sharp": false,
@@ -205,6 +205,9 @@ export {}
205
205
  references.push({ path: resolve(nuxt.options.buildDir, `module/${module}.d.ts`) });
206
206
  });
207
207
  }
208
+ function isNuxtGenerate(nuxt = useNuxt()) {
209
+ return nuxt.options._generate || nuxt.options.nitro.static || nuxt.options.nitro.preset === "static";
210
+ }
208
211
 
209
212
  const DEVTOOLS_UI_ROUTE = "/__nuxt-og-image";
210
213
  const DEVTOOLS_UI_LOCAL_PORT = 3030;
@@ -295,7 +298,9 @@ function setupGenerateHandler(options, resolve, nuxt = useNuxt()) {
295
298
  function setupPrerenderHandler(options, resolve, nuxt = useNuxt()) {
296
299
  nuxt.hooks.hook("nitro:init", async (nitro) => {
297
300
  nitro.hooks.hook("prerender:config", async (nitroConfig) => {
298
- applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility.prerender, resolve });
301
+ nitroConfig.serverAssets = nitroConfig.serverAssets || [];
302
+ nitroConfig.serverAssets.push({ baseName: "nuxt-og-image:fonts", dir: resolve("./runtime/server/assets") });
303
+ applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility?.prerender, resolve });
299
304
  nitroConfig.wasm = nitroConfig.wasm || {};
300
305
  nitroConfig.wasm.esmImport = false;
301
306
  const prerenderingPages = (nuxt.options.nitro.prerender?.routes || []).some((r) => r && (!r.includes(".") || r.includes("*")));
@@ -327,14 +332,20 @@ async function setupBuildHandler(config, resolve, nuxt = useNuxt()) {
327
332
  return;
328
333
  const configuredEntry = nitro.options.rollupConfig?.output.entryFileNames;
329
334
  let serverEntry = resolve(_nitro.options.output.serverDir, typeof configuredEntry === "string" ? configuredEntry : "index.mjs");
330
- if (target === "cloudflare-pages")
335
+ const isCloudflarePages = target === "cloudflare-pages";
336
+ if (isCloudflarePages)
331
337
  serverEntry = resolve(dirname(serverEntry), "./chunks/wasm.mjs");
332
338
  const contents = await readFile(serverEntry, "utf-8");
333
339
  const resvgHash = sha1(await readFile(await resolvePath("@resvg/resvg-wasm/index_bg.wasm")));
334
340
  const yogaHash = sha1(await readFile(await resolvePath("yoga-wasm-web/dist/yoga.wasm")));
341
+ const cssInlineHash = sha1(await readFile(await resolvePath("@css-inline/css-inline-wasm/index_bg.wasm")));
335
342
  const postfix = target === "vercel-edge" ? "?module" : "";
336
- const path = target === "cloudflare-pages" ? `../wasm/` : `./wasm/`;
337
- await writeFile(serverEntry, contents.replaceAll('"@resvg/resvg-wasm/index_bg.wasm"', `"${path}index_bg-${resvgHash}.wasm${postfix}"`).replaceAll('"yoga-wasm-web/dist/yoga.wasm"', `"${path}yoga-${yogaHash}.wasm${postfix}"`), { encoding: "utf-8" });
343
+ const path = isCloudflarePages ? `../wasm/` : `./wasm/`;
344
+ await writeFile(serverEntry, contents.replaceAll('"@resvg/resvg-wasm/index_bg.wasm"', `"${path}index_bg-${resvgHash}.wasm${postfix}"`).replaceAll('"@css-inline/css-inline-wasm/index_bg.wasm"', `"${path}index_bg-${cssInlineHash}.wasm${postfix}"`).replaceAll('"yoga-wasm-web/dist/yoga.wasm"', `"${path}yoga-${yogaHash}.wasm${postfix}"`), { encoding: "utf-8" });
345
+ if (isCloudflarePages) {
346
+ const imgChunk = resolve(dirname(serverEntry), "./handlers/image.mjs");
347
+ existsSync(imgChunk) && await writeFile(imgChunk, (await readFile(serverEntry, "utf-8")).replaceAll('"@resvg/resvg-wasm/index_bg.wasm"', `"../${path}/index_bg-${resvgHash}.wasm${postfix}"`).replaceAll('"@css-inline/css-inline-wasm/index_bg.wasm"', `"../${path}index_bg-${cssInlineHash}.wasm${postfix}"`).replaceAll('"yoga-wasm-web/dist/yoga.wasm"', `"../${path}yoga-${yogaHash}.wasm${postfix}"`), { encoding: "utf-8" });
348
+ }
338
349
  });
339
350
  });
340
351
  }
@@ -365,7 +376,7 @@ function normaliseFontInput(fonts) {
365
376
  return {
366
377
  cacheKey: f,
367
378
  name,
368
- weight: weight || "400",
379
+ weight: weight || 400,
369
380
  style: "normal",
370
381
  path: void 0
371
382
  };
@@ -383,7 +394,7 @@ const module = defineNuxtModule({
383
394
  meta: {
384
395
  name: "nuxt-og-image",
385
396
  compatibility: {
386
- nuxt: "^3.8.2",
397
+ nuxt: "^3.9.0",
387
398
  bridge: false
388
399
  },
389
400
  configKey: "ogImage"
@@ -395,6 +406,7 @@ const module = defineNuxtModule({
395
406
  emojis: "noto",
396
407
  renderer: "satori",
397
408
  component: "NuxtSeo",
409
+ extension: "png",
398
410
  width: 1200,
399
411
  height: 600,
400
412
  // default is to cache the image for 3 day (72 hours)
@@ -418,12 +430,12 @@ const module = defineNuxtModule({
418
430
  return;
419
431
  }
420
432
  const { resolve } = createResolver(import.meta.url);
433
+ nuxt.options.build.transpile.push(resolve("./runtime"));
421
434
  const preset = resolveNitroPreset(nuxt.options.nitro);
422
435
  const targetCompatibility = getPresetNitroPresetCompatibility(preset);
423
436
  const hasSharpDependency = !!await tryResolveModule("sharp");
424
437
  const userConfiguredExtension = config.defaults.extension;
425
438
  const hasConfiguredJpegs = userConfiguredExtension && ["jpeg", "jpg"].includes(userConfiguredExtension);
426
- config.defaults.extension = userConfiguredExtension || (hasSharpDependency && targetCompatibility.sharp ? "jpg" : "png");
427
439
  if (hasConfiguredJpegs && config.defaults.renderer !== "chromium") {
428
440
  if (hasSharpDependency && !targetCompatibility.sharp) {
429
441
  logger.warn(`Rendering JPEGs requires sharp which does not work with ${preset}. Images will be rendered as PNG at runtime.`);
@@ -603,9 +615,9 @@ const module = defineNuxtModule({
603
615
  nuxt.options.nitro.virtual["#nuxt-og-image/component-names.mjs"] = () => {
604
616
  return `export const componentNames = ${JSON.stringify(ogImageComponentCtx.components)}`;
605
617
  };
606
- let unoCssConfig = { theme: {} };
618
+ let unoCssConfig = {};
607
619
  nuxt.hook("tailwindcss:config", (tailwindConfig) => {
608
- unoCssConfig = defu(tailwindConfig.theme.extend, { ...tailwindConfig.theme || {}, extend: void 0 });
620
+ unoCssConfig = defu(tailwindConfig.theme?.extend, { ...tailwindConfig.theme, extend: void 0 });
609
621
  });
610
622
  nuxt.hook("unocss:config", (_unoCssConfig) => {
611
623
  unoCssConfig = { ..._unoCssConfig.theme };
@@ -628,7 +640,7 @@ declare module 'nitropack' {
628
640
  }
629
641
  interface NitroRuntimeHooks {
630
642
  'nuxt-og-image:context': (ctx: import('${typesPath}').OgImageRenderEventContext) => void | Promise<void>
631
- 'nuxt-og-image:satori:vnodes': (vnodes: import('${typesPath}').VNode, ctx: ctx: import('${typesPath}').OgImageRenderEventContext) => void | Promise<void>
643
+ 'nuxt-og-image:satori:vnodes': (vnodes: import('${typesPath}').VNode, ctx: import('${typesPath}').OgImageRenderEventContext) => void | Promise<void>
632
644
  }
633
645
  }
634
646
 
@@ -641,16 +653,26 @@ ${componentImports}
641
653
  });
642
654
  const cacheEnabled = typeof config.runtimeCacheStorage !== "undefined" && config.runtimeCacheStorage !== false;
643
655
  const runtimeCacheStorage = typeof config.runtimeCacheStorage === "boolean" ? "default" : config.runtimeCacheStorage.driver;
644
- let baseCacheKey = runtimeCacheStorage === "default" ? `/cache/nuxt-og-image@${version}` : `/nuxt-og-image@${version}`;
656
+ let baseCacheKey = runtimeCacheStorage === "default" ? `/cache/nuxt-og-image@${version}` : `/nuxt-og-image/${version}`;
645
657
  if (!cacheEnabled)
646
658
  baseCacheKey = false;
659
+ if (!nuxt.options.dev && config.runtimeCacheStorage && typeof config.runtimeCacheStorage === "object") {
660
+ nuxt.options.nitro.storage = nuxt.options.nitro.storage || {};
661
+ nuxt.options.nitro.storage["nuxt-og-image"] = config.runtimeCacheStorage;
662
+ }
647
663
  nuxt.hooks.hook("modules:done", async () => {
648
664
  const normalisedFonts = normaliseFontInput(config.fonts);
649
- if (!nuxt.options._generate && nuxt.options.build) {
665
+ if (!isNuxtGenerate() && nuxt.options.build) {
666
+ nuxt.options.nitro = nuxt.options.nitro || {};
650
667
  nuxt.options.nitro.prerender = nuxt.options.nitro.prerender || {};
651
668
  nuxt.options.nitro.prerender.routes = nuxt.options.nitro.prerender.routes || [];
652
- normalisedFonts.filter((f) => !f.path && !f.key).forEach(({ name, weight }) => {
653
- nuxt.options.nitro.prerender.routes.push(`/__og-image__/font/${name}/${weight}.ttf`);
669
+ normalisedFonts.filter((f) => !f.path && !f.key).forEach((entry, key) => {
670
+ const { name, weight } = entry;
671
+ entry.path = `/__og-image__/font/${name}/${weight}.ttf`;
672
+ nuxt.options.nitro.prerender.routes.unshift(entry.path);
673
+ if (name === "Inter" && [400, 700].includes(Number(weight)))
674
+ entry.key = `nuxt-og-image:fonts:inter-latin-ext-${weight}-normal.woff`;
675
+ normalisedFonts[key] = entry;
654
676
  });
655
677
  }
656
678
  const hasColorModeModule = hasNuxtModule("@nuxtjs/color-mode");
@@ -681,7 +703,7 @@ ${componentImports}
681
703
  if (nuxt.options.dev) {
682
704
  setupDevHandler(config, resolve);
683
705
  setupDevToolsUI(config, resolve);
684
- } else if (nuxt.options._generate) {
706
+ } else if (isNuxtGenerate()) {
685
707
  setupGenerateHandler(config, resolve);
686
708
  } else if (nuxt.options.build) {
687
709
  await setupBuildHandler(config, resolve);
@@ -1,8 +1,9 @@
1
+ import { type H3Error } from 'h3';
1
2
  import type { OgImageRenderEventContext } from './types';
2
3
  export declare function useOgImageBufferCache(ctx: OgImageRenderEventContext, options: {
3
4
  baseCacheKey: string | false;
4
5
  cacheMaxAgeSeconds?: number;
5
- }): Promise<void | {
6
+ }): Promise<void | H3Error | {
6
7
  cachedItem: false | BufferSource;
7
8
  enabled: boolean;
8
9
  update: (image: BufferSource) => Promise<void>;
@@ -1,31 +1,46 @@
1
1
  import { prefixStorage } from "unstorage";
2
- import { getQuery, handleCacheHeaders, setHeader, setHeaders } from "h3";
2
+ import { createError, getQuery, handleCacheHeaders, setHeader, setHeaders } from "h3";
3
3
  import { withTrailingSlash } from "ufo";
4
4
  import { hash } from "ohash";
5
5
  import { useStorage } from "#imports";
6
6
  export async function useOgImageBufferCache(ctx, options) {
7
7
  const maxAge = Number(options.cacheMaxAgeSeconds);
8
- const enabled = !import.meta.dev && import.meta.env.MODE !== "test" && maxAge > 0;
8
+ let enabled = !import.meta.dev && import.meta.env.MODE !== "test" && maxAge > 0;
9
9
  const cache = prefixStorage(useStorage(), withTrailingSlash(options.baseCacheKey || "/"));
10
10
  const key = ctx.key;
11
11
  let cachedItem = false;
12
- if (enabled && await cache.hasItem(key).catch(() => false)) {
13
- const { value, expiresAt, headers } = await cache.getItem(key).catch(() => ({ value: null, expiresAt: Date.now() }));
14
- if (typeof getQuery(ctx.e).purge !== "undefined") {
15
- await cache.removeItem(key).catch(() => {
16
- });
17
- } else if (expiresAt > Date.now()) {
18
- cachedItem = Buffer.from(value, "base64");
19
- if (handleCacheHeaders(ctx.e, {
20
- modifiedTime: new Date(headers["last-modified"]),
21
- etag: headers.etag,
22
- maxAge
23
- }))
24
- return;
25
- setHeaders(ctx.e, headers);
26
- } else {
27
- await cache.removeItem(key).catch(() => {
12
+ if (enabled) {
13
+ const hasItem = await cache.hasItem(key).catch((e) => {
14
+ enabled = false;
15
+ return createError({
16
+ cause: e,
17
+ statusCode: 500,
18
+ statusMessage: `[Nuxt OG Image] Failed to connect to cache ${options.baseCacheKey}. Response from cache: ${e.message}`
28
19
  });
20
+ });
21
+ if (hasItem instanceof Error)
22
+ return hasItem;
23
+ if (hasItem) {
24
+ const { value, expiresAt, headers } = await cache.getItem(key).catch(() => ({
25
+ value: null,
26
+ expiresAt: Date.now()
27
+ }));
28
+ if (typeof getQuery(ctx.e).purge !== "undefined") {
29
+ await cache.removeItem(key).catch(() => {
30
+ });
31
+ } else if (expiresAt > Date.now()) {
32
+ cachedItem = Buffer.from(value, "base64");
33
+ if (handleCacheHeaders(ctx.e, {
34
+ modifiedTime: new Date(headers["last-modified"]),
35
+ etag: headers.etag,
36
+ maxAge
37
+ }))
38
+ return;
39
+ setHeaders(ctx.e, headers);
40
+ } else {
41
+ await cache.removeItem(key).catch(() => {
42
+ });
43
+ }
29
44
  }
30
45
  }
31
46
  if (!enabled) {
@@ -1,5 +1,5 @@
1
1
  import type { OgImageOptions } from '../../types';
2
- declare const _default: import("vue").DefineComponent<OgImageOptions<"NuxtSeo">, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<OgImageOptions<"NuxtSeo">>, {
2
+ declare const _default: import("vue").DefineComponent<OgImageOptions<"NuxtSeo">, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OgImageOptions<"NuxtSeo">>, {
3
3
  props?: any;
4
4
  }, {}>;
5
5
  export default _default;
@@ -1,5 +1,5 @@
1
1
  import type { OgImagePageScreenshotOptions } from '../../types';
2
- declare const _default: import("vue").DefineComponent<OgImagePageScreenshotOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<OgImagePageScreenshotOptions>, {
2
+ declare const _default: import("vue").DefineComponent<OgImagePageScreenshotOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OgImagePageScreenshotOptions>, {
3
3
  props?: any;
4
4
  }, {}>;
5
5
  export default _default;
@@ -117,7 +117,7 @@ if (typeof props.icon === 'string' && !runtimeConfig.hasNuxtIcon && process.dev)
117
117
  {{ description }}
118
118
  </p>
119
119
  </div>
120
- <div v-if="icon" style="width: 30%;" class="flex justify-end">
120
+ <div v-if="Boolean(icon)" style="width: 30%;" class="flex justify-end">
121
121
  <IconComponent :name="icon" size="250px" style="margin: 0 auto; opacity: 0.7;" />
122
122
  </div>
123
123
  </div>
@@ -25,10 +25,10 @@ const org = computed(() => props.title.split('/')[0])
25
25
  const repo = computed(() => props.title.split('/')[1])
26
26
 
27
27
  const stars = computed(() => {
28
- return new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' }).format(props.stars || 0)
28
+ return new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' }).format(Number(props.stars || 0))
29
29
  })
30
30
  const downloads = computed(() => new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' })
31
- .format(props.downloads || 0),
31
+ .format(Number(props.downloads || 0)),
32
32
  )
33
33
 
34
34
  const description = computed(() => (props.description || '').slice(0, 200))
@@ -1,22 +1,18 @@
1
1
  import { defu } from "defu";
2
2
  import { appendHeader } from "h3";
3
- import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
4
- import { withoutBase } from "ufo";
5
3
  import { getOgImagePath, separateProps, useOgImageRuntimeConfig } from "../utils.mjs";
6
4
  import { createOgImageMeta, normaliseOptions } from "../nuxt/utils.mjs";
7
- import { useNuxtApp, useRequestEvent, useRouter, useRuntimeConfig } from "#imports";
5
+ import { createNitroRouteRuleMatcher } from "../nitro/kit.mjs";
6
+ import { useNuxtApp, useRequestEvent, useRoute } from "#imports";
8
7
  export function defineOgImage(_options = {}) {
9
8
  if (!import.meta.server)
10
9
  return;
11
10
  const nuxtApp = useNuxtApp();
12
11
  const ogImageInstances = nuxtApp.ssrContext._ogImageInstances || [];
13
- const basePath = useRouter().currentRoute.value?.path || "/";
14
- const _routeRulesMatcher = toRouteMatcher(
15
- createRadixRouter({ routes: useRuntimeConfig().nitro?.routeRules })
16
- );
17
- const routeRules = defu({}, ..._routeRulesMatcher.matchAll(
18
- withoutBase(basePath.split("?")[0], useRuntimeConfig().app.baseURL)
19
- ).reverse()).ogImage;
12
+ const route = useRoute();
13
+ const basePath = route.path || "/";
14
+ const routeRuleMatcher = createNitroRouteRuleMatcher();
15
+ const routeRules = routeRuleMatcher(basePath).ogImage;
20
16
  if (!_options || nuxtApp.ssrContext?.event.context._nitro?.routeRules?.ogImage === false || typeof routeRules !== "undefined" && routeRules === false) {
21
17
  ogImageInstances.forEach((e) => {
22
18
  e.dispose();
@@ -27,6 +23,8 @@ export function defineOgImage(_options = {}) {
27
23
  const options = normaliseOptions({
28
24
  ..._options
29
25
  });
26
+ if (route.query)
27
+ options._query = route.query;
30
28
  const { defaults } = useOgImageRuntimeConfig();
31
29
  const resolvedOptions = normaliseOptions(defu(separateProps(_options), separateProps(routeRules), defaults));
32
30
  if (_options.url) {
@@ -1,2 +1,8 @@
1
- import cssInline from 'css-inline';
2
- export default cssInline;
1
+ import { inline } from '@css-inline/css-inline';
2
+ declare const _default: {
3
+ initWasmPromise: Promise<void>;
4
+ cssInline: {
5
+ inline: typeof inline;
6
+ };
7
+ };
8
+ export default _default;
@@ -1,2 +1,7 @@
1
- import cssInline from "css-inline";
2
- export default cssInline;
1
+ import { inline } from "@css-inline/css-inline";
2
+ export default {
3
+ initWasmPromise: Promise.resolve(),
4
+ cssInline: {
5
+ inline
6
+ }
7
+ };
@@ -0,0 +1,8 @@
1
+ import { inline } from '@css-inline/css-inline-wasm';
2
+ declare const _default: {
3
+ initWasmPromise: Promise<void>;
4
+ cssInline: {
5
+ inline: typeof inline;
6
+ };
7
+ };
8
+ export default _default;
@@ -0,0 +1,8 @@
1
+ import { initWasm, inline } from "@css-inline/css-inline-wasm";
2
+ import { readWasmFile } from "../../utils/wasm.mjs";
3
+ export default {
4
+ initWasmPromise: initWasm(readWasmFile("@css-inline/css-inline-wasm/index_bg.wasm")),
5
+ cssInline: {
6
+ inline
7
+ }
8
+ };
@@ -0,0 +1,8 @@
1
+ import { inline } from '@css-inline/css-inline-wasm';
2
+ declare const _default: {
3
+ initWasmPromise: Promise<void>;
4
+ cssInline: {
5
+ inline: typeof inline;
6
+ };
7
+ };
8
+ export default _default;
@@ -0,0 +1,8 @@
1
+ import { initWasm, inline } from "@css-inline/css-inline-wasm";
2
+ import { importWasm } from "../../utils/wasm.mjs";
3
+ export default {
4
+ initWasmPromise: initWasm(importWasm(import("@css-inline/css-inline-wasm/index_bg.wasm"))),
5
+ cssInline: {
6
+ inline
7
+ }
8
+ };
@@ -27,7 +27,10 @@ export async function loadFont({ e }, font) {
27
27
  }
28
28
  } else {
29
29
  data = await e.$fetch(`/__og-image__/font/${name}/${weight}.ttf`, {
30
- responseType: "arrayBuffer"
30
+ responseType: "arrayBuffer",
31
+ query: {
32
+ font
33
+ }
31
34
  });
32
35
  }
33
36
  }
@@ -3,30 +3,34 @@ import { useNitroOrigin } from "#imports";
3
3
  import cssInline from "#nuxt-og-image/bindings/css-inline";
4
4
  export async function applyInlineCss({ e }, island) {
5
5
  let html = island.html;
6
- const componentInlineStyles = island.head.link.filter((l) => l.href.startsWith("/_nuxt/components"));
7
- const usingInlineCss = !!componentInlineStyles.length;
8
- if (!cssInline.__unenv__ && componentInlineStyles.length) {
9
- const css = island.head.style.map((s) => s.innerHTML).join("\n");
10
- const linksToCss = (await Promise.all(
11
- componentInlineStyles.map((l) => {
12
- return e.$fetch(`${l.href}&hmr=false`, {
13
- responseType: "text",
14
- baseURL: useNitroOrigin(e)
15
- }).then((res) => {
16
- return res.trim().split("\n").filter((l2) => !l2.startsWith("//")).join("\n").trim();
17
- });
18
- })
19
- )).join("\n");
20
- const cssToInline = `${linksToCss}${css}`;
6
+ if (!cssInline.__unenv__) {
7
+ let css = island.head.style.map((s) => s.innerHTML).join("\n");
8
+ const componentInlineStyles = island.head.link.filter((l) => l.href.startsWith("/_nuxt/components"));
9
+ if (process.dev) {
10
+ const linksToCss = componentInlineStyles.length ? (await Promise.all(
11
+ componentInlineStyles.map((l) => {
12
+ return e.$fetch(`${l.href}&hmr=false`, {
13
+ responseType: "text",
14
+ baseURL: useNitroOrigin(e)
15
+ }).then((res) => {
16
+ return res.trim().split("\n").filter((l2) => !l2.startsWith("//")).join("\n").trim();
17
+ });
18
+ })
19
+ )).join("\n") : "";
20
+ css = `${linksToCss}${css}`;
21
+ }
22
+ if (!css.trim().length)
23
+ return false;
21
24
  const cssInline2 = await useCssInline();
22
25
  html = cssInline2.inline(island.html, {
23
- load_remote_stylesheets: false,
24
- extra_css: cssToInline
26
+ loadRemoteStylesheets: false,
27
+ extraCss: css
25
28
  });
26
- const classes = cssToInline.match(/\.([a-zA-Z0-9-_]+)/g)?.map((c) => c.replace(".", ""));
29
+ const classes = css.match(/\.([a-zA-Z0-9-_]+)/g)?.map((c) => c.replace(".", ""));
27
30
  if (classes)
28
31
  html = html.replace(new RegExp(`class="(${classes.join("|")})"`, "g"), "");
29
32
  island.html = html;
33
+ return true;
30
34
  }
31
- return usingInlineCss;
35
+ return false;
32
36
  }
@@ -1,6 +1,6 @@
1
1
  import { createHeadCore } from "@unhead/vue";
2
2
  import { renderSSRHead } from "@unhead/ssr";
3
- import { useOgImageRuntimeConfig } from "../../utils.mjs";
3
+ import { normaliseFontInput, useOgImageRuntimeConfig } from "../../utils.mjs";
4
4
  import { applyEmojis } from "./applyEmojis.mjs";
5
5
  import { fetchIsland } from "./fetchIsland.mjs";
6
6
  import { theme } from "#nuxt-og-image/unocss-config.mjs";
@@ -11,7 +11,8 @@ export async function devIframeTemplate(ctx) {
11
11
  const head = createHeadCore();
12
12
  head.push(island.head);
13
13
  let defaultFontFamily = "sans-serif";
14
- const firstFont = fonts[0];
14
+ const normalisedFonts = normaliseFontInput([...options.fonts || [], ...fonts]);
15
+ const firstFont = normalisedFonts[0];
15
16
  if (firstFont)
16
17
  defaultFontFamily = firstFont.name;
17
18
  await applyEmojis(ctx, island);