authorgravatar for 97427849+flamboh@users.noreply.github.comoliver <97427849+flamboh@users.noreply.github.com> 2026-10-01 11:55:51-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-10-01 15:55:51-03:00
logb91e4668fa2b8e4ac0044e65a08dc6b5e51dfbcf
tree92b1d84cd7afc5fdec305fc6a4e6918fec825850
parentbed69f6ea41dab13ec37afbaaa2c911a19865f7a
signature Signed by PGP key B5690EEEBB952194

feat(marketing): replace the screenshot crop with a designed social card (#13487)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

2 files changed, 9 insertions(+), 8 deletions(-)

apps/marketing/src/assets/social-card.webp created
Binary files /dev/null and b/apps/marketing/src/assets/social-card.webp differ
apps/marketing/src/layouts/Layout.astro+9-8
......@@ -1,7 +1,7 @@
11---
22import { getImage, Image } from "astro:assets";
33import appIcon from "../assets/icon.webp";
4import desktopScreenshot from "../assets/app-desktop.webp";
4import socialCard from "../assets/social-card.webp";
55import dmSansLatinUrl from "../assets/fonts/dm-sans-latin.woff2?url";
66import "../styles/fonts.css";
77import {
......@@ -23,19 +23,19 @@ const {
2323 pageClass,
2424} = Astro.props;
2525
26// Social preview card. Link unfurlers (Instagram, iMessage, X, Slack) want a
27// 1200x630 jpg or png at an absolute URL. Built from the hero screenshot so it
28// stays in sync with the homepage.
26// Social preview card, shared by og:image and twitter:image. Link unfurlers
27// (Instagram, iMessage, X, Slack) want a 1200x630 jpg or png at an absolute URL.
28// The source is a 2x export so the downscale stays sharp.
2929const socialImage = await getImage({
30 src: desktopScreenshot,
30 src: socialCard,
3131 width: 1200,
3232 height: 630,
33 fit: "cover",
34 position: "top",
3533 format: "jpg",
3634 quality: 90,
3735});
3836const socialImageUrl = new URL(socialImage.src, Astro.site);
37const socialImageAlt =
38 "T3 Code: the open-source control plane for coding agents, with Claude Code, Codex, Cursor, OpenCode, Grok and Antigravity.";
3939const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
4040---
4141
......@@ -53,12 +53,13 @@ const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
5353 <meta property="og:image" content={socialImageUrl} />
5454 <meta property="og:image:width" content="1200" />
5555 <meta property="og:image:height" content="630" />
56 <meta property="og:image:alt" content="The T3 Code desktop app with a thread open." />
56 <meta property="og:image:alt" content={socialImageAlt} />
5757 <meta name="twitter:card" content="summary_large_image" />
5858 <meta name="twitter:site" content="@t3dotgg" />
5959 <meta name="twitter:title" content={title} />
6060 <meta name="twitter:description" content={description} />
6161 <meta name="twitter:image" content={socialImageUrl} />
62 <meta name="twitter:image:alt" content={socialImageAlt} />
6263 <link
6364 rel="preload"
6465 href={dmSansLatinUrl}