chore: sync with vercel/satory (v0.10.3) #3
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ink (#444) old share link like https://og-playground.vercel.app/?share=VY5BDoIwEEWv0kxi0KTGmuimUXfewCUbYIZShRlSioYQ7i6oG5fvLf77IxSCBBZO6J-qi0NN53FMWamXx1hZleyNWSV6MRV5V8U_lWfFwwXpGWdde6YsbF3I0BPH9fZwRHJaFcE3nbA6mpVWTmokDoILbpKUp2l3AQ3SRi_cgR3hUwZ7MEbDt_kDpLx3YMus7kgDNXL3t6Fd3rNEmUdK4XhtckKwMfQ0TW8 cannot show code correctly. here we set the tab to helloworld by default
Addresses #203 by placing a check on absolute url patterns by checking if the URL begins with 'http' or 'data:' format. Also added in a test to check for relative urls.
Hi! @shuding I have encountered a minor issue. After successfully retrieving the necessary font files on the backend server, I am simply uncertain about the optimal method for transmitting them back to the front end in a single response while also specifying the language for each file. Would you be able to provide me with some guidance on this matter? 🤔️ Closes: #367 --------- Co-authored-by: Shu Ding <[email protected]>
fixes #293. --------- Co-authored-by: Shu Ding <[email protected]>
…n `@resvg/resvg-js` (#449) Close #374 Releated issue: RazrFalcon/resvg#579
- radial-gradient should support default value when missed according to [reference](https://w3c.github.io/csswg-drafts/css-images/#radial-gradients) - radial-gradient `<position>` should support unit such as `vw`, `vh`,`em`, `rem`, `%` etc - support `rg-extent-keyword` such as `closest-corner`, `farthest-side`,`closest-side`, `farthest-corner` - support explicitly set rg-size like `radial-gradient(20% 20% at top left, yellow, blue)` Close #453 Close #222 Close #456 you can check [it](https://satori-playground-git-fork-jackie1210-fix-453.vercel.sh/?share=XVLLbuMwDPwVgYtFdgE30TaOsxXSHPYBtIeeWqAXX-SIsdXKkiHLeTTIv5ey66LtSeQMySEpnmDjFIKAldK73DLWhqPB69Mp2oxVqMsqCDb5xfn3STKAe61C9QVTum2MPBK6NXgY0Wj_0x43QTtL3MaZrrYjK40u7W3Auo0U2oB-pJ66Nujt8a8j0Eb9z3QhN8-ld51Vt7UsUUy8VFqaizK-FPnDo0pY6RFtwgrT4c_3jqjivX5BweaXH6DHtzkzznv0fM7tOhqrdld-mPo6h-UihwHZadz_cQfCOONsuWDZO7XVxhD-jXM-QuNiWS19qeM2Yk5zmPRijPVyJNjIUDFFyXfz5XRxNb1cmHk2vaLq6c00SwfnIktfclivZjF6aHRGnQ4W_eRXtQfXCJZyklrfoDEuYY_OG7WaUSwljS8k4Jr4Vy2IE_QTg_hNO4HhEECk0VFYdCWIrTQtJoC1e9IPxyZeUdj3HtWJW_1fF6hABN_hOYEgC4qoovw-isP5FQ) while it can render now, but it seems diffs from result in html in opacity? worth to dig it.
Relates to #223 and partially solves it. There're two categories of discoverable nodes: HTML nodes and SVG nodes. The HTML nodes are just the same as the input, which is easier to reason about: we just emit the input nodes with resolved layout and styling information. This can be thought as the "preprocessing step" of the data. Then, the SVG nodes are a little bit tricky because they're not a 1:1 mapping from the input nodes. For example a `<div style={{ boxShadow: '...' }}>` might be generated as a collection of SVG nodes including `<defs>`, `<filter>` and `<rect>`. However, in the future we can still emit structured data for these in a `onNodeGenerated` event, containing the mapping information via a `from` field: ```html <div key="k" id="i" className="c" style={{ boxShadow: '...' }}> ``` Emits: ```js onNodeDetected: #0 = { type: 'div', key: 'k', width, height, left, top, props } ``` And: ```js onNodeGenerated: { from: #0, defs: DefNode[], elements: SVGElementNode[] } ``` It apparently needs more discussion to get the best structured data design. The generated node can be converted to SVG easily but not necessarily (i.e. can be rendered in an imperative way such as canvas too). Then we can get #233 fully supported.
It partially fixes #458 but I believe there're more uncovered cases.
Should fix #451 but we need to test after the release.
Close #471 ## Additional Here we did not respect the `<geometry-box>` property, according to [mdn](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path) > A shape whose size and position is defined by the <geometry-box> value. If no geometry box is specified, the border-box will be used as the reference box but when i set `border-box` explictly, it does not work in html mode unless i do not set `<geometry-box>`(so does any of `<geometry-box>` value) just wired...😅
This PR renames the property name.
The `integrity` job uses `${{ matrix.node }}` but `matrix` property
defines `node-version: [ 18 ]` so it doesn't work correctly. It looks
the job uses Node.js 18 since it is the default version.
https://github.com/vercel/satori/blob/main/.github/workflows/ci.yml
```yml
integrity:
# prevents this action from running on forks
if: github.repository_owner == 'vercel'
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [ 18 ]
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Use pnpm
run: corepack enable pnpm && pnpm --version
- name: Use Node.js ${{ matrix.node }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node }}
cache: 'pnpm'
- run: pnpm install
- run: pnpm ci-check
```
`setup-node`'s example uses `node` instead of `node-version` so I
renamed it from `node-version` to `node`.
https://github.com/actions/setup-node#matrix-testing
### Description Support tab and tab-size https://user-images.githubusercontent.com/22126563/236774060-4bd550f3-218e-4708-a2d2-6aaa00052d16.mov Closes: #465
…#472) Close #312 Close #468 ## Refactor currently I just collect all links before `layout` and resolveImageData ## Enhancemant make image work in svg ## Additional Some test broke because of recursive import between `handle/image` and `utils`, so I just put them in one file `preprocess` You can preview [it](https://satori-playground-git-fork-jackie1210-image.vercel.sh/?share=dVPtbpswFH0V5GniTxQbSNiCQqWt3bTPP2ulStMkRPDFODU2wyaQRnn32Wm3wtIiIXHPObo-5_pyQIWigBK0pnz3S3qPjzZ7Aenh8IR4XgWcVSbx_ICQ1_5sTPWcmupZhnLdiHxvuVLAMOUccsVbKAxX0ioKJbpaTjW54Ex-NlBrJwBpoJ0Ktp02vNxfKktJ5-450SYv7lirOkkvlVCtVb0qy_I_N7bDNb-HxIvCM-L2MXtMyIg7Hv9-XzyBa71jZ7NJ3Wj882me4zsO_Xs1pD7xiGdJ904EJRci9aWSMIGHWkid-pUxTYJx3_fzPpqrluGQEIKtp5F65Nb65XXOYIx4Hqepf4JJFmTh5JwXA70cyTItlA_etDVnonlpCirnEgzeNgyTEK-WOIzxIsZRTLKPWbhahvEifrPMCtF__Tko9q4avl2v9FUQRzfs7j64_f5J_w5-fJnbBpPT8PguXPB_9RrbHb9AM6Qat3EaJQd0CoOSt_Ze0YN_lCxcQWHTMZSUudAwQ1CrLb_ZN-5PMf2psn3cZnyoN0BRYtoOjjNk8o1VVCCE6lUrKDr-AQ)
Close #397 Just make svg mode work https://satori-playground-git-fork-jackie1210-feat-mask-type.vercel.sh/?share=zVXfb5swEP5XLFdTVykCzK8ElOxh3bRO6tSHrp00RWoJGOLWwQic0CzK_76zExKgWfc0aQ8I-7vz3XefffYGxyKhOMTjhK2mOUKVXHM62WzUGKE5ZdlchuicWNa788EOrFki5z0sYVXBozWgKacvDarGn1hJY8lEDrZY8OUib6wRZ1n-VdJFpUw0l7RsTE_LSrJ0fSkAzFX-rnkWxc9ZKZZ5cim4KMF-lqbpISusumW_aIgcuwX92NfiW5ZGt9tp_mFnHlerbDcCV8b5ZIpzkdMpbsAVo_VH8QK4hSxERvo7mncyTTagCATdYVqlLvSy4HkFMeZSFqFp1nVt1I4hysy0LcsyFYl9yD0vYLaIqudmckg0xZ30CLEEMh3yIKRW3eVMqmzLipa3RRTTm_yuatV03Gvt_n1dgGLnES_m0bkWp3HbVfIqp1ajDay7wKEGqCJmZcwpitWaAHxQrJz1aK_3jMOewrRscPOogan4HaeZ5jvZPC5L_v6MXDxuX6c6AuiYtQM2BNpgl0vbomiNhm3syA-SFpGct90TcP9G3MDwrBEi3tDw7Gs_MIhrI8-98tx7YntGMLzyfYMQx78HmzNy_GviBEYQBIj4rjFyvUviOobjODC3DZ-4iLg-hFR2yyC-B_N2ip8nq9EqFRHLpfXAWU6j8sEObPisiz_Wo1r2zVDkrVCtczq0u4bDWerhaosI8bqg2iLPPU1ybGbHcULTqk1_x-1LGSUM7o12yGyP_b05dFNN8UnhetyJIm8FPdRWqOsa_aK0N4F97OHaH_a1g7eqUteUFAV0rSj0tQf-9ZxJYN3ZvMZPpGlF9V0BDqcWKewGamdy37ndM2B2VfyX-vZP0yl9bSjjtb62ZQyDnvJa4e65aeS1fGM0_N8FHput8zxWzwKMAWQr-OMBFoV6TiscbrBuJxyO4EnDu57DoasmCZ0tMxymEa_oANOFeGLqgoeHXtZ6BnHUo_h5MaMJDmW5pNsBltEMPOaUc1GLkid4-xs Need to wait for `@resvg/resvg-js` to support `mask-type`
### Description Reset default tab-size to 8 to ensure 'satori' has the same effect as 'html' without setting tab-size. before: <img width="1438" alt="image" src="https://github.com/vercel/satori/assets/22126563/02547a14-acff-4702-a52a-2e01e43be041"> after: <img width="1439" alt="image" src="https://github.com/vercel/satori/assets/22126563/bab20234-f493-4323-9ad7-a074ff970c94">
### Description 1. Support multiline text overflow ellipsis(webkit-line-clamp + webkit-box-orient). 2. Fixed a bug where overflow: 'hidden' should not be inherited by child elements. 3. Support the 'line-clamp' property, including custom block ellipsis. I added display: block here because whether it's required by the CSS draft or needed to implement this feature (must be different from display: flex), it seems I have to do so. One thing I want to discuss here is whether we can set the default display to flex, because this is more in line with the original behavior of the browser and does not seem to cause any problems (can pass all unit tests). https://github.com/vercel/satori/assets/22126563/5ec006a7-9cfb-4fc4-9000-adc9fb042c17 https://github.com/vercel/satori/assets/22126563/d672942e-e2c9-423c-8bcf-23a932e7cfb3 Closes: #253 --------- Co-authored-by: Shu Ding <[email protected]>
`'foo'.startsWith('foo') // true`
Co-authored-by: Shu Ding <[email protected]>
Improve docs and add an "Example" column to the CSS table.
enable vitest ui for better DX <img width="1436" alt="image" src="https://github.com/vercel/satori/assets/14737221/f8e35bd7-ac59-43dc-93aa-43c7606e0848"> <img width="1436" alt="image" src="https://github.com/vercel/satori/assets/14737221/c01dc56a-eb40-4d89-bb4d-a680d9090237"> <img width="1062" alt="image" src="https://github.com/vercel/satori/assets/14737221/3ecf9da6-b2bd-429c-9359-b29da84c9ad8">
Hi there! We're developing an open-source app (https://github.com/dumpus-app/dumpus-app) and use satori to render some images client-side. However, we encountered the following error on both ios web (safari) and capacitor (that uses safari webview) on a lot of iOS devices: ```bash Invalid regular expression: invalid group specifier name ``` After investigating, we found out it's caused by [regex lookbehind](https://stackoverflow.com/questions/51568821/works-in-chrome-but-breaks-in-safari-invalid-regular-expression-invalid-group) not being [supported until iOS 16.4](https://caniuse.com/js-regexp-lookbehind). This PR replaces this regex by some quite hacky code because we needed a hotfix. If anybody wants to update the regex in order not to use `lookbehind` feature, feel free to do so!. If you want to test it, you can use satori on the web using the following package json version: ```json "satori": "dumpus-app/satori#fix-safari-compatibility-build" ``` Thanks for your time! Co-authored-by: Androz2091 <[email protected]>
### Description Closes: #525
## Description Adds a note to clarify that `"min-content"` and `"max-content"` can not be used on the `minWidth`, `minHeight`, `maxWidth` and `maxHeight` style properties. Closes #521
### Description 1. Default to the current color when `textDecorationColor` is unset. 2. Resolve incorrect positioning of decoration line. 3. Address inaccurate line-through positioning. <img width="1438" alt="image" src="https://github.com/vercel/satori/assets/22126563/71e401e1-f03d-45e4-a5ad-c202487ad605"> <img width="912" alt="image" src="https://github.com/vercel/satori/assets/22126563/fe010957-ce7c-401d-bf02-e59e1a03a2a9"> Closes: #530
### Description This may be a temporary fix, I didn't dig deep into yoga. But when the return value of width here doesn't change (assuming the value of width is 216.9), when we later get the width through `parent.getComputedWidth()`, sometimes it returns 216 and sometimes 217. I'm not sure if this is a yoga bug, but it seems related to the entire page width. Closes: #540 https://github.com/vercel/satori/assets/22126563/6929db4c-60e8-4a85-ae8b-497ad64c317e
Close #535 Co-authored-by: Shu Ding <[email protected]>
## Description There are many uses of `any` throughout the codebase. We could aim to tighten up the typings to be more precise. This PR makes only small improvements, but please share any thoughts on further changes we could make or naming conventions to standardize on. I want you to know that all feedback is welcome. <3 @Jackie1210 @shuding.
We always need to handle mutiple effects. Let's give it a fn and add some tests
### Description - Fix text-shadow. - Refactor the **text** to improve readability. Since the refactoring changes may be extensive, to prevent bugs caused by refactoring from being hard to locate, it will be implemented in multiple PRs step-by-step.
#557) ### Description Should render spaces other than U+0020 when `white-space: normal`. Before:  After: 
small fix to display correct table border. Before the fix (see bottom of "Mask" cell):  After the fix: 
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)
Resolves #565 --------- Co-authored-by: Shu Ding <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.