Skip to content

Commit 7a06644

Browse files
Blog post: Chrome Headless Shell in Quarto (#1991) (#1992)
* add blog post writing skill Skill codifies conventions derived from 40+ existing quarto.org/blog posts: frontmatter schema, post-type structures, writing voice, and technical conventions (images, code blocks, links, callouts). Uses progressive disclosure with SKILL.md core + references/post-types.md loaded on demand. * draft blog post: chrome-headless-shell announcement Feature announcement covering chrome-headless-shell as replacement for Puppeteer Chromium: what it is, why the switch, migration path, CI compatibility, and v1.9/v1.10 timeline. * add thumbnail design guide to blog post skill Gap found during live test: skill had no guidance on thumbnail dimensions, visual style, or design patterns. Adds references/thumbnail-guide.md with conventions derived from 40 existing thumbnails (1200x630 standard, steel blue palette, per-type patterns). * add thumbnail and icon attribution to blog post Thumbnail created from HTML/CSS with actual SVG logos and screenshotted at 1200x630. Chromium icon by Jeremiah (CC BY 4.0), arrow from SVG Repo (Public Domain). Attribution line at end of post matches existing blog convention (see 1.9 release post OpenMoji credit). * update thumbnail guide with HTML/CSS creation method Documents the HTML-to-screenshot approach for creating thumbnails with real SVG logos, icon sourcing (svgrepo.com PD, icon-icons.com CC BY), and the attribution format used in existing blog posts. * show draft pages in PR deploy previews Add pr-preview Quarto profile that sets draft-mode: visible, so draft blog posts and pages are rendered in Netlify deploy previews. Without this, quarto render (used in CI) hides drafts by default — unlike quarto preview (used locally) which always shows them. * detect draft pages in PR previews and warn before merge - Render drafts as visible in deploy previews (pr-preview profile) - Detect draft: true pages among changed files - Tag draft pages inline in the Modified Documents list - Add a WARNING callout listing all draft pages - Create a "No draft pages" commit status check (can be made required in branch protection to block merging with drafts) * extract draft detection into reusable composite action Moves draft: true detection to .github/workflows/actions/detect-drafts/ composite action, used by both preview.yml (PR comment tagging) and the new draft-check.yml (standalone required check). The dedicated workflow runs on all PRs with no paths-ignore, so the required check is always created. * simplify draft warning in PR comment to avoid duplicate links * document draft-check workflow and detect-drafts action in README * document pr-preview profile in README * fix review findings: shell injection, POSIX grep, .md coverage, CI wording - Use env var instead of expression interpolation for changed-files input in composite action (shell injection risk) - Replace \s with POSIX [[:space:]] in grep pattern (portability) - Include .md files in draft detection (draft-check.yml and composite action) - Fix CI section in blog post: v1.9 shows deprecation warning, v1.10 does the transparent redirect * update thumbnail background to Quarto blue (#5286ab) * shorten blog post description for listing card * address review feedback: light thumbnail, remove platform examples - Redesign thumbnail with light background (#F0F5F9) and Quarto blue (#5286AB) elements per Charlotte's contrast feedback - Remove "Raspberry Pi or AWS Graviton" platform examples from arm64 bullet - Save thumbnail SVG source alongside PNG for future editing - Update image-alt to match actual visual content - Add brand colors table and contrast guidance to thumbnail skill guide - Make screenshot tooling generic (not tied to specific CLI tools) * fix file:// example in thumbnail guide to include --allow-file-access * add prerequisites section to thumbnail guide for tool availability * remove draft: true from chrome-headless-shell blog post * note in thumbnail guide: always use PNG, never SVG directly SVGs don't center properly in listing cards — the HTML uses flexbox for layout which standalone SVGs can't replicate. * update blog post date to 2026-04-14 and rename directory to match * add publish-date script for blog post date + directory rename TypeScript script (quarto run) that sets the post date to today and renames the directory to match. Zero dependencies — uses Deno stdlib bundled with Quarto. * add README to _tools/ documenting project scripts * note renv/pipenv setup in _tools README * fix publish-date: rename dir even when date matches, rename before write Two fixes from code review: - Don't exit early when date matches — directory prefix may still be stale - Rename directory before writing file to avoid partial updates on failure (cherry picked from commit f91afd4) Co-authored-by: Christophe Dervieux <christophe.dervieux@gmail.com>
1 parent 497cab3 commit 7a06644

14 files changed

Lines changed: 777 additions & 6 deletions

File tree

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

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
---
2+
name: quarto-blog-post
3+
description: Use when writing, drafting, or editing blog posts for quarto.org, creating Quarto feature or release announcements, or reviewing blog post drafts for the Quarto website.
4+
---
5+
6+
# Quarto Blog Post
7+
8+
Write blog posts for `quarto.org/blog` matching the voice, structure, and conventions
9+
from 40+ existing posts.
10+
11+
## Setup
12+
13+
1. `ls docs/blog/posts/` — browse existing posts for reference
14+
2. Read `docs/blog/posts/_metadata.yml` — inherited by all posts (Giscus comments,
15+
title-block-banner, left TOC, signup widget, `search: false`)
16+
3. If the post covers a Quarto feature, read the relevant docs page for accurate
17+
terminology and linking.
18+
19+
## File Structure
20+
21+
```
22+
docs/blog/posts/YYYY-MM-DD-slug/
23+
index.qmd # The post (required)
24+
thumbnail.png # Listing card image (required)
25+
*.png, *.jpg # Additional images
26+
_contribs.md # Contributor list (release posts only)
27+
```
28+
29+
Directory name: `YYYY-MM-DD-slug` — date matches frontmatter, slug is short kebab-case.
30+
31+
## Frontmatter
32+
33+
```yaml
34+
---
35+
title: "Post Title"
36+
description: |
37+
One to three sentences for listing cards and social sharing.
38+
author: Author Name
39+
date: "YYYY-MM-DD"
40+
categories:
41+
- Category1
42+
- Category2
43+
image: thumbnail.png
44+
image-alt: "Descriptive alt text for the thumbnail."
45+
---
46+
```
47+
48+
**title**: Short. Release posts: `"Quarto X.Y"`. Backtick code spans OK.
49+
50+
**description**: Self-contained summary (makes sense without the title). Always `|` block scalar.
51+
52+
**author**: Plain string for staff (`Charlotte Wickham`). Two authors: `Name and Name`.
53+
Guest authors use structured form with `name:` and optional `url:`.
54+
55+
**date**: ISO 8601 `"YYYY-MM-DD"`. Must match directory name.
56+
57+
**categories**: 2-3 per post. Use existing values — scan recent posts to check. Common:
58+
`Releases`, `Quarto X.Y`, `Features`, `Authoring`, `Learn`, `Workshop`, `Conference`,
59+
`Tip`, `Extensions`, `Tables`, `Teaching`, `Jupyter`.
60+
61+
**image / image-alt**: `thumbnail.png` preferred. `image-alt` is mandatory.
62+
See `references/thumbnail-guide.md` for dimensions, visual style, and design patterns.
63+
64+
**Optional**: `lightbox: true` (many screenshots), `draft: true` (while developing).
65+
Do not use `subtitle:` (phased out after 2023).
66+
67+
## Post Types
68+
69+
Identify the type before writing — it determines structure, opening, and closing.
70+
Read `references/post-types.md` for detailed structure guidance per type.
71+
72+
| Type | When | Key trait |
73+
|------|------|-----------|
74+
| **Release** | New Quarto version ships | Most structured: features → Other Highlights → Acknowledgements |
75+
| **Feature** | Spotlight a specific capability | Concept-driven sections, docs links |
76+
| **How-to** | Tutorial or walkthrough | Problem → solution, sequential steps |
77+
| **News** | Short announcement, roundup | Very short, layout-heavy, minimal prose |
78+
79+
## Writing Voice
80+
81+
**First-person plural**: "We" for team work, "you" for the reader.
82+
83+
**Warm, not marketing**: "We're excited about this feature" — good.
84+
"This groundbreaking capability" — bad. Collegial tone, sharing with practitioners.
85+
86+
**Direct openers**: Get to the point immediately. No "In this blog post, we will..."
87+
preambles. State what happened or what the feature does, then elaborate.
88+
89+
**Technical accuracy**: Use exact terminology from the docs. Link to docs rather than
90+
trying to replicate them — the post introduces, the docs page is the reference.
91+
92+
**Thank contributors**: Call out external contributors warmly inline.
93+
94+
## Technical Conventions
95+
96+
### Images
97+
98+
Every image must have `fig-alt=` text — non-negotiable accessibility standard.
99+
100+
```markdown
101+
![](screenshot.png){fig-alt="Description of what the screenshot shows."}
102+
```
103+
104+
Multi-image layouts use Quarto's layout system (`{layout-ncol="2"}`).
105+
For many images, add `{.lightbox group="name"}`.
106+
107+
### Code Blocks
108+
109+
Always specify language. Use `filename=` labels for file content or terminal commands:
110+
111+
````markdown
112+
```{.yaml filename="_quarto.yml"}
113+
project:
114+
type: website
115+
```
116+
````
117+
118+
### Links
119+
120+
Every feature mentioned links to its docs page. Pattern: explain briefly, show example,
121+
then link. Use site-root-relative paths: `[Feature](/docs/path.qmd)`.
122+
123+
### Callouts
124+
125+
Use sparingly: `.callout-tip` for post origin context, `.callout-warning` for caveats,
126+
`.callout-note` for prerequisites. Release posts typically skip callouts.
127+
128+
### Shortcodes
129+
130+
- `{{< prerelease-callout X.Y type="blog" >}}` — pre-release banner (auto-disappears)
131+
- `{{< video URL >}}` — video embed
132+
- `{{< include file.md >}}` — include generated content
133+
134+
## Workflow
135+
136+
1. **Identify post type** → read `references/post-types.md` for that type
137+
2. **Create directory**: `docs/blog/posts/YYYY-MM-DD-slug/`
138+
3. **Write frontmatter** per schema above
139+
4. **Draft body** following type-specific structure
140+
5. **Add images** with `fig-alt=` on every one
141+
6. **Link to docs** for every feature mentioned
142+
7. **Create thumbnail** (or note one is needed)
143+
8. **Review**: direct opener? code blocks fenced with language? all images alt-texted?
144+
docs links present? closing matches type convention? categories correct?
145+
146+
## Publishing
147+
148+
When ready to publish, set the post date to today and rename the directory:
149+
150+
```bash
151+
quarto run _tools/publish-date.ts docs/blog/posts/YYYY-MM-DD-slug
152+
```
153+
154+
This updates `date:` in frontmatter and renames the directory to match. Run it
155+
on the day you intend to merge — avoids manual date edits if the publish date slips.
156+
157+
## PR Workflow
158+
159+
PR to `main` first. On merge, auto-backport creates cherry-pick PR to `prerelease`.
160+
Push branches to `upstream` remote (quarto-dev/quarto-web), not `origin`.
Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
# Post Type Reference
2+
3+
Detailed structure guidance for each blog post type. Read the section that matches
4+
your post — you rarely need all four.
5+
6+
## Release Announcements
7+
8+
The most structured type. Readers expect consistency across releases.
9+
10+
**Opening**: One direct sentence announcing the release, immediately followed by
11+
download and changelog links. No preamble.
12+
13+
```markdown
14+
Quarto 1.9 is out! You can get the current release from the
15+
[download page](/docs/download/index.qmd). Read the full
16+
[changelog](https://github.com/quarto-dev/quarto-cli/releases/tag/v1.9)
17+
for a complete list of changes.
18+
```
19+
20+
**Feature sections**: Each major feature gets a `##` heading named after the feature
21+
(not "What's New"). Order by importance. Each section:
22+
- Explain in 2-3 sentences
23+
- Code example or screenshot (or both)
24+
- Link to docs: "Learn more at [Feature Name](/docs/path)."
25+
26+
**Other Highlights**: `## Other Highlights` bundles smaller improvements. Format:
27+
28+
```markdown
29+
- [Feature Name](/docs/path)---Short description of what it does.
30+
```
31+
32+
Note the em-dash (`---`) between link and description.
33+
34+
**Dependency updates**: List bundled tool updates (Pandoc, Typst, Deno) after Other
35+
Highlights if applicable.
36+
37+
**Closing**: Always `## Acknowledgements`. Thank contributors. Recent releases use
38+
`{{< include _contribs.md >}}`. Release posts with emoji thumbnails include OpenMoji
39+
attribution at the very end.
40+
41+
**Categories**: Always `Quarto X.Y` + `Releases`.
42+
43+
---
44+
45+
## Feature Announcements
46+
47+
Spotlight a specific feature, often published before the corresponding release. More
48+
varied structure than release posts.
49+
50+
**Opening**: If unreleased, add prerelease callout at the very top:
51+
52+
```markdown
53+
{{< prerelease-callout 1.10 type="blog" >}}
54+
```
55+
56+
Then a direct statement of what the feature does. Get to the point — readers clicked
57+
because the title caught their interest.
58+
59+
**Body**: Organize around the feature's concepts, not a "what's new" list. `##`
60+
headings name the concept being explained.
61+
62+
Problem/Solution framing works well for features that address a pain point: explain
63+
the problem first, then show how the feature solves it.
64+
65+
**Closing**: Link to the documentation. "Learn more on the [Feature Name](/docs/path)
66+
page." No acknowledgements section.
67+
68+
---
69+
70+
## Technical How-to Posts
71+
72+
Tutorial-style walkthroughs.
73+
74+
**Opening**: If based on a talk or repost, start with a `.callout-tip` providing context
75+
and linking the original source. Then frame the use case — what problem does the reader
76+
have?
77+
78+
**Body**: Walk through steps sequentially. Heading names can be conversational — verbs
79+
and questions are fine ("Create the content", "Why are we doing this?"). Use numbered
80+
sub-steps when sequence matters.
81+
82+
Show before/after comparisons with `{layout-ncol="2"}` divs.
83+
84+
**Closing**: Brief summary of what was covered, or a "Learn more" section with resource
85+
links. No acknowledgements.
86+
87+
---
88+
89+
## News/Community Posts
90+
91+
Short announcements, conference roundups, workshop materials. The lightest type.
92+
93+
**Opening**: One direct summary sentence.
94+
95+
**Body**: Often visual grids rather than prose. Conference roundups use
96+
`{layout="[70,30]"}` divs pairing descriptions with thumbnails. Video posts embed
97+
with `{{< video >}}`.
98+
99+
**Closing**: May have no explicit closing — the content structure speaks for itself.

0 commit comments

Comments
 (0)