Changeset b67edbd in Klonkt for src/routes/posts.js

Timestamp:

08/18/2026 06:47:58 PM (3 weeks ago)

Author:

Bart <bart@…>

Branches:

main

Children:

7421147

Parents:

9622f20

git-author:

Bart <bart@…> (08/18/2026 12:19:20 AM)

git-committer:

Bart <bart@…> (08/18/2026 06:47:58 PM)

Message:

Leesweergave: /read, en fragmenten in de richting van de scroll

De vorige opzet sprong naar het andere uiteinde van de scroll en schoof het
bericht daarna "vloeiend" in beeld -- de truc van PrutCMS, en een die je voelt.
Nu groeit de stroom gewoon: een schildwacht boven en onder het laatste bericht
haalt het volgende of vorige fragment op en zet het erbij. Bij invoegen BOVEN
wordt de ingevoegde hoogte gemeten en met scrollBy gecompenseerd, anders
verspringt de tekst onder je duim.

De grens tussen berichten is CSS, geen JavaScript: scroll-snap-type: y proximity
op de stroom, scroll-snap-align: start per bericht. Proximity en niet mandatory,
want binnen een lang bericht moet je vrij kunnen scrollen.

En het heet read, niet lees: een pad is geen plek voor een Nederlandse
werkwoordsvorm.

Co-Authored-By: Claude Opus 5 <claude@…>

File:

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

src/routes/posts.js

@@ -149 +149 @@
   'authorize_interaction', 'fediverse', 'news', 'following', 'notifications', 'blocking',
   'paid', 'push', 'guardian',
-  // De meeslepende tijdlijn (Barts idee, naar bartoverkamp.nl). Gereserveerd
+  // De meeslepende leesweergave. Gereserveerd
   // omdat een bericht met deze slug de route anders zou overschaduwen.
-  'lees',
+  'read',
 ]);
 
@@ -264 +264 @@
 //
 // ?partial=1 levert alleen het artikel, want dat is wat de schildwacht inruilt.
-router.get('/lees/:slug?', (req, res, next) => {
+router.get('/read/:slug?', (req, res, next) => {
   const site = res.locals.site;
   if (!site) return next();
 
-  // Zonder slug: het nieuwste bericht, zodat /lees een ingang is en niet een
+  // Zonder slug: het nieuwste bericht, zodat /read een ingang is en niet een
   // fout. Gepind eerst, net als op de voorpagina.
   const post = req.params.slug
@@ -291 +291 @@
     post, entry, newerPost, olderPost,
     pageTitle: post.title || site.title,
-    // on-lees zet de chrome weg; de mini-topnav blijft (chrome.ejs, _headerless).
-    bodyClass: 'on-lees on-special',
+    // on-read zet de chrome weg; de mini-topnav blijft (chrome.ejs, _headerless).
+    bodyClass: 'on-read on-special',
+    pageJs: 'read',
   };
   if (req.query.partial === '1' || req.headers['hx-request'] === 'true') {
-    return renderPage(req, res, 'partials/lees-article', model);
+    return renderPage(req, res, 'partials/read-article', model);
   }
   recordPageview(site.id, req);
-  return renderPage(req, res, 'pages/lees', model);
+  return renderPage(req, res, 'pages/read', model);
 });