nnw-theme 2.3.0 → 2.5.0

package/README.md

@@ -33,9 +33,9 @@ version, name it: `npx nnw-theme@2.0.0 check`.
 | `preview` | Serve the gallery on localhost, open it, and rebuild and reload it on save |
 | `render [fixtures…]` | Write the gallery to `build/preview/` once |
 | `check` | Validate and package, then render and test every case in WebKit |
-| `screenshot` | Check one case (any fixture and platform) and save its image; `--card` crops to the marketplace card, `--promote` makes it the card |
+| `screenshot` | Check one case (any fixture and platform) and save its image; `--delivery` renders it as FreshRSS or Miniflux delivers it, `--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, and on podcast and Media RSS enclosures |
+| `fixture list` / `fixture add <name>…` | Add ready-made fixtures modeled on WordPress, Ghost, Substack, Medium, and Mastodon 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), `main` branch,
-commit `70c5dce656487bdab9e0226c318acc1a15071cf4`, 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/catalog/mastodon.toml

@@ -0,0 +1,50 @@
+# nnw-theme catalog fixture: mastodon (catalog version 1)
+# Markup: a Mastodon post from an account's RSS feed (https://example.org/@NAME.rss), as
+#   NetNewsWire renders it, captured 2026-11. Mastodon items have no title, and
+#   the feed is named for the account. The body is Mastodon's status HTML with its RSS
+#   content-warning preroll; the post's images arrive only as Media RSS
+#   <media:content> items, which NetNewsWire keeps without their alt text or size.
+# Text and links are synthetic; the structure, classes, and attributes are real.
+# Exercises: an untitled article (articleDatelineTitle), the content-warning paragraph
+#   and rule, h-card mentions and hashtags, a long link split into Mastodon's
+#   .invisible and .ellipsis spans (NetNewsWire shows all of them), 16x16 custom
+#   emoji inline in the text, a quote post's RE: fallback, and three unsized image
+#   enclosures with no caption.
+# Enclosures need NetNewsWire 7.3b3 for Mac or 7.3 for iOS, or later.
+# Refresh: npx nnw-theme@2 fixture add mastodon --force
+
+date_long = 'November 3, 2026'
+date_medium = 'Nov 3, 2026'
+date_short = '11/3/26'
+dateline_style = 'articleDatelineTitle'
+datetime_long = 'November 3, 2026 at 8:12:47 PM'
+datetime_medium = 'Nov 3, 2026 at 8:12 PM'
+datetime_short = '11/3/26, 8:12 PM'
+feed_link = 'https://example.org/@ines'
+feed_link_title = 'Ines Calloway 📷 (@ines@example.org)'
+preferred_link = 'https://example.org/@ines/115501234567890123'
+time_long = '8:12:47 PM PST'
+time_medium = '8:12:47 PM'
+time_short = '8:12 PM'
+title = ''
+body = '''
+<p><strong>Content warning:</strong> darkroom chemistry, one (1) paper cut</p><hr /><p class="quote-inline">RE: <a href="https://example.org/@kai/115498765432109876" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="ellipsis">example.org/@kai/1154987654321</span><span class="invisible">09876</span></a></p><p>First roll through the new tank and it came out… fine? Better than fine. <span class="h-card" translate="no"><a href="https://example.org/@kai" class="u-url mention">@<span>kai</span></a></span> was right about the agitation schedule, and <span class="h-card" translate="no"><a href="https://example.org/@marguerite" class="u-url mention">@<span>marguerite</span></a></span> was right that I would cut myself opening the canister <img rel="emoji" draggable="false" width="16" height="16" class="emojione custom-emoji" alt=":blobcat_sweat:" title=":blobcat_sweat:" src="https://example.org/system/custom_emojis/images/000/012/345/original/blobcat_sweat.png" /></p><p>Developer at 20°C, 9 minutes, inversions every 30 seconds for the first minute and then every minute after.<br />Stop bath, fixer, a long rinse, and a lot of staring at the negatives in front of the window like they would tell me something.</p><p>Notes and the full chart are up here: <a href="https://example.org/2026/11/notes-from-the-darkroom-first-roll-through-the-new-tank" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="ellipsis">example.org/2026/11/notes-from</span><span class="invisible">-the-darkroom-first-roll-through-the-new-tank</span></a> <img rel="emoji" draggable="false" width="16" height="16" class="emojione custom-emoji" alt=":film:" title=":film:" src="https://example.org/system/custom_emojis/images/000/006/789/original/film.png" /></p><p><a href="https://example.org/tags/FilmPhotography" class="mention hashtag" rel="tag">#<span>FilmPhotography</span></a> <a href="https://example.org/tags/Darkroom" class="mention hashtag" rel="tag">#<span>Darkroom</span></a> <a href="https://example.org/tags/BelieveInFilm" class="mention hashtag" rel="tag">#<span>BelieveInFilm</span></a></p>
+'''
+
+[[attachments]]
+url = 'https://example.org/system/media_attachments/files/115/501/234/567/890/123/original/9f2c4e1a7b3d5f60.jpg'
+mime_type = 'image/jpeg'
+size_in_bytes = 482113
+medium = 'image'
+
+[[attachments]]
+url = 'https://example.org/system/media_attachments/files/115/501/234/567/890/124/original/0b7d1e93c4a6f528.jpg'
+mime_type = 'image/jpeg'
+size_in_bytes = 397208
+medium = 'image'
+
+[[attachments]]
+url = 'https://example.org/system/media_attachments/files/115/501/234/567/890/125/original/c81a5f02e9d74b36.png'
+mime_type = 'image/png'
+size_in_bytes = 1204977
+medium = 'image'

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/footnotes.js

@@ -1,5 +1,5 @@
-// Footnote checks, evaluated in each rendered page after its screenshot. Returns a
-// list of failure messages. NetNewsWire's newsfoot.js opens a popover for any
+// Footnote checks, evaluated in each rendered page after its screenshot. Returns
+// {failures, warnings}, each a list of messages. NetNewsWire's newsfoot.js opens a popover for any
 // a.footnote whose hash names an element; main.js adds that class to local
 // sup > a[href*='#fn'] links and Substack's a[id^='footnote-anchor-'] links, and a
 // theme script may add it to other formats.
@@ -7,11 +7,13 @@
 // expect is the fixture's [expect.footnotes] table: notes maps each marker's text to
 // its note text, plain_links lists selectors for links that are not footnotes, and
 // keep_with_word requires a marker written against its word to stay on its line.
-async ({notes = null, plain_links = [], keep_with_word = false} = {}) => {
+// all_converted makes an unconverted marker a failure rather than a warning.
+async ({notes = null, plain_links = [], keep_with_word = false, all_converted = false} = {}) => {
 	const failures = [];
+	const warnings = [];
 	const fail = message => failures.push(message);
 	const article = document.querySelector(".articleBody");
-	if (!article) return failures;
+	if (!article) return {failures, warnings};
 	const text = element => element.textContent.replace(/\s+/g, " ").trim();
 	const pause = ms => new Promise(resolve => setTimeout(resolve, ms));
 
@@ -19,11 +21,42 @@ async ({notes = null, plain_links = [], keep_with_word = false} = {}) => {
 	const markers = [...article.querySelectorAll("a.footnote")]
 		.filter(marker => marker.getClientRects().length);
 	const label = marker => text(marker) || marker.getAttribute("href");
+	const fragment = link => {
+		try {
+			return link.hash ? decodeURIComponent(link.hash.slice(1)) : "";
+		} catch {
+			return "";
+		}
+	};
+
+	// A reference in a shape main.js or a theme converts, linking to an element in the
+	// article, that never became a marker: NetNewsWire opens it as a link. It happens
+	// when the page's base URL doesn't match the link, as for an article synced through
+	// the Reader API, or when a sync service rewrote the markup a theme script expects.
+	const plain = new Set();
+	for (const selector of plain_links) {
+		try {
+			for (const link of document.querySelectorAll(selector)) plain.add(link);
+		} catch {
+			// Reported below.
+		}
+	}
+	const references = article.querySelectorAll(
+		"sup > a[href], sup > div > a[href], a[id^='footnote-anchor-'][href]");
+	for (const link of references) {
+		if (link.matches(".footnote") || plain.has(link) || !link.getClientRects().length) continue;
+		const id = fragment(link);
+		const target = id && document.getElementById(id);
+		if (!target || !article.contains(target) || target.contains(link)) continue;
+		const message = `footnote ${label(link)}: ${link.getAttribute("href")} links to a note ` +
+			"but never became an a.footnote marker, so NetNewsWire opens it as a link";
+		(all_converted ? failures : warnings).push(message);
+	}
 
 	// Every marker resolves, as newsfoot does, to one non-empty note.
 	const noteFor = new Map();
 	for (const marker of markers) {
-		const id = marker.hash ? decodeURIComponent(marker.hash.slice(1)) : "";
+		const id = fragment(marker);
 		const target = id && document.getElementById(id);
 		if (!target) {
 			fail(`footnote ${label(marker)}: ${marker.getAttribute("href")} names no note`);
@@ -179,5 +212,5 @@ async ({notes = null, plain_links = [], keep_with_word = false} = {}) => {
 		document.body.dispatchEvent(new MouseEvent("click", {bubbles: true, cancelable: true, view: window}));
 		await pause(30);
 	}
-	return failures;
+	return {failures, warnings};
 }

package/assets/guide/design-checklist.md

@@ -15,7 +15,12 @@ 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
+  the headline, and inline 16x16 custom emoji must stay inline beside the text.
 - 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`, twenty-four for all six. Their structure, classes, and attributes
+fixture in every `check`, twenty-eight for all seven. 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
@@ -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
@@ -61,13 +63,38 @@ poster at its size, and the YouTube player becomes a placeholder frame. A `media
 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.
 
+## Sync services
+
+Readers who sync through a service see an article as that service hands it to
+NetNewsWire, not as the publisher wrote it. A fixture can be rendered that way too:
+
+```toml
+deliveries = ["freshrss", "miniflux"]   # also render as each service delivers it
+base_url = "https://example.org/"       # the page's base URL in every case
+```
+
+Each delivery adds two cases, Mac light and iPhone dark, with the body rewritten by
+that service's sanitizer and the feed's home page (`feed_link`, or `base_url` when
+given) as the page's base URL. That base is what NetNewsWire uses for every article synced through the Reader
+API, since those carry only an external link. FreshRSS renames every `id` and `class` to
+`data-sanitized-id` and `data-sanitized-class` and makes every link absolute,
+fragments included; NetNewsWire 7.3 restores the names for FreshRSS accounts, but
+earlier releases do not, and the delivery shows the content as they do. Miniflux strips
+`class`, keeps `id` only on links, headings, list items, and `sup`, unwraps wrappers
+such as `div.footnotes`, and marks external links `target="_blank"`. `base_url`
+replaces the base in every case, delivered or not: give it the site URL the service
+reports when that differs from the post URLs, or use it alone to reproduce a page whose
+base differs from its links without rewriting the body.
+
 ## 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. 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
+not NetNewsWire's rendered enclosures, so any template previews them, and records
+`base_url` when the page's base differs from the article's link, as it does for an
+article synced through the Reader API. 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.
 
@@ -79,15 +106,21 @@ each is copied into every page that renders the fixture.
 
 Footnote markers are the links NetNewsWire's `newsfoot.js` handles: `a.footnote`.
 Its `main.js` adds that class to local `sup > a[href*='#fn']` links and to Substack's
-`a[id^='footnote-anchor-']` links; a theme script may add it to other formats. `check` requires every visible marker to resolve to a
+`a[id^='footnote-anchor-']` links, where local means the link starts with the page's
+base URL; a theme script may add it to other formats. `check` requires every visible marker to resolve to a
 non-empty note with a unique id, stay legible on its background, match the other
 markers' height, font size, and baseline offset, and open a popover with its note
-without resizing. A fixture may declare exact expectations after its other keys:
+without resizing. A `sup > a` or Substack anchor whose fragment names an element in
+the article but that never became a marker is opened as a link instead: `check` warns
+about one, and fails it in a fixture with `base_url` or `deliveries`, or with
+`all_converted = true`. List a link that really is ordinary in `plain_links`.
+A fixture may declare exact expectations after its other keys:
 
 ```toml
 [expect.footnotes]
 plain_links = ["#ordinary-sup-link"]   # CSS selectors that must not become markers
 keep_with_word = true                  # markers must not wrap apart from their word
+all_converted = true                   # fail, not warn, on footnote links left plain
 
 [expect.footnotes.notes]
 "1" = "First note."                    # marker text as rendered = note text

package/assets/guide/skill.md

@@ -20,8 +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, plus
-podcast and Media RSS enclosures.
+list` offers ready-made ones modeled on WordPress, Ghost, Substack, Medium, and
+Mastodon, plus podcast and Media RSS enclosures.
 
 Iterate with this loop:
 

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,10 +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 `main` commit
-`70c5dce656487bdab9e0226c318acc1a15071cf4`, the first with enclosure support. 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/Mac/main_mac.js

@@ -30,6 +30,11 @@ function selectedHTML() {
 	container.querySelectorAll("a[href]").forEach(function(anchor) {
 		anchor.setAttribute("href", anchor.href);
 	});
+	// Images served from the timeline’s copy would break outside this page.
+	container.querySelectorAll("img[data-nnw-src]").forEach(function(image) {
+		image.setAttribute("src", image.getAttribute("data-nnw-src"));
+		image.removeAttribute("data-nnw-src");
+	});
 	// A single-paragraph selection doesn't need its <p> wrapper.
 	if (container.childNodes.length === 1 && container.firstChild.nodeName === "P") {
 		return container.firstChild.innerHTML;

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 {
@@ -152,25 +171,19 @@ img[src*="/img/social/"] {
 	position: absolute;
 	display: block;
 	padding: 0em 1em;
-	margin: 1em auto;
+	margin: 1em 0;
 	top: 0.75em;
 	max-width: 44em;
 	border-radius: 0.3em;
 	box-sizing: border-box;
 }
 
-.newsfoot-footnote-popover {
-	left: calc(-1 * (50vw - 1em));
-	right: calc(-1 * (50vw - 1em));
-}
-
 .newsfoot-footnote-popover-arrow {
 	content: '';
 	display: block;
 	width: 1em;
 	position: absolute;
 	top: -0.5em;
-	left: calc(50% - 0.5em);
 	height: 1em !important;
 	transform: rotate(45deg);
 	z-index:0;

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
@@ -69,12 +81,23 @@ function constrainBodyRelativeIframes() {
 	}
 }
 
+// An image served from the timeline’s copy falls back to its original URL when the copy can’t be loaded.
+// Registered at document start, and capturing, since error events don’t bubble.
+document.addEventListener("error", event => {
+	const element = event.target;
+	if (element instanceof HTMLImageElement && element.hasAttribute("data-nnw-src")) {
+		const originalSrc = element.getAttribute("data-nnw-src");
+		element.removeAttribute("data-nnw-src");
+		element.src = originalSrc;
+	}
+}, true);
+
 // Convert all Feedbin proxy images to be used as src, otherwise change image locations to be absolute if not already
 function convertImgSrc() {
 	document.querySelectorAll("img").forEach(element => {
 		if (element.hasAttribute("data-canonical-src")) {
 			element.src = element.getAttribute("data-canonical-src")
-		} else if (!/^[a-z]+\:\/\//i.test(element.src)) {
+		} else if (!element.hasAttribute("data-nnw-src") && !/^[a-z]+\:\/\//i.test(element.src)) {
 			element.src = new URL(element.src, document.baseURI).href;
 		}
 	});
@@ -169,6 +192,67 @@ function stopMediaPlayback() {
 	});
 }
 
+// The element at the top of the viewport, how far through it the viewport top is,
+// and any remaining distance. A scroll offset alone means nothing once the article
+// reflows at a different width.
+let scrollAnchorElement = null;
+let scrollAnchorFraction = 0;
+let scrollAnchorOffset = 0;
+
+const scrollAnchorSampleSpacing = 16;
+
+// False for a container hit in the gap between blocks: it has element children
+// and only whitespace text of its own.
+function isScrollAnchorCandidate(element) {
+	if (element.children.length === 0) {
+		return true;
+	}
+	for (const node of element.childNodes) {
+		if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== "") {
+			return true;
+		}
+	}
+	return false;
+}
+
+function findScrollAnchorElement() {
+	const x = window.innerWidth / 2;
+	const maximumSampleDepth = window.innerHeight / 4;
+	let firstHit = null;
+	for (let y = 1; y <= maximumSampleDepth; y += scrollAnchorSampleSpacing) {
+		const element = document.elementFromPoint(x, y);
+		if (!element) {
+			continue;
+		}
+		if (isScrollAnchorCandidate(element)) {
+			return element;
+		}
+		if (!firstHit) {
+			firstHit = element;
+		}
+	}
+	return firstHit;
+}
+
+function recordScrollAnchor() {
+	scrollAnchorElement = findScrollAnchorElement();
+	if (!scrollAnchorElement) {
+		return;
+	}
+	const rect = scrollAnchorElement.getBoundingClientRect();
+	scrollAnchorFraction = rect.height > 0 ? Math.min(Math.max(-rect.top / rect.height, 0), 1) : 0;
+	scrollAnchorOffset = -(rect.top + scrollAnchorFraction * rect.height);
+}
+
+// Scrolls back to the same place in the recorded element after a reflow.
+function restoreScrollAnchor() {
+	if (!scrollAnchorElement || !scrollAnchorElement.isConnected) {
+		return;
+	}
+	const rect = scrollAnchorElement.getBoundingClientRect();
+	window.scrollTo(0, window.scrollY + rect.top + scrollAnchorFraction * rect.height + scrollAnchorOffset);
+}
+
 function error() {
 	document.body.innerHTML = "error";
 }
@@ -220,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/Shared/newsfoot.js

@@ -15,17 +15,6 @@
 		return el;
 	}
 
-	/** @type {<T extends any[]>(fn: (...args: T) => void, t: number) => ((...args: T) => void)} */
-	function debounce(f, ms) {
-		let t = Date.now();
-		return (...args) => {
-			const now = Date.now();
-			if (now - t < ms) return;
-			t = now;
-			f(...args);
-		};
-	}
-
 	const clsPrefix = "newsfoot-footnote-";
 	const CONTAINER_CLS = `${clsPrefix}container`;
 	const POPOVER_CLS = `${clsPrefix}popover`;
@@ -76,7 +65,7 @@
 			}
 			document.addEventListener("click", this.clickoutHandler, {capture: true});
   
-			this.resizeHandler = debounce(() => this.reposition(), 20);
+			this.resizeHandler = () => this.reposition();
 			window.addEventListener("resize", this.resizeHandler);
 		}
   
@@ -92,23 +81,31 @@
   
 		reposition() {
 			const refRect = this.fnref.getBoundingClientRect();
-			const center = refRect.left + (refRect.width / 2);
-			const popoverHalfWidth = this.popover.clientWidth / 2;
-			const marginLeft = stripPx(this.style.marginLeft);
-			const marginRight = stripPx(this.style.marginRight);
+			const containerRect = this.fnref.closest(`.${CONTAINER_CLS}`).getBoundingClientRect();
+			const articleBody = this.fnref.closest(".articleBody");
+			const visibleRect = articleBody ? articleBody.getBoundingClientRect() : document.documentElement.getBoundingClientRect();
+			const maximumWidth = stripPx(this.style.maxWidth);
+			const popoverWidth = Math.min(visibleRect.width, maximumWidth);
+			const refCenter = refRect.left + (refRect.width / 2);
+			const minimumLeft = visibleRect.left;
+			const maximumLeft = visibleRect.right - popoverWidth;
+			const popoverLeft = Math.min(
+				Math.max(refCenter - (popoverWidth / 2), minimumLeft),
+				maximumLeft
+			);
 
-			const rightOverhang = center + popoverHalfWidth + marginRight > window.innerWidth;
-			const leftOverhang = center - (popoverHalfWidth + marginLeft) < 0;
+			// Keep the popover inside the visible article column while centering it on the
+			// footnote reference whenever there is enough room.
+			this.popover.style.left = `${popoverLeft - containerRect.left}px`;
+			this.popover.style.width = `${popoverWidth}px`;
 
-			let offset = 0;
-			if (leftOverhang || rightOverhang) {
-				// Popover can't be centered on the ref without overflowing the viewport.
-				// Center it horizontally in the viewport so left/right margins are balanced.
-				// The arrow gets the inverse transform below and stays anchored to the ref.
-				offset = (window.innerWidth / 2) - center;
-			}
-			this.popover.style.transform = `translate(${offset}px)`;
-			this.arrow.style.transform = `translate(${-offset}px) rotate(45deg)`;
+			const arrowWidth = this.arrow.clientWidth;
+			const arrowCenter = refCenter - popoverLeft;
+			const insetArrowCenter = Math.min(
+				Math.max(arrowCenter, arrowWidth),
+				popoverWidth - arrowWidth
+			);
+			this.arrow.style.left = `${insetArrowCenter - (arrowWidth / 2)}px`;
 		}
 	}
 

package/assets/netnewswire/iOS/main_ios.js

@@ -37,7 +37,7 @@ class ImageViewer {
 		const rect = this.img.getBoundingClientRect();
 		
 		// Instead of trying to convert to canvas (which fails with CORS),
-		// send the original image src URL
+		// send the image's src URL. Swift checks a routed timeline image's signature.
 		const message = {
 			x: rect.x,
 			y: rect.y,