diff --git a/.gitignore b/.gitignore
index 81ab24e..39a7a37 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,10 @@ seeds/
# OS
.DS_Store
+
+# wrangler files
+.wrangler
+.dev.vars*
+!.dev.vars.example
+.env*
+!.env.example
diff --git a/opengraph/README.md b/opengraph/README.md
new file mode 100644
index 0000000..1776968
--- /dev/null
+++ b/opengraph/README.md
@@ -0,0 +1,19 @@
+# OpenGraph Worker
+
+Cloudflare Worker that injects dynamic `og:title`, `og:description`, `og:image`, and `og:url` into the atbbs SPA for link previews on social platforms.
+
+Handles two route patterns:
+
+- `/bbs/*` — rewrites the HTML `` tags with BBS/board/thread metadata from Slingshot
+- `/og/bbs/*.png` — generates a branded 1200x630 preview image on the fly
+
+## Deploy
+
+```bash
+cd opengraph
+npm install
+npx wrangler login
+npx wrangler deploy -c wrangler.toml
+```
+
+Requires `atbbs.xyz` to be proxied through Cloudflare.
diff --git a/opengraph/hero-light.svg b/opengraph/hero-light.svg
new file mode 100644
index 0000000..bc12127
--- /dev/null
+++ b/opengraph/hero-light.svg
@@ -0,0 +1,66 @@
+
diff --git a/opengraph/index.ts b/opengraph/index.ts
new file mode 100644
index 0000000..d1b36a2
--- /dev/null
+++ b/opengraph/index.ts
@@ -0,0 +1,340 @@
+import { ImageResponse, loadGoogleFont } from "workers-og";
+import heroLogoSvg from "./hero-light.svg";
+
+const SLINGSHOT_URL = "https://slingshot.microcosm.blue/xrpc";
+
+const DEFAULT_TITLE = "atbbs";
+const DEFAULT_DESCRIPTION = "Decentralized forums on the AT Protocol.";
+
+// Tailwind neutral palette — matches the site's light theme.
+const COLORS = {
+ background: "#fafafa", // neutral-50
+ title: "#171717", // neutral-900
+ subtitle: "#525252", // neutral-600
+ description: "#525252", // neutral-600
+};
+
+// Types
+
+interface Route {
+ type: "bbs" | "board" | "thread" | "news";
+ handle: string;
+ slug?: string;
+ did?: string;
+ rkey?: string;
+}
+
+interface Metadata {
+ title: string;
+ subtitle: string;
+ description: string;
+}
+
+interface SlingshotIdentity {
+ did: string;
+ handle: string;
+ pds?: string;
+}
+
+interface SlingshotRecord {
+ uri: string;
+ cid: string;
+ value: Record;
+}
+
+// Utils
+
+function escapeHtml(text: string): string {
+ return text
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """);
+}
+
+function truncate(text: string, maxLength: number): string {
+ if (text.length <= maxLength) return text;
+ return text.substring(0, maxLength - 3) + "...";
+}
+
+// Slingshot
+
+async function resolveIdentity(
+ handle: string,
+): Promise {
+ const response = await fetch(
+ `${SLINGSHOT_URL}/blue.microcosm.identity.resolveMiniDoc?identifier=${encodeURIComponent(handle)}`,
+ );
+ if (!response.ok) return null;
+ return (await response.json()) as SlingshotIdentity;
+}
+
+async function fetchRecord(
+ did: string,
+ collection: string,
+ recordKey: string,
+): Promise {
+ const response = await fetch(
+ `${SLINGSHOT_URL}/com.atproto.repo.getRecord?repo=${encodeURIComponent(did)}&collection=${encodeURIComponent(collection)}&rkey=${encodeURIComponent(recordKey)}`,
+ );
+ if (!response.ok) return null;
+ return (await response.json()) as SlingshotRecord;
+}
+
+async function fetchSiteName(did: string, fallback: string): Promise {
+ const siteRecord = await fetchRecord(did, "xyz.atbbs.site", "self");
+ return siteRecord ? siteRecord.value.name : fallback;
+}
+
+// --- Route parsing ---
+
+function parseRoute(path: string): Route | null {
+ // Strip /og prefix and .png suffix so this works for both HTML and image routes.
+ const normalizedPath = path.replace(/^\/og/, "").replace(/\.png$/, "");
+
+ const bbsMatch = normalizedPath.match(/^\/bbs\/([^/]+)$/);
+ if (bbsMatch) return { type: "bbs", handle: bbsMatch[1] };
+
+ const boardMatch = normalizedPath.match(/^\/bbs\/([^/]+)\/board\/([^/]+)$/);
+ if (boardMatch)
+ return { type: "board", handle: boardMatch[1], slug: boardMatch[2] };
+
+ const threadMatch = normalizedPath.match(
+ /^\/bbs\/([^/]+)\/thread\/([^/]+)\/([^/]+)$/,
+ );
+ if (threadMatch)
+ return {
+ type: "thread",
+ handle: threadMatch[1],
+ did: threadMatch[2],
+ rkey: threadMatch[3],
+ };
+
+ const newsMatch = normalizedPath.match(/^\/bbs\/([^/]+)\/news\/([^/]+)$/);
+ if (newsMatch)
+ return { type: "news", handle: newsMatch[1], rkey: newsMatch[2] };
+
+ return null;
+}
+
+// Metadata
+
+async function fetchMetadata(route: Route): Promise {
+ const identity = await resolveIdentity(route.handle);
+ if (!identity) return null;
+
+ if (route.type === "bbs") {
+ const siteRecord = await fetchRecord(
+ identity.did,
+ "xyz.atbbs.site",
+ "self",
+ );
+ if (siteRecord) {
+ return {
+ title: siteRecord.value.name,
+ subtitle: "",
+ description: siteRecord.value.description || "",
+ };
+ }
+ } else if (route.type === "board") {
+ const siteName = await fetchSiteName(identity.did, route.handle);
+ const boardRecord = await fetchRecord(
+ identity.did,
+ "xyz.atbbs.board",
+ route.slug!,
+ );
+ if (boardRecord) {
+ return {
+ title: boardRecord.value.name,
+ subtitle: siteName,
+ description: boardRecord.value.description || "",
+ };
+ }
+ } else if (route.type === "thread") {
+ const siteName = await fetchSiteName(identity.did, route.handle);
+ const postRecord = await fetchRecord(
+ route.did!,
+ "xyz.atbbs.post",
+ route.rkey!,
+ );
+ if (postRecord) {
+ return {
+ title: postRecord.value.title || "Thread",
+ subtitle: siteName,
+ description: postRecord.value.body || "",
+ };
+ }
+ } else if (route.type === "news") {
+ const siteName = await fetchSiteName(identity.did, route.handle);
+ const postRecord = await fetchRecord(
+ identity.did,
+ "xyz.atbbs.post",
+ route.rkey!,
+ );
+ if (postRecord) {
+ return {
+ title: postRecord.value.title || "News",
+ subtitle: siteName,
+ description: postRecord.value.body || "",
+ };
+ }
+ }
+
+ return null;
+}
+
+// Generate OG Images
+
+const HERO_LOGO_DATA_URI =
+ "data:image/svg+xml," + encodeURIComponent(heroLogoSvg);
+
+async function renderOgImage(
+ title: string,
+ subtitle: string,
+ description: string,
+): Promise {
+ const displayTitle = escapeHtml(truncate(title, 40));
+ const displaySubtitle = escapeHtml(subtitle);
+ const displayDescription = escapeHtml(truncate(description, 120));
+
+ const fontData = await loadGoogleFont({
+ family: "Geist Mono",
+ weight: 400,
+ });
+
+ const subtitleHtml = displaySubtitle
+ ? `${displaySubtitle}
`
+ : "";
+
+ const html = `
+
+
+
+ ${subtitleHtml}
+
${displayTitle}
+
${displayDescription}
+
+