nnw-theme 2.2.0 → 2.3.0

package/README.md

@@ -35,7 +35,7 @@ version, name it: `npx nnw-theme@2.0.0 check`.
 | `check` | Validate and package, then render and test every case in WebKit |
 | `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,12 +33,41 @@ 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.
 

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/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)
@@ -284,10 +294,14 @@ async function checkPage(browser, origin, url, target, screenshot, footnotes) {
         await page.goto(url, { waitUntil: "networkidle" });
         await page.evaluate(loadImages, 10_000);
         await page.screenshot({ path: screenshot, fullPage: !target.card });
-        const state = await page.evaluate(pageState);
+        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.js

@@ -19,6 +19,8 @@ export const BUILT_IN_FIXTURE_NAMES = ["article", "kitchen-sink"];
 export const CATALOG_FIXTURES = {
     ghost: "Ghost cards, galleries, and lazy images",
     medium: "Medium figures, unsized images, and footer",
+    "media-rss": "Image, video, and YouTube enclosures with captions",
+    podcast: "Podcast audio enclosure and episode artwork",
     substack: "Substack images, widgets, and footnotes",
     wordpress: "WordPress block and classic editor markup",
 };

package/dist/enclosures.js

@@ -0,0 +1,299 @@
+// A port of NetNewsWire's enclosure rendering: Attachment.displayMedium
+// (Modules/Articles/Sources/Articles/Attachment.swift) and the [[enclosures]] HTML
+// (Shared/Article Rendering/ArticleRenderer+Enclosures.swift), at the pinned commit.
+// Keep it line for line with the Swift, so a diff of the two stays easy to review.
+import { ThemeError } from "./project.js";
+export const MEDIA = ["image", "audio", "video", "document", "executable"];
+const STRING_KEYS = ["url", "mime_type", "title"];
+const INTEGER_KEYS = ["size_in_bytes", "duration_in_seconds", "width", "height"];
+const ATTACHMENT_KEYS = [...STRING_KEYS, ...INTEGER_KEYS, "medium"];
+function isTable(value) {
+    return (!!value && typeof value === "object" && !Array.isArray(value) && !(value instanceof Date));
+}
+/**
+ * A fixture's [[attachments]], validated. Like Attachment(url:…), an empty url makes
+ * no attachment, so NetNewsWire never sees it.
+ */
+export function fixtureAttachments(fixture, name) {
+    const value = fixture.attachments;
+    if (value === undefined)
+        return [];
+    if (!Array.isArray(value) || !value.every(isTable)) {
+        throw new ThemeError(`${name}: attachments must be [[attachments]] tables`);
+    }
+    return value.flatMap((table, index) => {
+        const where = `${name}: attachments[${index}]`;
+        const unknown = Object.keys(table)
+            .filter((key) => !ATTACHMENT_KEYS.includes(key))
+            .sort();
+        if (unknown.length)
+            throw new ThemeError(`${where}: unknown key(s): ${unknown.join(", ")}`);
+        for (const key of STRING_KEYS) {
+            if (key in table && typeof table[key] !== "string") {
+                throw new ThemeError(`${where}: ${key} must be a string`);
+            }
+        }
+        for (const key of INTEGER_KEYS) {
+            if (key in table && !Number.isSafeInteger(table[key])) {
+                throw new ThemeError(`${where}: ${key} must be an integer`);
+            }
+        }
+        if ("medium" in table && !MEDIA.includes(table.medium)) {
+            throw new ThemeError(`${where}: medium must be one of ${MEDIA.join(", ")}`);
+        }
+        if (typeof table.url !== "string")
+            throw new ThemeError(`${where}: url is required`);
+        return table.url ? [table] : [];
+    });
+}
+/** A fixture's image_url, else its thumbnail_url: Article.imageLink ?? thumbnailLink. */
+export function fixtureImageURL(fixture, name) {
+    for (const key of ["image_url", "thumbnail_url"]) {
+        const value = fixture[key];
+        if (value === undefined)
+            continue;
+        if (typeof value !== "string")
+            throw new ThemeError(`${name}: ${key} must be a string`);
+        return value;
+    }
+    return undefined;
+}
+const AUDIO_EXTENSIONS = new Set(["mp3", "m4a", "aac", "wav", "ogg", "oga", "opus", "flac"]);
+const VIDEO_EXTENSIONS = new Set(["mp4", "m4v", "mov", "webm"]);
+const IMAGE_EXTENSIONS = new Set(["jpg", "jpeg", "png", "gif", "webp", "heic", "avif"]);
+const VISUAL_ELEMENT_TAGS = ["<img", "<picture", "<video", "<iframe"];
+const YOUTUBE_FLASH_PLAYER_PATH_PREFIX = "/v/";
+const YOUTUBE_EMBED_URL_PREFIX = "https://www.youtube-nocookie.com/embed/";
+/** Foundation's URL(string:), enough for host and path: relative URLs have no host. */
+function parseURL(value) {
+    try {
+        const url = new URL(value);
+        return { host: url.hostname, path: url.pathname };
+    }
+    catch {
+        if (/[\s<>"]/.test(value))
+            return undefined;
+        return { host: "", path: value.replace(/[?#].*$/s, "") };
+    }
+}
+function lastPathComponent(path) {
+    const parts = path.split("/").filter(Boolean);
+    return parts.at(-1) ?? (path.startsWith("/") ? "/" : "");
+}
+function pathExtension(path) {
+    const last = lastPathComponent(path);
+    const dot = last.lastIndexOf(".");
+    return dot > 0 ? last.slice(dot + 1) : "";
+}
+/** How the article view shows an attachment, or undefined for anything else. */
+export function displayMedium(attachment) {
+    const mimeType = attachment.mime_type?.toLowerCase();
+    if (mimeType !== undefined) {
+        if (mimeType.startsWith("audio/"))
+            return "audio";
+        if (mimeType.startsWith("video/"))
+            return "video";
+        if (mimeType.startsWith("image/"))
+            return "image";
+    }
+    const { medium } = attachment;
+    if (medium === "audio" || medium === "video" || medium === "image")
+        return medium;
+    const path = parseURL(attachment.url)?.path;
+    const extension = path === undefined ? "" : pathExtension(path).toLowerCase();
+    if (!extension)
+        return undefined;
+    if (AUDIO_EXTENSIONS.has(extension))
+        return "audio";
+    if (VIDEO_EXTENSIONS.has(extension))
+        return "video";
+    if (IMAGE_EXTENSIONS.has(extension))
+        return "image";
+    return undefined;
+}
+/** RSCore's escapingSpecialXMLCharacters: drops characters XML cannot hold. */
+export function escapeXML(value) {
+    let escaped = "";
+    for (const character of value) {
+        const code = character.codePointAt(0) ?? 0;
+        if (character === "&")
+            escaped += "&amp;";
+        else if (character === "<")
+            escaped += "&lt;";
+        else if (character === ">")
+            escaped += "&gt;";
+        else if (character === '"')
+            escaped += "&quot;";
+        else if (character === "'")
+            escaped += "&apos;";
+        else if (code === 0x9 ||
+            code === 0xa ||
+            code === 0xd ||
+            (code >= 0x20 && code <= 0xd7ff) ||
+            (code >= 0xe000 && code <= 0xfffd) ||
+            code >= 0x10000) {
+            escaped += character;
+        }
+    }
+    return escaped;
+}
+/** ArticleRenderingSpecialCases.youTubeEmbedURL(forAttachmentURL:). */
+export function youTubeEmbedURL(value) {
+    const url = parseURL(value);
+    const host = url?.host.toLowerCase().replace(/^www\./, "");
+    if (!url || !host || !(host === "youtube.com" || host.endsWith(".youtube.com"))) {
+        return undefined;
+    }
+    if (!url.path.startsWith(YOUTUBE_FLASH_PLAYER_PATH_PREFIX))
+        return undefined;
+    const videoID = url.path.slice(YOUTUBE_FLASH_PLAYER_PATH_PREFIX.length);
+    if (!videoID || !/^[A-Za-z0-9_-]+$/.test(videoID))
+        return undefined;
+    return YOUTUBE_EMBED_URL_PREFIX + videoID;
+}
+/** Foundation's ByteCountFormatter.string(fromByteCount:countStyle: .file), en_US. */
+export function byteCount(bytes) {
+    if (bytes === 0)
+        return "Zero KB";
+    if (Math.abs(bytes) < 1000)
+        return `${bytes} ${Math.abs(bytes) === 1 ? "byte" : "bytes"}`;
+    const units = ["KB", "MB", "GB", "TB", "PB", "EB"];
+    let value = bytes / 1000;
+    let unit = 0;
+    while (Math.abs(value) >= 1000 && unit < units.length - 1) {
+        value /= 1000;
+        unit += 1;
+    }
+    const digits = Math.min(unit, 2);
+    const text = value.toLocaleString("en-US", { maximumFractionDigits: digits });
+    return `${text} ${units[unit]}`;
+}
+function durationString(durationInSeconds) {
+    const hours = Math.trunc(durationInSeconds / 3600);
+    const minutes = Math.trunc((durationInSeconds % 3600) / 60);
+    const seconds = durationInSeconds % 60;
+    const pad = (value) => String(value).padStart(2, "0");
+    return hours > 0 ? `${hours}:${pad(minutes)}:${pad(seconds)}` : `${minutes}:${pad(seconds)}`;
+}
+function fileName(value) {
+    const path = parseURL(value)?.path;
+    if (path === undefined)
+        return undefined;
+    const last = lastPathComponent(path);
+    if (!last || last === "/")
+        return undefined;
+    try {
+        return decodeURIComponent(last);
+    }
+    catch {
+        return last;
+    }
+}
+/** Title (or file name), duration, and size, such as “Episode 311 · 1:54:09 · 54.9 MB”. */
+function audioCaption(attachment) {
+    const components = [];
+    const name = attachment.title || fileName(attachment.url);
+    if (name)
+        components.push(name);
+    if (attachment.duration_in_seconds !== undefined) {
+        components.push(durationString(attachment.duration_in_seconds));
+    }
+    if (attachment.size_in_bytes !== undefined)
+        components.push(byteCount(attachment.size_in_bytes));
+    return components.join(" · ");
+}
+function dimensionAttributes(attachment) {
+    if (attachment.width === undefined || attachment.height === undefined)
+        return "";
+    return ` width="${attachment.width}" height="${attachment.height}"`;
+}
+function isVisual(attachment) {
+    if (youTubeEmbedURL(attachment.url) !== undefined)
+        return true;
+    const medium = displayMedium(attachment);
+    return medium === "image" || medium === "video";
+}
+function bodyContainsVisualElement(body) {
+    const lower = body.toLowerCase();
+    return VISUAL_ELEMENT_TAGS.some((tag) => lower.includes(tag));
+}
+/** Body HTML escapes `&` in attributes, so check both forms of the URL. */
+function bodyContainsURL(body, url) {
+    return body.includes(url) || body.includes(escapeXML(url));
+}
+function enclosureHTML(attachment, posterURL) {
+    const youTube = youTubeEmbedURL(attachment.url);
+    if (youTube !== undefined) {
+        const iframe = `<iframe src="${youTube}"${dimensionAttributes(attachment)} allowfullscreen></iframe>`;
+        return `<div class="nnw-enclosure nnw-enclosure-video">${iframe}</div>`;
+    }
+    const medium = displayMedium(attachment);
+    if (medium === undefined)
+        return undefined;
+    const src = escapeXML(attachment.url);
+    let mediaElement;
+    let caption;
+    switch (medium) {
+        case "audio":
+            mediaElement = `<audio controls preload="none" src="${src}"></audio>`;
+            caption = audioCaption(attachment);
+            break;
+        case "video": {
+            let attributes = `controls preload="metadata" playsinline src="${src}"${dimensionAttributes(attachment)}`;
+            if (posterURL)
+                attributes += ` poster="${escapeXML(posterURL)}"`;
+            mediaElement = `<video ${attributes}></video>`;
+            caption = attachment.title;
+            break;
+        }
+        case "image":
+            mediaElement = `<img src="${src}" alt=""${dimensionAttributes(attachment)}>`;
+            caption = attachment.title;
+            break;
+        default:
+            return undefined;
+    }
+    let html = `<div class="nnw-enclosure nnw-enclosure-${medium}">${mediaElement}`;
+    if (caption)
+        html += `<div class="nnw-enclosure-caption">${escapeXML(caption)}</div>`;
+    return `${html}</div>`;
+}
+/**
+ * HTML for the [[enclosures]] substitution, empty when there's nothing to show.
+ * Skips attachments whose URLs already appear in the body. imageURL is shown only
+ * when nothing else visual is: no image or video enclosure, nor one in the body.
+ */
+export function enclosuresHTML(attachments, body, imageURL) {
+    const enclosures = [];
+    let hasVisualEnclosure = false;
+    for (const attachment of attachments) {
+        if (bodyContainsURL(body, attachment.url))
+            continue;
+        const enclosure = enclosureHTML(attachment, imageURL);
+        if (enclosure === undefined)
+            continue;
+        enclosures.push(enclosure);
+        hasVisualEnclosure ||= isVisual(attachment);
+    }
+    if (!hasVisualEnclosure &&
+        imageURL &&
+        !bodyContainsVisualElement(body) &&
+        !bodyContainsURL(body, imageURL)) {
+        enclosures.unshift(`<div class="nnw-enclosure nnw-enclosure-image"><img src="${escapeXML(imageURL)}" alt=""></div>`);
+    }
+    if (!enclosures.length)
+        return "";
+    return `<div class="nnw-enclosures">\n${enclosures.join("\n")}\n</div>`;
+}
+/**
+ * The body and [[enclosures]] values, as ArticleRenderer.articleSubstitutions() sets
+ * them. A template without the macro gets its enclosures after the body, which a
+ * wrapper <div> closes so an unclosed tag in it can't swallow them.
+ */
+export function placeEnclosures(template, body, enclosures) {
+    if (template.includes("[[enclosures]]"))
+        return { body, enclosures };
+    if (!enclosures)
+        return { body };
+    return { body: `<div>${body}</div>${enclosures}` };
+}

package/dist/render.js

@@ -3,6 +3,7 @@ import { mkdirSync, readFileSync, realpathSync, rmSync, statSync, writeFileSync,
 import { extname, isAbsolute, join, relative } from "node:path";
 import { decodeHTML } from "entities";
 import { Parser } from "htmlparser2";
+import { enclosuresHTML, fixtureAttachments, fixtureImageURL, placeEnclosures, } from "./enclosures.js";
 import { renderingInputs } from "./netnewswire.js";
 import { fixturePath, readFixture, repositoryFixtures, ThemeError, themeStem, } from "./project.js";
 import { formatG, pyStr } from "./pyformat.js";
@@ -64,7 +65,7 @@ const VIEWPORTS = {
 // The marketplace card shows its image at 347x240, cropped from the top.
 const CARD_VIEWPORT = [800, 552];
 // Fixture images a fixture may reference as media/NAME, from fixtures/media/NAME.
-const MEDIA_TYPES = {
+const IMAGE_TYPES = {
     ".avif": "image/avif",
     ".gif": "image/gif",
     ".jpeg": "image/jpeg",
@@ -73,6 +74,23 @@ const MEDIA_TYPES = {
     ".svg": "image/svg+xml",
     ".webp": "image/webp",
 };
+// Enclosure players may also play a fixture's own audio or video file.
+const PLAYABLE_TYPES = {
+    ".aac": "audio/aac",
+    ".flac": "audio/flac",
+    ".m4a": "audio/mp4",
+    ".m4v": "video/mp4",
+    ".mov": "video/quicktime",
+    ".mp3": "audio/mpeg",
+    ".mp4": "video/mp4",
+    ".oga": "audio/ogg",
+    ".ogg": "audio/ogg",
+    ".opus": "audio/ogg",
+    ".wav": "audio/wav",
+    ".webm": "video/webm",
+};
+// An enclosure's own tag, as enclosuresHTML writes it.
+const ENCLOSURE_TAG_RE = /<(video|audio|iframe)\b([^>]*)>/g;
 // The template's own fixtures get the full matrix and the stress cases. Any other
 // fixture a theme adds is an extra: checked on Mac and iPhone in both appearances.
 export const FIXTURE_NAMES = {
@@ -102,6 +120,12 @@ const SCENARIOS = [
         "The kitchen-sink fixture at a large reading size: the xxLargeText size class on " +
             "Mac and 23 pt Dynamic Type on iPhone.",
     ],
+    [
+        "older-netnewswire",
+        "Older NetNewsWire",
+        "The article fixture as NetNewsWire releases before enclosure support render it: " +
+            "they leave the template's [[enclosures]] macro as literal text, which must not show.",
+    ],
     [
         "article-javascript-off",
         "Article JavaScript off",
@@ -117,6 +141,8 @@ const CHECKS = [
     "no broken images",
     "no external requests",
     "no JavaScript errors",
+    "enclosure players and images show, fit the window, and keep their shape",
+    "enclosure captions are legible",
 ];
 export class RenderTarget {
     fixture;
@@ -126,15 +152,18 @@ export class RenderTarget {
     height;
     largeText;
     themeScripts;
+    /** Rendered as NetNewsWire before [[enclosures]]: the macro stays literal. */
+    olderNetNewsWire;
     /** A 2x capture of the card viewport alone, for the marketplace card. */
     card;
-    constructor(fixture, platform, appearance, { largeText = false, themeScripts = true, card = false } = {}) {
+    constructor(fixture, platform, appearance, { largeText = false, themeScripts = true, olderNetNewsWire = false, card = false } = {}) {
         this.fixture = fixture;
         this.platform = platform;
         this.appearance = appearance;
         [this.width, this.height] = card ? CARD_VIEWPORT : VIEWPORTS[platform];
         this.largeText = largeText;
         this.themeScripts = themeScripts;
+        this.olderNetNewsWire = olderNetNewsWire;
         this.card = card;
     }
     get ios() {
@@ -150,6 +179,8 @@ export class RenderTarget {
             parts.push("large text");
         if (!this.themeScripts)
             parts.push("Article JavaScript off");
+        if (this.olderNetNewsWire)
+            parts.push("older NetNewsWire");
         if (this.card)
             parts.push("card");
         return parts.join(" · ");
@@ -159,6 +190,8 @@ export class RenderTarget {
             return "large-text";
         if (!this.themeScripts)
             return "article-javascript-off";
+        if (this.olderNetNewsWire)
+            return "older-netnewswire";
         return this.fixture;
     }
     get slug() {
@@ -167,6 +200,8 @@ export class RenderTarget {
             parts.push("large-text");
         if (!this.themeScripts)
             parts.push("no-article-js");
+        if (this.olderNetNewsWire)
+            parts.push("older-netnewswire");
         if (this.card)
             parts.push("card");
         return parts.join("-");
@@ -199,14 +234,27 @@ export function normalTargets(extras = []) {
     }
     return targets;
 }
-export function checkTargets(extras = []) {
-    return [
+/**
+ * Everything check renders. A template that places [[enclosures]] itself also gets
+ * the older-NetNewsWire cases, since releases before enclosure support leave that
+ * macro as text in every article.
+ */
+export function checkTargets(extras = [], { enclosuresMacro = false } = {}) {
+    const targets = [
         ...normalTargets(extras),
         new RenderTarget("kitchen-sink", "mac", "light", { largeText: true }),
         new RenderTarget("kitchen-sink", "iphone", "light", { largeText: true }),
         new RenderTarget("article", "mac", "light", { themeScripts: false }),
         new RenderTarget("article", "iphone", "light", { themeScripts: false }),
     ];
+    if (enclosuresMacro) {
+        targets.push(new RenderTarget("article", "mac", "light", { olderNetNewsWire: true }), new RenderTarget("article", "iphone", "dark", { olderNetNewsWire: true }));
+    }
+    return targets;
+}
+/** Whether a theme places enclosures itself, as NetNewsWire decides it. */
+export function placesEnclosures(theme) {
+    return read(join(theme, "template.html")).includes("[[enclosures]]");
 }
 /** Perform NetNewsWire's single-pass, non-recursive macro substitution. */
 export function substitute(template, mapping) {
@@ -258,8 +306,8 @@ function placeholder(width, height) {
  * A fixture's own image, media/NAME, as a data URI read from fixtures/media/NAME.
  * Undefined, so a placeholder as before, unless it is an image inside that directory.
  */
-function mediaDataURI(media, src) {
-    const type = MEDIA_TYPES[extname(src).toLowerCase()];
+function mediaDataURI(media, src, types = IMAGE_TYPES) {
+    const type = types[extname(src).toLowerCase()];
     if (!src.startsWith("media/") || !type)
         return undefined;
     try {
@@ -306,14 +354,71 @@ export function offlineMedia(body, media) {
         return `<${tagName}${kept} src="${local ?? placeholder(values.get("width"), values.get("height"))}">`;
     });
 }
-function fixtureMapping(fixture, target, media) {
+/** A tag's attributes, in order, with their raw (still quoted) values. */
+function parseAttributes(rest) {
+    return [...rest.matchAll(ATTRIBUTE_RE)].map((match) => [
+        match[1] ?? "",
+        match[2] ?? "",
+    ]);
+}
+function attributeValue(attributes, name) {
+    const found = attributes.find(([key]) => key.toLowerCase() === name);
+    return found && decodeHTML(found[1].replace(/^["']+|["']+$/g, ""));
+}
+/**
+ * Take enclosures offline, as offlineMedia does a body. Images and a video's poster
+ * become placeholders (media/NAME shows the fixture's file); a player that would
+ * fetch loses its source, as if the file had not loaded, unless it plays a media/
+ * file; a video with nothing to show gets a placeholder poster at its own size, for
+ * the frame it would load; and the YouTube player becomes a same-size placeholder.
+ */
+export function offlineEnclosures(html, media) {
+    const local = (src, types) => media === undefined ? undefined : mediaDataURI(media, src, types);
+    return offlineMedia(html, media).replace(ENCLOSURE_TAG_RE, (_whole, tagName, rest) => {
+        const attributes = parseAttributes(rest);
+        const width = attributeValue(attributes, "width");
+        const height = attributeValue(attributes, "height");
+        const src = attributeValue(attributes, "src") ?? "";
+        if (tagName === "iframe") {
+            const label = `${width && height ? `${width} × ${height} ` : ""}YouTube player`;
+            const page = "<body style='margin:0;display:grid;place-items:center;height:100vh;" +
+                `background:#8a8f98;color:#fff;font:600 16px system-ui'>${label}`;
+            const kept = attributes.filter(([name]) => name.toLowerCase() !== "src");
+            return `<iframe${kept.map(([n, v]) => (v ? ` ${n}=${v}` : ` ${n}`)).join("")} srcdoc="${escapeHTML(page)}">`;
+        }
+        const playable = fetches(src) ? local(src, PLAYABLE_TYPES) : src;
+        const kept = attributes.filter(([name]) => !["src", "poster"].includes(name.toLowerCase()));
+        let tag = `<${tagName}${kept.map(([n, v]) => (v ? ` ${n}=${v}` : ` ${n}`)).join("")}`;
+        if (playable)
+            tag += ` src="${escapeHTML(playable)}"`;
+        if (tagName === "video") {
+            const poster = attributeValue(attributes, "poster");
+            let shown;
+            if (poster)
+                shown = fetches(poster) ? (local(poster) ?? placeholder(width, height)) : poster;
+            else if (!playable)
+                shown = placeholder(width, height);
+            if (shown)
+                tag += ` poster="${escapeHTML(shown)}"`;
+        }
+        return `${tag}>`;
+    });
+}
+function fixtureMapping(fixture, target, template, media) {
     const mapping = {};
     for (const key of TEMPLATE_KEYS)
         mapping[key] = pyStr(fixture[key] ?? "");
     if (!mapping.dateline_style) {
         mapping.dateline_style = mapping.title ? "articleDateline" : "articleDatelineTitle";
     }
-    mapping.body = offlineMedia(mapping.body ?? "", media);
+    const body = mapping.body ?? "";
+    mapping.body = offlineMedia(body, media);
+    // NetNewsWire before enclosure support ignores attachments and leaves the macro.
+    if (!target.olderNetNewsWire) {
+        const name = `fixtures/${target.fixture}.toml`;
+        const enclosures = enclosuresHTML(fixtureAttachments(fixture, name), body, fixtureImageURL(fixture, name));
+        Object.assign(mapping, placeEnclosures(template, mapping.body, offlineEnclosures(enclosures, media)));
+    }
     if (!mapping.avatar_src || fetches(mapping.avatar_src)) {
         mapping.avatar_src = avatarDataURI(mapping.feed_link_title ?? "");
     }
@@ -401,7 +506,7 @@ export function renderPage(theme, fixture, target, snapshot = renderingInputs().
     }
     const style = substitute(`${read(join(snapshot, "Shared", "core.css"))}\n${stylesheet}`, styleSubstitutions);
     const template = read(join(theme, "template.html"));
-    let body = substitute(template, fixtureMapping(fixture, target, media));
+    let body = substitute(template, fixtureMapping(fixture, target, template, media));
     if (!target.themeScripts)
         body = removeScripts(body);
     let page = substitute(skeleton, {

package/lldb/nnwdump.py

@@ -4,6 +4,12 @@ Stopped at the final `return d` of ArticleRenderer.articleSubstitutions(), this
 reads the substitution dictionary NetNewsWire built for the selected article and
 writes it as a TOML fixture. `npx nnw-theme@2 capture` prints the setup steps.
 
+NetNewsWire with enclosure support renders an article's enclosures into that
+dictionary: as `enclosures`, or appended to a wrapped `body` when the template has no
+[[enclosures]] macro. nnwdump keeps neither. It records the article's attachments
+and image instead, as [[attachments]] tables and image_url/thumbnail_url, so nnw-theme
+renders them for whichever template previews the fixture.
+
 Values cross the debugger boundary base64-encoded, so nothing is truncated or
 mis-escaped. HTML values are written as '''literal''' strings, so fixtures stay
 readable and diff cleanly.
@@ -16,6 +22,7 @@ helpers can be tested without a debugger.
 from __future__ import annotations
 
 import base64
+import json
 import optparse
 import shlex
 from pathlib import Path
@@ -24,6 +31,20 @@ USAGE = "nnwdump [--var NAME] [--article NAME] [--no-icon] [OUTPUT.toml]"
 DEFAULT_OUTPUT = "fixtures/nnw-capture.toml"
 # Sorted last so the short metadata stays at the top of the file.
 _HTML_KEYS = {"body"}
+_ENCLOSURES_KEY = "enclosures"
+# ArticleRenderer's body for a template without [[enclosures]]: <div>BODY</div>ENCLOSURES.
+_WRAPPED_BODY_TAIL = '</div><div class="nnw-enclosures">'
+# Attachment's Codable keys, in fixture order, with their fixture names.
+_ATTACHMENT_KEYS = (
+    ("url", "url"),
+    ("mimeType", "mime_type"),
+    ("title", "title"),
+    ("sizeInBytes", "size_in_bytes"),
+    ("durationInSeconds", "duration_in_seconds"),
+    ("width", "width"),
+    ("height", "height"),
+    ("medium", "medium"),
+)
 
 
 def resolve_output(argument: str) -> Path:
@@ -56,13 +77,49 @@ def toml_line(key: str, value: str) -> str:
     return f'{key} = "{_toml_basic(value)}"'
 
 
-def fixture_text(pairs: list[tuple[str, str]], name: str) -> str:
+def without_enclosures(pairs: list[tuple[str, str]]) -> list[tuple[str, str]]:
+    """The substitutions as they were before NetNewsWire rendered the enclosures."""
+    values = dict(pairs)
+    if _ENCLOSURES_KEY not in values:
+        body = values.get("body", "")
+        at = body.rfind(_WRAPPED_BODY_TAIL)
+        if body.startswith("<div>") and at != -1:
+            values["body"] = body[len("<div>") : at]
+    values.pop(_ENCLOSURES_KEY, None)
+    return list(values.items())
+
+
+def attachments_from_json(text: str) -> list[dict]:
+    """Attachment JSON, as [Attachment].json() writes it, as fixture tables."""
+    tables = []
+    for attachment in json.loads(text or "[]") or []:
+        table = {
+            name: attachment[key]
+            for key, name in _ATTACHMENT_KEYS
+            if attachment.get(key) is not None
+        }
+        if table.get("url"):
+            tables.append(table)
+    return tables
+
+
+def _toml_value_line(key: str, value) -> str:
+    if isinstance(value, bool) or not isinstance(value, int):
+        return toml_line(key, str(value))
+    return f"{key} = {value}"
+
+
+def fixture_text(pairs: list[tuple[str, str]], name: str, attachments: list[dict] = ()) -> str:
     ordered = sorted(pairs, key=lambda pair: (pair[0] in _HTML_KEYS, pair[0]))
     header = (
         "# NetNewsWire article captured with nnwdump.\n"
         f"# Preview with: npx nnw-theme@2 render {name}\n\n"
     )
-    return header + "\n".join(toml_line(key, value) for key, value in ordered) + "\n"
+    text = header + "\n".join(toml_line(key, value) for key, value in ordered) + "\n"
+    for table in attachments:
+        lines = [_toml_value_line(key, value) for key, value in table.items()]
+        text += "\n[[attachments]]\n" + "\n".join(lines) + "\n"
+    return text
 
 
 def _evaluate(interpreter, expression: str):
@@ -127,19 +184,32 @@ def nnwdump(debugger, command, result, internal_dict):
         result.SetError(f"`{options.var}` is empty; is this the substitution dictionary?")
         return
 
+    # Older NetNewsWire has no attachments to read; capture the article without them.
+    pairs = without_enclosures(pairs)
+    attachments = []
+    raw, _ = _evaluate(interpreter, f'({options.article}.attachments ?? []).json() ?? "[]"')
+    if raw:
+        attachments = attachments_from_json(raw)
+    for key, link in (("image_url", "imageLink"), ("thumbnail_url", "thumbnailLink")):
+        value, _ = _evaluate(interpreter, f'{options.article}.{link} ?? ""')
+        if value:
+            pairs.append((key, value))
+
     note = ""
+    if attachments:
+        note = f" and {len(attachments)} attachment{'s' if len(attachments) > 1 else ''}"
     if not options.no_icon:
         icon = _icon_data_url(interpreter, options.article)
         if icon:
             pairs = [(key, value) for key, value in pairs if key != "avatar_src"]
             pairs.append(("avatar_src", icon))
-            note = " with the feed's icon"
+            note += " with the feed's icon"
         else:
-            note = "; the feed has no icon, so previews generate one"
+            note += "; the feed has no icon, so previews generate one"
 
     try:
         output.parent.mkdir(parents=True, exist_ok=True)
-        output.write_text(fixture_text(pairs, output.stem), encoding="utf-8")
+        output.write_text(fixture_text(pairs, output.stem, attachments), encoding="utf-8")
     except OSError as error:
         result.SetError(f"could not write {output}: {error}")
         return

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nnw-theme",
-	"version": "2.2.0",
+	"version": "2.3.0",
 	"description": "Create, preview, check, and publish a NetNewsWire theme.",
 	"license": "Apache-2.0",
 	"author": "Dave Marquard",