Skip to content

Tags: vercel/satori

Tags

0.12.2

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
fix: repeating-linear-gradient effect with correct cycle (#666)

0.12.1

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
fix: clear inflight request map for image resolution (#651)

Closes #650

## Current behavior

Try changing the background color in the `main` [playground
link](https://og-playground.vercel.app/?share=7VVdb9owFP0rlvfSScH5BEIEnVZUqZ3UrZ2qTZN4CYmTmDpxZhsCQ_z33XxBqvVp2uOMUHyvj-899_o4OeJIxBQHeB6z3apASOkDp4vjsZ4jFDNV8vAQoBVOON2vsNH6N1ulWXJYikLTQtfLETypPANCztLiXtNcvVpE7WrFYp0FyLasDp5RlmYQ5-JZh9FLKsW2iJeCC1lH0TIsVBlKCNblOZ1WxXU9matdOgi9OEIgWLuEHnp2jFY3Yr9YYQtZyHbHZDbzfB_ZzoRMYExXuAXuc14ogGVal4FpVlVFKpcImZqOZVlmnbNBNhSAREwT1c3BijgrH0OdIRZDDADXxgqfAQApa8_ZRKipMBEyhw15qCXbX9nEbYdhwW90Mf0x8WzLn0wMp2ENvN_3xNtRp80RbEMZGkFttoMiNPKJPfXAN7LHZOpMjZFH3IkN5oz4tgcZbOJ5iIPDJdbEGDkQvtnoEcsH-JRY09nZgiC-ZUOSGgc95NDPwbYlAG3ie4D0obkubHQ94swgzwxyNqSa6R2cRIR6bh21lllHrOfVxu9ZtTRaTu38zKgn1BXSE3pddp8RujRs3vXcrM_mcphmf5r9WZuDw56zPExpj80kTTrRKFBNEirND6RkkdrmpMyEFspksemM_VpGpmtZZFOmH7I8jBaP019bb3bzqXq6u9t8vp08OvffHKofnp65-LJ2ntY8_-mz_XL00EnvTcm_JXqESkkVlTv6UZU00l9DzQTQ3D-w-Af8keIsopegfb0A2Up-9a7T71li0KGm6r4FQyknjHPYV4hiEFBpKV4ouKuM6T_839saxme2_-4q_L8Gf3UNhldgXr_rYAaqZ7trbGBRgnoKhYMjbtSHAx_e3LiVHQ682ojpepviIAm5ogamudiw50NZf2t01VgQJ4EPyG2-pjEOtNzSk4F1uAZERjkXlZA8xqff).
See this comment for
[explanation](#650 (comment))
of why this is happening.

## Proposed behavior

Try changing the background color in this branch's [playground
link](https://satori-playground-git-fork-erxclau-clear-image-inflight-6f2758.vercel.sh/?share=7VVdb9owFP0rlvfSScH5BEIEnVZUqZ3UrZ2qTZN4CYmTmDpxZhsCQ_z33XxBqvVp2uOMUHyvj-899_o4OeJIxBQHeB6z3apASOkDp4vjsZ4jFDNV8vAQoBVOON2vsNH6N1ulWXJYikLTQtfLETypPANCztLiXtNcvVpE7WrFYp0FyLasDp5RlmYQ5-JZh9FLKsW2iJeCC1lH0TIsVBlKCNblOZ1WxXU9matdOgi9OEIgWLuEHnp2jFY3Yr9YYQtZyHbHZDbzfB_ZzoRMYExXuAXuc14ogGVal4FpVlVFKpcImZqOZVlmnbNBNhSAREwT1c3BijgrH0OdIRZDDADXxgqfAQApa8_ZRKipMBEyhw15qCXbX9nEbYdhwW90Mf0x8WzLn0wMp2ENvN_3xNtRp80RbEMZGkFttoMiNPKJPfXAN7LHZOpMjZFH3IkN5oz4tgcZbOJ5iIPDJdbEGDkQvtnoEcsH-JRY09nZgiC-ZUOSGgc95NDPwbYlAG3ie4D0obkubHQ94swgzwxyNqSa6R2cRIR6bh21lllHrOfVxu9ZtTRaTu38zKgn1BXSE3pddp8RujRs3vXcrM_mcphmf5r9WZuDw56zPExpj80kTTrRKFBNEirND6RkkdrmpMyEFspksemM_VpGpmtZZFOmH7I8jBaP019bb3bzqXq6u9t8vp08OvffHKofnp65-LJ2ntY8_-mz_XL00EnvTcm_JXqESkkVlTv6UZU00l9DzQTQ3D-w-Af8keIsopegfb0A2Up-9a7T71li0KGm6r4FQyknjHPYV4hiEFBpKV4ouKuM6T_839saxme2_-4q_L8Gf3UNhldgXr_rYAaqZ7trbGBRgnoKhYMjbtSHAx_e3LiVHQ682ojpepviIAm5ogamudiw50NZf2t01VgQJ4EPyG2-pjEOtNzSk4F1uAZERjkXlZA8xqff).

## Related

This is related to #593 and #592
(#592 (comment) and
#592 (comment)).

The error in #592 is no longer thrown, though the image still does not
render in PNG mode
([link](https://satori-playground-git-fork-erxclau-clear-image-inflight-6f2758.vercel.sh/?share=7VVdb9owFP0rlvfSScH5BEIEnVZUqZ3UrZ2qTZN4CYmTmDpxZhsCQ_z33XxBqvVp2uOMUHyvj-899_o4OeJIxBQHeB6z3apASOkDp4vjsZ4jFDNV8vAQoBVOON2vsNH6N1ulWXJYikLTQtfLETypPANCztLiXtNcvVpE7WrFYp0FyLasDp5RlmYQ5-JZh9FLKsW2iJeCC1lH0TIsVBlKCNblOZ1WxXU9matdOgi9OEIgWLuEHnp2jFY3Yr9YYQtZyHbHZDbzfB_ZzoRMYExXuAXuc14ogGVal4FpVlVFKpcImZqOZVlmnbNBNhSAREwT1c3BijgrH0OdIRZDDADXxgqfAQApa8_ZRKipMBEyhw15qCXbX9nEbYdhwW90Mf0x8WzLn0wMp2ENvN_3xNtRp80RbEMZGkFttoMiNPKJPfXAN7LHZOpMjZFH3IkN5oz4tgcZbOJ5iIPDJdbEGDkQvtnoEcsH-JRY09nZgiC-ZUOSGgc95NDPwbYlAG3ie4D0obkubHQ94swgzwxyNqSa6R2cRIR6bh21lllHrOfVxu9ZtTRaTu38zKgn1BXSE3pddp8RujRs3vXcrM_mcphmf5r9WZuDw56zPExpj80kTTrRKFBNEirND6RkkdrmpMyEFspksemM_VpGpmtZZFOmH7I8jBaP019bb3bzqXq6u9t8vp08OvffHKofnp65-LJ2ntY8_-mz_XL00EnvTcm_JXqESkkVlTv6UZU00l9DzQTQ3D-w-Af8keIsopegfb0A2Up-9a7T71li0KGm6r4FQyknjHPYV4hiEFBpKV4ouKuM6T_839saxme2_-4q_L8Gf3UNhldgXr_rYAaqZ7trbGBRgnoKhYMjbtSHAx_e3LiVHQ682ojpepviIAm5ogamudiw50NZf2t01VgQJ4EPyG2-pjEOtNzSk4F1uAZERjkXlZA8xqff)).

0.12.0

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
feat: add ability to add text stroke (#645)

![af8e1b7b-0c8a-4722-833c-df1b38b0df26](https://github.com/user-attachments/assets/af7d0862-a31e-43f9-9415-acab1ea98dd5)

This PR is adding ability to stroke to texts.

fixes: #578 

Added 2 properties (`WebkitTextStrokeWidth`, `WebkitTextStrokeColor`)
and 1 shorthands (`WebkitTextStroke`). When stroke is enabled,
`paint-order: stroke;` and `stroke-linejoin: round;` are automatically
set to prevent the stroke from obscuring the text.

I don't have a deep understanding of all the code so further
improvements may be needed.

0.11.3

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
fix: background-clip:text should compatible with transform and mask (#…

…639)

0.11.2

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
fix: textDecoration should compatible with transform (#640)

0.11.1

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
fix: clipping behavior of children with transform (#635)

0.11.0

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
feat: support `repeating-linear-gradient` (#630)

Now that #624 has been merged, let me bring`repeating-linear-gradient`
to satori~ ❤️

Close #554

Note about the algorithm:
<hr>

Option 1: `0 < deg < 90`

define

```math
r=(h/w)^2
```
then, calculate the intersection point of the last two lines
```math
y = - r / tan(angle) ·x + w / 2  + h/2+r·w/ (2·tan(angle))
```
```math
y=tan(angle) ·x + h
```
Finally, we can get `(x1, y1)`, `(x2, y2)`

about length:
```math
y = - 1 / tan(angle) ·x + w / 2  + h/2+r·w/ (2·tan(angle))
```
```math
y=tan(angle) ·x + h
```

then, we can get a point: `(a, b)`, so length is $`2 ·\sqrt{(a - w/2)^2
+ (b - h/2)^2}`$

<hr>

Option 2: `90 < deg < 180`

define

```math
r=(h/w)^2
```
then, calculate the intersection point of the last two lines
```math
y = - r / tan(angle) ·x + w / 2  + h/2+r·w/ (2·tan(angle))
```
```math
y=tan(angle) ·x
```
Finally, we can get `(x1, y1)`, `(x2, y2)`

about length:
```math
y = - 1 / tan(angle) ·x + w / 2  + h/2+r·w/ (2·tan(angle))
```
```math
y=tan(angle) ·x
```

then, we can get a point: `(a, b)`, so length is $`2 ·\sqrt{(a - w/2)^2
+ (b - h/2)^2}`$

Actually, I didn't find any spec of the algorithm on calculating the
points. I just came across the algorithm accidentally. It turns out it
shows the same result just like chrome renders.

0.10.14

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
fix: incorrect data URL parsing (#596)

Fixes #597 with correct regex.

[Data URL
Specification](https://www.rfc-editor.org/rfc/rfc2397#section-3)

0.10.13

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
fix: positioned mask image (#566)

Resolves #565

---------

Co-authored-by: Shu Ding <g@shud.in>

0.10.12

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
fix: README table (#585)

Update that maxHeight, maxWidth, minHeight and minWidth are unsupported
for `fit-content`.

reference:

[MDN
max-height](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height)