@feliperohdee/satori 0.0.5 → 0.0.7
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 -1
- package/dist/index.cjs +5 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/dist/standalone.cjs +4 -4
- package/dist/standalone.cjs.map +1 -1
- package/dist/standalone.js +4 -4
- package/dist/standalone.js.map +1 -1
- package/package.json +96 -96
package/README.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
**Satori**: Enlightened library to convert HTML and CSS to SVG.
|
|
2
2
|
|
|
3
|
+
## Improvements Over Original
|
|
4
|
+
|
|
5
|
+
This fork extends the [original Satori](https://github.com/vercel/satori) with the following features and fixes:
|
|
6
|
+
|
|
7
|
+
- **`background-position` with keyword sizes** — correct positioning when combined with `background-size: cover`, `contain`, or `auto`
|
|
8
|
+
- **`mix-blend-mode`** — full support
|
|
9
|
+
|
|
3
10
|
## Overview
|
|
4
11
|
|
|
5
12
|
Satori supports the JSX syntax, which makes it very straightforward to use. Here’s an overview of the basic usage:
|
|
@@ -225,7 +232,7 @@ Satori uses the same Flexbox [layout engine](https://yogalayout.com) as React Na
|
|
|
225
232
|
<tr><td rowspan="7">Background</td></tr>
|
|
226
233
|
<tr><td><code>backgroundColor</code></td><td>Supported, single value</td><td></td></tr>
|
|
227
234
|
<tr><td><code>backgroundImage</code></td><td><code>linear-gradient</code>, <code>repeating-linear-gradient</code>, <code>radial-gradient</code>, <code>repeating-radial-gradient</code>, <code>url</code>, single value</td><td></td></tr>
|
|
228
|
-
<tr><td><code>backgroundPosition</code></td><td>
|
|
235
|
+
<tr><td><code>backgroundPosition</code></td><td>Supports keywords (<code>center</code>, <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>), percentages, lengths, and mixed values. Works correctly with <code>backgroundSize: cover</code>, <code>contain</code>, and <code>auto</code>.</td><td></td></tr>
|
|
229
236
|
<tr><td><code>backgroundSize</code></td><td>Support <code>cover</code>, <code>contain</code>, <code>auto</code>, and two-value sizes i.e. <code>10px 20%</code></td><td><a href="https://og-playground.vercel.app/?share=ZZXXjqNIFIZfpeWb2RW9Itik3tmRwAQDJgeDNTfkHEwwYdTvvnhGWq003HDOqZ8fDlX11Y9D2Ebx4ePwNcqf35u3t2Fcq_ifHz9e8dtbFudpNn68wRD0_qsy59GY_b8Q-GGZ9u3UREbcxf4u_tK0f_U_4y-_acx8i3dF2Dajnze_jwu1n74EU1_9Efmj_5G_CmDXpH8H_hBjp_fcoVVjhiQ-ban9Ukw7Y-10j3j9ldtnyttvND6LubMHTABVrO4YJypeXGSdBtuwwCRWANMRpy7W49jmUFvuyU0fnmZeduAiZ6ZZaueUXM0V5VDBNs2OtfX6MimW0iTTBD0JeYbFeSOrpLGR5_iMkrHGYSAGEFJl77xRCsjNDC_MmIHV8KDOdsboszJAXchEZifrokEtSyrT5cUkbkifODIuyKC2oblXy8yAqyt-VLcJr8UhYJc2PGoWrW4dppebvMnexThypKZD-IRPx2dFjjnj3eAxqMU1XLTipNKFhrv-1Te3ZWE41aKHtHUogVtC98ZlniyqI9lkcOS5xQnRSlTV0-tKaHckalSGADnQlda0i12YNG7wcO3J-IrGTiWLXtviZ6tc1LDpTrmyhe5uybE1CSYwMHinsikaLkdSepmcxdufvxhlwGcYZFBUF9yqXt9fIT5MC0L3H99JUi4UOqz4PPHkFsq72zM8WjYnYGqRWukUlGh4gcFkBi7zyiOuA0c-D4-VW-zWoSnBLSFHV2qkeLMWcwGd7jWpWVCi5AgElPbN7TB1vJpQbagUW4USzTgmUwZs5ckWiKtbeoovGVYKVZYplg37_NjrsGiWVdUBSYO2HADFotULPEJ1kl-3_QMDRpkEjjNQJkq5rpYMXk6gMN14z9Nh9lIhURHsoqlSm5QUTb2sFTs1ag4JjyqDx8eRoJY24GdbW3E7mrfC2jYpulOIfsX9q8znWkYJIU1Lpl3RHbd1jvHq2hVJ27w8Hu0DQtHereC9qSlsH2pBzdY8HbMclOVBaxkCNQPbCS280YnTjDj1vRVdXk2GTcHUtcLIC2kuZmc-F0CjT5O0bxLguUZX0-46gocAOemyO9ud16EQRYoEzoUHKbUT2c6Z6iVo8ikGz_c28GlfMMZFXId-3ndkk55Y6pEpLu00ERw5DiE5ibPw6Jg0pxiXMCDPY5Xv0ooyy07SOY2ItUJA0GcAc95NKKS17ERr91XBFBjo7kTiSi-nM-MjY9_WyXH_6BRO6OxOPK9k9bA925tNd9HmcmRzKI6YXmAFWWNmoOixTTtukLU1GRFeZIuaqTM24QNH063N0Ubq86kAJkdSfl7B89Dt0_KkVXVtMRYgb4Wsogggys-O-89XYZGtuDtasBrKY6ZmsIg42314VQNix3wBqQC70a0ODgxY3BbqKvgnxsscyioJTTAUoJHSrXUiwWwtLqtAakcVCILGBrn4C1p0-WKUzlCXhIAKTFUJTXzV9zXLWaU56fX5_OfvsDy3VdvvsJyzfIy_vEY_P783376CO8u_fW8O74e2G_O2GQ4fPw4_wX34IHZwH35h_fBxeiVRHEzp4SPxqyF-P8R1W-TW2r3OhHH-me0-yc5rtg7i6PAx9lP8-X4Y_WBXZHFVtXPbV9Hh818">Example</a></td></tr>
|
|
230
237
|
<tr><td><code>backgroundClip</code></td><td><code>border-box</code>, <code>text</code></td><td></td></tr>
|
|
231
238
|
<tr><td><code>backgroundRepeat</code></td><td><code>repeat</code>, <code>repeat-x</code>, <code>repeat-y</code>, <code>no-repeat</code>, defaults to <code>repeat</code></td><td></td></tr>
|
|
@@ -284,6 +291,12 @@ Satori uses the same Flexbox [layout engine](https://yogalayout.com) as React Na
|
|
|
284
291
|
<td></td>
|
|
285
292
|
</tr>
|
|
286
293
|
|
|
294
|
+
<tr>
|
|
295
|
+
<td colspan="2"><code>mixBlendMode</code></td>
|
|
296
|
+
<td>Supported</td>
|
|
297
|
+
<td></td>
|
|
298
|
+
</tr>
|
|
299
|
+
|
|
287
300
|
<tr>
|
|
288
301
|
<td colspan="2"><code>clipPath</code></td>
|
|
289
302
|
<td>Supported</td>
|