oli/rdbms-playground
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(website): Open Graph social card

Browse Source 
Add a 1200x630 social card (dark bg, monospace, teal database-table
motif, the relplay/RDBMS reveal) shown when pages are shared. Source
SVG in src/assets/og-card.svg, rasterised to public/og-card.png with
sharp. Wire site-wide og:image + twitter summary_large_image tags via
Starlight head, with the absolute relplay.org URL.
This commit is contained in:
claude@clouddev1
2026-06-11 18:59:02 +00:00
parent abd3739168
commit 09b64cbfb7
3 changed files with 52 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/assets/og-card.svg
+33
View File
@@ -0,0 +1,33 @@
<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
<!-- Source for the Open Graph social card. Dark = the app's own background;
teal = the in-TUI identifier colour; monospace = the terminal aesthetic.
Regenerate the PNG after editing:
node -e "require('sharp')('src/assets/og-card.svg').resize(1200,630).png().toFile('public/og-card.png')"
-->
<rect width="1200" height="630" fill="#181B22"/>
<!-- right: a database-table motif (the brand mark at hero scale) -->
<g stroke="#56B6C2" stroke-width="2.4" fill="none" opacity="0.5">
<rect x="772" y="166" width="350" height="298" rx="16"/>
<path d="M772 232 H1122"/>
<path d="M905 166 V464"/>
<path d="M772 298 H1122"/>
<path d="M772 364 H1122"/>
<path d="M772 430 H1122"/>
</g>
<circle cx="812" cy="199" r="11" fill="#56B6C2" opacity="0.9"/>
<!-- left: the brand -->
<!-- eyebrow: the relplay / RDBMS reveal, in miniature -->
<text x="92" y="206" font-family="'Liberation Mono', monospace" font-size="27" letter-spacing="-0.5">
<tspan fill="#56B6C2" font-weight="bold">REL</tspan><tspan fill="#8B909A">ational </tspan><tspan fill="#56B6C2" font-weight="bold">PLAY</tspan><tspan fill="#8B909A">ground</tspan>
</text>
<text x="90" y="306" font-family="'Liberation Mono', monospace" font-weight="bold" font-size="60" fill="#E6E6E6" letter-spacing="-1">RDBMS Playground</text>
<rect x="92" y="332" width="108" height="6" rx="3" fill="#56B6C2"/>
<text x="92" y="402" font-family="'Liberation Mono', monospace" font-size="30" fill="#A9AEB8">Learn relational databases by doing.</text>
<text x="92" y="556" font-family="'Liberation Mono', monospace" font-size="29" fill="#56B6C2"><tspan fill="#4A5265">▸ </tspan>relplay.org</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB