nuxt-og-image 2.0.0-beta.47 → 2.0.0-beta.49
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.
- package/README.md +24 -15
- package/dist/client/200.html +2 -2
- package/dist/client/404.html +2 -2
- package/dist/client/_nuxt/{IconCSS.d8cd5733.js → IconCSS.73da91e8.js} +1 -1
- package/dist/client/_nuxt/{ImageLoader.3019a38e.js → ImageLoader.1dc2da65.js} +1 -1
- package/dist/client/_nuxt/{entry.329bb907.js → entry.9627f7dd.js} +2 -2
- package/dist/client/_nuxt/{error-404.ca83b642.js → error-404.e8b1a738.js} +1 -1
- package/dist/client/_nuxt/{error-500.bbb9f8d8.js → error-500.34be4bd8.js} +1 -1
- package/dist/client/_nuxt/{error-component.ed0ea6d4.js → error-component.4733114a.js} +2 -2
- package/dist/client/_nuxt/{index.9dd699b9.js → index.35b0e13d.js} +1 -1
- package/dist/client/_nuxt/{options.406afdd7.js → options.bd244bf2.js} +1 -1
- package/dist/client/_nuxt/{png.0aee24aa.js → png.765461fb.js} +1 -1
- package/dist/client/_nuxt/{shiki.faa60705.js → shiki.474ce6f4.js} +1 -1
- package/dist/client/_nuxt/{svg.299f4cde.js → svg.1511e50d.js} +1 -1
- package/dist/client/_nuxt/{vnodes.5ffe0cf0.js → vnodes.4f695971.js} +1 -1
- package/dist/client/index.html +2 -2
- package/dist/client/options/index.html +2 -2
- package/dist/client/png/index.html +2 -2
- package/dist/client/svg/index.html +2 -2
- package/dist/client/vnodes/index.html +2 -2
- package/dist/module.json +1 -1
- package/dist/module.mjs +1 -1
- package/dist/runtime/nitro/routes/html.mjs +24 -17
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -52,15 +52,15 @@ Both Satori and Browser will work in Node based environments. Prerendering is fu
|
|
|
52
52
|
|
|
53
53
|
When you want to generate dynamic images at runtime there are certain Nitro runtime limitations.
|
|
54
54
|
|
|
55
|
-
| Provider | Satori
|
|
56
|
-
|
|
57
|
-
| Node | ✅
|
|
58
|
-
| [Vercel](https://nuxt-og-image-playground.vercel.app/) | ✅
|
|
59
|
-
| [Vercel Edge](https://nuxt-og-image-playground-gkdt.vercel.app/) | ✅
|
|
60
|
-
| [Cloudflare Pages](https://nuxt-og-image-playground.pages.dev/) | ✅
|
|
61
|
-
| [Netlify](https://nuxt-og-image-playground-netlify.netlify.app/) |
|
|
62
|
-
| [Netlify Edge](https://nuxt-og-image-playground-netlify-edge.netlify.app/) |
|
|
63
|
-
| [StackBlitz](https://stackblitz.com/edit/nuxt-starter-pxs3wk?file=package.json) | ✅
|
|
55
|
+
| Provider | Satori | Browser |
|
|
56
|
+
|---------------------------------------------------------------------------------|-----------------------|---------|
|
|
57
|
+
| Node | ✅ | ✅ |
|
|
58
|
+
| [Vercel](https://nuxt-og-image-playground.vercel.app/) | ✅ | ❌ |
|
|
59
|
+
| [Vercel Edge](https://nuxt-og-image-playground-gkdt.vercel.app/) | ✅ | ❌ |
|
|
60
|
+
| [Cloudflare Pages](https://nuxt-og-image-playground.pages.dev/) | ✅ | ❌ |
|
|
61
|
+
| [Netlify](https://nuxt-og-image-playground-netlify.netlify.app/) | ✅ | ❌ |
|
|
62
|
+
| [Netlify Edge](https://nuxt-og-image-playground-netlify-edge.netlify.app/) | (Soon) | ❌ |
|
|
63
|
+
| [StackBlitz](https://stackblitz.com/edit/nuxt-starter-pxs3wk?file=package.json) | ✅ (emojis don't work) | ❌ |
|
|
64
64
|
|
|
65
65
|
Other providers are yet to be tested. Please create an issue if your nitro preset is not listed.
|
|
66
66
|
|
|
@@ -87,9 +87,8 @@ export default defineNuxtConfig({
|
|
|
87
87
|
})
|
|
88
88
|
```
|
|
89
89
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
This feature uses Nuxt Islands, which requires Nuxt >= 3.1.
|
|
90
|
+
This module requires [Nuxt Server Components](https://nuxt.com/docs/guide/directory-structure/components#standalone-server-components)
|
|
91
|
+
which will be enabled for you.
|
|
93
92
|
|
|
94
93
|
# Guides
|
|
95
94
|
|
|
@@ -170,11 +169,16 @@ defineOptions({
|
|
|
170
169
|
|
|
171
170
|
<template>
|
|
172
171
|
<div class="w-full h-full flex text-white bg-blue-500 items-center justify-center">
|
|
173
|
-
<h1
|
|
172
|
+
<h1>
|
|
174
173
|
{{ title }} 👋
|
|
175
174
|
</h1>
|
|
176
175
|
</div>
|
|
177
176
|
</template>
|
|
177
|
+
<style scoped>
|
|
178
|
+
h1 {
|
|
179
|
+
font-size: 70px;
|
|
180
|
+
}
|
|
181
|
+
</style>
|
|
178
182
|
```
|
|
179
183
|
|
|
180
184
|
### 2. Use the new template
|
|
@@ -209,14 +213,19 @@ const props = defineProps({
|
|
|
209
213
|
|
|
210
214
|
<template>
|
|
211
215
|
<div :class="[backgroundColor]" class="w-full h-full flex text-white items-center justify-center">
|
|
212
|
-
<h1
|
|
216
|
+
<h1>
|
|
213
217
|
{{ title }} 👋
|
|
214
218
|
</h1>
|
|
215
219
|
</div>
|
|
216
220
|
</template>
|
|
221
|
+
<style scoped>
|
|
222
|
+
h1 {
|
|
223
|
+
font-size: 70px;
|
|
224
|
+
}
|
|
225
|
+
</style>
|
|
217
226
|
```
|
|
218
227
|
|
|
219
|
-
Now let's
|
|
228
|
+
Now let's customize the background to be green instead.
|
|
220
229
|
|
|
221
230
|
```vue
|
|
222
231
|
<script lang="ts" setup>
|
package/dist/client/200.html
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html >
|
|
3
3
|
<head><meta charset="utf-8">
|
|
4
|
-
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/entry.
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/entry.9627f7dd.js"><link rel="preload" as="style" href="/__nuxt_og_image__/client/_nuxt/entry.f4586a2b.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-component.4733114a.js"><link rel="stylesheet" href="/__nuxt_og_image__/client/_nuxt/entry.f4586a2b.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"}
|
|
5
5
|
</script></head>
|
|
6
|
-
<body ><div id="__nuxt"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4},{},false,{},{}]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt_og_image__/client",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/__nuxt_og_image__/client/_nuxt/entry.
|
|
6
|
+
<body ><div id="__nuxt"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4},{},false,{},{}]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt_og_image__/client",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/__nuxt_og_image__/client/_nuxt/entry.9627f7dd.js" crossorigin></script></body>
|
|
7
7
|
</html>
|
package/dist/client/404.html
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html >
|
|
3
3
|
<head><meta charset="utf-8">
|
|
4
|
-
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/entry.
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/entry.9627f7dd.js"><link rel="preload" as="style" href="/__nuxt_og_image__/client/_nuxt/entry.f4586a2b.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-component.4733114a.js"><link rel="stylesheet" href="/__nuxt_og_image__/client/_nuxt/entry.f4586a2b.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"}
|
|
5
5
|
</script></head>
|
|
6
|
-
<body ><div id="__nuxt"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4},{},false,{},{}]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt_og_image__/client",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/__nuxt_og_image__/client/_nuxt/entry.
|
|
6
|
+
<body ><div id="__nuxt"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4},{},false,{},{}]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt_og_image__/client",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/__nuxt_og_image__/client/_nuxt/entry.9627f7dd.js" crossorigin></script></body>
|
|
7
7
|
</html>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as r,b as u,e as p,f as t,o as l,h as _,i as d,j as m}from"./entry.
|
|
1
|
+
import{a as r,b as u,e as p,f as t,o as l,h as _,i as d,j as m}from"./entry.9627f7dd.js";const f=r({__name:"IconCSS",props:{name:{type:String,required:!0},size:{type:String,default:""}},setup(a){const s=a;u(e=>({"243647bc":i.value}));const n=p();n?.nuxtIcon?.aliases;const c=t(()=>(n?.nuxtIcon?.aliases||{})[s.name]||s.name),i=t(()=>`url('https://api.iconify.design/${c.value.replace(":","/")}.svg')`),o=t(()=>{if(!s.size&&typeof n.nuxtIcon?.size=="boolean"&&!n.nuxtIcon?.size)return;const e=s.size||n.nuxtIcon?.size||"1em";return String(Number(e))===e?`${e}px`:e});return(e,x)=>(l(),_("span",{style:d({width:o.value,height:o.value})},null,4))}});const g=m(f,[["__scopeId","data-v-46d643c4"]]);export{g as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as _,r as c,m,w as r,f as u,s as d,o as g,h as f,i as y,j as v}from"./entry.
|
|
1
|
+
import{a as _,r as c,m,w as r,f as u,s as d,o as g,h as f,i as y,j as v}from"./entry.9627f7dd.js";const x=_({__name:"ImageLoader",props:{src:String,aspectRatio:Number,description:String},setup(a){const s=a,n=c(),o=c(0);function i(e){const t=n.value,p=Date.now();t.src="",o.value=0,t.style.opacity="0",t.onload=()=>{t.style.opacity="1",o.value=Date.now()-p},t.src=e}m(()=>{r(()=>s.src,e=>{i(e)},{immediate:!0})});const l=u(()=>s.description.replace("%s",o.value.toString()));return r(l,e=>{d.value=e}),(e,t)=>(g(),f("img",{ref_key:"image",ref:n,class:"max-h-full border-1 border-light-500 rounded",style:y({aspectRatio:a.aspectRatio})},null,4))}});const w=v(x,[["__scopeId","data-v-23ec6856"]]);export{w as _};
|