fix(app): serve the OG image as an opaque PNG at a fresh URL

Twitter/X was rendering no preview for devbar.sh even though the page and
image both check out server-side: the crawler gets 200s for the HTML and the
image, the SPA rewrite does not swallow it, and robots.txt allows it. Two
things left that X is known to trip on.

The image was RGBA. Every pixel was fully opaque, but canvas toDataURL always
emits an alpha channel and X is unreliable with alpha PNGs. The generator now
reads raw pixels off the canvas and encodes the PNG here as truecolor (color
type 2, no alpha) using node:zlib, so no new dependency. Output is pixel
identical and drops from 165 KB to 90 KB.

X also caches card data per URL for about a week, negative results included,
and there is no public validator left to purge it. Bumping to og-v3.png gives
crawlers a URL they have never resolved. og.png and og-v2.png redirect to it,
and it now carries an immutable long-lived Cache-Control.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012aryuPfj68QeQdMmsQuTBy

Author: TimMikeladze

CONTRIBUTING.md

@@ -33,9 +33,9 @@ Run `bun run dev` - This starts a Bun + React preview app at http://localhost:38
 
 ### Social preview image
 
-The Open Graph image at `app/public/og-v2.png` is generated from the HTML template in `scripts/og-image.html`. After editing the template, regenerate the PNG with `bun run og` (renders at 2x via Playwright, downscaled to 1200x630) and commit both files.
+The Open Graph image at `app/public/og-v3.png` is generated from the HTML template in `scripts/og-image.html`. After editing the template, regenerate the PNG with `bun run og` (renders at 2x via Playwright, downscaled to 1200x630, written as an opaque RGB PNG with no alpha channel — X is unreliable with alpha-channel PNGs) and commit both files.
 
-Social crawlers cache the image by URL and rarely re-fetch it, so a redesign that keeps the same filename will keep showing the old preview. When the artwork changes meaningfully, bump the version suffix (`og-v2.png` → `og-v3.png`) in `scripts/generate-og.ts` and in the `og:image`, `twitter:image`, and JSON-LD `image` tags in `app/index.html`.
+Social crawlers cache the image by URL and rarely re-fetch it, so a redesign that keeps the same filename will keep showing the old preview. When the artwork changes meaningfully, bump the version suffix (`og-v3.png` → `og-v4.png`) in `scripts/generate-og.ts`, in the `og:image`, `og:image:secure_url`, `twitter:image`, and JSON-LD `image` tags in `app/index.html`, and in the redirect and header entries in `vercel.json`.
 
 ### README screenshots
 

app/index.html

@@ -53,7 +53,8 @@
 			content="A drop-in inspector for any website. Point at a change, capture the exact context, and route it to your AI agent, a GitHub issue, or your team."
 		/>
 		<meta property="og:site_name" content="devbar.sh" />
-		<meta property="og:image" content="https://devbar.sh/og-v2.png" />
+		<meta property="og:image" content="https://devbar.sh/og-v3.png" />
+		<meta property="og:image:secure_url" content="https://devbar.sh/og-v3.png" />
 		<meta property="og:image:width" content="1200" />
 		<meta property="og:image:height" content="630" />
 		<meta property="og:image:type" content="image/png" />
@@ -74,7 +75,7 @@
 			name="twitter:description"
 			content="A drop-in inspector for any website. Point at a change, capture the exact context, and route it to your AI agent, a GitHub issue, or your team."
 		/>
-		<meta name="twitter:image" content="https://devbar.sh/og-v2.png" />
+		<meta name="twitter:image" content="https://devbar.sh/og-v3.png" />
 		<meta
 			name="twitter:image:alt"
 			content="devbar.sh — point at any UI, ship the change with your agent"
@@ -109,7 +110,7 @@
 				],
 				"description": "Open-source drop-in inspector that turns any UI change into agent-ready context for your AI agent, a GitHub issue, or your team.",
 				"url": "https://devbar.sh",
-				"image": "https://devbar.sh/og-v2.png",
+				"image": "https://devbar.sh/og-v3.png",
 				"applicationCategory": "DeveloperApplication",
 				"applicationSubCategory": "Annotation & QA",
 				"operatingSystem": "Any",

app/public/og-v2.png

@@ -1,25 +1,85 @@
 /**
- * Renders scripts/og-image.html to app/public/og-v2.png (1200x630).
+ * Renders scripts/og-image.html to app/public/og-v3.png (1200x630).
  *
  * Shot at 2x and downscaled back to 1200x630 so text and hairlines stay crisp
  * in social previews. The downscale runs in the browser (canvas) to avoid
  * pulling in a native image dependency.
  *
+ * The canvas hands back raw RGBA pixels and we encode the PNG here as opaque
+ * truecolor (no alpha channel). Canvas always emits RGBA, and some social
+ * crawlers — X in particular — are unreliable with alpha-channel PNGs even
+ * when every pixel is fully opaque.
+ *
  *   bun run og
  */
 import { chromium } from "@playwright/test";
 import { mkdir, writeFile } from "node:fs/promises";
 import { dirname, resolve } from "node:path";
 import { pathToFileURL } from "node:url";
+import { deflateSync } from "node:zlib";
 
 const ROOT = resolve(import.meta.dirname, "..");
 const TEMPLATE = resolve(ROOT, "scripts/og-image.html");
-const OUT = resolve(ROOT, "app/public/og-v2.png");
+const OUT = resolve(ROOT, "app/public/og-v3.png");
 
 const WIDTH = 1200;
 const HEIGHT = 630;
 const SCALE = 2;
 
+const CRC_TABLE = Array.from({ length: 256 }, (_, n) => {
+	let c = n;
+	for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+	return c >>> 0;
+});
+
+const crc32 = (buf: Buffer) => {
+	let c = 0xffffffff;
+	for (const byte of buf) c = CRC_TABLE[(c ^ byte) & 0xff] ^ (c >>> 8);
+	return (c ^ 0xffffffff) >>> 0;
+};
+
+const chunk = (type: string, data: Buffer) => {
+	const head = Buffer.alloc(4);
+	head.writeUInt32BE(data.length, 0);
+	const body = Buffer.concat([Buffer.from(type, "latin1"), data]);
+	const crc = Buffer.alloc(4);
+	crc.writeUInt32BE(crc32(body), 0);
+	return Buffer.concat([head, body, crc]);
+};
+
+/** Encode RGBA pixels as a PNG with color type 2 (truecolor, no alpha). */
+const encodeOpaquePng = (rgba: Uint8Array, width: number, height: number) => {
+	// One filter byte (0 = None) plus 3 bytes per pixel, per scanline.
+	const raw = Buffer.alloc(height * (1 + width * 3));
+	let out = 0;
+	for (let y = 0; y < height; y++) {
+		raw[out++] = 0;
+		let src = y * width * 4;
+		for (let x = 0; x < width; x++) {
+			raw[out++] = rgba[src];
+			raw[out++] = rgba[src + 1];
+			raw[out++] = rgba[src + 2];
+			src += 4;
+		}
+	}
+
+	const ihdr = Buffer.alloc(13);
+	ihdr.writeUInt32BE(width, 0);
+	ihdr.writeUInt32BE(height, 4);
+	ihdr[8] = 8; // bit depth
+	ihdr[9] = 2; // color type: truecolor
+	ihdr[10] = 0; // deflate
+	ihdr[11] = 0; // adaptive filtering
+	ihdr[12] = 0; // no interlace
+
+	return Buffer.concat([
+		Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
+		chunk("IHDR", ihdr),
+		chunk("IDAT", deflateSync(raw, { level: 9 })),
+		chunk("IEND", Buffer.alloc(0)),
+	]);
+};
+
 const browser = await chromium.launch();
 const page = await browser.newPage({
 	viewport: { width: WIDTH, height: HEIGHT },
@@ -31,7 +91,7 @@ await page.evaluate(() => document.fonts.ready);
 
 const shot = await page.screenshot({ clip: { x: 0, y: 0, width: WIDTH, height: HEIGHT } });
 
-const dataUrl = await page.evaluate(
+const pixels = await page.evaluate(
 	async ({ png, width, height }) => {
 		const bitmap = await createImageBitmap(
 			await (await fetch(`data:image/png;base64,${png}`)).blob(),
@@ -44,14 +104,14 @@ const dataUrl = await page.evaluate(
 		ctx.imageSmoothingEnabled = true;
 		ctx.imageSmoothingQuality = "high";
 		ctx.drawImage(bitmap, 0, 0, width, height);
-		return canvas.toDataURL("image/png");
+		return Array.from(ctx.getImageData(0, 0, width, height).data);
 	},
 	{ png: shot.toString("base64"), width: WIDTH, height: HEIGHT },
 );
 
 await browser.close();
 
 await mkdir(dirname(OUT), { recursive: true });
-await writeFile(OUT, Buffer.from(dataUrl.split(",")[1], "base64"));
+await writeFile(OUT, encodeOpaquePng(Uint8Array.from(pixels), WIDTH, HEIGHT));
 
-console.log(`wrote ${OUT} (${WIDTH}x${HEIGHT})`);
+console.log(`wrote ${OUT} (${WIDTH}x${HEIGHT}, opaque RGB)`);

app/public/og-v3.png

@@ -3,7 +3,19 @@
 	"buildCommand": "bun install --frozen-lockfile && bun run build && cd app && bun install --frozen-lockfile && bunx vite build",
 	"outputDirectory": "app/dist",
 	"framework": null,
-	"redirects": [{ "source": "/og.png", "destination": "/og-v2.png", "permanent": true }],
+	"redirects": [
+		{ "source": "/og.png", "destination": "/og-v3.png", "permanent": true },
+		{ "source": "/og-v2.png", "destination": "/og-v3.png", "permanent": true }
+	],
+	"headers": [
+		{
+			"source": "/og-v3.png",
+			"headers": [
+				{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" },
+				{ "key": "Content-Type", "value": "image/png" }
+			]
+		}
+	],
 	"rewrites": [
 		{ "source": "/api/(.*)", "destination": "/api/serverless" },
 		{ "source": "/mcp", "destination": "/api/serverless" },