Changeset 5bc67b4 in Klonkt

Timestamp:

06/28/2026 09:20:04 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

abc8959

Parents:

492fc20

Message:

fix(images): 96px feed/comment/follow avatars (2x of the 44px display)

A 128px avatar thumbnail shown at 44px = ~2.9x browser downscale → still jagged for
line-art. Serve the small fediverse avatars at 96px (~2.2x, the same crisp ratio as the grid).

• services/ThumbnailService.js — add 96 to the size whitelist
• views/pages/news.ejs, partials/fedi-node.ejs, pages/following.ejs — avatar(..., 96)

Location:

src

Files:

• services/ThumbnailService.js (modified) (1 diff)
• views/pages/following.ejs (modified) (1 diff)
• views/pages/news.ejs (modified) (1 diff)
• views/partials/fedi-node.ejs (modified) (1 diff)

src/services/ThumbnailService.js

@@ -23 +23 @@
 const execFileP = promisify(execFile);
 
-// Allowed widths (whitelist → no arbitrary-size abuse). 128 = avatars; 256 ≈ 2× a list
-// cover; 480 ≈ 2× a grid tile. Keep these ~2× the display size so line-art stays crisp.
-export const THUMB_SIZES = new Set([128, 256, 320, 480, 640]);
+// Allowed widths (whitelist → no arbitrary-size abuse). 96 = small feed/comment avatars
+// (~44px); 128 = nav/profile avatars; 256 ≈ 2× a list cover; 480 ≈ 2× a grid tile. Keep
+// these ~2× the display size so line-art stays crisp (the browser barely downscales).
+export const THUMB_SIZES = new Set([96, 128, 256, 320, 480, 640]);
 
 let _seq = 0;

src/views/pages/following.ejs

@@ -20 +20 @@
       <% following.forEach(function(f){ %>
         <li class="tl-foll">
-          <span class="tl-foll-av"><% if (f.icon) { %><img src="<%= avatar(f.icon, 128) %>" alt=""><% } else { %><%= (f.name || '?').charAt(0).toUpperCase() %><% } %></span>
+          <span class="tl-foll-av"><% if (f.icon) { %><img src="<%= avatar(f.icon, 96) %>" alt=""><% } else { %><%= (f.name || '?').charAt(0).toUpperCase() %><% } %></span>
           <span class="tl-foll-meta">
             <a href="<%= f.url || f.actor_uri %>" target="_blank" rel="nofollow noopener"><%= f.name || f.handle %></a>

src/views/pages/news.ejs

@@ -93 +93 @@
           <% if (p.reblog_name) { %><div class="tl-boost-by"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg> <strong><%= p.reblog_name %></strong> <%= t('tl.boosted') %></div><% } %>
           <div class="tl-head">
-            <span class="tl-avatar"><% if (p.author_icon) { %><img src="<%= avatar(p.author_icon, 128) %>" alt="" loading="lazy"><% } else { %><%= (p.author_name || '?').charAt(0).toUpperCase() %><% } %></span>
+            <span class="tl-avatar"><% if (p.author_icon) { %><img src="<%= avatar(p.author_icon, 96) %>" alt="" loading="lazy"><% } else { %><%= (p.author_name || '?').charAt(0).toUpperCase() %><% } %></span>
             <span class="tl-id">
               <a class="tl-author" href="<%= p.author_url || p.author_uri %>" target="_blank" rel="nofollow noopener"><%= p.author_name %></a>

src/views/partials/fedi-node.ejs

@@ -1 +1 @@
 <%# Renders one fediverse thread node (n). Expects: n, t, canManageSite, _base, siteAvatar, formatDateTime, postSlug %>
 <div class="comment-avatar">
-  <% if (n.actor_icon) { %><img src="<%= avatar(n.actor_icon, 128) %>" alt="" loading="lazy">
+  <% if (n.actor_icon) { %><img src="<%= avatar(n.actor_icon, 96) %>" alt="" loading="lazy">
   <% } else { %><span><%= (n.actor_name || '?').charAt(0).toUpperCase() %></span><% } %>
 </div>