feat(storefront): render branded OG images as PNG #255 · darjss/vit-store

CcoderabbitaiBotJul 27, 2026

Review Change Stack

Important

🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 7bb5fd1d-0517-4320-80e0-7b987770dbb7

📝 Walkthrough

Walkthrough

Changes

Dynamic OG PNG generation

Layer / File(s)	Summary
OG layout renderers `apps/storev2/src/lib/og-image.ts`	Adds shared OG dimensions, font and product data types, styling, and Satori renderers for home and product SVG layouts.
PNG response and route flow `apps/storev2/src/lib/og-response.ts`, `apps/storev2/src/pages/og.png.ts`, `apps/storev2/src/pages/og/products/[slug].png.ts`	Loads fonts and Resvg WASM, converts SVG to PNG responses, and adds home and product OG endpoints with product lookup and image embedding.
SEO and preview integration `apps/storev2/src/components/SEO.astro`, `apps/storev2/src/pages/products/[slug].astro`, `apps/storev2/package.json`, `apps/storev2/scripts/preview-og-images.ts`	Switches default and product SEO image URLs to PNG endpoints and adds a local OG preview command with new rendering dependencies.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

mermaid

1	sequenceDiagram
2	participant Browser
3	participant ProductPage
4	participant ProductOgRoute
5	participant ProductAPI
6	participant OgRenderer
7	participant Resvg
8	Browser->>ProductPage: requests product page
9	ProductPage-->>Browser: provides PNG OG image URL
10	Browser->>ProductOgRoute: requests product OG PNG
11	ProductOgRoute->>ProductAPI: fetches product data
12	ProductOgRoute->>OgRenderer: renders product SVG
13	ProductOgRoute->>Resvg: converts SVG to PNG
14	Resvg-->>Browser: returns image/png response

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: replacing OG image generation with branded PNG output.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

CcoderabbitaiBotreviewed · 4 inline threadsJul 27, 2026

Actionable comments posted: 4

🧹 Nitpick comments (2)

apps/storev2/scripts/preview-og-images.ts (2)
29-31: 🎯 Functional Correctness | 🔵 Trivial | 🏗️ Heavy lift
Preview renders with sharp/librsvg while production renders with resvg — the PNGs can differ.
The two rasterizers diverge on text shaping, gradients, border-radius, and embedded raster scaling, so a preview that looks correct is not evidence the deployed /og.png is. Consider driving the preview through the same @resvg/resvg-wasm path used by svgToPngResponse (reading the wasm from disk) so the preview is authoritative.
Also applies to: 54-56

🤖 Prompt for AI Agents
1 Verify each finding against current code. Fix only still-valid issues, skip the
2 rest with a brief reason, keep changes minimal, and validate.
3
4 In `@apps/storev2/scripts/preview-og-images.ts` around lines 29 - 31, Update the
5 preview generation flow in preview-og-images.ts to rasterize SVGs with the same
6 `@resvg/resvg-wasm` implementation used by svgToPngResponse instead of sharp. Load
7 the Resvg WASM from disk, render both the home and alternate OG SVG outputs
8 through that shared path, and write the resulting PNG buffers to the existing
9 output files.
33-42: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick win
Hardcoded remote sample makes the preview fail offline or when the asset is removed.
A network failure here aborts the whole script after the home preview was already written, leaving a half-populated output dir. Catch the fetch failure and render the no-image product layout instead — that also exercises the fallback branch.

♻️ Suggested change
diff
1 -const imageResponse = await fetch(productImageUrl);
2 -if (!imageResponse.ok)
3 - throw new Error("Could not load the sample product image");
4 -const imageType = imageResponse.headers.get("content-type") || "image/webp";
5 -const imageData = Buffer.from(await imageResponse.arrayBuffer()).toString(
6 - "base64",
7 -);
8 +let sampleImage: string | null = null;
9 +try {
10 + const imageResponse = await fetch(productImageUrl);
11 + if (imageResponse.ok) {
12 + const imageType =
13 + imageResponse.headers.get("content-type") || "image/webp";
14 + const imageData = Buffer.from(
15 + await imageResponse.arrayBuffer(),
16 + ).toString("base64");
17 + sampleImage = `data:${imageType};base64,${imageData}`;
18 + } else {
19 + console.warn("Sample product image unavailable; rendering fallback");
20 + }
21 +} catch {
22 + console.warn("Sample product image fetch failed; rendering fallback");
23 +}
and pass imageUrl: sampleImage at Line 50.

🤖 Prompt for AI Agents
1 Verify each finding against current code. Fix only still-valid issues, skip the
2 rest with a brief reason, keep changes minimal, and validate.
3
4 In `@apps/storev2/scripts/preview-og-images.ts` around lines 33 - 42, Update the
5 sample product image flow around sourceImage and imageResponse to catch fetch or
6 image-processing failures, then render the product preview using the no-image
7 fallback instead of aborting after the home preview is written. Ensure the
8 product rendering call uses the fallback image URL (sampleImage) when the remote
9 asset is unavailable, while preserving the normal fetched-image path when
10 successful.

🤖 Prompt for all review comments with AI agents

1	Verify each finding against current code. Fix only still-valid issues, skip the
2	rest with a brief reason, keep changes minimal, and validate.
3
4	Inline comments:
5	In `@apps/storev2/src/lib/og-response.ts`:
6	- Around line 18-36: Update loadOgFonts and ensureWasm so cached initialization
7	promises are cleared when they reject, allowing later OG requests to retry after
8	transient font or WASM asset failures. Preserve successful promise caching and
9	the existing initialization behavior, and apply the rejection reset to both
10	fontsReady and wasmReady.
11	- Around line 38-55: Update svgToPngResponse so renderer cleanup is guaranteed
12	with a finally block covering rendering and PNG conversion, while preserving the
13	existing response behavior. Pass the Uint8Array returned by rendered.asPng()
14	directly to Response instead of creating a copied array with Uint8Array.from.
15	- Around line 33-36: Update ensureWasm to use the bundler-imported resvg WASM
16	module/binding instead of dynamically fetching /og-assets/resvg.wasm, and ensure
17	initialization is invoked only once. Preserve and return the same promise for
18	subsequent calls so retries cannot call initWasm again after initialization has
19	started.
20
21	In `@apps/storev2/src/pages/og/products/`[slug].png.ts:
22	- Around line 11-21: Update getImageUrl to request the CDN’s supported explicit
23	PNG output format instead of replacing format=auto with the undocumented
24	format=png value. Ensure the returned URL is configured for PNG generation while
25	preserving the existing primary-image selection and absolute URL handling.
26
27	---
28
29	Nitpick comments:
30	In `@apps/storev2/scripts/preview-og-images.ts`:
31	- Around line 29-31: Update the preview generation flow in preview-og-images.ts
32	to rasterize SVGs with the same `@resvg/resvg-wasm` implementation used by
33	svgToPngResponse instead of sharp. Load the Resvg WASM from disk, render both
34	the home and alternate OG SVG outputs through that shared path, and write the
35	resulting PNG buffers to the existing output files.
36	- Around line 33-42: Update the sample product image flow around sourceImage and
37	imageResponse to catch fetch or image-processing failures, then render the
38	product preview using the no-image fallback instead of aborting after the home
39	preview is written. Ensure the product rendering call uses the fallback image
40	URL (sampleImage) when the remote asset is unavailable, while preserving the
41	normal fetched-image path when successful.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 72aa0d09-4499-4914-8d22-df0ae08ae5ed

📥 Commits

Reviewing files that changed from the base of the PR and between 70029a87edb0893ea30dd737898c00d57617c9cb and ed6216ca3ff87394852bc7662bbec69200d1e8e8.

⛔ Files ignored due to path filters (7)

apps/storev2/public/og-assets/noto-sans-bold.ttf is excluded by !**/*.ttf
apps/storev2/public/og-assets/noto-sans-regular.ttf is excluded by !**/*.ttf
apps/storev2/public/og-assets/resvg.wasm is excluded by !**/*.wasm
apps/storev2/public/og-assets/unbounded-bold.ttf is excluded by !**/*.ttf
apps/storev2/public/og-assets/unbounded-semibold.ttf is excluded by !**/*.ttf
apps/storev2/public/og-image.svg is excluded by !**/*.svg
bun.lock is excluded by !**/*.lock

📒 Files selected for processing (9)

apps/storev2/package.json
apps/storev2/scripts/preview-og-images.ts
apps/storev2/src/components/SEO.astro
apps/storev2/src/lib/og-image.ts
apps/storev2/src/lib/og-response.ts
apps/storev2/src/pages/og.png.ts
apps/storev2/src/pages/og/products/[slug].png.ts
apps/storev2/src/pages/og/products/[slug].svg.ts
apps/storev2/src/pages/products/[slug].astro

💤 Files with no reviewable changes (1)

apps/storev2/src/pages/og/products/[slug].svg.ts

apps/storev2/src/lib/og-response.tslines 33–36Outdated · ed6216cOpen thread

…	…	@@ -0,0 +1,55 @@
	33	+	const ensureWasm = (requestUrl: string) => {
	34	+	wasmReady ??= initWasm(fetch(new URL("/og-assets/resvg.wasm", requestUrl)));
	35	+	return wasmReady;
	36	+	};

CcoderabbitaiBoton lines 33–36Jul 27, 2026

🩺 Stability & Availability | 🟠 Major | 🏗️ Heavy lift

🧩 Analysis chain

🏁 Script executed:

shell

1	#!/bin/bash
2	fd . --iglob '*/public/og-assets/' -x ls -la {}

Repository: darjss/vit-store

Length of output: 339

🏁 Script executed:

shell

1	#!/bin/bash
2	set -u
3
4	echo "== package/package manager files =="
5	git ls-files \| rg '(^\|/)(package\.json\|pnpm-lock\.yaml\|package-lock\.json\|yarn\.lock\|wrangler\.toml\|next\.config\.(js\|mjs\|ts)\|vite\.config\.(js\|mjs\|ts)\|astro\.config\.(js\|mjs\|ts))$' \|\| true
6
7	echo
8	echo "== target file =="
9	fd -a 'og-response\.ts$' . \| while read -r f; do
10	echo "-- $f --"
11	wc -l "$f"
12	cat -n "$f"
13	done
14
15	echo
16	echo "== public og-assets paths =="
17	python3 - <<'PY'
18	import os, pathlib
19	roots=[p for p in pathlib.Path('.').rglob('public') if p.is_dir()]
20	for r in roots:
21	pth=pathlib.Path(r)/'og-assets'
22	if pth.exists():
23	print(f'FOUND {pth}')
24	for root, dirs, files in os.walk(pth):
25	for f in sorted(files):
26	print(os.path.join(root, f))
27	if not any(p.is_dir() for p in pathlib.Path('.').rglob('public')):
28	print('NO public directories found')
29	PY
30
31	echo
32	echo "== search for resvg / wasm / og-assets usage =="
33	rg -n "og-assets\|resvg\|initWasm\|wasmb\|wasmReady\|Already initialized" -S . \|\| true

Repository: darjss/vit-store

Length of output: 4124

🏁 Script executed:

shell

1	#!/bin/bash
2	set -u
3
4	echo "== lockfile package entry =="
5	python3 - <<'PY'
6	from pathlib import Path
7	p=Path('bun.lock')
8	text=p.read_text()
9	start=text.find('"`@resvg/resvg-wasm`@2.6.2"')
10	end=text.find('\n }', start)
11	print(start, end)
12	print(text[start:start+1200])
13	PY
14
15	echo
16	echo "== installed module source if available =="
17	python3 - <<'PY'
18	from pathlib import Path
19	for root in [Path('./node_modules'), Path('./.bun')]:
20	if root.exists():
21	for p in root.rglob('*'):
22	if p.is_file() and p.name in {'index.js','module.js','index.d.ts'} and 'resvg' in ('/'.join(p.parts), str(p)):
23	print(f'-- {p} --')
24	text=p.read_text(errors='ignore').splitlines()
25	for i,line in enumerate(text[:80], 1):
26	if 'initWasm' in line or 'Already initialized' in line or 'WebAssembly' in line or 'response' in line.lower():
27	print(f'{i}: {line}')
28	PY
29
30	echo
31	echo "== all OgAsset references =="
32	rg -n "OgAsset\|og-assets\|resvg\.wasm\|initWasm\|new Response\(\|cache" -S apps/storev2/src apps/storev2/public apps/storev2/astro.config.mjs apps/storev2/package.json \|\| true

Repository: darjss/vit-store

Length of output: 3846

🌐 Web query:

@resvg/resvg-wasm initWasm Already initialized repeated calls

💡 Result:

The error "Already initialized. The initWasm() function can be used only once" occurs in @resvg/resvg-wasm because the library's internal state tracking explicitly prevents the initWasm() function from being called more than once [1][2]. This behavior is standard in the library's design to prevent re-initialization of the WebAssembly module, which is unnecessary and can cause issues [1][2]. In environments like serverless functions (e.g., Cloudflare Workers) or hot-reloading development environments, code execution may re-trigger the initialization logic, leading to this error [3][4][5]. To resolve or prevent this, you should ensure that initWasm() is called only once in the application's lifecycle, or implement a guard to handle repeated calls gracefully. Recommended approaches: 1. Use a local variable to guard the initialization: Create a persistent flag to track whether the module has been initialized before calling initWasm() [5]. let initialized = false; export async function initializeResvg { if (initialized) return; await initWasm(wasmModule); initialized = true; } 2. Handle the error explicitly: If you cannot easily control the initialization flow, you can catch the error and ignore it if it specifically indicates the module is already initialized [4][5]. try { await initWasm(wasmModule); } catch (e) { if (!(e instanceof Error && e.message.includes('Already initialized'))) { throw e; } } Prioritize the first approach, as it is cleaner and avoids unnecessary promise overhead [5].

Citations:

🌐 Web query:

@resvg/resvg-wasm initWasm fetch response Cloudflare Workers fetch WASM

💡 Result:

Using @resvg/resvg-wasm in Cloudflare Workers requires avoiding runtime dynamic fetching of the WASM binary, as the Workers runtime restricts dynamic WebAssembly compilation [1][2]. Instead, you must use static imports to allow the Wrangler bundler to pre-compile the WASM module [1][3]. Recommended Approach: 1. Static Import: Import the WASM file directly at the top of your file [3][4][5]. This allows Wrangler to handle the binary inclusion during the build process [1][3]. import resvgWasm from '@resvg/resvg-wasm/index_bg.wasm'; 2. Initialization: Pass this imported module directly to initWasm [1][4][5]. Since initWasm can only be called once, use a guard to ensure it executes only once per Worker instance [4][5][6]. Example Pattern: import { Resvg, initWasm } from '@resvg/resvg-wasm'; import resvgWasm from '@resvg/resvg-wasm/index_bg.wasm'; let initialized = false; async function ensureWasmInitialized { if (initialized) return; await initWasm(resvgWasm); initialized = true; } // Inside your fetch handler export default { async fetch(request, env, ctx) { await ensureWasmInitialized; // Proceed with Resvg usage } }; Avoid using fetch to load the.wasm file at runtime, as this will trigger a CompileError: WebAssembly.instantiate: Wasm code generation disallowed by embedder in the Cloudflare Workers environment [1][2]. If your build system (such as some Vite/SSR configurations) cannot handle direct.wasm imports, you may need to use a post-build script to patch the import into your worker bundle [1].

Citations:

Use a bundler-imported WASM module and guard the single init path.

/og-assets/resvg.wasm exists, but wasmReady ??= initWasm(fetch(...)) can still call initWasm() on retry when initialization has already started, which @resvg/resvg-wasm will reject as Already initialized. Keep a separate runtime-initialized flag and pass the same error-bound promise repeatedly if you must keep the dynamic fetch(...) form, or a bundler-imported WASM module/binding if this runs under Cloudflare Workers.

🤖 Prompt for AI Agents

1	Verify each finding against current code. Fix only still-valid issues, skip the
2	rest with a brief reason, keep changes minimal, and validate.
3
4	In `@apps/storev2/src/lib/og-response.ts` around lines 33 - 36, Update ensureWasm
5	to use the bundler-imported resvg WASM module/binding instead of dynamically
6	fetching /og-assets/resvg.wasm, and ensure initialization is invoked only once.
7	Preserve and return the same promise for subsequent calls so retries cannot call
8	initWasm again after initialization has started.

apps/storev2/src/lib/og-response.tslines 18–36Outdated · ed6216cOpen thread

…	…	@@ -0,0 +1,55 @@
	33	+	const ensureWasm = (requestUrl: string) => {
	34	+	wasmReady ??= initWasm(fetch(new URL("/og-assets/resvg.wasm", requestUrl)));
	35	+	return wasmReady;
	36	+	};

CcoderabbitaiBoton lines 18–36Jul 27, 2026

🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

Rejected promises are cached forever, poisoning the isolate.

fontsReady ??= / wasmReady ??= store the promise before it settles, so a single transient fetch failure (cold start, asset 5xx) permanently breaks every later OG request in that isolate — each one re-awaits the same rejected promise. Reset the cache on rejection.

🛡️ Proposed fix

diff

1	export const loadOgFonts = (requestUrl: string) => {
2	- fontsReady ??= Promise.all([
3	+ fontsReady ??= Promise.all([
4	fetchAsset(requestUrl, "/og-assets/noto-sans-regular.ttf"),
5	fetchAsset(requestUrl, "/og-assets/noto-sans-bold.ttf"),
6	fetchAsset(requestUrl, "/og-assets/unbounded-semibold.ttf"),
7	fetchAsset(requestUrl, "/og-assets/unbounded-bold.ttf"),
8	- ]).then(([sansRegular, sansBold, unboundedSemibold, unboundedBold]) => ({
9	- sansRegular,
10	- sansBold,
11	- unboundedSemibold,
12	- unboundedBold,
13	- }));
14	+ ])
15	+ .then(([sansRegular, sansBold, unboundedSemibold, unboundedBold]) => ({
16	+ sansRegular,
17	+ sansBold,
18	+ unboundedSemibold,
19	+ unboundedBold,
20	+ }))
21	+ .catch((error) => {
22	+ fontsReady = undefined;
23	+ throw error;
24	+ });
25	return fontsReady;
26	};
27
28	const ensureWasm = (requestUrl: string) => {
29	- wasmReady ??= initWasm(fetch(new URL("/og-assets/resvg.wasm", requestUrl)));
30	+ wasmReady ??= initWasm(
31	+ fetch(new URL("/og-assets/resvg.wasm", requestUrl)),
32	+ ).catch((error) => {
33	+ wasmReady = undefined;
34	+ throw error;
35	+ });
36	return wasmReady;
37	};

📝 Committable suggestion

‼️ IMPORTANT Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

suggestion

1	export const loadOgFonts = (requestUrl: string) => {
2	fontsReady ??= Promise.all([
3	fetchAsset(requestUrl, "/og-assets/noto-sans-regular.ttf"),
4	fetchAsset(requestUrl, "/og-assets/noto-sans-bold.ttf"),
5	fetchAsset(requestUrl, "/og-assets/unbounded-semibold.ttf"),
6	fetchAsset(requestUrl, "/og-assets/unbounded-bold.ttf"),
7	])
8	.then(([sansRegular, sansBold, unboundedSemibold, unboundedBold]) => ({
9	sansRegular,
10	sansBold,
11	unboundedSemibold,
12	unboundedBold,
13	}))
14	.catch((error) => {
15	fontsReady = undefined;
16	throw error;
17	});
18	return fontsReady;
19	};
20
21	const ensureWasm = (requestUrl: string) => {
22	wasmReady ??= initWasm(
23	fetch(new URL("/og-assets/resvg.wasm", requestUrl)),
24	).catch((error) => {
25	wasmReady = undefined;
26	throw error;
27	});
28	return wasmReady;
29	};

🤖 Prompt for AI Agents

1	Verify each finding against current code. Fix only still-valid issues, skip the
2	rest with a brief reason, keep changes minimal, and validate.
3
4	In `@apps/storev2/src/lib/og-response.ts` around lines 18 - 36, Update loadOgFonts
5	and ensureWasm so cached initialization promises are cleared when they reject,
6	allowing later OG requests to retry after transient font or WASM asset failures.
7	Preserve successful promise caching and the existing initialization behavior,
8	and apply the rejection reset to both fontsReady and wasmReady.

apps/storev2/src/pages/og/products/[slug].png.tslines 11–21Outdated · ed6216cOpen thread

…	…	@@ -0,0 +1,77 @@
	18	+	"format=auto",
	19	+	"format=png",
	20	+	);
	21	+	};

CcoderabbitaiBoton lines 11–21Jul 27, 2026

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

shell

1	#!/bin/bash
2	fd -t f 'image.ts' apps/storev2/src/lib --exec cat -n {}

Repository: darjss/vit-store

Length of output: 11721

🏁 Script executed:

shell

1	#!/bin/bash
2	set -euo pipefail
3
4	echo "## Locate og product page and image helper usages"
5	fd -t f '\[slug\]\.png\.ts$' apps/storev2/src/pages/og --exec sh -c 'echo "===== {} ====="; cat -n "{}"'
6
7	echo
8	echo "## Search toProductImageUrl usage"
9	rg -n "toProductImageUrl\|format=auto\|format=png\|getImageUrl\|renderProductOgSvg" apps/storev2/src -S

Repository: darjss/vit-store

Length of output: 5030

🌐 Web query:

Cloudflare Images CDN-cgi image format parameter supports PNG JPEG WebP

💡 Result:

Yes, the Cloudflare image transformation service (accessed via /cdn-cgi/image/ URLs) fully supports the format parameter for WebP and JPEG [1][2]. While PNG is a supported input format, the format parameter specifically controls the transcoded output format [1][3]. When specifying output formats, the service supports the following values: - auto: Automatically serves the most efficient format (WebP or AVIF) based on the browser's capabilities [1][2]. - webp: Transcodes the image to Google WebP format [1][4]. - jpeg: Transcodes the image into interlaced progressive JPEG format [1][5]. - baseline-jpeg: Transcodes the image into baseline sequential JPEG format [1][4]. - avif: Transcodes the image to AVIF, falling back to WebP or JPEG if necessary [1][6]. Although PNG is not listed as an explicit output option in the format parameter documentation, Cloudflare supports PNG as an input format and will preserve or transcode images as required by the transformation settings [3][6]. If the format parameter is omitted, Cloudflare typically defaults to standard formats like JPEG or WebP depending on browser support [2].

Citations:

🌐 Web query:

docs.cloudflare.com images format parameter supported values png

💡 Result:

The Cloudflare Images format parameter (also available as f) does not include png as a direct, explicit transformation option in its standard list of values [1][2]. The officially documented values for the format parameter are: - auto: Automatically serves the most efficient format supported by the requesting browser [1][2]. - avif: Transcodes the image to AVIF (with fallback to WebP or JPEG if encoding is too slow) [1][2]. - webp: Transcodes the image to WebP [1][2]. - jpeg: Transcodes the image to interlaced progressive JPEG [1][2]. - baseline-jpeg: Transcodes the image to baseline sequential JPEG [1][2]. - json: Outputs metadata about the image in JSON format [1][2]. Although png is a supported input format and can be a supported output format under certain conditions (such as when format is not explicitly set, allowing the system to use a standard format like PNG or JPEG) [3][4], it is not an explicit value you can pass to the format parameter [1][2]. However, when generating images in PNG format, you can use the quality parameter to trigger the use of a PNG8 (palette) variant [1][2].

Citations:

Use the CDN format that supports explicit PNG output.

format=png is not a documented Cloudflare image format value here, so the current replace can leave the CDNs auto/WebP path intact. Avoid the produced URL as a PNG-only fix; use the supported output format for this OG image, or centralize the image helper’s format choice.

🤖 Prompt for AI Agents

1	Verify each finding against current code. Fix only still-valid issues, skip the
2	rest with a brief reason, keep changes minimal, and validate.
3
4	In `@apps/storev2/src/pages/og/products/`[slug].png.ts around lines 11 - 21,
5	Update getImageUrl to request the CDN’s supported explicit PNG output format
6	instead of replacing format=auto with the undocumented format=png value. Ensure
7	the returned URL is configured for PNG generation while preserving the existing
8	primary-image selection and absolute URL handling.

apps/storev2/src/lib/og-response.tslines 38–55Outdated · ed6216cOpen thread

…	…	@@ -0,0 +1,55 @@
	52	+	"Cache-Control": CACHE_CONTROL,
	53	+	},
	54	+	});
	55	+	};

CcoderabbitaiBoton lines 38–55Jul 27, 2026

🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

Free the renderer in a finally, and skip the byte-by-byte copy.

If new Resvg(...) or render() throws (malformed SVG, unsupported feature), renderer.free() never runs and the wasm allocation leaks for the isolate's lifetime. Also Uint8Array.from(png) copies element-by-element; asPng() already returns a detached Uint8Array that can be handed to Response directly.

🛡️ Proposed fix

diff

1	export const svgToPngResponse = async (svg: string, requestUrl: string) => {
2	await ensureWasm(requestUrl);
3	const renderer = new Resvg(svg, {
4	fitTo: { mode: "original" },
5	background: "`#fffdf5`",
6	});
7	- const rendered = renderer.render();
8	- const png = rendered.asPng();
9	- rendered.free();
10	- renderer.free();
11	+ let png: Uint8Array;
12	+ try {
13	+ const rendered = renderer.render();
14	+ try {
15	+ png = rendered.asPng();
16	+ } finally {
17	+ rendered.free();
18	+ }
19	+ } finally {
20	+ renderer.free();
21	+ }
22
23	- return new Response(Uint8Array.from(png).buffer, {
24	+ return new Response(png, {
25	headers: {
26	"Content-Type": "image/png",
27	"Cache-Control": CACHE_CONTROL,
28	},
29	});
30	};

🤖 Prompt for AI Agents

1	Verify each finding against current code. Fix only still-valid issues, skip the
2	rest with a brief reason, keep changes minimal, and validate.
3
4	In `@apps/storev2/src/lib/og-response.ts` around lines 38 - 55, Update
5	svgToPngResponse so renderer cleanup is guaranteed with a finally block covering
6	rendering and PNG conversion, while preserving the existing response behavior.
7	Pass the Uint8Array returned by rendered.asPng() directly to Response instead of
8	creating a copied array with Uint8Array.from.

feat(storefront): render branded OG images as PNG#255

Summary

Preview locally

Checks

Summary by CodeRabbit

Checks

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

💡 Codex Review

💡 Codex Review

💡 Codex Review

1	cd apps/storev2
2	bun run preview:og