feat(og-image): composite logo and match site branding

Composite logo.png when generating og-image.png, restyle the template
to match site colors, and remove unused server-logo.svg.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: wiktoriavh

README.md

@@ -31,7 +31,7 @@ pnpm dev
 | `pnpm test` | Run tests in watch mode |
 | `pnpm test:run` | Run tests once (CI) |
 | `pnpm lint` | Lint with ESLint |
-| `pnpm generate:og-image` | Regenerate `public/og-image.png` from SVG |
+| `pnpm generate:og-image` | Regenerate `public/og-image.png` using `public/logo.png` |
 
 ## Environment variables
 

public/og-image.png

@@ -4,5 +4,19 @@ import { fileURLToPath } from 'node:url';
 import sharp from 'sharp';
 
 const root = join(dirname(fileURLToPath(import.meta.url)), '..');
-const svg = readFileSync(join(root, 'public/og-image.svg'));
-await sharp(svg).png().toFile(join(root, 'public/og-image.png'));
+const logoPath = join(root, 'public/logo.png');
+const svgPath = join(root, 'public/og-image.svg');
+const outPath = join(root, 'public/og-image.png');
+
+const CANVAS_WIDTH = 1200;
+const LOGO_SIZE = 160;
+const LOGO_TOP = 120;
+const LOGO_LEFT = Math.floor((CANVAS_WIDTH - LOGO_SIZE) / 2);
+
+const svg = readFileSync(svgPath);
+const logo = await sharp(logoPath).resize(LOGO_SIZE, LOGO_SIZE).png().toBuffer();
+
+await sharp(svg)
+  .composite([{ input: logo, top: LOGO_TOP, left: LOGO_LEFT }])
+  .png()
+  .toFile(outPath);