satori 0.0.43 → 0.0.45
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 +14 -5
- package/dist/esm/index.js +8 -12686
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.wasm.js +8 -12685
- package/dist/esm/index.wasm.js.map +1 -1
- package/dist/index.cjs +9 -9
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +4 -4
- package/dist/index.js +9 -9
- package/dist/index.js.map +1 -1
- package/dist/index.wasm.cjs +9 -9
- package/dist/index.wasm.cjs.map +1 -1
- package/dist/index.wasm.js +9 -9
- package/dist/index.wasm.js.map +1 -1
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
**Satori**: Enlightened library to convert HTML and CSS to SVG.
|
|
4
4
|
|
|
5
5
|
> **Note**
|
|
6
|
-
>
|
|
7
|
-
> To use Satori in your project to generate PNG images like Open Graph images and social cards, check out our [announcement](https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images) and [Vercel’s Open Graph Image Generation →](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation)
|
|
8
|
-
>
|
|
6
|
+
>
|
|
7
|
+
> To use Satori in your project to generate PNG images like Open Graph images and social cards, check out our [announcement](https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images) and [Vercel’s Open Graph Image Generation →](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation)
|
|
8
|
+
>
|
|
9
9
|
> To use it in Next.js, take a look at the [Next.js Open Graph Image Generation template →](https://vercel.com/templates/next.js/og-image-generation)
|
|
10
10
|
|
|
11
11
|
## Overview
|
|
@@ -70,7 +70,7 @@ await satori(
|
|
|
70
70
|
|
|
71
71
|
### HTML Elements
|
|
72
72
|
|
|
73
|
-
Satori supports a limited subset of HTML and CSS features, due to its special use cases. In general, only these static and visible elements and properties that are implemented.
|
|
73
|
+
Satori supports a limited subset of HTML and CSS features, due to its special use cases. In general, only these static and visible elements and properties that are implemented.
|
|
74
74
|
|
|
75
75
|
For example, the `<input>` HTML element, the `cursor` CSS property are not in consideration. And you can't use `<style>` tags or external resources via `<link>` or `<script>`.
|
|
76
76
|
|
|
@@ -241,10 +241,11 @@ Note:
|
|
|
241
241
|
3. `box-sizing` is set to `border-box` for all elements.
|
|
242
242
|
4. `calc` isn't supported.
|
|
243
243
|
5. `overflow: hidden` and `transform` can't be used together.
|
|
244
|
+
6. `currentcolor` support is only available for the `color` property.
|
|
244
245
|
|
|
245
246
|
### Language and Typography
|
|
246
247
|
|
|
247
|
-
Advanced typography features such as kerning, ligatures and other OpenType features are not currently supported.
|
|
248
|
+
Advanced typography features such as kerning, ligatures and other OpenType features are not currently supported.
|
|
248
249
|
|
|
249
250
|
RTL languages are not supported either.
|
|
250
251
|
|
|
@@ -335,6 +336,14 @@ init(yoga)
|
|
|
335
336
|
await satori(...)
|
|
336
337
|
```
|
|
337
338
|
|
|
339
|
+
When running in the browser or in the Node.js environment, WASM files need to be hosted and fetched before initializing. asm.js can be bundled together with the lib. In this case WASM should be faster.
|
|
340
|
+
|
|
341
|
+
When running on the Node.js server, native modules should be faster. However there are Node.js environments where native modules are not supported (e.g. StackBlitz's WebContainers), or other JS runtimes that support WASM (e.g. Vercel's Edge Runtime, Cloudflare Workers, or Deno).
|
|
342
|
+
|
|
343
|
+
Additionally, there are other difference between asm.js, native and WASM, such as security and compatibility.
|
|
344
|
+
|
|
345
|
+
Overall there are many trade-offs between each choice, and it's better to pick the one that works the best for your use case.
|
|
346
|
+
|
|
338
347
|
### Font Embedding
|
|
339
348
|
|
|
340
349
|
By default, Satori renders the text as `<path>` in SVG, instead of `<text>`. That means it embeds the font path data as inlined information, so succeeding processes (e.g. render the SVG on another platform) don’t need to deal with font files anymore.
|