Social previews: align og image with the SAMA pivot, switch to PNG (#8)
The og.svg still rendered the prior identity — "tdd.md / test-driven development for agentic coding / red → green → refactor" — so every share on X, LinkedIn, Slack, Discord was selling the old product story even though the homepage now leads with SAMA. Two fixes: 1. Rewrite public/og.svg with SAMA branding: title "SAMA", subtitle "The architectural standard for AI-agent codebases", pillar band "Sorted · Architecture · Modeled · Atomic". 2. Render public/og.png from the new SVG and point og:image and twitter:image at the PNG (with og:image:type=image/png). Most social platforms reject SVG OG images; PNG renders everywhere. Closes #8. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
3 files changed · +13 −11
public/og.png
+0
−0
public/og.svg
+10
−8
| @@ -1,15 +1,17 @@ | ||
| 1 | 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630"> |
| 2 | 2 | <rect width="1200" height="630" fill="#0a0a0a"/> |
| 3 | 3 | <g font-family="ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace"> |
| 4 | - <text x="80" y="240" font-size="140" font-weight="600" fill="#e8e8e8" letter-spacing="-2">tdd.md</text> | |
| 5 | - <text x="80" y="320" font-size="38" fill="#8a8a8a">test-driven development for agentic coding</text> | |
| 4 | + <text x="80" y="260" font-size="180" font-weight="600" fill="#e8e8e8" letter-spacing="-2">SAMA</text> | |
| 5 | + <text x="80" y="340" font-size="36" fill="#8a8a8a">The architectural standard for AI-agent codebases</text> | |
| 6 | 6 | </g> |
| 7 | - <g font-family="ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace" font-size="44" font-weight="600"> | |
| 8 | - <text x="80" y="500" fill="#ff7a7a">red</text> | |
| 9 | - <text x="220" y="500" fill="#8a8a8a">→</text> | |
| 10 | - <text x="280" y="500" fill="#5fd97a">green</text> | |
| 11 | - <text x="470" y="500" fill="#8a8a8a">→</text> | |
| 12 | - <text x="530" y="500" fill="#5fb3ff">refactor</text> | |
| 7 | + <g font-family="ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace" font-size="40" font-weight="600"> | |
| 8 | + <text x="80" y="500" fill="#e8e8e8">Sorted</text> | |
| 9 | + <text x="240" y="500" fill="#5a5a5a">·</text> | |
| 10 | + <text x="275" y="500" fill="#e8e8e8">Architecture</text> | |
| 11 | + <text x="565" y="500" fill="#5a5a5a">·</text> | |
| 12 | + <text x="600" y="500" fill="#e8e8e8">Modeled</text> | |
| 13 | + <text x="800" y="500" fill="#5a5a5a">·</text> | |
| 14 | + <text x="835" y="500" fill="#e8e8e8">Atomic</text> | |
| 13 | 15 | </g> |
| 14 | 16 | <text x="80" y="570" font-family="ui-sans-serif, system-ui, sans-serif" font-size="22" fill="#5a5a5a">https://tdd.md</text> |
| 15 | 17 | </svg> |
src/c51_render_layout.ts
+3
−3
| @@ -67,15 +67,15 @@ ${robots}<link rel="canonical" href="${escape(ogPath)}"> | ||
| 67 | 67 | <meta property="og:description" content="${escape(description)}"> |
| 68 | 68 | <meta property="og:type" content="website"> |
| 69 | 69 | <meta property="og:url" content="${escape(ogPath)}"> |
| 70 | -<meta property="og:image" content="https://tdd.md/og.svg"> | |
| 71 | -<meta property="og:image:type" content="image/svg+xml"> | |
| 70 | +<meta property="og:image" content="https://tdd.md/og.png"> | |
| 71 | +<meta property="og:image:type" content="image/png"> | |
| 72 | 72 | <meta property="og:image:width" content="1200"> |
| 73 | 73 | <meta property="og:image:height" content="630"> |
| 74 | 74 | <meta property="og:site_name" content="tdd.md"> |
| 75 | 75 | <meta name="twitter:card" content="summary_large_image"> |
| 76 | 76 | <meta name="twitter:title" content="${escape(opts.title)}"> |
| 77 | 77 | <meta name="twitter:description" content="${escape(description)}"> |
| 78 | -<meta name="twitter:image" content="https://tdd.md/og.svg"> | |
| 78 | +<meta name="twitter:image" content="https://tdd.md/og.png"> | |
| 79 | 79 | <title>${escape(opts.title)}</title> |
| 80 | 80 | ${jsonLd}<style>${css}</style> |
| 81 | 81 | </head> |