feat: add Open Graph and Twitter Card metadata

[magnus-madsen]

Links to flix.dev carried no og:* or twitter:* tags. Slack and LinkedIn fell back to <title> and <meta name="description"> and produced a text-only card; X showed no card at all, just a plain link. For a project that spreads mostly through link-sharing — Zulip, HN, Reddit, X, conference chats — that was the least-styled surface we had.

Tags

Layout.astro now emits a full og:* set driven by the title/description props it already receives, plus twitter:card and twitter:site (@flixlang). Twitter falls back to og:* for title, description, and image, so duplicating those as twitter:* tags would be dead weight.

Verified in the build output across pages:

• absolute URLs (https://flix.dev/og.png) — scrapers ignore relative ones
• correct per-page og:url and og:title
• /blog/ keeps its noindex and still has no canonical, but does get OG tags — a page can be unindexed and still shared

The card

Built from the site's own vocabulary: favicon red #cf4647 for the F mark and edge bar, with the F set in Ubuntu Bold Italic to match the favicon's italic letterform — sized so its cap height is 62.5% of the tile, the ratio measured off the icon itself. The glyph is embedded as an outline rather than live text, since Ubuntu is neither a system font nor a project dependency and would otherwise silently substitute elsewhere; rendering the SVG with Ubuntu absent gives 0 differing pixels. No new dependency was added.

Also from the site's vocabulary: the homepage motto with effect-oriented in the site accent green #28a745, and a single Flix signature in the exact colors src/components/InlineEditor.astro emits — verified by tokenizing the line with the project's own Shiki highlighter rather than eyeballing it. The effect is tinted burnt orange #CC5500 to draw the eye to it; the \ stays black so it reads as syntax rather than part of the effect name.

One line of code rather than a snippet is deliberate. Slack renders these ~360px wide, X ~500px, Discord ~400px. A 1200px image at 360px is 30% scale, so anything denser turns to mush. Checked the downscaled render — the code line stays legible.

Burnt orange on the #f7f7f7 panel is 4.03:1. The code is 42px, so the 3:1 large-text threshold applies and it clears it.

Source

design/og.svg is the source for public/og.png — the PNG was rasterized from the committed file, so the repo contains the thing that actually produced the asset rather than a binary blob with no provenance. Its header comment covers how to rasterize it, the Open Sans/fontconfig wrinkle (@fontsource ships .woff, which fontconfig cannot read directly), and the one real gotcha: the code line uses explicit per-token x offsets, because giving the effect its own fill means it cannot be a single <text>. Offsets assume Monaco's 0.6001 em advance at 42px, so editing the code text means recomputing them.

design/ sits outside public/, so it is not published — confirmed absent from dist/.

Note for review

Console does not appear anywhere in indexExamples.js — the site's examples use IO, Clock, Http, and Logger, and print with a bare println. So the card advertises an effect the homepage never shows. If Console is the newer stdlib idiom then the examples are what's out of date, but flagging it since the two disagree.

Testing

• astro check — 0 errors, 0 warnings, 0 hints
• astro build — 10 pages built, og.png shipped to dist/
• Meta tags inspected in the emitted HTML for /, /faq/, and /blog/

🤖 Generated with Claude Code