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 @@...@@ -1,7 +1,7 @@
1---1---
2import { getImage, Image } from "astro:assets";2import { getImage, Image } from "astro:assets";
3import appIcon from "../assets/icon.webp";3import appIcon from "../assets/icon.webp";
4import desktopScreenshot from "../assets/app-desktop.webp";4import socialCard from "../assets/social-card.webp";
5import dmSansLatinUrl from "../assets/fonts/dm-sans-latin.woff2?url";5import dmSansLatinUrl from "../assets/fonts/dm-sans-latin.woff2?url";
6import "../styles/fonts.css";6import "../styles/fonts.css";
7import {7import {
...@@ -23,19 +23,19 @@ const {...@@ -23,19 +23,19 @@ const {
23 pageClass,23 pageClass,
24} = Astro.props;24} = Astro.props;
2525
26// Social preview card. Link unfurlers (Instagram, iMessage, X, Slack) want a26// Social preview card, shared by og:image and twitter:image. Link unfurlers
27// 1200x630 jpg or png at an absolute URL. Built from the hero screenshot so it27// (Instagram, iMessage, X, Slack) want a 1200x630 jpg or png at an absolute URL.
28// stays in sync with the homepage.28// The source is a 2x export so the downscale stays sharp.
29const socialImage = await getImage({29const socialImage = await getImage({
30 src: desktopScreenshot,30 src: socialCard,
31 width: 1200,31 width: 1200,
32 height: 630,32 height: 630,
33 fit: "cover",
34 position: "top",
35 format: "jpg",33 format: "jpg",
36 quality: 90,34 quality: 90,
37});35});
38const socialImageUrl = new URL(socialImage.src, Astro.site);36const 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.";
39const canonicalUrl = new URL(Astro.url.pathname, Astro.site);39const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
40---40---
4141
...@@ -53,12 +53,13 @@ const canonicalUrl = new URL(Astro.url.pathname, Astro.site);...@@ -53,12 +53,13 @@ const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
53 <meta property="og:image" content={socialImageUrl} />53 <meta property="og:image" content={socialImageUrl} />
54 <meta property="og:image:width" content="1200" />54 <meta property="og:image:width" content="1200" />
55 <meta property="og:image:height" content="630" />55 <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} />
57 <meta name="twitter:card" content="summary_large_image" />57 <meta name="twitter:card" content="summary_large_image" />
58 <meta name="twitter:site" content="@t3dotgg" />58 <meta name="twitter:site" content="@t3dotgg" />
59 <meta name="twitter:title" content={title} />59 <meta name="twitter:title" content={title} />
60 <meta name="twitter:description" content={description} />60 <meta name="twitter:description" content={description} />
61 <meta name="twitter:image" content={socialImageUrl} />61 <meta name="twitter:image" content={socialImageUrl} />
62 <meta name="twitter:image:alt" content={socialImageAlt} />
62 <link63 <link
63 rel="preload"64 rel="preload"
64 href={dmSansLatinUrl}65 href={dmSansLatinUrl}