Changeset 7b04d3b in Klonkt for src/routes

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:

• src/routes/posts.js (modified) (2 diffs)

src/routes/posts.js

@@ -883 +883 @@
 }
 
+const FEED_PAGE = 72; // divisible by 2/3/4 → every grid column count keeps full rows
 router.get('/news', requireSiteManager, (req, res) => {
   const site = res.locals.site;
+  const append = req.query.append === '1';
+  const offset = Math.max(0, parseInt(req.query.offset, 10) || 0);
   const cspOrigins = new Set();
-  const timeline = (site ? ActivityPubService.getTimeline(site.slug, 60) : []).map((p) => {
+  // Fetch one extra to know whether a "Load more" button belongs on this page.
+  const rows = site ? ActivityPubService.getTimeline(site.slug, FEED_PAGE + 1, offset) : [];
+  const hasMore = rows.length > FEED_PAGE;
+  const timeline = rows.slice(0, FEED_PAGE).map((p) => {
     let embedHtml = timelineEmbedHtml(p.content);
     let content = p.content;
@@ -910 +916 @@
     }
   }
+  const moreBase = res.locals.siteUrlBase || '';
+  if (append) {
+    return renderPage(req, res, 'partials/news-append', { timeline, hasMore, nextOffset: offset + FEED_PAGE, moreBase });
+  }
   renderPage(req, res, 'pages/news', {
     pageTitle: 'News', bodyClass: 'on-special',
-    timeline,
+    timeline, hasMore, nextOffset: offset + FEED_PAGE, moreBase,
     success: req.query.success || null, error: req.query.error || null,
   });