nnw-theme 2.4.0 → 2.5.0

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.3b4`,
-commit `e530be1ab19f68fe322850bf5fb95bca4b36fb91`, under `assets/netnewswire/`.
+[NetNewsWire](https://github.com/Ranchero-Software/NetNewsWire) release `mac-7.3b6`,
+commit `9a07d406177e896826e33952fb16c06e21c19000`, 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/enclosures.js

@@ -2,8 +2,10 @@
 // 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.
+// template, or after the body when the template has no such macro. [[primary_media]]
+// reuses those players, and adds div.nnw-primary-image > img with an optional
+// div.nnw-primary-image-caption. A theme script may move any of them elsewhere, so
+// each is found wherever it ended up.
 () => {
 	const failures = [];
 	const fail = (message) => failures.push(message);
@@ -14,7 +16,7 @@
 		return Number.isFinite(number) && number > 0 ? number : 0;
 	};
 
-	const enclosures = [...document.querySelectorAll(".nnw-enclosure")];
+	const enclosures = [...document.querySelectorAll(".nnw-enclosure, .nnw-primary-image")];
 	enclosures.forEach((enclosure, index) => {
 		const media = enclosure.querySelector(":scope > :is(img, video, audio, iframe)");
 		if (!media) return;
@@ -89,7 +91,7 @@
 		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")];
+	const captions = [...document.querySelectorAll(".nnw-enclosure-caption, .nnw-primary-image-caption")];
 	for (const caption of captions) {
 		if (!caption.getClientRects().length || !caption.innerText.trim()) continue;
 		const name = JSON.stringify(caption.innerText.trim().slice(0, 40));

package/assets/guide/design-checklist.md

@@ -15,7 +15,8 @@ prescribed aesthetic.
   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.
+  captions, and the article image leading a podcast episode, in light and dark. A
+  theme with `primary_media` checks them above the body, and its older-NetNewsWire render.
 - If the theme script handles footnotes or relies on classes or ids, give a fixture
   `deliveries = ["freshrss", "miniflux"]` and check the cases synced readers see.
 - Check an untitled article, such as the `mastodon` fixture: the dateline stands in for

package/assets/guide/fixtures.md

@@ -36,11 +36,13 @@ footnotes stay plain links until a theme script turns them into `a.footnote` mar
 ## 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:
+`enclosures` and `primary_media` macros, 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 and thumbnail, which NetNewsWire treats differently:
 
 ```toml
-image_url = "https://example.org/episode-art.jpg"  # else thumbnail_url
+image_url = "https://example.org/episode-art.jpg"
+thumbnail_url = "https://example.org/thumb.jpg"     # a primary_media image only
 
 [[attachments]]
 url = "https://example.org/episode-311.mp3"        # required

package/assets/guide/theme-format.md

@@ -64,11 +64,14 @@ The markup is fixed and carries no inline styles:
 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.
+iframe player. Enclosures already in the body are skipped, including a resized
+copy at another URL or the still of a YouTube video the body embeds, and documents are
+never shown. A video uses the article's image, else its thumbnail, as its poster.
+
+A template without `primary_media`, and a short untitled post, gets the article's image
+as the first image enclosure unless the body already shows it, even beside other
+enclosures or a video that uses it as its poster. The thumbnail is not shown there:
+only `primary_media` uses it as an image.
 
 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
@@ -79,12 +82,42 @@ 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.
 
+## Primary media
+
+The `primary_media` macro places the article's main media, usually above the body: a
+video with the article image as its poster, else audio with the article image above
+it, else the article image. The image is the article's own, else the first image
+enclosure, else the thumbnail. Media already in the body is left out, and whatever
+appears here is left out of the enclosures. A short untitled post, such as a Mastodon
+post, keeps its images in the enclosures, after the text. With nothing to show the
+macro is empty.
+
+```html
+<div class="nnw-primary-media">
+  <div class="nnw-primary-image"><img src="…" alt="…" title="…" width="…" height="…">
+    <div class="nnw-primary-image-caption">The image's title</div></div>
+  <div class="nnw-enclosure nnw-enclosure-audio">…</div>
+</div>
+```
+
+The video and audio blocks are the enclosures' markup. The caption appears only when
+the image has a title that differs from the article's. `core.css` adds margins and
+`height: auto`. `check` applies the enclosure rules here too.
+
+NetNewsWire before 7.3b6 leaves the macro as text, as with `enclosures`. Either hide its
+container, `.my-media:not(:has(.nnw-primary-media)) { display: none; }`, or put the
+macro only in `template7.3.html`: NetNewsWire 7.3 reads that file instead of
+`template.html` when a theme ships one, and older releases ignore it, so `template.html`
+can stay free of new macros at the cost of keeping two templates in step. `check`
+renders `template7.3.html` when it exists, and its older-NetNewsWire cases render
+`template.html` with both macros left as text.
+
 ## Pinned NetNewsWire
 
-The renderer pins NetNewsWire 7.3b4 for Mac (`mac-7.3b4`, commit
-`e530be1ab19f68fe322850bf5fb95bca4b36fb91`), whose rendering files iOS 7.3 shares.
-Enclosure support starts with 7.3b3, and 7.3b4 keeps the footnote popover inside the
-article column. It uses upstream `core.css`, macOS and
+The renderer pins NetNewsWire 7.3b6 for Mac (`mac-7.3b6`, commit
+`9a07d406177e896826e33952fb16c06e21c19000`), whose rendering files iOS 7.3 shares.
+Enclosure support starts with 7.3b3, 7.3b4 keeps the footnote popover inside the
+article column, and 7.3b6 adds `primary_media` and `template7.3.html`. 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

package/assets/netnewswire/Shared/core.css

@@ -63,6 +63,25 @@ img.twemoji, img.emoji {
 	width: auto;
 }
 
+/* Primary media: the article’s main video, audio, or image, from the feed */
+
+.nnw-primary-media {
+	margin: 1em 0;
+}
+
+.nnw-primary-image {
+	margin: 1em 0;
+}
+
+.nnw-primary-image img {
+	height: auto;
+}
+
+.nnw-primary-image-caption {
+	margin: 0.5em 0 0;
+	font-size: 0.9em;
+}
+
 /* Enclosures: audio and video players and images after the article body */
 
 .nnw-enclosures {

package/assets/netnewswire/Shared/main.js

@@ -15,6 +15,18 @@ function wrapFrames() {
 	});
 }
 
+// Optimole lazy-loading leaves src as about:blank, with the real URL in data-opt-src.
+// <https://github.com/Ranchero-Software/NetNewsWire/issues/5545>
+function loadLazyIframes() {
+	document.querySelectorAll("iframe[data-opt-src]").forEach(element => {
+		const src = element.getAttribute("src");
+		const lazySrc = element.getAttribute("data-opt-src");
+		if ((!src || src === "about:blank") && /^https?:\/\//i.test(lazySrc)) {
+			element.src = lazySrc;
+		}
+	});
+}
+
 // The stylesheet clamps iframes to the article width with max-width: 100%,
 // which leaves an attribute-sized iframe with its full height — distorted,
 // and a huge blank box when the embed fails to load. Let the height follow
@@ -292,6 +304,7 @@ function removeInstapaperIgnoreElements() {
 function processPage() {
 	// stripStyles must run first — wrapFrames sets aspect-ratio on fixed-size iframes, which stripStyles would remove.
 	stripStyles();
+	loadLazyIframes();
 	wrapFrames();
 	wrapTables();
 	inlineVideos();

package/assets/netnewswire/netnewswire.json

@@ -1,6 +1,6 @@
 {
-	"release": "mac-7.3b4",
-	"commit": "e530be1ab19f68fe322850bf5fb95bca4b36fb91",
+	"release": "mac-7.3b6",
+	"commit": "9a07d406177e896826e33952fb16c06e21c19000",
 	"files": [
 		{
 			"destination": "LICENSE",
@@ -20,12 +20,12 @@
 		{
 			"destination": "Shared/core.css",
 			"source": "Shared/Article Rendering/core.css",
-			"sha256": "1cc7d654559b3cd6db1202391c6fcfb8041eaae6fc81850df1be72ebb6921090"
+			"sha256": "3a1a56fe6e76e9e11b4180399e6d90b702075224fd3da4e678cf627e83939c5b"
 		},
 		{
 			"destination": "Shared/main.js",
 			"source": "Shared/Article Rendering/main.js",
-			"sha256": "1c3c1084e295f83668a427b8ae89813a1df621cfb053e8192bbad3f044be3581"
+			"sha256": "6be65bcb16be38b686ddf8d96bca3b0d844eee2e138758842b247ab50503dcc4"
 		},
 		{
 			"destination": "Shared/newsfoot.js",

package/dist/body-images.js

@@ -0,0 +1,209 @@
+// NetNewsWire's search for a body's real images: RSParser's HTMLImageParser and
+// SignificantImageFilter, at the pinned commit. Enclosures and primary media use it to
+// spot a resized copy of an image the body already shows.
+import { Parser } from "htmlparser2";
+const MINIMUM_DIMENSION = 64;
+const MAXIMUM_ASPECT_RATIO = 6;
+const PREFERRED_SRCSET_WIDTH = 1200;
+const LAZY_SRCSET_ATTRIBUTES = ["data-lazy-srcset", "data-srcset"];
+const LAZY_SOURCE_ATTRIBUTES = ["data-lazy-src", "data-src", "data-original"];
+const DECORATIVE_CLASSES = new Set(["emoji", "wp-smiley"]);
+const BLOCKED_FILE_NAMES = new Set(["1x1", "blank", "pixel", "spacer", "transparent"]);
+const BLOCKED_PATH_COMPONENTS = new Set(["open", "track"]);
+const PHOTO_EXTENSIONS = new Set(["avif", "heic", "jpeg", "jpg", "png", "webp"]);
+const BLOCKED_IMAGES = [
+    ["addtoany.com", "/"],
+    ["feedburner.com", "/"],
+    ["feeds.wordpress.com", "/"],
+    ["pixel.wp.com", "/"],
+    ["s.w.org", "/images/core/emoji/"],
+    ["s0.wp.com", "/i/blank.jpg"],
+    ["stats.wordpress.com", "/"],
+];
+const SHARING_LINKS = [
+    ["addtoany.com", "/"],
+    ["bsky.app", "/intent/"],
+    ["digg.com", "/submit"],
+    ["facebook.com", "/dialog/"],
+    ["facebook.com", "/share"],
+    ["flipboard.com", "/bookmarklet"],
+    ["getpocket.com", "/save"],
+    ["linkedin.com", "/cws/share"],
+    ["linkedin.com", "/sharearticle"],
+    ["linkedin.com", "/sharing/"],
+    ["news.ycombinator.com", "/submitlink"],
+    ["pinterest.com", "/pin/create"],
+    ["reddit.com", "/submit"],
+    ["shareaholic.com", "/"],
+    ["sharethis.com", "/"],
+    ["t.me", "/share"],
+    ["threads.net", "/intent/"],
+    ["tumblr.com", "/share"],
+    ["tumblr.com", "/widgets/share"],
+    ["twitter.com", "/intent/"],
+    ["twitter.com", "/share"],
+    ["whatsapp.com", "/send"],
+    ["x.com", "/intent/"],
+    ["x.com", "/share"],
+];
+function matches(url, prefixes) {
+    const host = url.hostname.toLowerCase();
+    const path = url.pathname.toLowerCase();
+    return prefixes.some(([domain, prefix]) => (host === domain || host.endsWith(`.${domain}`)) && path.startsWith(prefix));
+}
+function parsed(value) {
+    try {
+        return new URL(value);
+    }
+    catch {
+        return undefined;
+    }
+}
+function hasSignificantDimensions(width, height) {
+    if (width !== undefined && width < MINIMUM_DIMENSION)
+        return false;
+    if (height !== undefined && height < MINIMUM_DIMENSION)
+        return false;
+    if (width !== undefined && height !== undefined) {
+        return Math.max(width, height) / Math.min(width, height) <= MAXIMUM_ASPECT_RATIO;
+    }
+    return true;
+}
+function isGravatar(url) {
+    const host = url.hostname.toLowerCase();
+    return ((host === "gravatar.com" || host.endsWith(".gravatar.com")) &&
+        url.pathname.startsWith("/avatar/"));
+}
+function isBlockedURL(value) {
+    const url = parsed(value);
+    if (!url || !["http:", "https:"].includes(url.protocol) || !url.hostname)
+        return true;
+    const components = url.pathname.split("/").filter(Boolean);
+    const name = components.at(-1) ?? "";
+    const dot = name.lastIndexOf(".");
+    const extension = dot > 0 ? name.slice(dot + 1).toLowerCase() : "";
+    if (extension === "svg")
+        return true;
+    if (BLOCKED_FILE_NAMES.has((dot > 0 ? name.slice(0, dot) : name).toLowerCase()))
+        return true;
+    if (!PHOTO_EXTENSIONS.has(extension) &&
+        components.some((component) => BLOCKED_PATH_COMPONENTS.has(component.toLowerCase()))) {
+        return true;
+    }
+    return matches(url, BLOCKED_IMAGES) || isGravatar(url);
+}
+function isSharingLink(value) {
+    const url = value === undefined ? undefined : parsed(value);
+    if (!url)
+        return false;
+    return url.protocol === "mailto:" || (url.hostname !== "" && matches(url, SHARING_LINKS));
+}
+function hasDecorativeClass(htmlClass) {
+    return (htmlClass ?? "")
+        .split(/\s+/)
+        .some((name) => DECORATIVE_CLASSES.has(name.toLowerCase()));
+}
+/** Foundation's URL(string:relativeTo:).absoluteString; undefined for data: or empty. */
+function resolved(value, baseURL) {
+    if (value === undefined || /^\s*data:/i.test(value))
+        return undefined;
+    const trimmed = value.trim();
+    if (!trimmed)
+        return undefined;
+    try {
+        return new URL(trimmed, baseURL || undefined).href;
+    }
+    catch {
+        return undefined;
+    }
+}
+/** The narrowest candidate at least 1200w wide, else the one with the largest descriptor. */
+function preferredSrcsetCandidate(srcset) {
+    let narrowest;
+    let largest;
+    for (const match of srcset.matchAll(/[\s,]*([^\s,][^\s]*)([^,]*)/g)) {
+        let url = match[1] ?? "";
+        const trailingComma = url.endsWith(",");
+        url = url.replace(/,+$/, "");
+        const descriptor = trailingComma ? "" : ((match[2] ?? "").trim().split(/\s+/)[0] ?? "");
+        if (!url)
+            continue;
+        const size = Number.parseFloat(descriptor) || 1;
+        if (descriptor.endsWith("w") &&
+            size >= PREFERRED_SRCSET_WIDTH &&
+            size < (narrowest?.size ?? Number.POSITIVE_INFINITY)) {
+            narrowest = { url, size };
+        }
+        if (size > (largest?.size ?? Number.NEGATIVE_INFINITY))
+            largest = { url, size };
+    }
+    return (narrowest ?? largest)?.url;
+}
+function styleProperties(style) {
+    const properties = new Map();
+    for (const declaration of (style ?? "").split(";")) {
+        const colon = declaration.indexOf(":");
+        if (colon === -1)
+            continue;
+        properties.set(declaration.slice(0, colon).trim().toLowerCase(), declaration
+            .slice(colon + 1)
+            .trim()
+            .toLowerCase());
+    }
+    return properties;
+}
+/** "300" and "300px" are pixel dimensions; percentages and other units are not. */
+function pixelDimension(value) {
+    const match = value
+        ?.trim()
+        .toLowerCase()
+        .match(/^([+-]?\d+)(?:px)?$/);
+    return match ? Number(match[1]) : undefined;
+}
+/** HTMLImageParser.significantImageURLStrings: absolute URLs, in document order. */
+export function significantImageURLs(html, baseURL) {
+    const found = new Set();
+    let enclosingLink;
+    const parser = new Parser({
+        onopentag(name, attributes) {
+            if (name === "a") {
+                enclosingLink = resolved(attributes.href, baseURL);
+                return;
+            }
+            if (name !== "img")
+                return;
+            const style = styleProperties(attributes.style);
+            if (attributes.hidden !== undefined || style.get("display")?.startsWith("none"))
+                return;
+            const width = pixelDimension(style.get("width")) ?? pixelDimension(attributes.width);
+            const height = pixelDimension(style.get("height")) ?? pixelDimension(attributes.height);
+            if (!hasSignificantDimensions(width, height))
+                return;
+            if (hasDecorativeClass(attributes.class) || isSharingLink(enclosingLink))
+                return;
+            const sources = [
+                ...LAZY_SRCSET_ATTRIBUTES.map((key) => attributes[key])
+                    .filter((value) => value !== undefined)
+                    .map(preferredSrcsetCandidate),
+                ...LAZY_SOURCE_ATTRIBUTES.map((key) => attributes[key]),
+                attributes.srcset === undefined
+                    ? undefined
+                    : preferredSrcsetCandidate(attributes.srcset),
+                attributes.src,
+            ];
+            for (const source of sources) {
+                const url = resolved(source, baseURL);
+                if (url !== undefined && !isBlockedURL(url)) {
+                    found.add(url);
+                    return;
+                }
+            }
+        },
+        onclosetag(name) {
+            if (name === "a")
+                enclosingLink = undefined;
+        },
+    }, { decodeEntities: true, lowerCaseTags: true, lowerCaseAttributeNames: true });
+    parser.end(html);
+    return [...found];
+}

package/dist/browser.js

@@ -11,7 +11,11 @@ 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]]";
+/** Macros older NetNewsWire leaves as text, and what explains each when it shows. */
+const NEWER_MACROS = {
+    "[[enclosures]]": "without enclosure support; hide its element when it holds no .nnw-enclosures",
+    "[[primary_media]]": "before 7.3b6; hide its element when it holds no .nnw-primary-media, or use it only in template7.3.html",
+};
 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 = {
@@ -150,9 +154,8 @@ 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");
+    for (const macro of state.literalMacros ?? []) {
+        found.push(`${macro} shows as text in NetNewsWire releases ${NEWER_MACROS[macro]}`);
     }
     if (state.overflow)
         found.push("horizontal document overflow");
@@ -185,9 +188,9 @@ async function loadImages(timeout) {
         new Promise((resolve) => setTimeout(resolve, timeout)),
     ]);
 }
-// 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 }) {
+// Runs in the page after its screenshot. With olderNetNewsWire, the macros in `macros`
+// are expected in the markup and fail only if they show as text.
+function pageState({ olderNetNewsWire, macros, }) {
     const article = document.querySelector(".articleBody");
     const root = document.documentElement;
     const html = document.body.innerHTML;
@@ -196,8 +199,12 @@ function pageState({ olderNetNewsWire, macro }) {
         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(olderNetNewsWire ? html.replaceAll(macro, "") : html),
-        literalEnclosures: olderNetNewsWire && document.body.innerText.includes(macro),
+        unresolved: /\[\[[A-Za-z0-9_-]+\]\]/.test(olderNetNewsWire
+            ? macros.reduce((text, macro) => text.replaceAll(macro, ""), html)
+            : html),
+        literalMacros: olderNetNewsWire
+            ? macros.filter((macro) => document.body.innerText.includes(macro))
+            : [],
         overflow: root.scrollWidth > root.clientWidth + 1,
         brokenImages: [...document.images]
             .filter((image) => image.complete && image.naturalWidth === 0)
@@ -299,7 +306,7 @@ async function checkPage(browser, origin, url, target, screenshot, footnotes) {
         await page.screenshot({ path: screenshot, fullPage: !target.card });
         const state = await page.evaluate(pageState, {
             olderNetNewsWire: target.olderNetNewsWire,
-            macro: ENCLOSURES_MACRO,
+            macros: Object.keys(NEWER_MACROS),
         });
         const enclosures = (await page.evaluate(`(${ENCLOSURE_CHECK})()`));
         // Last: it clicks footnotes open, so it must not disturb the screenshot.

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 { allFixtures, checkTargets, extraFixtures, placesEnclosures, readDeliveries, renderSite, writeGallery, } from "../render.js";
+import { allFixtures, checkTargets, extraFixtures, readDeliveries, renderSite, rendersDifferentlyWhenOlder, writeGallery, } from "../render.js";
 import { staleStubs } from "../stubs.js";
 import { printWarnings } from "./package.js";
 import { CheckProgress } from "./progress.js";
@@ -45,7 +45,7 @@ export default async function check({ values }) {
     printWarnings(staleStubs(root));
     const extras = extraFixtures(root);
     const targets = checkTargets(extras, {
-        enclosuresMacro: placesEnclosures(theme),
+        olderNetNewsWire: rendersDifferentlyWhenOlder(theme),
         deliveries: readDeliveries(root, allFixtures(extras)),
     });
     const expected = expectations(root, targets);

package/dist/enclosures.js

@@ -1,7 +1,9 @@
 // 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.
+// (Modules/Articles/Sources/Articles/Attachment.swift) and the [[enclosures]] and
+// [[primary_media]] HTML (Shared/Article Rendering/ArticleRenderer+Enclosures.swift and
+// ArticleRenderer+PrimaryMedia.swift), at the pinned commit.
 // Keep it line for line with the Swift, so a diff of the two stays easy to review.
+import { significantImageURLs } from "./body-images.js";
 import { ThemeError } from "./project.js";
 export const MEDIA = ["image", "audio", "video", "document", "executable"];
 const STRING_KEYS = ["url", "mime_type", "title"];
@@ -46,24 +48,26 @@ export function fixtureAttachments(fixture, name) {
         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"]) {
+/** A fixture's image_url and thumbnail_url: Article.imageLink and thumbnailLink. */
+export function fixtureImages(fixture, name) {
+    const text = (key) => {
         const value = fixture[key];
-        if (value === undefined)
-            continue;
-        if (typeof value !== "string")
+        if (value !== undefined && typeof value !== "string") {
             throw new ThemeError(`${name}: ${key} must be a string`);
+        }
         return value;
-    }
-    return undefined;
+    };
+    return { imageLink: text("image_url"), thumbnailLink: text("thumbnail_url") };
 }
 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/";
+const YOUTUBE_EMBED_PATHS = ["youtube.com/embed/", "youtube-nocookie.com/embed/"];
+const WORDPRESS_SIZE_SUFFIX = /-\d+x\d+(?=\.[A-Za-z0-9]+$)/;
+const ENGADGET_LARGE_IMAGE_PREFIX = "l-";
+const SHORT_POST_MAXIMUM_BODY_LENGTH = 2048;
 /** Foundation's URL(string:), enough for host and path: relative URLs have no host. */
 function parseURL(value) {
     try {
@@ -207,20 +211,64 @@ function dimensionAttributes(attachment) {
         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));
 }
+/** URL.pathComponents without the root, percent-decoded. */
+function pathComponents(value) {
+    const path = parseURL(value)?.path;
+    if (path === undefined)
+        return undefined;
+    return path
+        .split("/")
+        .filter(Boolean)
+        .map((component) => {
+        try {
+            return decodeURIComponent(component);
+        }
+        catch {
+            return component;
+        }
+    });
+}
+/** ArticleRenderingSpecialCases.bodyEmbedsYouTubeVideo(stillImageURL:body:). */
+function bodyEmbedsYouTubeVideo(stillImageURL, body) {
+    return (pathComponents(stillImageURL) ?? []).some((component) => /^[A-Za-z0-9_-]{11}$/.test(component) &&
+        YOUTUBE_EMBED_PATHS.some((path) => body.includes(path + component)));
+}
+function isEngadgetImage(value) {
+    const host = parseURL(value)
+        ?.host.toLowerCase()
+        .replace(/^www\./, "") ?? "";
+    return host === "engadget.com" || host.endsWith(".engadget.com");
+}
+/**
+ * The last two path components, lowercased, without a WordPress size suffix or Engadget
+ * size prefix. Ignores the host and query: resized copies often come through a service.
+ */
+function imageIdentity(value) {
+    const components = pathComponents(value);
+    const last = components?.at(-1);
+    if (!components || last === undefined)
+        return undefined;
+    const name = (last.startsWith(ENGADGET_LARGE_IMAGE_PREFIX) && isEngadgetImage(value)
+        ? last.slice(ENGADGET_LARGE_IMAGE_PREFIX.length)
+        : last).replace(WORDPRESS_SIZE_SUFFIX, "");
+    return [...components.slice(0, -1).slice(-1), name].join("/").toLowerCase();
+}
+/** ArticleRenderer.bodyImageIdentities: for spotting a resized copy of a body image. */
+export function bodyImageIdentities(body, baseURL) {
+    return new Set(significantImageURLs(body, baseURL)
+        .map(imageIdentity)
+        .filter((identity) => identity !== undefined));
+}
+function bodyContains(url, body, identities) {
+    if (bodyContainsURL(body, url) || bodyEmbedsYouTubeVideo(url, body))
+        return true;
+    const identity = imageIdentity(url);
+    return identity !== undefined && identities.has(identity);
+}
 function enclosureHTML(attachment, posterURL) {
     const youTube = youTubeEmbedURL(attachment.url);
     if (youTube !== undefined) {
@@ -259,32 +307,118 @@ function enclosureHTML(attachment, posterURL) {
     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.
+ * HTML for the [[enclosures]] substitution, empty when there's nothing to show. Skips
+ * attachments already in the body, including resized copies. posterURL is a video's poster.
  */
-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>`);
-    }
+export function enclosuresHTML(attachments, body, identities, posterURL) {
+    const enclosures = attachments
+        .filter((attachment) => !bodyContains(attachment.url, body, identities))
+        .map((attachment) => enclosureHTML(attachment, posterURL))
+        .filter((enclosure) => enclosure !== undefined);
     if (!enclosures.length)
         return "";
     return `<div class="nnw-enclosures">\n${enclosures.join("\n")}\n</div>`;
 }
+/** Untitled and short, as Mastodon posts are: their images follow the text. */
+function isShortUntitledPost(title, body) {
+    if (title)
+        return false;
+    return [...new Intl.Segmenter().segment(body)].length < SHORT_POST_MAXIMUM_BODY_LENGTH;
+}
+function isVideo(attachment) {
+    return displayMedium(attachment) === "video" || youTubeEmbedURL(attachment.url) !== undefined;
+}
+/** The article image, else the first image attachment, else the thumbnail; undefined if in the body. */
+function primaryImage(imageLink, thumbnailLink, attachments, body, identities) {
+    let image;
+    if (imageLink) {
+        image = attachments.find((attachment) => attachment.url === imageLink) ?? {
+            url: imageLink,
+            medium: "image",
+        };
+    }
+    else {
+        image = attachments.find((attachment) => displayMedium(attachment) === "image");
+        if (!image && thumbnailLink)
+            image = { url: thumbnailLink, medium: "image" };
+    }
+    return image && !bodyContains(image.url, body, identities) ? image : undefined;
+}
+function collapsingWhitespace(value) {
+    return value.split(/\s+/).filter(Boolean).join(" ").toLowerCase();
+}
+function primaryImageHTML(image, articleTitle) {
+    let attributes = `src="${escapeXML(image.url)}"`;
+    let caption = "";
+    if (image.title) {
+        const title = escapeXML(image.title);
+        attributes += ` alt="${title}" title="${title}"`;
+        if (collapsingWhitespace(image.title) !== collapsingWhitespace(articleTitle)) {
+            caption = `<div class="nnw-primary-image-caption">${title}</div>`;
+        }
+    }
+    else {
+        attributes += ' alt=""';
+    }
+    return `<div class="nnw-primary-image"><img ${attributes}${dimensionAttributes(image)}>${caption}</div>`;
+}
+/** A video, else audio with the article image, else the article image. */
+function primaryMedia(article, identities, includesImage) {
+    const { attachments, imageLink, thumbnailLink, title, body } = article;
+    const wrap = (html) => `<div class="nnw-primary-media">${html}</div>`;
+    const playable = attachments.filter(({ url }) => !bodyContains(url, body, identities));
+    const posterURL = imageLink ?? thumbnailLink;
+    const video = playable.find(isVideo);
+    const videoHTML = video && enclosureHTML(video, posterURL);
+    if (video && videoHTML !== undefined) {
+        const urls = new Set([video.url]);
+        if (posterURL !== undefined)
+            urls.add(posterURL);
+        return { html: wrap(videoHTML), urls };
+    }
+    let imageHTML = "";
+    const urls = new Set();
+    const image = includesImage
+        ? primaryImage(imageLink, thumbnailLink, attachments, body, identities)
+        : undefined;
+    if (image) {
+        imageHTML = primaryImageHTML(image, title);
+        urls.add(image.url);
+    }
+    const audio = playable.find((attachment) => displayMedium(attachment) === "audio");
+    const audioHTML = audio && enclosureHTML(audio, undefined);
+    if (audio && audioHTML !== undefined) {
+        urls.add(audio.url);
+        return { html: wrap(imageHTML + audioHTML), urls };
+    }
+    return imageHTML ? { html: wrap(imageHTML), urls } : undefined;
+}
+/**
+ * The [[primary_media]] and [[enclosures]] HTML, as articleSubstitutions() builds them.
+ * A template without [[primary_media]], or a short untitled post, gets the article image
+ * in the enclosures instead; only [[primary_media]] uses the thumbnail as an image.
+ */
+export function articleMediaHTML(article, hasPrimaryMedia) {
+    const { imageLink, thumbnailLink, title, body } = article;
+    const identities = bodyImageIdentities(body, article.baseURL);
+    let attachments = [...article.attachments];
+    const showsPrimaryImage = hasPrimaryMedia && !isShortUntitledPost(title, body);
+    const primary = hasPrimaryMedia
+        ? primaryMedia(article, identities, showsPrimaryImage)
+        : undefined;
+    if (primary)
+        attachments = attachments.filter(({ url }) => !primary.urls.has(url));
+    if (!showsPrimaryImage) {
+        const image = primaryImage(imageLink, undefined, attachments, body, identities);
+        if (image && !primary?.urls.has(image.url) && !attachments.includes(image)) {
+            attachments.unshift(image);
+        }
+    }
+    return {
+        primaryMedia: primary?.html ?? "",
+        enclosures: enclosuresHTML(attachments, body, identities, imageLink ?? thumbnailLink),
+    };
+}
 /**
  * The body and [[enclosures]] values, as ArticleRenderer.articleSubstitutions() sets
  * them. A template without the macro gets its enclosures after the body, which a

package/dist/project.js

@@ -5,6 +5,8 @@ import { parse as parseToml } from "smol-toml";
 import { BUILT_IN_FIXTURE_NAMES, CATALOG_FIXTURE_NAMES } from "./commands.js";
 import { buildPlist, parsePlist } from "./plist.js";
 export const REQUIRED_THEME_FILES = ["Info.plist", "template.html", "stylesheet.css"];
+/** NetNewsWire 7.3 reads this instead of template.html; older releases ignore it. */
+export const TEMPLATE_7_3_FILE = "template7.3.html";
 export const PLACEHOLDER_MARKER = ".nnw-theme-uninitialized";
 export const IDENTITY_START = "<!-- nnw-theme-identity:start -->";
 export const IDENTITY_END = "<!-- nnw-theme-identity:end -->";

package/dist/render.js

@@ -1,12 +1,12 @@
 import { createHash } from "node:crypto";
-import { mkdirSync, readFileSync, realpathSync, rmSync, statSync, writeFileSync, } from "node:fs";
+import { existsSync, mkdirSync, readFileSync, realpathSync, rmSync, statSync, writeFileSync, } from "node:fs";
 import { extname, isAbsolute, join, relative } from "node:path";
 import { decodeHTML } from "entities";
 import { Parser } from "htmlparser2";
 import { DELIVERIES, DELIVERY_NAMES, deliver } from "./delivery.js";
-import { enclosuresHTML, fixtureAttachments, fixtureImageURL, placeEnclosures, } from "./enclosures.js";
+import { articleMediaHTML, fixtureAttachments, fixtureImages, placeEnclosures, } from "./enclosures.js";
 import { renderingInputs } from "./netnewswire.js";
-import { fixturePath, readFixture, repositoryFixtures, ThemeError, themeStem, } from "./project.js";
+import { fixturePath, readFixture, repositoryFixtures, TEMPLATE_7_3_FILE, ThemeError, themeStem, } from "./project.js";
 import { formatG, pyStr } from "./pyformat.js";
 const MACRO_RE = /\[\[([a-zA-Z0-9_-]+)\]\]/g;
 // A whole <img> or <source> tag; quoted attribute values may contain ">".
@@ -124,8 +124,9 @@ const SCENARIOS = [
     [
         "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.",
+        "The article fixture as NetNewsWire releases before enclosures and primary media " +
+            "render it: template.html, with [[enclosures]] and [[primary_media]] left as " +
+            "literal text, which must not show.",
     ],
     [
         "article-javascript-off",
@@ -153,7 +154,7 @@ export class RenderTarget {
     height;
     largeText;
     themeScripts;
-    /** Rendered as NetNewsWire before [[enclosures]]: the macro stays literal. */
+    /** Rendered as older NetNewsWire: template.html, macros it lacks left literal. */
     olderNetNewsWire;
     /** A 2x capture of the card viewport alone, for the marketplace card. */
     card;
@@ -280,11 +281,10 @@ export function repositoryTargets(root) {
     return normalTargets(extras, readDeliveries(root, allFixtures(extras)));
 }
 /**
- * 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.
+ * Everything check renders. A theme whose older releases render differently (see
+ * rendersDifferentlyWhenOlder) also gets the older-NetNewsWire cases.
  */
-export function checkTargets(extras = [], { enclosuresMacro = false, deliveries = {} } = {}) {
+export function checkTargets(extras = [], { olderNetNewsWire = false, deliveries = {} } = {}) {
     const targets = [
         ...normalTargets(extras, deliveries),
         new RenderTarget("kitchen-sink", "mac", "light", { largeText: true }),
@@ -292,14 +292,27 @@ export function checkTargets(extras = [], { enclosuresMacro = false, deliveries
         new RenderTarget("article", "mac", "light", { themeScripts: false }),
         new RenderTarget("article", "iphone", "light", { themeScripts: false }),
     ];
-    if (enclosuresMacro) {
+    if (olderNetNewsWire) {
         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]]");
+/**
+ * Whether older NetNewsWire renders this theme differently: it ignores template7.3.html,
+ * and leaves a macro it doesn't know as text in every article.
+ */
+export function rendersDifferentlyWhenOlder(theme) {
+    if (existsSync(join(theme, TEMPLATE_7_3_FILE)))
+        return true;
+    const template = read(join(theme, "template.html"));
+    return ["[[enclosures]]", "[[primary_media]]"].some((macro) => template.includes(macro));
+}
+/** The template NetNewsWire reads: 7.3 prefers template7.3.html, older releases can't. */
+function themeTemplate(theme, target) {
+    const preferred = join(theme, TEMPLATE_7_3_FILE);
+    return read(!target.olderNetNewsWire && existsSync(preferred)
+        ? preferred
+        : join(theme, "template.html"));
 }
 /** Perform NetNewsWire's single-pass, non-recursive macro substitution. */
 export function substitute(template, mapping) {
@@ -460,10 +473,17 @@ function fixtureMapping(fixture, target, template, media) {
     if (target.delivery)
         body = deliver(body, target.delivery, mapping.preferred_link ?? "");
     mapping.body = offlineMedia(body, media);
-    // NetNewsWire before enclosure support ignores attachments and leaves the macro.
+    // NetNewsWire before these macros ignores attachments and leaves them literal.
     if (!target.olderNetNewsWire) {
         const name = `fixtures/${target.fixture}.toml`;
-        const enclosures = enclosuresHTML(fixtureAttachments(fixture, name), body, fixtureImageURL(fixture, name));
+        const { primaryMedia, enclosures } = articleMediaHTML({
+            attachments: fixtureAttachments(fixture, name),
+            ...fixtureImages(fixture, name),
+            title: mapping.title ?? "",
+            body,
+            baseURL: pageBaseURL(fixture, target),
+        }, template.includes("[[primary_media]]"));
+        mapping.primary_media = offlineEnclosures(primaryMedia, media);
         Object.assign(mapping, placeEnclosures(template, mapping.body, offlineEnclosures(enclosures, media)));
     }
     if (!mapping.avatar_src || fetches(mapping.avatar_src)) {
@@ -588,7 +608,7 @@ export function renderPage(theme, fixture, target, snapshot = renderingInputs().
         styleSubstitutions["font-size"] = formatG(Number(fixture.font_size ?? size));
     }
     const style = substitute(`${read(join(snapshot, "Shared", "core.css"))}\n${stylesheet}`, styleSubstitutions);
-    const template = read(join(theme, "template.html"));
+    const template = themeTemplate(theme, target);
     let body = substitute(template, fixtureMapping(fixture, target, template, media));
     if (!target.themeScripts)
         body = removeScripts(body);

package/dist/validate.js

@@ -2,7 +2,7 @@ import { existsSync, lstatSync, readdirSync, readFileSync, statSync } from "node
 import { dirname, join } from "node:path";
 import { Parser } from "htmlparser2";
 import { PlistReal, parsePlist } from "./plist.js";
-import { PLACEHOLDER_MARKER, REQUIRED_THEME_FILES, readPlist, ThemeError, themeStem, } from "./project.js";
+import { PLACEHOLDER_MARKER, REQUIRED_THEME_FILES, readPlist, TEMPLATE_7_3_FILE, ThemeError, themeStem, } from "./project.js";
 import { pyRepr } from "./pyformat.js";
 import { urlsplit } from "./urlparse.js";
 import { readZip } from "./zip.js";
@@ -67,6 +67,7 @@ function isRemote(value) {
 }
 function isAllowedFile(name) {
     return (REQUIRED_THEME_FILES.includes(name) ||
+        name === TEMPLATE_7_3_FILE ||
         OPTIONAL_THEME_FILE.test(name.toUpperCase()));
 }
 function isInt(value) {
@@ -148,38 +149,40 @@ export function validateSource(theme, { allowRemoteMedia = false } = {}) {
     const metadataReport = validateMetadata(readPlist(theme), stem);
     report.errors.push(...metadataReport.errors);
     report.warnings.push(...metadataReport.warnings);
-    const templatePath = join(theme, "template.html");
-    if (isRegularFile(templatePath)) {
-        const template = readFileSync(templatePath, "utf8");
-        if (!template.includes("[[")) {
-            report.warnings.push("template.html contains no NetNewsWire macros");
-        }
-        const commented = commentedMacros(template);
-        if (commented.length) {
-            report.errors.push(`template.html has macros inside an HTML comment (${commented[0]}` +
-                `${commented.length > 1 ? ` and ${commented.length - 1} more` : ""}). ` +
-                "NetNewsWire substitutes them there too, so an article containing --> " +
-                "ends the comment early and the rest shows as text; " +
-                "write macro names without double brackets");
-        }
-        const references = resourceReferences(template);
-        if (/<style\b[^>]*>[\s\S]*?@import\s/i.test(template)) {
-            report.errors.push("CSS @import is not allowed in template.html");
-        }
-        for (const [tag, attribute, value] of references) {
-            if (!value ||
-                ["data:", "#", "mailto:", "tel:"].some((prefix) => value.startsWith(prefix))) {
-                continue;
+    for (const templateName of ["template.html", TEMPLATE_7_3_FILE]) {
+        const templatePath = join(theme, templateName);
+        if (isRegularFile(templatePath)) {
+            const template = readFileSync(templatePath, "utf8");
+            if (!template.includes("[[")) {
+                report.warnings.push(`${templateName} contains no NetNewsWire macros`);
             }
-            if (tag === "script" || tag === "stylesheet") {
-                report.errors.push(`external ${tag} is not allowed: ${value}`);
+            const commented = commentedMacros(template);
+            if (commented.length) {
+                report.errors.push(`${templateName} has macros inside an HTML comment (${commented[0]}` +
+                    `${commented.length > 1 ? ` and ${commented.length - 1} more` : ""}). ` +
+                    "NetNewsWire substitutes them there too, so an article containing --> " +
+                    "ends the comment early and the rest shows as text; " +
+                    "write macro names without double brackets");
             }
-            else if (isRemote(value)) {
-                remoteMessage(report, `remote theme-owned ${tag} may not load in NetNewsWire: ${value}`, allowRemoteMedia);
+            const references = resourceReferences(template);
+            if (/<style\b[^>]*>[\s\S]*?@import\s/i.test(template)) {
+                report.errors.push(`CSS @import is not allowed in ${templateName}`);
             }
-            else if (!value.includes("[[")) {
-                report.errors.push("bundle-local resource references do not work in NetNewsWire: " +
-                    `${attribute}=${pyRepr(value)}`);
+            for (const [tag, attribute, value] of references) {
+                if (!value ||
+                    ["data:", "#", "mailto:", "tel:"].some((prefix) => value.startsWith(prefix))) {
+                    continue;
+                }
+                if (tag === "script" || tag === "stylesheet") {
+                    report.errors.push(`external ${tag} is not allowed: ${value}`);
+                }
+                else if (isRemote(value)) {
+                    remoteMessage(report, `remote theme-owned ${tag} may not load in NetNewsWire: ${value}`, allowRemoteMedia);
+                }
+                else if (!value.includes("[[")) {
+                    report.errors.push("bundle-local resource references do not work in NetNewsWire: " +
+                        `${attribute}=${pyRepr(value)}`);
+                }
             }
         }
     }

package/lldb/nnwdump.py

@@ -6,7 +6,7 @@ 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
+[[enclosures]] macro, and 7.3b6 and later add `primary_media`. nnwdump keeps none of them. 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. When the page's base URL
 differs from the article's link, as for an article synced through the Reader API, it
@@ -34,6 +34,7 @@ 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"
+_PRIMARY_MEDIA_KEY = "primary_media"
 # 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.
@@ -88,6 +89,7 @@ def without_enclosures(pairs: list[tuple[str, str]]) -> list[tuple[str, str]]:
         if body.startswith("<div>") and at != -1:
             values["body"] = body[len("<div>") : at]
     values.pop(_ENCLOSURES_KEY, None)
+    values.pop(_PRIMARY_MEDIA_KEY, None)
     return list(values.items())
 
 

package/package.json

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