feat(site): showcase themes and social sharing

app/components/PreviewTabs.tsx

@@ -11,36 +11,36 @@ const previews: Record<Preview, { label: string; title: string; image: string; a
     label: "Edit",
     title: "Rendering pipeline",
     image: "/ghostty-code.jpg",
-    alt: "Red editing its Rust rendering pipeline with the project tree open",
-    note: "src/editor/rendering.rs · Rust · tree-sitter",
+    alt: "Red using the Kanso Ink theme while editing its Rust rendering pipeline with the project tree open",
+    note: "Kanso Ink · Rust · tree-sitter",
   },
   find: {
     label: "Files",
     title: "Find source files",
     image: "/ghostty-picker-demo.jpg",
-    alt: "Red file picker filtering its own rendering and buffer source files",
-    note: "Ctrl-p · fuzzy files · live preview",
+    alt: "Red using the GitHub Light theme with its file picker filtering rendering and buffer source files",
+    note: "GitHub Light · fuzzy files · live preview",
   },
   commands: {
     label: "Commands",
     title: "Discover Git actions",
     image: "/ghostty-commands-demo.jpg",
-    alt: "Red command palette showing Git hunk navigation, stage, reset, and unstage actions",
-    note: "Space ? · 74 commands · shortcuts included",
+    alt: "Red using the Tokyo Night Storm theme with its command palette showing Git hunk actions",
+    note: "Tokyo Night Storm · 74 commands · shortcuts",
   },
   agent: {
     label: "Agent",
     title: "Ask with context",
     image: "/ghostty-agent.jpg",
-    alt: "Red agent prompt asking about tree-sitter injections over the editor highlighter source",
-    note: "Space A · source-aware prompt",
+    alt: "Red using the Rosé Pine Dawn theme with an agent prompt over the editor highlighter source",
+    note: "Rosé Pine Dawn · source-aware prompt",
   },
   git: {
     label: "Git review",
     title: "Review a real diff",
     image: "/ghostty-git-workspace.jpg",
-    alt: "Red Git workspace reviewing an unstaged change to its rendering pipeline",
-    note: "Space G · unstaged rendering diff",
+    alt: "Red using the Cyberdream theme with its Git workspace reviewing an unstaged rendering change",
+    note: "Cyberdream · unstaged rendering diff",
   },
   splash: {
     label: "Welcome",

app/layout.tsx

@@ -13,7 +13,7 @@ export async function generateMetadata(): Promise<Metadata> {
   const requestHeaders = await headers();
   const host = requestHeaders.get("x-forwarded-host") ?? requestHeaders.get("host") ?? "localhost:4173";
   const protocol = requestHeaders.get("x-forwarded-proto") === "http" ? "http" : "https";
-  const socialImage = `${protocol}://${host}/og.png`;
+  const socialImage = `${protocol}://${host}/og.png?v=2`;
 
   return {
     metadataBase: new URL(canonicalOrigin),
@@ -22,8 +22,8 @@ export async function generateMetadata(): Promise<Metadata> {
     alternates: { canonical: "/" },
     icons: { icon: "/favicon.svg", shortcut: "/favicon.svg" },
     other: { "theme-color": "#101014" },
-    openGraph: { title: "red — the modal editor for the agent era", description: "Every agent edit is a proposal. Nothing touches your files until you accept it.", type: "website", images: [{ url: socialImage, width: 1200, height: 630, alt: "Red editor and agent proposal preview" }] },
-    twitter: { card: "summary_large_image", title: "red — the modal editor for the agent era", description: "Fast modal editing. Modern code intelligence. Reviewable agent proposals.", images: [socialImage] },
+    openGraph: { title: "red — the modal editor for the agent era", description: "Every agent edit is a proposal. Nothing touches your files until you accept it.", type: "website", images: [{ url: socialImage, width: 1200, height: 630, alt: "Red modal editor alongside a reviewable agent proposal" }] },
+    twitter: { card: "summary_large_image", title: "red — the modal editor for the agent era", description: "Every agent edit is a proposal. Nothing touches your files until you accept it.", images: [socialImage] },
   };
 }
 

app/page.tsx

@@ -34,7 +34,7 @@ export default function Home() {
         </div>
         <div className="hero-shot">
           <div className="hero-shot-bar"><span className="preview-dot" /><span>src/editor/rendering.rs</span><span className="hero-shot-note">real capture · Ghostty</span></div>
-          <Image src="/ghostty-code.jpg" width={1208} height={704} alt="Red editing its Rust rendering pipeline with the project file tree open and the NORMAL-mode status bar visible" priority unoptimized />
+          <Image src="/ghostty-code.jpg" width={1208} height={704} alt="Red using the Kanso Ink theme while editing its Rust rendering pipeline with the project file tree open" priority unoptimized />
         </div>
       </div>
     </section>
@@ -50,14 +50,14 @@ export default function Home() {
     </section>
 
     <section className="capture-grid shell" aria-label="Navigation previews">
-      <figure><Image src="/ghostty-picker-demo.jpg" width={1208} height={704} unoptimized alt="Red file picker showing its rendering source and a live buffer preview" /><figcaption><span>FIND SOURCE FILES</span><kbd>Ctrl-p</kbd></figcaption></figure>
-      <figure><Image src="/ghostty-commands-demo.jpg" width={1208} height={704} unoptimized alt="Red command palette showing real Git hunk actions and shortcuts" /><figcaption><span>DISCOVER COMMANDS</span><kbd>Space ?</kbd></figcaption></figure>
+      <figure><Image src="/ghostty-picker-demo.jpg" width={1208} height={704} unoptimized alt="Red using the GitHub Light theme with its file picker and live buffer preview" /><figcaption><span>FIND SOURCE FILES</span><kbd>Ctrl-p</kbd></figcaption></figure>
+      <figure><Image src="/ghostty-commands-demo.jpg" width={1208} height={704} unoptimized alt="Red using the Tokyo Night Storm theme with its Git command palette" /><figcaption><span>DISCOVER COMMANDS</span><kbd>Space ?</kbd></figcaption></figure>
     </section>
 
     <section className="trust shell" id="trust">
       <div className="trust-copy"><span className="eyebrow"><span className="pulse" /> agent workflow</span><h2>Let the agent help.<br /><em>Keep the final say.</em></h2><p>Red can give an agent the context it needs, including unsaved buffers, while staging every suggested write in an isolated proposal filesystem. Review the diff, then accept or reject it explicitly.</p><blockquote>every agent edit is a proposal —<br />nothing touches your files until you accept it</blockquote></div>
       <div className="trust-side">
-        <figure className="trust-shot"><Image src="/ghostty-agent.jpg" width={1208} height={704} unoptimized alt="Red agent prompt asking a contextual question over the editor highlighter source" /><figcaption><span>ASK WITH SOURCE CONTEXT</span><kbd>Space A</kbd></figcaption></figure>
+        <figure className="trust-shot"><Image src="/ghostty-agent.jpg" width={1208} height={704} unoptimized alt="Red using the Rosé Pine Dawn theme with an agent prompt over the editor highlighter source" /><figcaption><span>ASK WITH SOURCE CONTEXT</span><kbd>Space A</kbd></figcaption></figure>
         <div className="trust-steps"><div><span>01</span><h3>Ask</h3><p>Open the agent from the editor with the right workspace context.</p><kbd>Space A</kbd></div><div><span>02</span><h3>Review</h3><p>Inspect attributed changes as clear, isolated proposals.</p><kbd>:AgentReview</kbd></div><div><span>03</span><h3>Decide</h3><p>Accept what helps. Reject what does not. Nothing is silently applied.</p><kbd>your call</kbd></div></div>
       </div>
     </section>

tests/rendered-html.test.mjs

@@ -30,21 +30,26 @@ test("server-renders the Red website proposal", async () => {
   assert.match(html, /every agent edit is a proposal/i);
   assert.match(html, /Space A/);
   assert.match(html, /:AgentReview/);
-  assert.match(html, /https:\/\/red\.example\/og\.png/);
+  assert.match(html, /https:\/\/red\.example\/og\.png\?v=2/);
   assert.match(html, /ghostty-code\.jpg/);
   assert.match(html, /role="tablist"/i);
   assert.match(html, /role="tabpanel"/i);
   assert.match(html, /aria-selected="true"/i);
   assert.match(html, /Discover Git actions/i);
   assert.match(html, /id="preview-tab-splash"[^>]*>Welcome<\/button>/i);
-  assert.match(html, /src\/editor\/rendering\.rs/i);
+  for (const theme of ["Kanso Ink", "GitHub Light", "Tokyo Night Storm", "Rosé Pine Dawn"]) {
+    assert.match(html, new RegExp(theme, "i"));
+  }
+  const previewSource = await readFile(new URL("../app/components/PreviewTabs.tsx", import.meta.url), "utf8");
+  assert.match(previewSource, /Cyberdream/i);
   assert.doesNotMatch(html, /red-editor-demo|src\/main\.rs|codex-preview|react-loading-skeleton|Your site is taking shape/i);
 });
 
 test("ships SEO metadata: canonical, theme-color, and structured data", async () => {
   const html = await (await render()).text();
   assert.match(html, /<link rel="canonical" href="https:\/\/getred\.dev\/"\/>/);
   assert.match(html, /<meta name="theme-color" content="#101014"\/>/);
+  assert.match(html, /Red modal editor alongside a reviewable agent proposal/);
   assert.match(html, /application\/ld\+json/);
   assert.match(html, /"@type":"SoftwareApplication"/);
   assert.match(html, /"softwareVersion":"0\.2\.0"/);