feat(website): implement dynamic OG image generation

website/.gitignore

@@ -39,3 +39,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# package managers — use bun only
+package-lock.json
+yarn.lock
+pnpm-lock.yaml

website/app/api/og/route.tsx

@@ -0,0 +1,13 @@
+import { NextRequest } from "next/server";
+import { renderOgImage } from "../../lib/og-image";
+
+export const runtime = "edge";
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+
+  const title = searchParams.get("title") ?? undefined;
+  const description = searchParams.get("description") ?? undefined;
+
+  return renderOgImage(title, description);
+}

website/app/layout.tsx

@@ -35,12 +35,21 @@ export const metadata: Metadata = {
     url: "/",
     siteName: "RxCode",
     locale: "en_US",
+    images: [
+      {
+        url: "/api/og",
+        width: 1200,
+        height: 630,
+        alt: "RxCode — The Visual Command Center for AI Coding Agents",
+      },
+    ],
   },
   twitter: {
     card: "summary_large_image",
     title: "RxCode — The Visual Command Center for AI Coding Agents",
     description:
       "A native macOS desktop client for AI coding agents. Visual sessions, project tree, and code review in one place.",
+    images: ["/api/og"],
   },
 };
 

website/app/lib/og-image.tsx

@@ -0,0 +1,128 @@
+import { ImageResponse } from "next/og";
+
+export const OG_SIZE = { width: 1200, height: 630 };
+
+export function renderOgImage(
+  title = "The Visual Command Center for AI Coding Agents",
+  description = "Native macOS · Claude Code & Codex · Free & Open Source"
+): ImageResponse {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          background: "#0E0E0F",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          fontFamily: "system-ui, sans-serif",
+          padding: "80px",
+          position: "relative",
+        }}
+      >
+        {/* Subtle grid overlay */}
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            backgroundImage:
+              "linear-gradient(rgba(217,119,87,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(217,119,87,0.06) 1px, transparent 1px)",
+            backgroundSize: "40px 40px",
+            display: "flex",
+          }}
+        />
+
+        {/* Glow */}
+        <div
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -60%)",
+            width: "600px",
+            height: "400px",
+            background:
+              "radial-gradient(ellipse, rgba(217,119,87,0.18) 0%, transparent 70%)",
+            display: "flex",
+          }}
+        />
+
+        {/* Logo + Name */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "20px",
+            marginBottom: "40px",
+          }}
+        >
+          <div
+            style={{
+              width: "76px",
+              height: "76px",
+              background: "#D97757",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "14px",
+            }}
+          >
+            <span
+              style={{
+                color: "#FFFFFF",
+                fontSize: "34px",
+                fontWeight: 700,
+                letterSpacing: "-0.5px",
+              }}
+            >
+              Rx
+            </span>
+          </div>
+          <span
+            style={{
+              color: "#F5F0EB",
+              fontSize: "60px",
+              fontWeight: 700,
+              letterSpacing: "-1px",
+            }}
+          >
+            RxCode
+          </span>
+        </div>
+
+        {/* Headline */}
+        <div
+          style={{
+            color: "#F5F0EB",
+            fontSize: "38px",
+            fontWeight: 600,
+            textAlign: "center",
+            lineHeight: 1.25,
+            maxWidth: "820px",
+          }}
+        >
+          {title}
+        </div>
+
+        {/* Sub-label */}
+        <div
+          style={{
+            color: "#7A6E68",
+            fontSize: "22px",
+            marginTop: "28px",
+            letterSpacing: "0.12em",
+            textTransform: "uppercase",
+            display: "flex",
+            gap: "16px",
+            alignItems: "center",
+          }}
+        >
+          {description}
+        </div>
+      </div>
+    ),
+    { ...OG_SIZE }
+  );
+}

website/app/opengraph-image.tsx

@@ -1,133 +1,11 @@
-import { ImageResponse } from "next/og";
+import { renderOgImage } from "./lib/og-image";
 
 export const runtime = "edge";
 
 export const alt = "RxCode — The Visual Command Center for AI Coding Agents";
 export const size = { width: 1200, height: 630 };
 export const contentType = "image/png";
 
-export default async function Image() {
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          background: "#0E0E0F",
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          fontFamily: "system-ui, sans-serif",
-          padding: "80px",
-          position: "relative",
-        }}
-      >
-        {/* Subtle grid overlay */}
-        <div
-          style={{
-            position: "absolute",
-            inset: 0,
-            backgroundImage:
-              "linear-gradient(rgba(217,119,87,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(217,119,87,0.06) 1px, transparent 1px)",
-            backgroundSize: "40px 40px",
-            display: "flex",
-          }}
-        />
-
-        {/* Glow */}
-        <div
-          style={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -60%)",
-            width: "600px",
-            height: "400px",
-            background: "radial-gradient(ellipse, rgba(217,119,87,0.18) 0%, transparent 70%)",
-            display: "flex",
-          }}
-        />
-
-        {/* Logo + Name */}
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: "20px",
-            marginBottom: "40px",
-          }}
-        >
-          <div
-            style={{
-              width: "76px",
-              height: "76px",
-              background: "#D97757",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              borderRadius: "14px",
-            }}
-          >
-            <span
-              style={{
-                color: "#FFFFFF",
-                fontSize: "34px",
-                fontWeight: 700,
-                letterSpacing: "-0.5px",
-              }}
-            >
-              Rx
-            </span>
-          </div>
-          <span
-            style={{
-              color: "#F5F0EB",
-              fontSize: "60px",
-              fontWeight: 700,
-              letterSpacing: "-1px",
-            }}
-          >
-            RxCode
-          </span>
-        </div>
-
-        {/* Headline */}
-        <div
-          style={{
-            color: "#F5F0EB",
-            fontSize: "38px",
-            fontWeight: 600,
-            textAlign: "center",
-            lineHeight: 1.25,
-            maxWidth: "820px",
-          }}
-        >
-          The Visual Command Center for{" "}
-          <span style={{ color: "#D97757" }}>AI Coding Agents</span>
-        </div>
-
-        {/* Sub-label */}
-        <div
-          style={{
-            color: "#7A6E68",
-            fontSize: "22px",
-            marginTop: "28px",
-            letterSpacing: "0.12em",
-            textTransform: "uppercase",
-            display: "flex",
-            gap: "16px",
-            alignItems: "center",
-          }}
-        >
-          <span>Native macOS</span>
-          <span style={{ color: "#D97757", fontSize: "10px" }}>●</span>
-          <span>Claude Code &amp; Codex</span>
-          <span style={{ color: "#D97757", fontSize: "10px" }}>●</span>
-          <span>Free &amp; Open Source</span>
-        </div>
-      </div>
-    ),
-    { ...size }
-  );
+export default function Image() {
+  return renderOgImage();
 }