Changeset 7cf8144 in Klonkt for src/views

Timestamp:

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

Author:

Bart <bart@…>

Branches:

main

Children:

9da8027

Parents:

2d2fd8c

git-author:

Bart <bart@…> (08/18/2026 05:28:31 AM)

git-committer:

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

Message:

Lezen is een weergave van de feed, geen eigen plek

/read was een route met een eigen shell: eigen pagina, eigen chrome-gedrag, en
op een site zonder berichten een 404 -- een dode knop in de switcher. Nu is het
wat het altijd had moeten zijn: een derde waarde van body[data-feed-view], naast
timeline en grid. Dezelfde berichten, andere vorm.

De feed stuurt ze alledrie mee en CSS kiest, precies zoals timeline/grid dat al
deden. Het lijf loopt door PostAccessService, dus een gesloten poort levert ook
hier geen tekst op. "Meer laden" vult de leesstroom OOB mee aan, net als de
tegels.

DE LEGE STAAT zit in de :has(.feed-reader) op de verbergregel. Zonder berichten
rendert de leessectie niet, en dan blijft de tijdlijn staan -- want daar staat
"nog niets geschreven" met de knop om te beginnen. Zonder die voorwaarde was
Lezen op een verse site een wit scherm. Feeds zonder leessectie (cirkel,
archief) houden om dezelfde reden gewoon hun tijdlijn.

Wat weg kon, en dat is de winst:

• de route, pages/read.ejs, en 'on-read' als page-class;
• mod/read.js van 222 naar 51 regels. Het ophalen van buren, het corrigeren van de scrollpositie bij invoegen en het onderbreken van het snappen zijn niet opgelost maar OVERBODIG: de feed levert de berichten al. Wat blijft is de tik.
• read.end en read.load_error: het script plaatst geen zinnen meer.

De balken schuiven niet meer weg. Dat was mooi op een eigen scherm, maar hier
zou het de switcher verbergen waarmee je net koos -- en dan kun je niet terug.

MOD_V naar 4, style.css naar v70.

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

Location:

src/views

Files:

• pages/home.ejs (modified) (1 diff)
• pages/read.ejs (deleted)
• partials/home-append.ejs (modified) (1 diff)
• partials/shared-styles.ejs (modified) (2 diffs)
• partials/view-switcher.ejs (modified) (2 diffs)
• shell.ejs (modified) (4 diffs)

src/views/pages/home.ejs

@@ -59 +59 @@
 </div>
 
+<!-- ========== LEZEN (alleen zichtbaar bij body[data-feed-view="reader"]) ==========
+     Hetzelfde stel berichten, maar heel: één per scherm, met de grenzen door
+     CSS-snapping. Geen eigen route en geen eigen shell -- de balken blijven
+     staan, want je bent nog gewoon op de feed en moet terug kunnen schakelen.
+     Leeg? Dan valt de lege staat van de tijdlijn hierboven in beeld; deze
+     sectie rendert dan niet. -->
+<% if (typeof readerItems !== 'undefined' && readerItems && readerItems.length) { %>
+<section class="feed-reader" aria-label="<%= t('switch.reader') %>">
+  <div class="read-stream" id="read-stream" data-base="<%= _base %>">
+    <% readerItems.forEach(function(it) { %>
+      <%- include('../partials/read-article', { post: it.post, entry: it.entry }) %>
+    <% }); %>
+  </div>
+</section>
+<% } %>
+
 <!-- ========== GRID (only visible when body[data-feed-view="grid"]) ========== -->
 <% if (allPosts.length > 0) { %>

src/views/partials/home-append.ejs

@@ -4 +4 @@
     items instead of nesting under an extra box. %>
 <div hx-swap-oob="beforeend:#grid-tiles" style="display:contents"><% posts.forEach(function(post){ %><%- include('post-tile', { post: post }) %><% }); %></div>
+<%# Lezen: dezelfde berichten OOB achteraan de leesstroom, net als de tegels
+    hierboven. Zonder dit zou "meer laden" in de leesweergave niets doen. %>
+<% if (typeof readerItems !== 'undefined' && readerItems && readerItems.length) { %><div hx-swap-oob="beforeend:#read-stream" style="display:contents"><% readerItems.forEach(function(it){ %><%- include('read-article', { post: it.post, entry: it.entry }) %><% }); %></div><% } %>
 <%- include('load-more', { hasMore: hasMore, nextOffset: nextOffset, moreBase: moreBase, moreTarget: '#post-list', morePath: (typeof morePath !== 'undefined' ? morePath : '/'), oob: true }) %>

src/views/partials/shared-styles.ejs

@@ -27 +27 @@
   padding: 0.15rem;
 }
-.view-switch-btn,
-.view-switch-link {
+.view-switch-btn {
   display: inline-flex; align-items: center; gap: 0.35rem;
   padding: 0.35rem 0.85rem;
@@ -36 +35 @@
   transition: background 120ms, color 120ms;
 }
-.view-switch-btn:hover,
-.view-switch-link:hover { color: var(--ink); }
-.view-switch-link { text-decoration: none; }
+.view-switch-btn:hover { color: var(--ink); }
 /* Active = white (light background, dark text). Via aria-selected (element
    attribute, set by syncAria + on htmx:afterSettle) → htmx-robust. On non-
    feed pages syncAria sets aria-selected=false → both grey. */
-.view-switch-btn[aria-selected="true"],
-.view-switch-link[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
+.view-switch-btn[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
 
 /* Agenda = its OWN pill (separate from Timeline/Grid, so the feed-toggle is never

src/views/partials/view-switcher.ejs

@@ -8 +8 @@
   // Pagina's zonder actieve feed-weergave → niets in de pill is 'actief' (Solo/Cirkel
   // + Tijdlijn/Grid grijs). Alleen Agenda krijgt z'n eigen is-active op de agenda.
-  var _neutral = ['on-shows','on-downloads','on-post','on-epk','on-linkbio','on-newsletter','on-archive','on-read']
+  var _neutral = ['on-shows','on-downloads','on-post','on-epk','on-linkbio','on-newsletter','on-archive']
                    .some(function(c){ return _bc.indexOf(c) >= 0; });
-  var _onRead = _bc.indexOf('on-read') >= 0;
-  var _sbR = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
 %>
 <div class="view-switcher-wrap">
@@ -47 +45 @@
         <span><%= t('switch.grid') %></span>
       </button>
-      <%# Lezen is GEEN in-place omschakeling maar een andere route (/read), dus
-          een <a> en niet een <button>. En bewust NIET de klasse view-switch-btn:
-          de gedelegeerde klik in shell.ejs pakt alles met die klasse op, zet
-          body[data-feed-view] erop en springt op niet-feedpagina's terug naar
-          home -- dat zou deze link opeten. Andere klasse, zelfde uiterlijk.
-          aria-selected staat hier vast: syncAria() raakt alleen .view-switch-btn
-          aan, dus de actieve staat op /read blijft staan na een htmx-navigatie. %>
-      <a class="view-switch-link" href="<%= _sbR %>/read" role="tab"
-         aria-selected="<%= _onRead ? 'true' : 'false' %>">
+      <%# Lezen is een gewone derde weergave: dezelfde berichten, andere vorm.
+          Dus een <button> met data-view, net als de andere twee -- dan doen de
+          gedelegeerde klik, localStorage en syncAria in shell.ejs hun werk al. %>
+      <button type="button" class="view-switch-btn" data-view="reader" role="tab"
+              aria-selected="false">
         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
         <span><%= t('switch.reader') %></span>
-      </a>
+      </button>
     </div>
     <% if (!_neutral) { %>

src/views/shell.ejs

@@ -222 +222 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=68">
+<link rel="stylesheet" href="/assets/css/style.css?v=70">
 <script>
 /* iOS safe-area, built by hand. env(safe-area-inset-top) resolves to 0 on this iOS in
@@ -435 +435 @@
   // focusscherm óók via htmx z'n styling krijgt (geen chrome, geen tab, audio op 0).
   // ALLES wat de server als page-class kan sturen moet hier staan: wat er niet in
-  // staat wordt bij een htmx-navigatie stilletjes weggefilterd. 'on-read' ontbrak,
-  // en dan kwam je via de Lezen-knop op een leesweergave waarvan ELKE regel
-  // (.on-read ...) niet aansloeg: geen schermhoge berichten, geen snappen, geen
-  // wegschuivende balken. Bij intikken van /read ging het wel goed, want dan
-  // rendert de shell de class zelf -- vandaar dat het lang onzichtbaar bleef.
+  // staat wordt bij een htmx-navigatie stilletjes weggefilterd.
   var PAGE_CLASSES = ['on-home','on-post','on-special','on-archive','on-search','on-admin','on-auth',
     'on-shows','on-downloads','on-download','on-epk','on-linkbio','on-newsletter',
-    'on-tag','on-type','on-user','on-cirkel','on-hub','on-chat','on-read'];
+    'on-tag','on-type','on-user','on-cirkel','on-hub','on-chat'];
 
   document.body.addEventListener('pcmsNav', function(ev) {
@@ -509 +505 @@
   // Eén nummer voor de hele map. Te vaak bumpen kost één download; te weinig
   // bumpen kost een bugfix die nooit aankomt.
-  var MOD_V = 3;
+  var MOD_V = 4;
 
   // name -> 1 (aan het laden) of de module-namespace (geladen). Een module
@@ -554 +550 @@
   try {
     var v = localStorage.getItem('pcms-feed-view');
-    if (v === 'timeline' || v === 'grid') body.dataset.feedView = v;
+    if (v === 'timeline' || v === 'grid' || v === 'reader') body.dataset.feedView = v;
     var c = parseInt(localStorage.getItem('pcms-grid-cols'), 10);
     if (c === 2 || c === 3 || c === 4) body.dataset.gridCols = String(c);