Hide tiny images instead of scaling them up as hero/card artwork (#115)

src/viewer.test.ts

@@ -1,7 +1,7 @@
 // ABOUTME: Tests for viewer module helpers
 // ABOUTME: Covers reprocessFile, parseFrontmatter, sync progress, and XSS sanitization
 
-import { reprocessFile, parseFrontmatter } from './viewer';
+import { reprocessFile, parseFrontmatter, listFiles } from './viewer';
 import { setOutputPath, resetWriteGuard } from './writer';
 import { writeFileSync, mkdirSync, readFileSync, existsSync } from 'fs';
 import { join } from 'path';
@@ -318,6 +318,43 @@ bookmarked: 2025-01-15T00:00:00Z
   });
 });
 
+describe('listFiles body-image fallback', () => {
+  let testDir: string;
+
+  beforeEach(() => {
+    testDir = join(tmpdir(), `pullread-test-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+    mkdirSync(testDir, { recursive: true });
+  });
+
+  function writeArticle(body: string): void {
+    writeFileSync(join(testDir, 'article.md'), `---
+title: "No Thumbnail"
+url: https://example.com/a
+domain: example.com
+bookmarked: 2026-08-26T00:00:00Z
+---
+
+${body}
+`);
+  }
+
+  test('skips favicon-like URLs and picks the next real image (#115)', () => {
+    writeArticle(
+      '![](https://example.com/favicon.ico)\n\n' +
+      '![](https://example.com/apple-touch-icon-180.png)\n\n' +
+      '![](https://cdn.example.com/photos/story-lead.jpg)'
+    );
+    const files = listFiles(testDir);
+    expect(files[0].image).toBe('https://cdn.example.com/photos/story-lead.jpg');
+  });
+
+  test('leaves image empty when only favicon-like images exist', () => {
+    writeArticle('![](https://example.com/favicon-32x32.png)');
+    const files = listFiles(testDir);
+    expect(files[0].image).toBe('');
+  });
+});
+
 describe('sync progress', () => {
   const rootDir = join(__dirname, '..');
 
@@ -848,9 +885,11 @@ describe('For You section rendering', () => {
     const fnMatch = article.match(/function buildSectionRundownHtml\b[\s\S]*?^}/m);
     expect(fnMatch).toBeTruthy();
     const fnBody = fnMatch![0];
-    // The onerror should call dashCardInitialHtml as a function (runtime call pattern)
-    // NOT pre-render it and embed raw HTML with unescaped quotes in the attribute
-    expect(fnBody).toMatch(/onerror="this\.outerHTML=dashCardInitialHtml\(/);
+    // The fallback should call dashCardInitialHtml as a function at runtime
+    // (shared by onload's tiny-image check and onerror — #115), NOT pre-render
+    // it and embed raw HTML with unescaped quotes in the attribute
+    expect(fnBody).toMatch(/compactFallback = 'this\.outerHTML=dashCardInitialHtml\(/);
+    expect(fnBody).toMatch(/onerror="' \+ compactFallback/);
     expect(fnBody).not.toContain("dashCardInitialHtml(a.domain, 80).replace");
   });
 });

src/viewer.ts

@@ -478,6 +478,8 @@ export function listFiles(outputPath: string, includeSummaries = false): FileMet
             // Skip tracking pixels, badges, tiny icons, and feeds.feedburner
             if (/[?&](w|width|sz)=\d{1,2}(&|$)/.test(src)) continue;
             if (/\/(pixel|beacon|track|spacer|blank|badge|icon)\b/i.test(src)) continue;
+            // Skip favicons/touch icons — too small to be card artwork (#115)
+            if (/favicon|apple-touch-icon|\/favicons\//i.test(src)) continue;
             if (/feeds\.feedburner\.com/i.test(src)) continue;
             if (/\.(gif|svg)(\?|$)/.test(src) && !/\d{3,}/.test(src)) continue;
             image = imgMatch[1];

tests/e2e/hero-image.spec.ts

@@ -44,6 +44,50 @@ test('hero image survives dedup; body duplicate is removed', async ({ page }) =>
   await expect(otherImg).toHaveCount(1);
 });
 
+// #115: tiny images (favicons/logos shipped as og:image) must not be
+// rez'd up as the hero — the hero hides itself once dimensions are known.
+test('tiny hero image is hidden instead of scaled up (#115)', async ({ page }) => {
+  await page.goto('/');
+  await page.waitForFunction(() => typeof (window as any).renderArticle === 'function');
+
+  const render = (dataUrl: string) => `---
+title: "Tiny Hero"
+url: https://example.com/tiny
+bookmarked: 2026-08-26T10:00:00.000Z
+domain: example.com
+image: ${dataUrl}
+source: extracted
+---
+
+Body text.
+`;
+
+  // 32x32 (favicon-sized) → hero hidden
+  await page.evaluate((fm) => {
+    const c = document.createElement('canvas');
+    c.width = 32; c.height = 32;
+    (window as any).renderArticle(fm.replace('__URL__', c.toDataURL()), 'tiny.md');
+  }, render('__URL__'));
+  await page.waitForFunction(() => {
+    const hero = document.querySelector('.article-hero') as HTMLElement | null;
+    return hero !== null && hero.style.display === 'none';
+  });
+
+  // 400x250 (real artwork) → hero stays visible
+  await page.evaluate((fm) => {
+    const c = document.createElement('canvas');
+    c.width = 400; c.height = 250;
+    (window as any).renderArticle(fm.replace('__URL__', c.toDataURL()), 'big.md');
+  }, render('__URL__'));
+  await page.waitForFunction(() => {
+    const img = document.querySelector('.article-hero img') as HTMLImageElement | null;
+    return img !== null && img.complete && img.naturalWidth === 400;
+  });
+  const heroVisible = await page.evaluate(() =>
+    (document.querySelector('.article-hero') as HTMLElement).style.display !== 'none');
+  expect(heroVisible).toBe(true);
+});
+
 test('launch highlights Explore in the sidebar nav (#110)', async ({ page }) => {
   await page.goto('/');
   await page.waitForSelector('.sidebar-nav-item');

viewer/02-utils.js

@@ -95,6 +95,14 @@ function stripTags(s) {
   return s ? s.replace(/<[^>]+>/g, '').trim() : s;
 }
 
+// True when a loaded image is too small to be real artwork — favicons, logos,
+// avatars (#115). Blowing these up as a hero/card image looks blurry; callers
+// should fall back to their no-image treatment instead. 200px covers standard
+// favicon sizes up to apple-touch-icon (180x180).
+function isTinyImage(img) {
+  return img.naturalWidth > 0 && (img.naturalWidth < 200 || img.naturalHeight < 100);
+}
+
 function escapeHtml(s) {
   return String(s)
     .replace(/&/g, '&amp;')

viewer/04-article.js

@@ -219,7 +219,7 @@ function buildRundownTab(engagement, mc) {
       var feat = arts[0];
       html += '<div class="sections-featured" onclick="dashLoadArticle(\'' + escapeJsStr(feat.filename) + '\')">';
       if (feat.image) {
-        html += '<img src="' + escapeHtml(feat.image) + '" alt="" loading="lazy" onerror="this.remove()">';
+        html += '<img src="' + escapeHtml(feat.image) + '" alt="" loading="lazy" onload="if(isTinyImage(this))this.remove()" onerror="this.remove()">';
       }
       html += '<div class="sections-featured-body">';
       html += '<div class="sections-featured-title">' + escapeHtml(feat.title) + '</div>';
@@ -564,7 +564,8 @@ function buildDailyRundownHtml() {
 
     if (heroImage) {
       var imgLoading = ci === 0 ? 'eager' : 'lazy';
-      html += '<img class="rundown-card-img" src="' + escapeHtml(heroImage) + '" alt="" loading="' + imgLoading + '" onerror="this.parentElement.style.setProperty(\'--reel-color\',\'' + clusterColor + '\');this.outerHTML=\'<div class=rundown-card-noimg></div>\'">';
+      var cardFallback = 'this.parentElement.style.setProperty(\'--reel-color\',\'' + clusterColor + '\');this.outerHTML=\'<div class=rundown-card-noimg></div>\'';
+      html += '<img class="rundown-card-img" src="' + escapeHtml(heroImage) + '" alt="" loading="' + imgLoading + '" onload="if(isTinyImage(this)){' + cardFallback + '}" onerror="' + cardFallback + '">';
     } else {
       html += '<div class="rundown-card-noimg" style="background:' + clusterColor + '"><span class="rundown-card-initial">' + escapeHtml(c.label.charAt(0).toUpperCase()) + '</span></div>';
     }
@@ -629,7 +630,8 @@ function buildSectionRundownHtml() {
       var onclick = 'dashLoadArticle(\'' + escapeJsStr(a.filename) + '\')';
       html += '<div class="dash-card dash-card-compact" onclick="' + onclick + '">';
       if (a.image) {
-        html += '<img class="dash-card-img" src="' + escapeHtml(a.image) + '" alt="" loading="lazy" onerror="this.outerHTML=dashCardInitialHtml(\'' + escapeHtml(a.domain || '').replace(/'/g, "\\'") + '\',80)">';
+        var compactFallback = 'this.outerHTML=dashCardInitialHtml(\'' + escapeHtml(a.domain || '').replace(/'/g, "\\'") + '\',80)';
+        html += '<img class="dash-card-img" src="' + escapeHtml(a.image) + '" alt="" loading="lazy" onload="if(isTinyImage(this)){' + compactFallback + '}" onerror="' + compactFallback + '">';
       } else {
         html += dashCardInitialHtml(a.domain, 80);
       }
@@ -664,7 +666,8 @@ function dashCardHtml(f, progressPct, variant) {
 
   // Image or source-colored initial
   if (f.image) {
-    html += '<img class="dash-card-img" src="' + escapeHtml(f.image) + '" alt="" loading="lazy" onerror="this.outerHTML=dashCardInitialHtml(\'' + escapeHtml(feedName).replace(/'/g, "\\'") + '\',' + imgHeight + ')">';
+    var dashFallback = 'this.outerHTML=dashCardInitialHtml(\'' + escapeHtml(feedName).replace(/'/g, "\\'") + '\',' + imgHeight + ')';
+    html += '<img class="dash-card-img" src="' + escapeHtml(f.image) + '" alt="" loading="lazy" onload="if(isTinyImage(this)){' + dashFallback + '}" onerror="' + dashFallback + '">';
   } else {
     html += dashCardInitialHtml(feedName, imgHeight);
   }
@@ -908,9 +911,11 @@ function renderArticle(text, filename) {
     html += '<div class="article-meta">' + metaLineParts.join('<span class="sep">&middot;</span>') + '</div>';
   }
 
-  // Hero image from frontmatter thumbnail (feed media:content or og:image)
+  // Hero image from frontmatter thumbnail (feed media:content or og:image).
+  // Tiny images (favicons/logos some sites ship as og:image) are hidden
+  // rather than rez'd up full-width (#115).
   if (meta && meta.thumbnail) {
-    html += '<div class="article-hero"><img src="' + escapeHtml(meta.thumbnail) + '" alt="" loading="lazy" onerror="this.parentElement.style.display=\'none\'"></div>';
+    html += '<div class="article-hero"><img src="' + escapeHtml(meta.thumbnail) + '" alt="" loading="lazy" onload="if(isTinyImage(this))this.parentElement.style.display=\'none\'" onerror="this.parentElement.style.display=\'none\'"></div>';
   }
 
   // Detect review/summary articles where Summarize doesn't make sense