From 0584535d34565b2f15c7f9e9ccaa73c9c0263119 Mon Sep 17 00:00:00 2001
From: Ian Gulliver <git@flamingcow.io>
Date: Mon, 19 Oct 2026 22:04:11 -0700
Subject: [PATCH] website share thumbnail

---
 docs/operations.md |  2 +-
 site/card.html     | 62 ++++++++++++++++++++++++++++++++++++++++++++++
 site/deploy.sh     |  1 +
 site/index.html    | 10 ++++++++
 4 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 site/card.html

diff --git a/docs/operations.md b/docs/operations.md
index aaf75dc..92c2213 100644
--- a/docs/operations.md
+++ b/docs/operations.md
@@ -153,7 +153,7 @@ The app checks `https://dl.byre.run/appcast.xml` for updates (see "Updates" in `
 
 byre.run and byre.team are registered at Porkbun, with Cloudflare as their DNS, in the Cloudflare account `cloudflare@flamingcow.io`.
 
-- `https://byre.run/` (and `www.byre.run`) is the Cloudflare Pages project `byre`: `site/index.html`, with `mac/icon.svg`, `icon.png` (rendered from it at 180×180 with `rsvg-convert`, the favicon for browsers without SVG favicons and the apple-touch-icon) and the fonts from `mac/fonts/`. `site/deploy.sh` stages those files and publishes them with `wrangler pages deploy`. Releases don't redeploy it; its download link is `https://dl.byre.run/byre.dmg`, which each release replaces.
+- `https://byre.run/` (and `www.byre.run`) is the Cloudflare Pages project `byre`: `site/index.html`, with `mac/icon.svg`, `icon.png` (rendered from it at 180×180 with `rsvg-convert`, the favicon for browsers without SVG favicons and the apple-touch-icon), `card.png` (the 1200×630 share card that `index.html`'s Open Graph tags name, a headless Google Chrome screenshot of `site/card.html`) and the fonts from `mac/fonts/`. `site/deploy.sh` stages those files and publishes them with `wrangler pages deploy`. Releases don't redeploy it; its download link is `https://dl.byre.run/byre.dmg`, which each release replaces.
 - `https://dl.byre.run/` is the R2 bucket `byre`'s custom domain, holding what `mac/release.sh` uploads (see "Releases").
 - byre.team, and every path on it, redirects to `https://byre.run/` through a redirect rule on its zone (Rules → Redirect Rules in the dashboard), over proxied `AAAA 100::` records for `byre.team` and `www.byre.team`.
 
diff --git a/site/card.html b/site/card.html
new file mode 100644
index 0000000..71292b5
--- /dev/null
+++ b/site/card.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<style>
+@font-face {
+	font-family: "Atkinson Hyperlegible Mono";
+	font-weight: 200 800;
+	src: url("../mac/fonts/atkinson-hyperlegible-mono-latin-wght-normal.woff2") format("woff2");
+}
+* {
+	box-sizing: border-box;
+}
+body {
+	margin: 0;
+	width: 1200px;
+	height: 630px;
+	overflow: hidden;
+	background: #15171a;
+	color: #eceff3;
+	font-family: "Atkinson Hyperlegible Mono", monospace;
+	border-top: 14px solid;
+	border-image: linear-gradient(90deg, #ff3b4e, #ff9500, #34d058, #00d5f0, #3d7dff, #b05cff) 1;
+	padding: 70px 80px;
+	display: flex;
+	flex-direction: column;
+	gap: 56px;
+}
+.brand {
+	display: flex;
+	align-items: center;
+	gap: 36px;
+	font-size: 64px;
+	font-weight: 700;
+}
+.brand img {
+	width: 136px;
+	height: 136px;
+}
+h1 {
+	margin: 0;
+	font-size: 66px;
+	line-height: 1.2;
+	font-weight: 700;
+	letter-spacing: -0.02em;
+}
+h1 span {
+	background: linear-gradient(transparent 72%, rgb(61 125 255 / 30%) 72%);
+}
+p {
+	margin: 0;
+	color: #a9b1bc;
+	font-size: 30px;
+}
+</style>
+</head>
+<body>
+<div class="brand"><img src="../mac/icon.svg" alt="">byre</div>
+<h1>A crew of coding agents,<br><span>on all your Macs.</span></h1>
+<p>Claude Code, Codex and Antigravity, side by side.</p>
+</body>
+</html>
diff --git a/site/deploy.sh b/site/deploy.sh
index 67831fb..53f66e9 100755
--- a/site/deploy.sh
+++ b/site/deploy.sh
@@ -10,6 +10,7 @@ stage=$(mktemp -d)
 trap 'rm -rf "$stage"' EXIT
 cp "$site/index.html" "$mac/icon.svg" "$stage/"
 rsvg-convert --width 180 --height 180 --output "$stage/icon.png" "$mac/icon.svg"
+"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --hide-scrollbars --force-device-scale-factor=1 --window-size=1200,630 --screenshot="$stage/card.png" "file://$site/card.html"
 mkdir "$stage/fonts"
 cp "$mac"/fonts/*.woff2 "$stage/fonts/"
 npx --yes wrangler@4.151.2 pages deploy "$stage" --project-name byre --branch main --commit-dirty=true
diff --git a/site/index.html b/site/index.html
index 24c0a7a..9fca17c 100644
--- a/site/index.html
+++ b/site/index.html
@@ -8,6 +8,16 @@
 <link rel="icon" href="/icon.png" type="image/png" sizes="180x180">
 <link rel="icon" href="/icon.svg" type="image/svg+xml">
 <link rel="apple-touch-icon" href="/icon.png">
+<meta property="og:type" content="website">
+<meta property="og:url" content="https://byre.run/">
+<meta property="og:site_name" content="byre">
+<meta property="og:title" content="byre: a crew of coding agents, on all your Macs">
+<meta property="og:description" content="Run Claude Code, Codex and Antigravity side by side, each on its own branch, with a lead agent that tells you what needs you.">
+<meta property="og:image" content="https://byre.run/card.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:image:alt" content="byre: A crew of coding agents, on all your Macs.">
+<meta name="twitter:card" content="summary_large_image">
 <style>
 @font-face {
 	font-family: "Atkinson Hyperlegible Mono";