nnw-theme 2.1.0 → 2.3.0

package/README.md

@@ -33,9 +33,9 @@ version, name it: `npx nnw-theme@2.0.0 check`.
 | `preview` | Serve the gallery on localhost, open it, and rebuild and reload it on save |
 | `render [fixtures…]` | Write the gallery to `build/preview/` once |
 | `check` | Validate and package, then render and test every case in WebKit |
-| `screenshot` | Check one case and save its image; `--promote` makes it the marketplace card |
+| `screenshot` | Check one case (any fixture and platform) and save its image; `--card` crops to the marketplace card, `--promote` makes it the card |
 | `package` | Validate and build `dist/<Name>.nnwtheme.zip` |
-| `fixture list` / `fixture add <name>…` | Add ready-made fixtures modeled on WordPress, Ghost, Substack, and Medium markup |
+| `fixture list` / `fixture add <name>…` | Add ready-made fixtures modeled on WordPress, Ghost, Substack, and Medium markup, and on podcast and Media RSS enclosures |
 | `capture` | Explain how to capture a real article from NetNewsWire as a fixture |
 | `bump` | Increase the `Info.plist` `Version` before a release |
 | `marketplace enable` | Add the marketplace discovery topic on GitHub |

package/THIRD_PARTY_NOTICES.md

@@ -1,8 +1,8 @@
 # Third-party notices
 
 The published package includes rendering files from
-[NetNewsWire](https://github.com/Ranchero-Software/NetNewsWire), release `mac-7.2b4`,
-commit `b7f4d8c7d273e4247c5d033ee47014805072297b`, under `assets/netnewswire/`.
+[NetNewsWire](https://github.com/Ranchero-Software/NetNewsWire), `main` branch,
+commit `70c5dce656487bdab9e0226c318acc1a15071cf4`, under `assets/netnewswire/`.
 `netnewswire.json` in the source repository records the SHA-256 of every file, and the
 build verifies each one, including NetNewsWire’s MIT license, which ships beside them as
 `assets/netnewswire/LICENSE`. These files are used only to preview themes; they are

package/assets/catalog/media-rss.toml

@@ -0,0 +1,79 @@
+# nnw-theme catalog fixture: media-rss (catalog version 1)
+# Markup: a photo-and-video post whose feed lists its media as RSS <enclosure> and
+#   Media RSS <media:content> items, as NetNewsWire renders them, captured 2026-10.
+# Text and links are synthetic; the structure and the enclosures' fields are real. The
+#   YouTube link is the channel-feed form NetNewsWire turns into its player; previews
+#   swap in a same-size placeholder and never load it.
+# Exercises: [[enclosures]] images with captions, a landscape and a portrait image,
+#   a video file with its poster, the YouTube player, an image the body already shows
+#   (skipped), and a PDF (not shown).
+# Enclosures need NetNewsWire with enclosure support (upstream main, October 2026).
+# Refresh: npx nnw-theme@2 fixture add media-rss --force
+
+byline = 'Ines Calloway'
+date_long = 'October 19, 2026'
+date_medium = 'Oct 19, 2026'
+date_short = '10/19/26'
+dateline_style = 'articleDateline'
+datetime_long = 'October 19, 2026 at 7:40:00 AM'
+datetime_medium = 'Oct 19, 2026 at 7:40 AM'
+datetime_short = '10/19/26, 7:40 AM'
+feed_link = 'https://example.org/'
+feed_link_title = 'Field & Frame'
+preferred_link = 'https://example.org/2026/10/ridge-at-first-light/'
+time_long = '7:40:00 AM PDT'
+time_medium = '7:40:00 AM'
+time_short = '7:40 AM'
+title = 'The ridge at first light'
+image_url = 'https://example.org/media/2026/10/ridge-poster.jpg'
+body = '''
+<p>We left the trailhead at four, which is the only way to reach the ridge before the light does. The forecast promised clear skies and delivered a lid of low cloud that burned off, all at once, about ten minutes after sunrise.</p>
+<p><img src="https://example.org/media/2026/10/ridge-wide.jpg" width="2000" height="1000" alt="The ridge from the saddle, under cloud"></p>
+<p>The feed lists everything we shot as enclosures. The wide view above is in the post itself, so the reader shows it once. The rest follow the post: two photographs, the timelapse, and the video walk-through from the channel.</p>
+<p>Getting there: the saddle is four miles and 2,600 feet from the upper trailhead. The last half mile is loose scree, slow going in the dark, and worth a helmet if anyone is above you. Bring more water than seems reasonable; there is none after the first creek crossing.</p>
+<p>Next month: the same ridge under the first snow, if the road stays open long enough to reach it.</p>
+<p>The PDF trail map rides along as an enclosure too, though there is nothing to show for it in the article.</p>
+'''
+
+[[attachments]]
+url = 'https://example.org/media/2026/10/ridge-wide.jpg'
+mime_type = 'image/jpeg'
+width = 2000
+height = 1000
+medium = 'image'
+
+[[attachments]]
+url = 'https://example.org/media/2026/10/cairn.jpg'
+mime_type = 'image/jpeg'
+title = 'The cairn at the false summit, with the real one behind it.'
+width = 1600
+height = 1067
+medium = 'image'
+
+[[attachments]]
+url = 'https://example.org/media/2026/10/larch.jpg'
+title = 'Larches turning on the north slope.'
+width = 1000
+height = 1500
+
+[[attachments]]
+url = 'https://example.org/media/2026/10/ridge-timelapse.mp4'
+mime_type = 'video/mp4'
+title = 'Timelapse: the cloud lid lifting, 40 minutes in 30 seconds.'
+size_in_bytes = 48210944
+duration_in_seconds = 30
+width = 1920
+height = 1080
+medium = 'video'
+
+[[attachments]]
+url = 'https://www.youtube.com/v/Xr2kTq9mZ4c?version=3'
+mime_type = 'application/x-shockwave-flash'
+width = 640
+height = 390
+
+[[attachments]]
+url = 'https://example.org/media/2026/10/ridge-trail-map.pdf'
+mime_type = 'application/pdf'
+size_in_bytes = 2310144
+medium = 'document'

package/assets/catalog/podcast.toml

@@ -0,0 +1,52 @@
+# nnw-theme catalog fixture: podcast (catalog version 1)
+# Markup: a podcast episode as NetNewsWire renders it from RSS, captured 2026-10: show
+#   notes in the body, an <enclosure> for the episode's audio, and the episode's
+#   itunes:image as the article image. Modeled on ATP 311 in NetNewsWire's own tests.
+# Text and links are synthetic; the structure and the enclosure's fields are real.
+# Exercises: the [[enclosures]] audio player and its caption (title · duration · size),
+#   and the article image NetNewsWire shows as an enclosure when nothing else is visual.
+# Enclosures need NetNewsWire with enclosure support (upstream main, October 2026).
+# Refresh: npx nnw-theme@2 fixture add podcast --force
+
+byline = 'Morgan Hale, Priya Nandakumar, Theo Brandt'
+date_long = 'October 22, 2026'
+date_medium = 'Oct 22, 2026'
+date_short = '10/22/26'
+dateline_style = 'articleDateline'
+datetime_long = 'October 22, 2026 at 6:15:00 PM'
+datetime_medium = 'Oct 22, 2026 at 6:15 PM'
+datetime_short = '10/22/26, 6:15 PM'
+feed_link = 'https://example.org/podcast/'
+feed_link_title = 'Three Desks Over'
+preferred_link = 'https://example.org/podcast/311'
+time_long = '6:15:00 PM PDT'
+time_medium = '6:15:00 PM'
+time_short = '6:15 PM'
+title = '311: The Long One'
+image_url = 'https://example.org/podcast/artwork/311-artwork.jpg'
+body = '''
+<p>The follow-up runs long, the main topic runs longer, and an After Show question finally gets the answer it deserves.</p>
+<ul>
+<li>Follow-up:<ul>
+<li><a href="https://example.org/notes/keyboard-repair">The keyboard repair program</a>, again</li>
+<li>Listener mail about <a href="https://example.org/notes/backups">offsite backups</a></li>
+</ul></li>
+<li><a href="https://example.org/notes/video-calls">Video calls that join themselves</a></li>
+<li><a href="https://example.org/notes/app-review">What app review is for</a></li>
+<li>Post-show: <a href="https://example.org/notes/coffee">the coffee grinder that won’t quit</a></li>
+</ul>
+<p>Sponsored by:</p>
+<ul>
+<li><a href="https://example.org/sponsors/notebooks">Field Notebooks</a>: Paper that keeps up. Use code <strong>DESKS</strong> for 20% off.</li>
+<li><a href="https://example.org/sponsors/hosting">Quiet Hosting</a>: Your site, faster, with nothing to configure.</li>
+</ul>
+<p>Become a member for ad-free episodes and our <a href="https://example.org/podcast/bootleg">bootleg feed</a>, with every show’s raw recording.</p>
+'''
+
+[[attachments]]
+url = 'https://example.org/podcast/audio/tdo311.mp3'
+mime_type = 'audio/mpeg'
+title = '311: The Long One'
+size_in_bytes = 54919661
+duration_in_seconds = 6849
+medium = 'audio'

package/assets/enclosures.js

@@ -0,0 +1,113 @@
+// Enclosure checks, evaluated in each rendered page after its screenshot. Returns a
+// list of failure messages. NetNewsWire writes each enclosure as
+// div.nnw-enclosure > (img | video | audio | iframe), with an optional
+// div.nnw-enclosure-caption, inside one div.nnw-enclosures: at [[enclosures]] in the
+// template, or after the body when the template has no such macro. A theme script
+// may move an enclosure elsewhere, so each is found wherever it ended up.
+() => {
+	const failures = [];
+	const fail = (message) => failures.push(message);
+	const width = document.documentElement.clientWidth;
+	const px = (value) => Math.round(value);
+	const size = (value) => {
+		const number = Number(value);
+		return Number.isFinite(number) && number > 0 ? number : 0;
+	};
+
+	const enclosures = [...document.querySelectorAll(".nnw-enclosure")];
+	enclosures.forEach((enclosure, index) => {
+		const media = enclosure.querySelector(":scope > :is(img, video, audio, iframe)");
+		if (!media) return;
+		const kind =
+			media.localName === "iframe"
+				? "video player"
+				: {
+						img: "image",
+						video: "video",
+						audio: "audio player",
+					}[media.localName];
+		const label = `enclosure ${index + 1} (${kind})`;
+		const box = media.getBoundingClientRect();
+		if (
+			!media.getClientRects().length ||
+			box.width < 1 ||
+			box.height < 1 ||
+			getComputedStyle(media).visibility !== "visible"
+		) {
+			fail(`${label}: not shown`);
+			return;
+		}
+		if (box.left < -1 || box.right > width + 1) {
+			fail(`${label}: spans ${px(box.left)}–${px(box.right)}px, outside the ${width}px window`);
+		}
+		if (media.localName === "audio") {
+			// Narrower than this, WebKit drops the scrubber and the player can't seek.
+			const least = Math.min(240, width * 0.6);
+			if (box.width < least) fail(`${label}: only ${px(box.width)}px wide`);
+			return;
+		}
+		if (media.localName === "iframe") {
+			// The player letterboxes its video in any box, so only a squashed or
+			// towering frame is wrong; its width and height are the old Flash player's.
+			const ratio = box.height / box.width;
+			if (ratio < 0.45 || ratio > 1.05) {
+				fail(`${label}: drawn ${px(box.width)}×${px(box.height)}, not a video's shape`);
+			}
+			return;
+		}
+		const [w, h] =
+			media.localName === "img" && media.naturalWidth
+				? [media.naturalWidth, media.naturalHeight]
+				: [size(media.getAttribute("width")), size(media.getAttribute("height"))];
+		if (!w || !h) return;
+		const expected = (box.width * h) / w;
+		if (Math.abs(box.height - expected) > Math.max(2, expected * 0.03)) {
+			fail(
+				`${label}: drawn ${px(box.width)}×${px(box.height)}, distorting its ${w}×${h} shape`,
+			);
+		}
+	});
+
+	// A caption must stand out from what it sits on, as footnote numerals must.
+	const rgba = (value) => {
+		const n = (value.match(/[\d.]+/g) || []).map(Number);
+		return n.length ? [n[0], n[1], n[2], n.length > 3 ? n[3] : 1] : [0, 0, 0, 0];
+	};
+	const backdrop = (element) => {
+		const layers = [];
+		for (let node = element; node; node = node.parentElement) {
+			const layer = rgba(getComputedStyle(node).backgroundColor);
+			if (!layer[3]) continue;
+			layers.push(layer);
+			if (layer[3] === 1) break;
+		}
+		let base = layers.pop() || [255, 255, 255, 1];
+		while (layers.length) {
+			const top = layers.pop();
+			base = [0, 1, 2].map((i) => top[i] * top[3] + base[i] * (1 - top[3]));
+		}
+		return base.slice(0, 3);
+	};
+	const distance = (a, b) => [0, 1, 2].reduce((sum, i) => sum + Math.abs(a[i] - b[i]), 0);
+	const captions = [...document.querySelectorAll(".nnw-enclosure-caption")];
+	for (const caption of captions) {
+		if (!caption.getClientRects().length || !caption.innerText.trim()) continue;
+		const name = JSON.stringify(caption.innerText.trim().slice(0, 40));
+		const glyphs = [caption, ...caption.querySelectorAll("*")].filter((element) =>
+			[...element.childNodes].some(
+				(node) => node.nodeType === Node.TEXT_NODE && node.data.trim(),
+			),
+		);
+		for (const glyph of glyphs) {
+			const color = rgba(getComputedStyle(glyph).color);
+			const ground = backdrop(glyph);
+			if (color[3] < 0.5 || distance(color, ground) <= 60) {
+				fail(`enclosure caption ${name}: text ${color.slice(0, 3)} is illegible on ${ground}`);
+				break;
+			}
+		}
+		const fontSize = Number.parseFloat(getComputedStyle(caption).fontSize);
+		if (fontSize < 10) fail(`enclosure caption ${name}: ${fontSize}px text is too small`);
+	}
+	return failures;
+}

package/assets/guide/design-checklist.md

@@ -14,6 +14,8 @@ prescribed aesthetic.
 - Check large-text macOS and iPhone renders for clipping, overlap, and lost hierarchy.
   These exercise the real mechanisms: a macOS size class and an iOS Dynamic Type size.
 - Check JavaScript-off macOS and iPhone renders for readable content and usable links.
+- If the theme styles enclosures, check the `podcast` and `media-rss` fixtures: players,
+  captions, and the article image leading a podcast episode, in light and dark.
 - Inspect a real WebKit screenshot, not only the live gallery or Chromium fallback.
 - Promote `screenshots/theme-preview.png` only when the 16:10 macOS article image is
   an intentional representation of the release.

package/assets/guide/fixtures.md

@@ -24,7 +24,7 @@ npx nnw-theme@2 fixture add wordpress --force    # replace a copy with the curre
 
 Each is copied into `fixtures/` and is from then on an ordinary fixture of the
 repository, checked on macOS and iPhone in light and dark: four more renders per
-fixture in every `check`, sixteen for all four. Their structure, classes, and attributes
+fixture in every `check`, twenty-four for all six. Their structure, classes, and attributes
 come from real feeds; their text is synthetic and their links point at `example.org`.
 The copy never changes on its own when `nnw-theme` updates. A header comment records
 its catalog version, and `fixture list` says when a newer one is available; take it
@@ -33,15 +33,50 @@ with `fixture add NAME --force`, which replaces any edits to the file.
 NetNewsWire turns Substack footnotes into popovers on its own. Most WordPress
 footnotes stay plain links until a theme script turns them into `a.footnote` markers.
 
+## Enclosures
+
+An article's enclosures are data, not markup: NetNewsWire renders them into the
+`enclosures` macro, or after the body, from the article's attachments. A fixture lists
+them after its other keys, in feed order, and may give the article's image:
+
+```toml
+image_url = "https://example.org/episode-art.jpg"  # else thumbnail_url
+
+[[attachments]]
+url = "https://example.org/episode-311.mp3"        # required
+mime_type = "audio/mpeg"
+title = "311: The Long One"
+size_in_bytes = 54919661
+duration_in_seconds = 6849
+width = 1920                                        # images and video
+height = 1080
+medium = "audio"            # image, audio, video, document, or executable
+```
+
+`nnw-theme` renders them as the pinned NetNewsWire does; the `theme-format` guide
+describes the markup. `fixture add podcast media-rss` adds fixtures that exercise
+every kind. Previews stay offline: images and posters become same-size placeholders,
+players lose their network source, a video with nothing to show gets a placeholder
+poster at its size, and the YouTube player becomes a placeholder frame. A `media/NAME`
+URL plays or shows the file from `fixtures/media/`, including audio and video for a
+screenshot; keep such files tiny, since every page that renders the fixture embeds them.
+
 ## Your own articles
 
 Prefer real articles for content a theme must handle. `npx nnw-theme@2 capture`
 prints the steps for saving the selected article from a NetNewsWire debug build with
 the `nnwdump` lldb command; it needs Xcode and a NetNewsWire clone, so the person
-usually runs it. Rendering swaps every image that would load over the network for a
+usually runs it. It records the article's attachments and image as the keys above,
+not NetNewsWire's rendered enclosures, so any template previews them. Rendering swaps every image that would load over the network for a
 same-size placeholder and a network feed icon for a generated one; do not inline or
 fetch the originals.
 
+To show a real image, as a marketplace screenshot needs, commit it under
+`fixtures/media/` and reference it by that relative path:
+`<img src="media/sunset.jpg" width="1600" height="900">`. Rendering inlines it, so
+previews stay offline; a missing file shows as a placeholder. Use only images the theme may redistribute, and keep them small:
+each is copied into every page that renders the fixture.
+
 Footnote markers are the links NetNewsWire's `newsfoot.js` handles: `a.footnote`.
 Its `main.js` adds that class to local `sup > a[href*='#fn']` links and to Substack's
 `a[id^='footnote-anchor-']` links; a theme script may add it to other formats. `check` requires every visible marker to resolve to a

package/assets/guide/publishing.md

@@ -24,6 +24,12 @@ stable GitHub release; and the valid ZIP asset. A useful repository description
 metadata warns but does not block publication. `npx nnw-theme@2 marketplace enable`
 adds the recommended topic through the author’s authenticated `gh` session.
 
+`npx nnw-theme@2 screenshot --fixture NAME --card --promote` makes the card image from
+any fixture: an 800×552 viewport at 2x, the shape of the card, which crops from the top. A
+fixture written for the card, with images in `fixtures/media/`, shows the theme best;
+`--platform ipad` or `iphone` renders it on another platform. The **Refresh marketplace
+screenshot** workflow takes the same fixture name and card choice.
+
 The screenshot workflow pushes a branch and opens a pull request for review, so the
 repository needs **Settings → Actions → General → Workflow permissions → Allow GitHub
 Actions to create and approve pull requests**. Without it the run pushes the branch and

package/assets/guide/skill.md

@@ -20,7 +20,8 @@ specific reading needs. Prefer changing the CSS variables and rules in
 needs it. For format constraints and macro behavior, read the `theme-format` topic.
 To preview content the built-in articles lack, such as a real feed's markup or
 footnotes, add a fixture as the `fixtures` topic describes; `npx nnw-theme@2 fixture
-list` offers ready-made ones modeled on WordPress, Ghost, Substack, and Medium.
+list` offers ready-made ones modeled on WordPress, Ghost, Substack, and Medium, plus
+podcast and Media RSS enclosures.
 
 Iterate with this loop:
 

package/assets/guide/theme-format.md

@@ -39,13 +39,57 @@ comment early and shows the rest of it as text. `check` fails on them. NetNewsWi
 `:root`; a theme with its own typography should not, because that shorthand resets
 `font-family` and `line-height`.
 
-The renderer pins NetNewsWire `mac-7.2b4` commit
-`b7f4d8c7d273e4247c5d033ee47014805072297b`. It uses upstream `core.css`, macOS and
+## Enclosures
+
+NetNewsWire shows an article's enclosures (RSS `<enclosure>` and Media RSS items) as
+players and images. A template places them with the `enclosures` macro; one without it
+gets them appended after the body, inside the body container, and its body is then
+wrapped in an extra `<div>` (so the enclosures escape any tag the body leaves open).
+That wrapper changes the body's children: a theme whose selectors rely on
+`.articleBody > …` should place the macro itself. NetNewsWire tests for the literal
+macro text anywhere in `template.html`, comments included.
+
+The markup is fixed and carries no inline styles:
+
+```html
+<div class="nnw-enclosures">
+  <div class="nnw-enclosure nnw-enclosure-image"><img src="…" alt="" width="…" height="…"></div>
+  <div class="nnw-enclosure nnw-enclosure-audio"><audio controls preload="none" src="…"></audio>
+    <div class="nnw-enclosure-caption">Title · 1:54:09 · 54.9 MB</div></div>
+  <div class="nnw-enclosure nnw-enclosure-video"><video controls preload="metadata" playsinline …></video></div>
+  <div class="nnw-enclosure nnw-enclosure-video"><iframe src="https://www.youtube-nocookie.com/embed/…" …></iframe></div>
+</div>
+```
+
+Images and video carry the feed's `width` and `height` when it gives both; a caption
+appears only when there is text for it. The audio caption joins the title (else the
+file name), duration, and size with ` · `. A YouTube channel enclosure becomes the
+iframe player. Enclosures whose URL already appears in the body are skipped, and
+documents are never shown. When nothing visual remains, neither an enclosure nor an
+image or video in the body, the article's image (or thumbnail) leads the list as an
+image enclosure: a podcast episode's artwork above its player. A video uses that image
+as its poster.
+
+NetNewsWire releases before enclosure support leave the macro as literal text in
+every article, so a theme that places it should hide its container when it holds no
+enclosures, for example `<div class="my-enclosures">[[enclosures]]</div>` with
+`.my-enclosures:not(:has(.nnw-enclosures)) { display: none; }`. `check` renders the
+article fixture that way too and fails if the text shows. With enclosures in a
+fixture, `check` also fails an enclosure image, player, or video that is hidden,
+leaves the window, or is drawn out of its shape, an audio player too narrow to seek,
+and an illegible caption.
+
+## Pinned NetNewsWire
+
+The renderer pins NetNewsWire `main` commit
+`70c5dce656487bdab9e0226c318acc1a15071cf4`, the first with enclosure support. It uses upstream `core.css`, macOS and
 iOS page skeletons, and `main.js`, `main_mac.js`, `main_ios.js`, and `newsfoot.js`.
 These files ship inside the `nnw-theme` package, verified by SHA-256, so previews work
 offline. iPhone and iPad share the iOS skeleton. WebKit native
 color-scheme emulation controls light/dark captures; CSS is not rewritten.
 
+## Scripts and resources
+
 Inline scripts in `template.html` are supported. External scripts and stylesheets are
 rejected. Remote theme-owned fonts, images, audio, or video require an explicit local
 warning override and are still blocked during checks. The article must remain useful

package/assets/netnewswire/Shared/core.css

@@ -63,6 +63,30 @@ img.twemoji, img.emoji {
 	width: auto;
 }
 
+/* Enclosures: audio and video players and images after the article body */
+
+.nnw-enclosures {
+	margin-top: 1.5em;
+}
+
+.nnw-enclosure {
+	margin: 1em 0;
+}
+
+.nnw-enclosure audio {
+	width: 100%;
+}
+
+.nnw-enclosure video,
+.nnw-enclosure img {
+	height: auto;
+}
+
+.nnw-enclosure-caption {
+	margin: 0.5em 0 0;
+	font-size: 0.9em;
+}
+
 /* Hide the external link at the bottom of Daring Fireball posts */
 
 .x-netnewswire-hide {

package/assets/netnewswire/netnewswire.json

@@ -1,6 +1,6 @@
 {
-	"release": "mac-7.2b4",
-	"commit": "b7f4d8c7d273e4247c5d033ee47014805072297b",
+	"release": "main-70c5dce",
+	"commit": "70c5dce656487bdab9e0226c318acc1a15071cf4",
 	"files": [
 		{
 			"destination": "LICENSE",
@@ -20,7 +20,7 @@
 		{
 			"destination": "Shared/core.css",
 			"source": "Shared/Article Rendering/core.css",
-			"sha256": "d67552259cb45261e1aacf0c1af6bc39b560b084c7b9e3943191907e0977cd4d"
+			"sha256": "3cdc76a22a6bbcd1aeed6eec4611598bb64a457cade3e1553e7b88f03bc78ef9"
 		},
 		{
 			"destination": "Shared/main.js",

package/assets/stubs/.github/workflows/screenshot.yml

@@ -5,15 +5,18 @@ on:
   workflow_dispatch:
     inputs:
       fixture:
-        description: Fixture to capture
-        type: choice
-        options: [article, kitchen-sink]
+        description: Fixture to capture (article, kitchen-sink, or a fixtures/*.toml name)
+        type: string
         default: article
       appearance:
         description: Appearance to capture
         type: choice
         options: [light, dark]
         default: light
+      card:
+        description: Capture the marketplace card's shape instead of the full page
+        type: boolean
+        default: true
 
 permissions:
   contents: write
@@ -25,3 +28,4 @@ jobs:
     with:
       fixture: ${{ inputs.fixture }}
       appearance: ${{ inputs.appearance }}
+      card: ${{ inputs.card }}

package/dist/browser.js

@@ -10,6 +10,8 @@ import { extname, join, normalize, sep } from "node:path";
 import { packagePath, ThemeError } from "./project.js";
 import { pyReprList } from "./pyformat.js";
 const FOOTNOTE_CHECK = readFileSync(packagePath("assets", "footnotes.js"), "utf8");
+const ENCLOSURE_CHECK = readFileSync(packagePath("assets", "enclosures.js"), "utf8");
+const ENCLOSURES_MACRO = "[[enclosures]]";
 const LIVE_RELOAD = readFileSync(packagePath("assets", "live-reload.js"), "utf8");
 const NOT_INSTALLED = "WebKit is not installed; run `npx nnw-theme@2 setup`";
 const CONTENT_TYPES = {
@@ -148,6 +150,10 @@ export function failures(state) {
         found.push("article content is missing or unreadable");
     if (state.unresolved)
         found.push("unresolved theme macro");
+    if (state.literalEnclosures) {
+        found.push("[[enclosures]] shows as text in NetNewsWire releases without enclosure support; " +
+            "hide its element when it holds no .nnw-enclosures");
+    }
     if (state.overflow)
         found.push("horizontal document overflow");
     if (state.brokenImages.length)
@@ -156,6 +162,7 @@ export function failures(state) {
         found.push(`images drawn at zero size: ${pyReprList(state.collapsedImages)}`);
     if (state.unloadedImages.length)
         found.push(`images still loading: ${pyReprList(state.unloadedImages)}`);
+    found.push(...(state.enclosures ?? []));
     found.push(...(state.footnotes ?? []));
     if (state.blocked.length)
         found.push(`external requests: ${pyReprList(state.blocked)}`);
@@ -178,16 +185,19 @@ async function loadImages(timeout) {
         new Promise((resolve) => setTimeout(resolve, timeout)),
     ]);
 }
-// Runs in the page after its screenshot.
-function pageState() {
+// Runs in the page after its screenshot. With olderNetNewsWire, the template's
+// [[enclosures]] is expected in the markup and fails only if it shows as text.
+function pageState({ olderNetNewsWire, macro }) {
     const article = document.querySelector(".articleBody");
     const root = document.documentElement;
+    const html = document.body.innerHTML;
     return {
         article: Boolean(article),
         textLength: (article?.innerText || "").trim().length,
         // Body only: macOS CSS legitimately keeps the font-size macro literal. Match
         // whole macro names, so a theme script's regex such as /[[(]/ is no macro.
-        unresolved: /\[\[[A-Za-z0-9_-]+\]\]/.test(document.body.innerHTML),
+        unresolved: /\[\[[A-Za-z0-9_-]+\]\]/.test(olderNetNewsWire ? html.replaceAll(macro, "") : html),
+        literalEnclosures: olderNetNewsWire && document.body.innerText.includes(macro),
         overflow: root.scrollWidth > root.clientWidth + 1,
         brokenImages: [...document.images]
             .filter((image) => image.complete && image.naturalWidth === 0)
@@ -255,6 +265,7 @@ export async function checkPages(site, targets, progress, expectations = {}) {
 async function checkPage(browser, origin, url, target, screenshot, footnotes) {
     const context = await browser.newContext({
         viewport: { width: target.width, height: target.height },
+        deviceScaleFactor: target.card ? 2 : 1,
         colorScheme: target.appearance,
         serviceWorkers: "block",
     });
@@ -282,11 +293,15 @@ async function checkPage(browser, origin, url, target, screenshot, footnotes) {
         page.on("pageerror", (error) => pageErrors.push(String(error)));
         await page.goto(url, { waitUntil: "networkidle" });
         await page.evaluate(loadImages, 10_000);
-        await page.screenshot({ path: screenshot, fullPage: true });
-        const state = await page.evaluate(pageState);
+        await page.screenshot({ path: screenshot, fullPage: !target.card });
+        const state = await page.evaluate(pageState, {
+            olderNetNewsWire: target.olderNetNewsWire,
+            macro: ENCLOSURES_MACRO,
+        });
+        const enclosures = (await page.evaluate(`(${ENCLOSURE_CHECK})()`));
         // Last: it clicks footnotes open, so it must not disturb the screenshot.
         const found = (await page.evaluate(`(${FOOTNOTE_CHECK})(${JSON.stringify(footnotes)})`));
-        return { ...state, footnotes: found, blocked, pageErrors };
+        return { ...state, enclosures, footnotes: found, blocked, pageErrors };
     }
     finally {
         await context.close();

package/dist/commands/check.js

@@ -6,7 +6,7 @@ import { interactive, openInBrowser, promptConfirm } from "../interactive.js";
 import { version } from "../main.js";
 import { buildArchive } from "../package.js";
 import { findRoot, findTheme, fixturePath, footnoteExpectations, readFixture, repositoryFixtures, ThemeError, themeStem, } from "../project.js";
-import { checkTargets, extraFixtures, renderSite, writeGallery, } from "../render.js";
+import { checkTargets, extraFixtures, placesEnclosures, renderSite, writeGallery, } from "../render.js";
 import { staleStubs } from "../stubs.js";
 import { printWarnings } from "./package.js";
 import { CheckProgress } from "./progress.js";
@@ -34,7 +34,9 @@ export default async function check({ values }) {
     const theme = findTheme(root);
     console.log(`nnw-theme ${version()}`);
     printWarnings(staleStubs(root));
-    const targets = checkTargets(extraFixtures(root));
+    const targets = checkTargets(extraFixtures(root), {
+        enclosuresMacro: placesEnclosures(theme),
+    });
     const expected = expectations(root, targets);
     const progress = new CheckProgress(targets.length);
     progress.status("Validating and packaging the theme…");

package/dist/commands/screenshot.js

@@ -2,18 +2,17 @@ import { copyFileSync, mkdirSync } from "node:fs";
 import { join } from "node:path";
 import { checkPages } from "../browser.js";
 import { findRoot, findTheme, ThemeError } from "../project.js";
-import { extraFixtures, normalTargets, renderSite } from "../render.js";
+import { extraFixtures, FIXTURE_NAMES, RenderTarget, renderSite, } from "../render.js";
 import { expectations } from "./check.js";
+// Any fixture on any platform: a screenshot is a deliberate one-off, not the check matrix.
 function selectTarget(root, values) {
-    const targets = normalTargets(extraFixtures(root));
-    const { fixture, platform, appearance } = values;
-    if (!targets.some((target) => target.fixture === fixture)) {
+    const { fixture, platform, appearance, card } = values;
+    if (![...Object.keys(FIXTURE_NAMES), ...extraFixtures(root)].includes(fixture)) {
         throw new ThemeError(`unknown fixture: ${fixture}`);
     }
-    const target = targets.find((item) => item.fixture === fixture && item.platform === platform && item.appearance === appearance);
-    if (!target)
-        throw new ThemeError(`${fixture} is checked on Mac and iPhone only`);
-    return target;
+    return new RenderTarget(fixture, platform, appearance, {
+        card: !!card,
+    });
 }
 export default async function screenshot({ values }) {
     const root = findRoot();