Add OG image for social media previews (#1861)

Browse source

* Add dynamic OG image and use large Twitter cards

Generate a 1200x630 OG image with the cmux logo, tagline, and
description using next/og ImageResponse. Switch Twitter card type
from "summary" to "summary_large_image" across all pages so shared
links show a full-width preview instead of the tiny favicon thumbnail.

* Use Geist font and app screenshot in OG image, update landing/README images

Replace the centered text-only OG image with a split layout: branding
on the left (logo, name, tagline) and a full app screenshot on the
right. Load Geist Regular/SemiBold from Google Fonts for consistent
typography. Replace the homepage landing image and README screenshot
with a new screenshot showing cmux with multiple workspaces, tabs,
browser panel, and code diffs.

* Fine-tune OG image layout and update homepage/README screenshots

Apply tuned values from OG editor: 112px logo, 48px title with -8
translateY, 34px subtitle at #cfcfcf, 320px fade height. Use Geist
font loaded from Google Fonts. Render at 2x (2400x1260) for sharper
previews on social platforms. Remove GitHub URL from footer.

Add pre-resized og-screenshot.png (2208px wide) for the OG image to
avoid Satori downscale blur. Update homepage landing image and README
screenshot with new app screenshot.

---------

Co-authored-by: Lawrence Chen <lawrencecchen@users.noreply.github.com>

...

This commit is contained in:

Lawrence Chen 2026-03-20 19:01:29 -07:00 • committed by GitHub

parent 4376e6e19a

commit 39c03c9b07

No known key found for this signature in database

GPG key ID: B5690EEEBB952194

9 changed files with 139 additions and 5 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download patch file Download diff file Expand all files Collapse all files

BIN

docs/assets/main-first-image.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 1.8 MiB After Width:  |  Height:  |  Size: 3.4 MiB