Skip to content

Commit 8331c05

Browse files
cdervcderv
authored
Add Typst path for blog-post skill thumbnails (#2018)
* skill(blog-post): add Typst path for thumbnails Existing blog-post skill only documented the HTML+SVG+screenshot path, which is heavy when the thumbnail is text-only or features a programmatic diagram. The 2026-05-05-quarto-2-parsing post showed Typst+cetz works well for diagram-driven thumbnails but the source assets weren't bundled, so the workflow lived only in one author's local checkout. This commit bundles the Typst path with everything contributors need: the page-setup template (text-only and diagram variants), a cetz node/edge scaffold matching the parsing post's graph helpers, and the white-on-blue Quarto wordmark SVG. The decision between Typst and HTML+SVG is surfaced as an explicit question in step 7 of the skill workflow rather than letting Claude silently pick. Release posts default to the existing HTML+SVG flow so the established release-thumbnail visual identity stays consistent. * fix(blog): bundle logo SVG with 2026-05-05 parsing thumbnail thumbnail.typ for the parsing post references quarto-logo-trademark-light.svg co-located in its directory, but the SVG was never committed — only existed on the original author's local checkout. Renders failed on a fresh checkout. Add the white-fill wordmark SVG (same one bundled in the blog-post skill assets dir) so quarto typst compile works for any contributor. Self-contained post, matches the convention of co-locating thumbnail.png with index.qmd. * skill(blog-post): bundle dark wordmark for light-bg thumbnails Symmetric to the white-fill variant for dark backgrounds. Authors adapting a template to the light palette (#F0F5F9) need the dark-text wordmark to keep the brand mark legible. Both files derive from the same brand-kit source and differ only in fill colors. typst-thumbnail.md gets a small table calling out which variant matches which background.
1 parent 8b1be24 commit 8331c05

8 files changed

Lines changed: 466 additions & 3 deletions

File tree

‎.claude/skills/blog-post/SKILL.md‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,9 @@ Guest authors use structured form with `name:` and optional `url:`.
5959
`Tip`, `Extensions`, `Tables`, `Teaching`, `Jupyter`.
6060

6161
**image / image-alt**: `thumbnail.png` preferred. `image-alt` is mandatory.
62-
See `references/thumbnail-guide.md` for dimensions, visual style, and design patterns.
62+
See `references/thumbnail-guide.md` for the decision between the two production
63+
paths (Typst, or HTML+SVG) and the HTML+SVG flow. For the Typst path, see
64+
`references/typst-thumbnail.md`.
6365

6466
**Optional**: `lightbox: true` (many screenshots), `draft: true` (while developing).
6567
Do not use `subtitle:` (phased out after 2023).
@@ -139,7 +141,16 @@ Use sparingly: `.callout-tip` for post origin context, `.callout-warning` for ca
139141
4. **Draft body** following type-specific structure
140142
5. **Add images** with `fig-alt=` on every one
141143
6. **Link to docs** for every feature mentioned
142-
7. **Create thumbnail** (or note one is needed)
144+
7. **Create thumbnail**:
145+
1. Read `references/thumbnail-guide.md` § Choosing your path
146+
2. **Always present both options as a question to the user**, even if one
147+
path is the obvious recommendation. State the recommendation with
148+
reasoning (logos? programmatic diagram? text-only? release post?), then
149+
explicitly ask the user to confirm or override before proceeding. Never
150+
silently pick.
151+
3. Read the chosen path's reference and execute
152+
(`references/typst-thumbnail.md` for Typst, rest of `thumbnail-guide.md`
153+
for HTML+SVG)
143154
8. **Review**: direct opener? code blocks fenced with language? all images alt-texted?
144155
docs links present? closing matches type convention? categories correct?
145156

‎.claude/skills/blog-post/assets/quarto-logo-trademark-light.svg‎

Lines changed: 40 additions & 0 deletions
Loading

‎.claude/skills/blog-post/assets/quarto-logo-trademark.svg‎

Lines changed: 40 additions & 0 deletions
Loading

‎.claude/skills/blog-post/assets/thumbnail-diagram.typ‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
#import "@preview/cetz:0.3.4"
2+
3+
#set page(
4+
width: 1200pt,
5+
height: 630pt,
6+
margin: 50pt,
7+
fill: rgb("#447099"),
8+
)
9+
10+
#set text(
11+
fill: white,
12+
font: ("Helvetica Neue", "Helvetica", "Arial", "Liberation Sans", "DejaVu Sans"),
13+
)
14+
15+
#align(center)[
16+
#stack(
17+
dir: ltr,
18+
spacing: 16pt,
19+
align(horizon)[#image("quarto-logo-trademark-light.svg", height: 90pt)],
20+
align(horizon)[#text(baseline: -8pt, size: 90pt, weight: "bold")[2]],
21+
)
22+
23+
#v(10pt)
24+
#text(size: 56pt, weight: "bold")[Replace this title]
25+
26+
#v(10pt)
27+
28+
#cetz.canvas(length: 45pt, {
29+
import cetz.draw: *
30+
31+
// Ellipse node — white fill, dark blue label.
32+
let node(pos, label, name) = {
33+
let (x, y) = pos
34+
circle(
35+
(x, y),
36+
radius: (1.4, 0.55),
37+
fill: white,
38+
stroke: white,
39+
name: name,
40+
)
41+
content((x, y), text(fill: rgb("#1f3a52"), weight: "bold", size: 20pt)[#label])
42+
}
43+
44+
// Edge — white line connecting two named nodes.
45+
let edge(a, b) = {
46+
line(a, b, stroke: (paint: white, thickness: 1.5pt))
47+
}
48+
49+
// Replace the placeholder graph below with your own nodes + edges.
50+
node((4, 2), "Root", "root")
51+
node((1, 0), "A", "a")
52+
node((7, 0), "B", "b")
53+
edge("root", "a")
54+
edge("root", "b")
55+
})
56+
]

‎.claude/skills/blog-post/assets/thumbnail-text.typ‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
#set page(
2+
width: 1200pt,
3+
height: 630pt,
4+
margin: 50pt,
5+
fill: rgb("#447099"),
6+
)
7+
8+
#set text(
9+
fill: white,
10+
font: ("Helvetica Neue", "Helvetica", "Arial", "Liberation Sans", "DejaVu Sans"),
11+
)
12+
13+
#align(center + horizon)[
14+
#stack(
15+
dir: ltr,
16+
spacing: 16pt,
17+
align(horizon)[#image("quarto-logo-trademark-light.svg", height: 90pt)],
18+
align(horizon)[#text(baseline: -8pt, size: 90pt, weight: "bold")[2]],
19+
)
20+
21+
#v(20pt)
22+
#text(size: 56pt, weight: "bold")[Replace this title]
23+
24+
#v(10pt)
25+
#text(size: 32pt)[Replace this subtitle (optional)]
26+
]

‎.claude/skills/blog-post/references/thumbnail-guide.md‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,25 @@
22

33
Design conventions for blog post listing card images, derived from 40 existing posts.
44

5+
## Choosing your path
6+
7+
Two production paths exist for thumbnails. Pick before you start designing.
8+
9+
| Path | Use when | Avoid when |
10+
|------|----------|------------|
11+
| **Typst** ([`typst-thumbnail.md`](typst-thumbnail.md)) | Text-only thumbnails, programmatic diagrams (trees, graphs, flow), version/title cards | Design uses 3rd-party logos/icons with their own colors |
12+
| **HTML+SVG** (rest of this guide) | Icon compositions with 3rd-party SVGs, photographic content, complex CSS-only layouts | Pure text or programmatic diagrams (Typst is faster) |
13+
14+
> **Release posts default to HTML+SVG.** The release thumbnail template (steel
15+
> blue + Quarto logo + version + small thematic emoji) is established convention
16+
> from 1.4 through current. Switching to Typst for a release is a stylistic
17+
> choice — confirm with the team before deviating. New release posts that match
18+
> the template should reuse the existing HTML+SVG flow so all release thumbnails
19+
> stay visually consistent.
20+
21+
For Typst, see [`typst-thumbnail.md`](typst-thumbnail.md). The rest of this
22+
guide covers the HTML+SVG path.
23+
524
## Dimensions and Format
625

726
- **Size**: 1200x630 px (Open Graph / social card standard)
@@ -72,7 +91,7 @@ Use Posit conference brand templates rather than the Quarto steel blue:
7291
Use the partner's own logo on a white or neutral background (e.g., Hugging Face logo,
7392
Confluence logo). No Quarto branding needed — the partner identity is the visual.
7493

75-
## Creating Thumbnails
94+
## Creating Thumbnails (HTML+SVG path)
7695

7796
### Prerequisites
7897

0 commit comments

Comments
 (0)