Open
Conversation
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.
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.
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.
Contributor
📝 Preview Deployment🔍 Full site preview: https://deploy-preview-2018.quarto.org |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The
quarto-blog-postskill (under.claude/skills/blog-post/) only documented the HTML+SVG+screenshot path for creating blog post thumbnails. That path is fine for icon compositions with third-party SVGs, but heavy when the thumbnail is text-only or features a programmatic diagram.The recent Parsing & Source Maps post showed Typst with
cetzsuits diagram-driven thumbnails well — but the source assets (logo SVG, page setup, cetz scaffold) lived only in one author's local checkout, so the workflow wasn't reusable.What this adds
assets/thumbnail-text.typ— text-only template (page setup, font fallback chain, logo block, title slot)assets/thumbnail-diagram.typ— same plus a cetz canvas withnode/edgehelpers preloadedassets/quarto-logo-trademark-light.svg— white-fill wordmark derived from the brand kit (was missing from the repo entirely)references/typst-thumbnail.md— full guide: prerequisites (quarto typst), setup, palette, font fallback, cetz pin, scaffold snippets, render command, anti-patternsWorkflow change
The decision between Typst and HTML+SVG is surfaced as an explicit question in step 7 of the skill workflow rather than letting the assistant silently pick one. A
Choosing your pathtable at the top ofthumbnail-guide.mddocuments the criteria. Release posts default to HTML+SVG so the established release-thumbnail visual identity (steel blue + Quarto logo + version + small thematic emoji) stays consistent across releases — switching to Typst there is a stylistic call, not a default.Backfill
The second commit copies
quarto-logo-trademark-light.svgintodocs/blog/posts/2026-05-05-quarto-2-parsing/so the existingthumbnail.typrenders on a fresh checkout — it was previously broken because the SVG only existed on the original author's machine.Test plan
quarto typst compilerenders2026-05-05-quarto-2-parsing/thumbnail.typto a 2400×1260 PNG matching the committed thumbnailreferences/typst-thumbnail.mdend-to-end and follow it without needing the canonical post file as the only example