Changeset 2d2fd8c in Klonkt


Ignore:
Timestamp:
08/18/2026 06:47:58 PM (3 weeks ago)
Author:
Bart <bart@…>
Branches:
main
Children:
7cf8144
Parents:
03ff677
git-author:
Bart <bart@…> (08/18/2026 05:13:14 AM)
git-committer:
Bart <bart@…> (08/18/2026 06:47:58 PM)
Message:

Tijdlijn | Grid | Lezen: de leesweergave krijgt een ingang

De leesweergave bestond wel maar was alleen te bereiken door /read in te tikken.
Nu staat ze als derde optie in dezelfde pil.

Een <a>, geen <button>, en met opzet 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. Die
had deze link opgegeten.

Door er een link naartoe te leggen kwamen twee fouten boven die er al zaten:

  1. De route gaf ELKE htmx-aanvraag één kaal artikel terug, want de leesmodule had ?partial=1 geleend -- en dat betekent op deze site al iets anders: "de pagina zonder de schil". Een gebooste link naar /read schoof dus één artikel in #pcms-main: geen stroom, geen script. De module vraagt nu ?fragment=1, en al het andere gaat naar pages/read waar renderPage zelf over de schil beslist.
  1. PAGE_CLASSES in shell.ejs is een witte lijst, en 'on-read' stond er niet in. Bij een htmx-navigatie werd de class dus weggefilterd en sloeg ELKE regel van de leesweergave (.on-read ...) niet aan: geen schermhoge berichten, geen snappen, geen wegschuivende balken. Bij intikken ging het goed, want dan zet de shell de class zelf -- vandaar dat het onzichtbaar bleef.

Beide nagelopen in de browser: de pil navigeert, on-read staat er, min-height is
de schermhoogte, snappen staat aan, en de opgeslagen feed-view blijft ongemoeid.

MOD_V naar 3 (read.js) en style.css naar v68 (nieuwe selector).

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

Location:
src
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • src/assets/css/style.css

    r03ff677 r2d2fd8c  
    23532353    padding: .35rem 0;
    23542354}
    2355 .view-switch-btn {
     2355.view-switch-btn,
     2356.view-switch-link {
    23562357    display: inline-flex;
    23572358    align-items: center;
    … …  
    23682369    transition: all .15s;
    23692370}
    2370 .view-switch-btn:hover {
     2371.view-switch-btn:hover,
     2372.view-switch-link:hover {
    23712373    color: var(--ink);
    23722374    border-color: var(--ink-muted);

  • src/assets/js/mod/read.js

    r03ff677 r2d2fd8c  
    6262
    6363async function fetchArticle(slug, base) {
    64   const r = await fetch(`${base}/read/${encodeURIComponent(slug)}?partial=1`, {
     64  const r = await fetch(`${base}/read/${encodeURIComponent(slug)}?fragment=1`, {
    6565    headers: { 'HX-Request': 'true' },
    6666    credentials: 'same-origin',

  • src/routes/posts.js

    r03ff677 r2d2fd8c  
    295295    pageJs: 'read',
    296296  };
    297   if (req.query.partial === '1' || req.headers['hx-request'] === 'true') {
     297  // ALLEEN de leesmodule krijgt één artikel; ?fragment=1 is haar eigen teken.
     298  //
     299  // Hier stond `?partial=1 || hx-request`, en dat waren twee dingen door elkaar.
     300  // Op deze site betekent ?partial=1 al iets anders -- "de pagina zonder de
     301  // schil", voor htmx -- dus een gebooste link naar /read kreeg één kaal
     302  // artikel in #pcms-main geschoven: geen stroom, geen on-read, geen script.
     303  // Onzichtbaar zolang je /read alleen intikt; zichtbaar zodra er een link naar
     304  // toe bestaat (de Lezen-knop in de view-switcher).
     305  //
     306  // Alles wat GEEN fragment vraagt gaat naar pages/read, en renderPage bepaalt
     307  // daar zelf of de schil eromheen moet -- net als bij elke andere pagina.
     308  if (req.query.fragment === '1') {
    298309    return renderPage(req, res, 'partials/read-article', model);
    299310  }

  • src/services/i18n.js

    r03ff677 r2d2fd8c  
    3434    'switch.circle': 'Cirkels',
    3535    'switch.timeline': 'Tijdlijn',
    36     'switch.grid': 'Grid',
     36    'switch.grid': 'Grid', 'switch.reader': 'Lezen',
    3737    'postnav.newer': 'Nieuwer',
    3838    'postnav.older': 'Ouder',
    … …  
    10491049    'switch.circle': 'Circles',
    10501050    'switch.timeline': 'Timeline',
    1051     'switch.grid': 'Grid',
     1051    'switch.grid': 'Grid', 'switch.reader': 'Reader',
    10521052    'postnav.newer': 'Newer',
    10531053    'postnav.older': 'Older',
    … …  
    20552055    'switch.circle': 'Zirkel',
    20562056    'switch.timeline': 'Zeitleiste',
    2057     'switch.grid': 'Raster',
     2057    'switch.grid': 'Raster', 'switch.reader': 'Lesen',
    20582058    'postnav.newer': 'Neuer',
    20592059    'postnav.older': 'Älter',

  • src/views/partials/shared-styles.ejs

    r03ff677 r2d2fd8c  
    2727  padding: 0.15rem;
    2828}
    29 .view-switch-btn {
     29.view-switch-btn,
     30.view-switch-link {
    3031  display: inline-flex; align-items: center; gap: 0.35rem;
    3132  padding: 0.35rem 0.85rem;
    … …  
    3536  transition: background 120ms, color 120ms;
    3637}
    37 .view-switch-btn:hover { color: var(--ink); }
     38.view-switch-btn:hover,
     39.view-switch-link:hover { color: var(--ink); }
     40.view-switch-link { text-decoration: none; }
    3841/* Active = white (light background, dark text). Via aria-selected (element
    3942   attribute, set by syncAria + on htmx:afterSettle) → htmx-robust. On non-
    4043   feed pages syncAria sets aria-selected=false → both grey. */
    41 .view-switch-btn[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
     44.view-switch-btn[aria-selected="true"],
     45.view-switch-link[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
    4246
    4347/* Agenda = its OWN pill (separate from Timeline/Grid, so the feed-toggle is never

  • src/views/partials/view-switcher.ejs

    r03ff677 r2d2fd8c  
    88  // Pagina's zonder actieve feed-weergave → niets in de pill is 'actief' (Solo/Cirkel
    99  // + Tijdlijn/Grid grijs). Alleen Agenda krijgt z'n eigen is-active op de agenda.
    10   var _neutral = ['on-shows','on-downloads','on-post','on-epk','on-linkbio','on-newsletter','on-archive']
     10  var _neutral = ['on-shows','on-downloads','on-post','on-epk','on-linkbio','on-newsletter','on-archive','on-read']
    1111                   .some(function(c){ return _bc.indexOf(c) >= 0; });
     12  var _onRead = _bc.indexOf('on-read') >= 0;
     13  var _sbR = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
    1214%>
    1315<div class="view-switcher-wrap">
    … …  
    4547        <span><%= t('switch.grid') %></span>
    4648      </button>
     49      <%# Lezen is GEEN in-place omschakeling maar een andere route (/read), dus
     50          een <a> en niet een <button>. En bewust NIET de klasse view-switch-btn:
     51          de gedelegeerde klik in shell.ejs pakt alles met die klasse op, zet
     52          body[data-feed-view] erop en springt op niet-feedpagina's terug naar
     53          home -- dat zou deze link opeten. Andere klasse, zelfde uiterlijk.
     54          aria-selected staat hier vast: syncAria() raakt alleen .view-switch-btn
     55          aan, dus de actieve staat op /read blijft staan na een htmx-navigatie. %>
     56      <a class="view-switch-link" href="<%= _sbR %>/read" role="tab"
     57         aria-selected="<%= _onRead ? 'true' : 'false' %>">
     58        <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>
     59        <span><%= t('switch.reader') %></span>
     60      </a>
    4761    </div>
    4862    <% if (!_neutral) { %>

  • src/views/shell.ejs

    r03ff677 r2d2fd8c  
    222222
    223223<!-- v9 stylesheet (full palette system) -->
    224 <link rel="stylesheet" href="/assets/css/style.css?v=67">
     224<link rel="stylesheet" href="/assets/css/style.css?v=68">
    225225<script>
    226226/* iOS safe-area, built by hand. env(safe-area-inset-top) resolves to 0 on this iOS in
    … …  
    434434  // we opnieuw wat de server stuurde. 'on-auth' staat erbij zodat het login-
    435435  // focusscherm óók via htmx z'n styling krijgt (geen chrome, geen tab, audio op 0).
     436  // ALLES wat de server als page-class kan sturen moet hier staan: wat er niet in
     437  // staat wordt bij een htmx-navigatie stilletjes weggefilterd. 'on-read' ontbrak,
     438  // en dan kwam je via de Lezen-knop op een leesweergave waarvan ELKE regel
     439  // (.on-read ...) niet aansloeg: geen schermhoge berichten, geen snappen, geen
     440  // wegschuivende balken. Bij intikken van /read ging het wel goed, want dan
     441  // rendert de shell de class zelf -- vandaar dat het lang onzichtbaar bleef.
    436442  var PAGE_CLASSES = ['on-home','on-post','on-special','on-archive','on-search','on-admin','on-auth',
    437443    'on-shows','on-downloads','on-download','on-epk','on-linkbio','on-newsletter',
    438     'on-tag','on-type','on-user','on-cirkel','on-hub','on-chat'];
     444    'on-tag','on-type','on-user','on-cirkel','on-hub','on-chat','on-read'];
    439445
    440446  document.body.addEventListener('pcmsNav', function(ev) {
    … …  
    503509  // Eén nummer voor de hele map. Te vaak bumpen kost één download; te weinig
    504510  // bumpen kost een bugfix die nooit aankomt.
    505   var MOD_V = 2;
     511  var MOD_V = 3;
    506512
    507513  // name -> 1 (aan het laden) of de module-namespace (geladen). Een module
Note: See TracChangeset for help on using the changeset viewer.