diff --git a/packages/post-images/package.json b/packages/post-images/package.json index efaad7d0..b891c311 100644 --- a/packages/post-images/package.json +++ b/packages/post-images/package.json @@ -19,7 +19,7 @@ "hast-util-to-string": "^3.0.1", "remark-parse": "^11.0.0", "remark-rehype": "^11.1.2", - "satori": "0.13.2", + "satori": "0.25.0", "sharp": "catalog:", "typebox": "catalog:", "unified": "^11.0.5", diff --git a/packages/post-images/tests/banner-long-code.png b/packages/post-images/tests/banner-long-code.png new file mode 100644 index 00000000..a44cc7c8 Binary files /dev/null and b/packages/post-images/tests/banner-long-code.png differ diff --git a/packages/post-images/tests/banner.test.ts b/packages/post-images/tests/banner.test.ts index 7d430ce2..1601654a 100644 --- a/packages/post-images/tests/banner.test.ts +++ b/packages/post-images/tests/banner.test.ts @@ -13,3 +13,47 @@ test("Should render the expected banner image", async () => { }); expect(equal).toEqual(true); }); + +// Regression coverage for #125: longer, multi-line code should still render +// in the blurred banner background rather than disappearing. +test("Should render long multi-line code in the banner background", async () => { + const post = await mockPostData(); + post.code = `import { useState, useEffect } from "react"; +import type { FC } from "react"; + +interface Props { + title: string; + onSave: (value: string) => void; +} + +export const Editor: FC = ({ title, onSave }) => { + const [value, setValue] = useState(""); + + useEffect(() => { + console.log("mounted", title); + return () => console.log("unmounted"); + }, [title]); + + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault(); + onSave(value); + }; + + return ( +
+ setValue(e.target.value)} /> + +
+ ); +};`; + + const buffer = await createPostImage(banner, post); + + const snapshot = "./tests/banner-long-code.png"; + // await (await import("fs/promises")).writeFile(snapshot, buffer); + + const { equal } = await looksSame(snapshot, buffer, { + ignoreAntialiasing: true, + }); + expect(equal).toEqual(true); +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c59117a4..00324921 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -345,8 +345,8 @@ importers: specifier: ^11.1.2 version: 11.1.2 satori: - specifier: 0.13.2 - version: 0.13.2 + specifier: 0.25.0 + version: 0.25.0 sharp: specifier: 'catalog:' version: 0.34.5 @@ -2875,8 +2875,8 @@ packages: resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==} engines: {node: '>=4'} - css-gradient-parser@0.0.16: - resolution: {integrity: sha512-3O5QdqgFRUbXvK1x5INf1YkBz1UKSWqrd63vWsum8MNHDBYD5urm3QtxZbKU259OrEXNM26lP/MPY3d1IGkBgA==} + css-gradient-parser@0.0.17: + resolution: {integrity: sha512-w2Xy9UMMwlKtou0vlRnXvWglPAceXCTtcmVSo8ZBUvqCV5aXEFP/PC6d+I464810I9FT++UACwTD5511bmGPUg==} engines: {node: '>=16'} css-select@5.2.2: @@ -2993,10 +2993,12 @@ packages: drizzle-kit@1.0.0-beta.20: resolution: {integrity: sha512-qMUBnrOQIU+H32aF80BSn7lT1IQuKmofCypmkrKMuOMqvM0bhz5hjCHim1bLcXUzXYRtTSr6U2pe0MSV79WbAg==} + deprecated: The 1.0.0-beta line is superseded by the 1.0 release candidate. Install drizzle-kit@rc instead. hasBin: true drizzle-orm@1.0.0-beta.20: resolution: {integrity: sha512-7qiuw+Z6yGr+ywt3PS5dP6UCfdymIuFT/ni6GnPGzLhkBIolNBTo4ByMBWTxJ7dW/Ya6d73GtkeuKfcVcriVHA==} + deprecated: The 1.0.0-beta line is superseded by the 1.0 release candidate. Install drizzle-orm@rc instead. peerDependencies: '@aws-sdk/client-rds-data': '>=3' '@cloudflare/workers-types': '>=4' @@ -4492,8 +4494,8 @@ packages: safer-buffer@2.1.2: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} - satori@0.13.2: - resolution: {integrity: sha512-BPoExgKlkZPY1j4I2vSovo9OJALOw5siU37cm1aNcq/XWCojpFM3FHXHxby9tQ2R5ajV2fRQgouWoonQ83z+Hg==} + satori@0.25.0: + resolution: {integrity: sha512-utINfLxrYrmSnLvxFT4ZwgwWa8KOjrz7ans32V5wItgHVmzESl/9i33nE38uG0miycab8hUqQtDlOpqrIpB/iw==} engines: {node: '>=16'} sax@1.5.0: @@ -5086,8 +5088,8 @@ packages: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} - yoga-wasm-web@0.3.3: - resolution: {integrity: sha512-N+d4UJSJbt/R3wqY7Coqs5pcV0aUj2j9IaQ3rNj9bVCLld8tTGKRa2USARjnvZJWVx1NDmQev8EknoczaOQDOA==} + yoga-layout@3.2.1: + resolution: {integrity: sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==} zod@4.4.3: resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==} @@ -7834,7 +7836,7 @@ snapshots: css-color-keywords@1.0.0: {} - css-gradient-parser@0.0.16: {} + css-gradient-parser@0.0.17: {} css-select@5.2.2: dependencies: @@ -9727,19 +9729,19 @@ snapshots: safer-buffer@2.1.2: {} - satori@0.13.2: + satori@0.25.0: dependencies: '@shuding/opentype.js': 1.4.0-beta.0 css-background-parser: 0.1.0 css-box-shadow: 1.0.0-3 - css-gradient-parser: 0.0.16 + css-gradient-parser: 0.0.17 css-to-react-native: 3.2.0 emoji-regex-xs: 2.0.1 escape-html: 1.0.3 linebreak: 1.1.0 parse-css-color: 0.2.1 postcss-value-parser: 4.2.0 - yoga-wasm-web: 0.3.3 + yoga-layout: 3.2.1 sax@1.5.0: {} @@ -10278,7 +10280,7 @@ snapshots: yocto-queue@0.1.0: {} - yoga-wasm-web@0.3.3: {} + yoga-layout@3.2.1: {} zod@4.4.3: {}