Changeset b67edbd in Klonkt

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@…>

Location:

src

Files:

• assets/js/mod/read.js (added)
• routes/posts.js (modified) (3 diffs)
• services/i18n.js (modified) (3 diffs)
• views/pages/lees.ejs (deleted)
• views/pages/read.ejs (added)
• views/partials/lees-article.ejs (deleted)
• views/partials/post-body.ejs (modified) (1 diff)
• views/partials/read-article.ejs (added)

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);
 });
 

src/services/i18n.js

@@ -891 +891 @@
     'fgate.title': 'Alleen voor vrienden',
     'fgate.sub': 'Dit is exclusief voor ingelogde vrienden. Log in om het te bekijken.',
-    'fgate.login': 'Inloggen / aanmelden', 'lees.exit': 'Terug naar de site', 'lees.exit_label': 'Uit het leesscherm',
+    'fgate.login': 'Inloggen / aanmelden', 'read.exit': 'Terug naar de site', 'read.exit_label': 'Uit het leesscherm',
     'lbio.empty': 'Nog geen links ingesteld.',
     'lbio.back_to_site': 'naar de site',
@@ -1897 +1897 @@
     'fgate.title': 'Friends only',
     'fgate.sub': 'This is exclusive to logged-in friends. Log in to view it.',
-    'fgate.login': 'Log in / sign up', 'lees.exit': 'Back to the site', 'lees.exit_label': 'Leave reading view',
+    'fgate.login': 'Log in / sign up', 'read.exit': 'Back to the site', 'read.exit_label': 'Leave reading view',
     'lbio.empty': 'No links set up yet.',
     'lbio.back_to_site': 'back to the site',
@@ -2903 +2903 @@
     'fgate.title': 'Nur für Freunde',
     'fgate.sub': 'Dies ist exklusiv für eingeloggte Freunde. Melde dich an, um es anzusehen.',
-    'fgate.login': 'Anmelden / Registrieren', 'lees.exit': 'Zurück zur Seite', 'lees.exit_label': 'Lesemodus verlassen',
+    'fgate.login': 'Anmelden / Registrieren', 'read.exit': 'Zurück zur Seite', 'read.exit_label': 'Lesemodus verlassen',
     'lbio.empty': 'Noch keine Links eingerichtet.',
     'lbio.back_to_site': 'zurück zur Seite',

src/views/partials/post-body.ejs

@@ -19 +19 @@
 var _b = (typeof _base !== 'undefined' && _base) ? _base : '';
 var _href = _b + '/' + post.slug;
+// Het lijf komt als eigen waarde binnen en wordt NIET uit `post` gevist. De rij
+// draagt nog de ruwe `content`; door alleen te tonen wat de aanroeper bewust
+// meegeeft, kan een gesloten poort hier niets laten ontsnappen.
+var _html = (typeof content_html !== 'undefined' && content_html) ? content_html : '';
 %>
 
 <% if (_acc === 'full') { %>
-  <div class="post-content"><%- post.content_html %></div>
+  <div class="post-content"><%- _html %></div>
 
 <% } else if (_acc === 'paid') { %>