Skip to content

Commit 21c26e8

Browse files
kt3kclaude
kt3k
and
claude
committed
feat: add og:image and social-card meta tags
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 0d1e180 commit 21c26e8

5 files changed

Lines changed: 116 additions & 0 deletions

File tree

‎_config.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,9 @@ site.data(
5555
// Tailwind entry stylesheet (compiled by the tailwindcss plugin).
5656
site.add("/styles.css");
5757

58+
// Social-card image (see docs/og-image.md for how to regenerate it).
59+
site.add("/og.png");
60+
5861
// One RSS feed per repo per cadence at /<owner>/<name>/<period>.rss. Each
5962
// excludes "no change" (size: N) entries; item content is the rendered article
6063
// body so readers get the full issue.

‎docs/og-image.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<link rel="preconnect" href="https://fonts.googleapis.com">
6+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
7+
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@500;700;800&display=swap" rel="stylesheet">
8+
<style>
9+
* { margin: 0; padding: 0; box-sizing: border-box; }
10+
html, body { width: 1200px; height: 630px; overflow: hidden; }
11+
body {
12+
font-family: "Mulish", sans-serif;
13+
background: #ffffff;
14+
color: #333333;
15+
padding: 88px 100px;
16+
}
17+
.masthead { width: fit-content; }
18+
h1 {
19+
font-size: 92px;
20+
font-weight: 800;
21+
letter-spacing: -0.03em;
22+
line-height: 1;
23+
}
24+
.underline {
25+
margin-top: 20px;
26+
width: 100%;
27+
height: 10px;
28+
border-radius: 5px;
29+
background: #ff572f;
30+
}
31+
.tagline {
32+
margin-top: 28px;
33+
font-size: 29px;
34+
font-weight: 500;
35+
line-height: 1.45;
36+
color: #6b6b6b;
37+
}
38+
.strips {
39+
margin-top: 56px;
40+
display: flex;
41+
flex-direction: column;
42+
gap: 22px;
43+
}
44+
.cells { display: flex; gap: 7px; }
45+
.c { width: 26px; height: 26px; border-radius: 5px; flex: none; }
46+
.c0 { background: #ebedf0; }
47+
.c1 { background: #9be9a8; }
48+
.c2 { background: #40c463; }
49+
.c3 { background: #216e39; }
50+
</style>
51+
</head>
52+
<body>
53+
<div class="masthead">
54+
<h1>Changelog</h1>
55+
<div class="underline"></div>
56+
</div>
57+
<p class="tagline">Daily, weekly, and monthly summaries of<br>the main branches of selected git repos.</p>
58+
<div class="strips" id="strips"></div>
59+
<script>
60+
var rows = [
61+
[2,3,1,0,2,2,3,1,0,1,2,3,2,1,0,2,3,3,1,2,0,1,2,3,2,1,3,2,0,2],
62+
[3,2,2,1,3,0,1,2,3,2,1,0,2,3,1,2,2,0,3,1,2,2,1,3,0,2,3,1,2,3],
63+
[1,2,0,3,2,1,2,0,1,3,2,2,0,1,2,3,1,2,2,0,3,2,1,2,3,1,0,2,2,1],
64+
];
65+
var el = document.getElementById("strips");
66+
rows.forEach(function (r) {
67+
var cells = document.createElement("div");
68+
cells.className = "cells";
69+
r.forEach(function (v) {
70+
var c = document.createElement("div");
71+
c.className = "c c" + v;
72+
cells.appendChild(c);
73+
});
74+
el.appendChild(cells);
75+
});
76+
</script>
77+
</body>
78+
</html>

‎docs/og-image.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# OG image (`src/og.png`)
2+
3+
The social-card image used in `og:image` / Twitter cards, referenced from
4+
`src/_includes/layouts/base.vto`.
5+
6+
## Source
7+
8+
[`docs/og-image.html`](og-image.html) — a self-contained 1200×630 page that
9+
mirrors the site's design tokens (Mulish, ink `#333333`, accent `#ff572f`, the
10+
activity-strip cell greens). The activity-cell pattern is a fixed array in the
11+
inline script, so the output is deterministic.
12+
13+
## Regenerate
14+
15+
Render the HTML with headless Chrome (loads Mulish from Google Fonts, so it
16+
needs network access):
17+
18+
```sh
19+
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
20+
--headless --disable-gpu --hide-scrollbars \
21+
--window-size=1200,630 --virtual-time-budget=8000 \
22+
--screenshot=src/og.png "file://$PWD/docs/og-image.html"
23+
```
24+
25+
(`--virtual-time-budget` gives the web font time to load before the shot.)
26+
27+
To tweak the design, edit `docs/og-image.html` and re-run the command. The
28+
underline under the logo tracks the logo width automatically (the masthead
29+
wrapper uses `width: fit-content`), so the logo text can change freely.

‎src/_includes/layouts/base.vto‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>{{ if title }}{{ title }} · {{ site_name }}{{ else }}{{ site_name }}{{ /if }}</title>
77
<meta name="description" content="{{ description || site_description }}">
8+
<meta property="og:type" content="website">
9+
<meta property="og:site_name" content="{{ site_name }}">
10+
<meta property="og:title" content="{{ if title }}{{ title }} · {{ site_name }}{{ else }}{{ site_name }}{{ /if }}">
11+
<meta property="og:description" content="{{ description || site_description }}">
12+
<meta property="og:image" content="{{ '/og.png' |> url(true) }}">
13+
<meta name="twitter:card" content="summary_large_image">
814
<link rel="preconnect" href="https://fonts.googleapis.com">
915
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1016
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap" rel="stylesheet">

‎src/og.png‎

32.3 KB
Loading

0 commit comments

Comments
 (0)