feat: large link-preview card drawn from the ASCII keyboard

Scripts/generate-og-card.py

@@ -0,0 +1,41 @@
+"""Render docs/og-card.png, the 1280x640 link-preview card, from the hero art.
+
+    python3 Scripts/generate-keyboard-art.py        # writes kbd3.json here
+    python3 Scripts/generate-og-card.py kbd3.json docs/og-card.png
+
+Draws the ISO keyboard as ASCII in the site's palette, so the card changes
+with the art instead of being redrawn by hand.
+"""
+import json
+import sys
+
+from PIL import Image, ImageDraw, ImageFont
+
+src, out = sys.argv[1], sys.argv[2]
+grid = json.load(open(src))["layouts"]["iso"]["grid"]
+
+W, H = 1280, 640
+BG, FG, DIM, ORANGE = "#08090B", "#D6DAE1", "#727A86", "#FF6B2C"
+MONO = "/System/Library/Fonts/Menlo.ttc"
+
+img = Image.new("RGB", (W, H), BG)
+d = ImageDraw.Draw(img)
+
+title = ImageFont.truetype(MONO, 64, index=1)  # Menlo Bold
+tagline = ImageFont.truetype(MONO, 26)
+footer = ImageFont.truetype(MONO, 20)
+art = ImageFont.truetype(MONO, 10)
+
+d.text((80, 64), "InputPilot", font=title, fill=ORANGE)
+d.text((82, 146), "The layout follows the keyboard.", font=tagline, fill=FG)
+
+# The art was sampled at the browser's 1:1.67 monospace aspect; keep it.
+char_w = art.getlength("@")
+line_h = round(char_w * 1.67)
+x0 = (W - char_w * len(grid[0])) / 2
+for i, row in enumerate(grid):
+    d.text((x0, 212 + i * line_h), row, font=art, fill=DIM)
+
+d.text((82, H - 58), "macOS menu bar app · free · open source · inputpilot.lucagerlich.dev",
+       font=footer, fill=DIM)
+img.save(out, optimize=True)

docs/index.html

@@ -16,17 +16,17 @@
 <meta property="og:site_name" content="InputPilot">
 <meta property="og:title" content="InputPilot — automatic keyboard layout switching for macOS">
 <meta property="og:description" content="Type on your German external keyboard, get German. Type on the MacBook, get U.S. InputPilot switches the macOS input source per keyboard, automatically.">
-<meta property="og:image" content="https://inputpilot.lucagerlich.dev/icon.png">
-<meta property="og:image:width" content="512">
-<meta property="og:image:height" content="512">
-<meta property="og:image:alt" content="The InputPilot app icon">
+<meta property="og:image" content="https://inputpilot.lucagerlich.dev/og-card.png">
+<meta property="og:image:width" content="1280">
+<meta property="og:image:height" content="640">
+<meta property="og:image:alt" content="InputPilot — the layout follows the keyboard. A German ISO keyboard drawn in ASCII.">
 <meta property="og:url" content="https://inputpilot.lucagerlich.dev/">
 <meta property="og:type" content="website">
 <meta property="og:locale" content="en_US">
-<meta name="twitter:card" content="summary">
+<meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="InputPilot — automatic keyboard layout switching for macOS">
 <meta name="twitter:description" content="Type on your German external keyboard, get German. Type on the MacBook, get U.S. InputPilot switches the macOS input source per keyboard, automatically.">
-<meta name="twitter:image" content="https://inputpilot.lucagerlich.dev/icon.png">
+<meta name="twitter:image" content="https://inputpilot.lucagerlich.dev/og-card.png">
 <style>
 	:root {
 		--bg:#08090B; --panel:#0D0F13; --panel-2:#101317;