\n```\n\n:::\n:::\n\n:::\n:::\n\n::: {#gallery .column-page}\n:::\n\n```{=html}\n\n```\n",
- "supporting": [],
- "filters": [
- "rmarkdown/pagebreak.lua"
- ],
- "includes": {},
- "engineDependencies": {},
- "preserve": {},
- "postProcess": true
- }
-}
\ No newline at end of file
diff --git a/_quarto.yml b/_quarto.yml
index b52f28767d..dd66373bca 100644
--- a/_quarto.yml
+++ b/_quarto.yml
@@ -111,6 +111,19 @@ website:
- text: "Tutorial: Authoring"
href: docs/get-started/authoring/
+ - id: gallery
+ contents:
+ - section: "Gallery"
+ href: docs/gallery/index.qmd
+ contents:
+ - docs/gallery/reports-analytics.qmd
+ - docs/gallery/dashboards-monitoring.qmd
+ - docs/gallery/research-scholarship.qmd
+ - docs/gallery/teaching-learning.qmd
+ - docs/gallery/software-documentation.qmd
+ - docs/gallery/personal-community.qmd
+ - docs/gallery/browse.qmd
+
- id: guide
collapse-level: 1
contents:
@@ -684,8 +697,8 @@ format:
respect-user-color-scheme: true
toc: true
theme:
- light: [cosmo, theme.scss]
- dark: [cosmo, theme-dark.scss]
+ light: [cosmo, theme.scss, docs/gallery/assets/_gallery.scss]
+ dark: [cosmo, theme-dark.scss, docs/gallery/assets/_gallery.scss]
code-copy: true
code-overflow: wrap
css: styles.css
diff --git a/_tools/screenshots/README.md b/_tools/screenshots/README.md
new file mode 100644
index 0000000000..2a575e43ca
--- /dev/null
+++ b/_tools/screenshots/README.md
@@ -0,0 +1,44 @@
+# Screenshot and preview tooling
+
+Scripts to capture and update quarto-web's documentation images and gallery media.
+
+There are two families.
+Doc screenshots come from `manifest.json` through `capture.js`.
+Gallery assets come from `docs/gallery/data/*.yml` through the `scripts/capture-*.mjs` scripts.
+
+Run every command from `_tools/screenshots/`.
+
+## Which tool makes what
+
+| Asset | Command | Script | Output |
+| ----------------------------------------- | ----------------------------- | ---------------------------------- | ----------------------------------------------- |
+| Doc screenshots (PNG, light and dark) | `npm run capture` | `capture.js` (manifest) | `docs/**/images/*.png` |
+| Gallery hover previews (webm and mp4) | `npm run capture:previews` | `scripts/capture-previews.mjs` | `docs/gallery/thumbnails/featured/*.{webm,mp4}` |
+| Gallery PDF card thumbnails (PNG) | `npm run capture:pdf-thumbs` | `scripts/capture-pdf-thumbs.mjs` | `docs/gallery/thumbnails/**/*.png` |
+| Gallery card thumbnails, image-less (PNG) | `npm run capture:card-thumbs` | `scripts/capture-card-thumbs.mjs` | `docs/gallery/thumbnails//.png` |
+| axe DevTools console (PNG, manual, macOS) | see script header | `scripts/capture-axe-devtools.mjs` | `docs/output-formats/images/axe-console.png` |
+
+Only `npm run capture:previews` makes the mp4 and webm hover clips.
+
+Each `capture:*` gallery command takes `-- --name ` to match a subset.
+Each also takes `-- --limit ` to stage the first `n` matches.
+
+## Prerequisites at a glance
+
+All commands need Node.js 18+ and this tool's dependencies (`npm install`, then `npx playwright install chromium`).
+
+`capture:previews` also needs ffmpeg on `PATH` and a full Playwright Chromium; set `PREVIEW_CHROME` to point at it because the headless shell cannot record video.
+
+`capture:pdf-thumbs` also needs poppler (`pdfinfo`, `pdftoppm`) and ImageMagick (`magick`).
+
+Full setup steps are in `SETUP.md`.
+The gallery prerequisites are detailed in `scripts/PREVIEWS.md`.
+
+## Where to read next
+
+`SETUP.md` covers install steps and the still-screenshot workflow.
+`scripts/PREVIEWS.md` covers gallery video previews plus PDF and card thumbnails in detail.
+`docs/gallery/README.md` covers how to add the gallery entries these thumbnails serve.
+`CLAUDE.md` covers the AI-assisted workflow and the `manifest.json` field reference.
+`DECISIONS.md` covers why the tooling is built the way it is.
+`npm run help` prints the full command list.
diff --git a/_tools/screenshots/SETUP.md b/_tools/screenshots/SETUP.md
index de12eb4bcd..20c8aced2f 100644
--- a/_tools/screenshots/SETUP.md
+++ b/_tools/screenshots/SETUP.md
@@ -61,6 +61,12 @@ playwright-cli -s=screenshot screenshot --filename=docs/websites/images/about-jo
playwright-cli -s=screenshot close
```
+## Gallery featured video previews
+
+`scripts/capture-previews.mjs` (`npm run capture:previews`) records the animated preview
+clips for featured gallery cards. It is separate from the still-screenshot manifest and
+needs ffmpeg plus a full Playwright Chromium. See **`scripts/PREVIEWS.md`** for details.
+
## Optional: PNG Compression
```bash
diff --git a/_tools/screenshots/package-lock.json b/_tools/screenshots/package-lock.json
index ce19c156c7..92534f5647 100644
--- a/_tools/screenshots/package-lock.json
+++ b/_tools/screenshots/package-lock.json
@@ -6,6 +6,7 @@
"": {
"dependencies": {
"ajv": "^8.18.0",
+ "js-yaml": "^5.2.3",
"open": "^10.0.0",
"playwright": "^1.50.0",
"sharp": "^0.33.0"
@@ -398,6 +399,12 @@
"url": "https://github.com/sponsors/epoberezkin"
}
},
+ "node_modules/argparse": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+ "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+ "license": "Python-2.0"
+ },
"node_modules/bundle-name": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
@@ -593,6 +600,28 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/js-yaml": {
+ "version": "5.2.3",
+ "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-5.2.3.tgz",
+ "integrity": "sha512-n+mUVyUX5bVv7G/G2zyIHOhdxfuU1dY2NOFzTQUWiMUbFss8b57NFlgCCaggU78wSw5KVS9cllzeLyzyR+n5nw==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/puzrin"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/nodeca"
+ }
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "argparse": "^2.0.1"
+ },
+ "bin": {
+ "js-yaml": "bin/js-yaml.mjs"
+ }
+ },
"node_modules/json-schema-traverse": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
diff --git a/_tools/screenshots/package.json b/_tools/screenshots/package.json
index 770a0cbfdf..d14dbc1243 100644
--- a/_tools/screenshots/package.json
+++ b/_tools/screenshots/package.json
@@ -8,14 +8,21 @@
"serve": "node scripts/serve.js",
"compress": "node scripts/compress.js",
"capture": "node capture.js",
+ "capture:previews": "node scripts/capture-previews.mjs",
+ "capture:pdf-thumbs": "node scripts/capture-pdf-thumbs.mjs",
+ "capture:card-thumbs": "node scripts/capture-card-thumbs.mjs",
"open": "node scripts/open.js",
"validate": "node scripts/validate.js",
"update-demo": "bash scripts/update-demo.sh"
},
"dependencies": {
"ajv": "^8.18.0",
+ "js-yaml": "^5.2.3",
"open": "^10.0.0",
"playwright": "^1.50.0",
"sharp": "^0.33.0"
+ },
+ "allowScripts": {
+ "sharp@0.33.5": true
}
}
diff --git a/_tools/screenshots/scripts/PREVIEWS.md b/_tools/screenshots/scripts/PREVIEWS.md
new file mode 100644
index 0000000000..10885f324a
--- /dev/null
+++ b/_tools/screenshots/scripts/PREVIEWS.md
@@ -0,0 +1,88 @@
+# Gallery featured video previews
+
+`capture-previews.mjs` generates the short, muted, looping clips that featured
+gallery cards play on hover or keyboard focus. The rendering,
+interaction, and reduced-motion handling live in the gallery, not here:
+`docs/gallery/assets/_featured.ejs.md` and `docs/gallery/assets/_gallery.scss`.
+
+This script is separate from the still-screenshot manifest (`capture.js`): it
+records motion rather than a single frame, and is driven by gallery data rather
+than `manifest.json`.
+
+## How it works
+
+- Driven by `docs/gallery/data/featured.yml`: every card with both a `live` URL
+ and a `preview` base path gets a clip. `preview:` is the output path without
+ extension, e.g. `thumbnails/featured/software-documentation-gribouille`.
+- Optional `preview-url:` overrides the page that is recorded when the card's
+ `live` link is not the best source (e.g. a landing page vs a richer subpage). The
+ card's `live` link is unchanged; only the capture source differs.
+- Output: `.webm` (VP9) and `.mp4` (H.264) under
+ `docs/gallery/thumbnails/featured/` (animated previews are a featured-only
+ asset), beside the still PNG (`image:`), which stays the `
![\"A](\"articles/advanced-layout-pdf.png\")
\n![\"A](\"presentations/presentations.png\")
\n![\"A](\"interactive/interactive-jupyter.png\")
\n![\"Documentation](\"websites/websites-quarto.png\")
\n![\"A](\"websites/websites-jupyter.png\")
\n