Changeset 7b04d3b in Klonkt for src/views/pages


Ignore:
Timestamp:
07/20/2026 07:35:55 AM (7 weeks ago)
Author:
Robin <roboburr@…>
Branches:
main
Children:
1485933
Parents:
162c7a7
git-author:
Robin <roboburr@…> (07/20/2026 07:08:50 AM)
git-committer:
Robin <roboburr@…> (07/20/2026 07:35:55 AM)
Message:

Feature: Load more on News feed, page 72 (klonkt-demo-r9u, slice 1/4)

News (Krant) now pages in blocks of 72 (divisible by 2/3/4 so grid
columns stay full) with an htmx "Load more" button instead of a hard
60-item cap. getTimeline gains an offset arg; the route fetches 72+1 to
know whether the button belongs, and serves an append fragment
(partials/news-append) that swaps the next items beforeend into #tl-feed
and OOB-replaces the button with the next offset (or drops it on the
last page).

Reusable pieces for the other three views (Solo, Cirkel, Messages):

  • partials/load-more.ejs (the button + OOB wrapper)
  • partials/tl-item.ejs (extracted the timeline item so full page and append render identically)
  • .load-more-* CSS in shared-styles, i18n feed.load_more (NL/EN/DE)

Tests: feed-pagination.test.js (offset paging, no overlap, probe of
PAGE+1, past-end empty). Browser-verified: 72 -> 144 -> 150 then the
button disappears.

Co-Authored-By: Claude Opus 4.8 <noreply@…>

File:
1 edited

Legend:

Unmodified
Added
Removed

  • src/views/pages/news.ejs

    r162c7a7 r7b04d3b  
    8888    </div>
    8989  <% } else { %>
    90     <ol class="tl-feed">
     90    <ol class="tl-feed" id="tl-feed">
    9191      <% timeline.forEach(function(p){ %>
    92         <li class="tl-item">
    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><% } %>
    94           <div class="tl-head">
    95             <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>
    96             <span class="tl-id">
    97               <a class="tl-author" href="<%= p.author_url || p.author_uri %>" target="_blank" rel="nofollow noopener"><%= p.author_name %></a>
    98               <span class="tl-handle"><%= p.author_handle %></span>
    99             </span>
    100             <% if (p.published || p.created_at) { %><time class="tl-time"><%= formatDateTime(p.published || p.created_at) %></time><% } %>
    101           </div>
    102 
    103           <%
    104             var media = []; try { media = JSON.parse(p.media_json || '[]'); } catch (e) { media = []; }
    105             var imgs = media.filter(function(m){ return m && m.url && (!m.type || /^image\//.test(m.type)); });
    106             var vids = media.filter(function(m){ return m && m.url && m.type && /^video\//.test(m.type); });
    107             var auds = media.filter(function(m){ return m && m.url && m.type && /^audio\//.test(m.type); });
    108             var _nsfwVisual = !!p.nsfw && (imgs.length || vids.length || auds.length);
    109             var _nsfwText = !!p.nsfw && !(imgs.length || vids.length || auds.length);
    110           %>
    111           <% if (_nsfwText) { %>
    112             <div class="tl-content nsfw-media"><span class="nsfw-veil"><%- include('../partials/nsfw-veil', { cw: p.cw }) %></span><%- p.content %></div>
    113           <% } else { %>
    114             <div class="tl-content"><%- p.content %></div>
    115           <% } %>
    116           <% if (_nsfwVisual) { %><div class="nsfw-media"><% } %>
    117           <% if (imgs.length) { %>
    118             <div class="tl-media">
    119               <% imgs.forEach(function(m){ %>
    120                 <a class="tl-media-img" href="<%= m.url %>" target="_blank" rel="noopener"><img src="<%= thumb(m.url, 1280) %>" alt="" loading="lazy" decoding="async"></a>
    121               <% }); %>
    122             </div>
    123           <% } %>
    124           <% vids.forEach(function(m){ %><video class="tl-media-video" src="<%= m.url %>" poster="<%= thumb(m.url, 1280) %>" controls preload="metadata" playsinline></video><% }); %>
    125           <% /* A Klonkt audio post carries an embed player (embedHtml/embedUrl) that already
    126                 covers these tracks, so don't ALSO render the raw Audio attachments as bare
    127                 players here. Posts without a Klonkt embed (e.g. a plain remote audio) keep them. */ %>
    128           <% if (!p.embedHtml && !p.embedUrl) { auds.forEach(function(m){ %><audio class="tl-media-audio" src="<%= m.url %>" controls preload="none"></audio><% }); } %>
    129           <% if (_nsfwVisual) { %><div class="nsfw-veil"><%- include('../partials/nsfw-veil', { cw: p.cw }) %></div></div><% } %>
    130 
    131           <% if (p.embedHtml) { %><div class="tl-embed"><%- p.embedHtml %></div><% } %>
    132           <% if (p.embedUrl) { %><a class="tl-embed-open" href="<%= p.embedUrl %>" target="_blank" rel="noopener">▶ <%= t('tl.open_player') %></a><% } %>
    133 
    134           <% if (p.poll) { var _pl=p.poll; var _tot=_pl.options.reduce(function(s,o){return s+(o.count||0);},0); var _voteable=!_pl.closed&&!_pl.voted; %>
    135           <div class="tl-poll">
    136             <% if (_voteable) { %>
    137               <form method="post" action="/news/vote" class="tl-poll-form">
    138                 <input type="hidden" name="note" value="<%= p.id %>">
    139                 <% _pl.options.forEach(function(o){ %><label class="tl-poll-choice"><input type="<%= _pl.multiple?'checkbox':'radio' %>" name="choice" value="<%= o.name %>"><span><%= o.name %></span></label><% }); %>
    140                 <button type="submit" class="btn btn-primary tl-poll-btn"><%= t('poll.vote') %></button>
    141               </form>
    142             <% } else { _pl.options.forEach(function(o){ var _pct=_tot?Math.round((o.count||0)*100/_tot):0; var _mine=_pl.voted&&(Array.isArray(_pl.voted)?_pl.voted.indexOf(o.name)>=0:_pl.voted===o.name); %><div class="tl-poll-res<%= _mine?' is-mine':'' %>"><span class="tl-poll-fill" style="width:<%= _pct %>%"></span><span class="tl-poll-name"><%= _mine?'✓ ':'' %><%= o.name %></span><span class="tl-poll-pct"><%= _pct %>%</span></div><% }); } %>
    143             <div class="tl-poll-foot"><%= (_pl.voters!=null?_pl.voters:_tot) %> <%= t('poll.votes') %><% if(_pl.closed){ %> · <%= t('poll.closed') %><% } %></div>
    144           </div>
    145           <% } %>
    146 
    147           <% if (p.url) { %><a class="tl-orig" href="<%= p.url %>" target="_blank" rel="nofollow noopener"><%= t('tl.view_original') %></a><% } %>
    148 
    149           <div class="tl-actions">
    150             <form method="post" action="/news/like" class="tl-act-form tl-react-form"><input type="hidden" name="note" value="<%= p.id %>"><input type="hidden" name="author" value="<%= p.author_uri %>"><button type="submit" class="tl-act tl-act-like<%= p.liked ? ' is-on' : '' %>" title="<%= p.liked ? t('fedi.unlike_short') : t('fedi.likes') %>" aria-label="<%= p.liked ? t('fedi.unlike_short') : t('fedi.likes') %>"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.6l2.9 5.88 6.49.95-4.7 4.58 1.11 6.46L12 17.96l-5.8 3.06 1.1-6.46-4.69-4.58 6.49-.95z"/></svg></button></form>
    151             <form method="post" action="/news/boost" class="tl-act-form tl-react-form"><input type="hidden" name="note" value="<%= p.id %>"><input type="hidden" name="author" value="<%= p.author_uri %>"><button type="submit" class="tl-act tl-act-boost<%= p.boosted ? ' is-on' : '' %>" title="<%= p.boosted ? t('tl.unboost') : t('fedi.boosts') %>" aria-label="<%= p.boosted ? t('tl.unboost') : t('fedi.boosts') %>"><svg viewBox="0 0 24 24" 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></button></form>
    152             <button type="button" class="tl-act tl-act-reply fedi-remote-reply-btn" data-fedi-uri="<%= p.id %>" data-fedi-ph="<%= t('fedi.remote_ph') %>" title="<%= t('fedi.remote_reply') %>" aria-label="<%= t('fedi.remote_reply') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg></button>
    153             <form method="post" action="/blocking/add" class="tl-act-form" data-confirm="<%= t('tl.block') %>?"><input type="hidden" name="target" value="<%= p.author_uri %>"><button type="submit" class="tl-act tl-act-block" title="<%= t('tl.block') %>" aria-label="<%= t('tl.block') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="4.9" y1="4.9" x2="19.1" y2="19.1"/></svg></button></form>
    154           </div>
    155         </li>
     92        <%- include('../partials/tl-item', { p: p }) %>
    15693      <% }); %>
    15794    </ol>
     95    <%- include('../partials/load-more', { hasMore: hasMore, nextOffset: nextOffset, moreBase: moreBase, moreTarget: '#tl-feed', morePath: '/news' }) %>
    15896  <% } %>
    15997</div>
Note: See TracChangeset for help on using the changeset viewer.