Changeset 3cd1aaa in Klonkt

Timestamp:

06/17/2026 12:03:39 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

44cf44d

Parents:

108fd5f

Message:

Hub: chrome in #pcms-chrome slot + out-of-band swap on htmx → header always correct, audio never jumps

The site chrome (topnav/profile header/view-switcher) now lives in a fixed
slot #pcms-chrome. On every htmx partial, render.js renders that chrome
out-of-band (chrome.ejs with oob=true) so htmx replaces it with the chrome
of the NEW page/artist — while the audio player (separate in document.body)
stays alive. Result: hub-home has no header (hero=header, empty slot), each
artist gets its own header (no stale "Studio Noord on Luna"), and music
never jumps on navigation. Solo/circle: chrome refreshes identically (no-op
in terms of content).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• middleware/render.js (modified) (1 diff)
• views/partials/chrome.ejs (added)
• views/shell.ejs (modified) (2 diffs)

src/assets/css/style.css

@@ -2028 +2028 @@
     margin-bottom: 1.5rem;
 }
-/* Hub-landing (body.on-hub): verberg de site-chrome. In hub-modus staan masthead
-   + view-switcher altijd in de DOM (zodat htmx tussen hub-home en artiest-sites
-   kan schakelen zonder full-reload); hier toggelen we hun zichtbaarheid. De
-   hub-home heeft z'n eigen kop/nav in de content. */
-body.on-hub .masthead,
-body.on-hub .view-switcher-wrap { display: none !important; }
 .view-switcher {
     display: flex;

src/middleware/render.js

@@ -122 +122 @@
       }).replace(/[€-￿]/g, (ch) => '\\u' + ch.charCodeAt(0).toString(16).padStart(4, '0'));
       res.setHeader('HX-Trigger-After-Settle', triggerJson);
-      return res.send(pageContent);
+      // Site-chrome out-of-band mee-renderen, zodat de kop (topnav/profielkop/
+      // view-switcher) bij navigatie ALTIJD bij de nieuwe pagina/artiest hoort —
+      // terwijl de audioplayer (los in document.body) blijft leven (geen
+      // verspringen). htmx vervangt #pcms-chrome via hx-swap-oob. Niet kritisch:
+      // faalt 't, dan blijft de oude chrome staan (geen crash).
+      let oobChrome = '';
+      try {
+        oobChrome = await ejs.renderFile(
+          path.join(VIEWS_DIR, 'partials', 'chrome.ejs'),
+          { ...locals, oob: true },
+          { async: false },
+        );
+      } catch (e) { /* chrome-OOB overslaan */ }
+      return res.send(pageContent + oobChrome);
     }
 

src/views/shell.ejs

@@ -263 +263 @@
 <% } %>
 
-<%# Geen shell-chrome (masthead/profile-header/view-switcher/bottom-tab) op:
-    - de hub-overview (on-hub): standalone landing, begint met de hero;
-    - auth-pagina's (on-auth): focus-schermen voor in-/uitloggen.
-    Die chrome hoort bij een Klonkt-site en verschijnt dus op /user/-pagina's. %>
-<% var _isHub  = (typeof tenancy !== 'undefined' && tenancy === 'hub'); %>
-<% var _onAuth = (typeof bodyClass === 'string' && bodyClass.indexOf('on-auth') >= 0); %>
-<% var bareChrome = (typeof bodyClass === 'string' && (bodyClass.indexOf('on-hub') >= 0 || bodyClass.indexOf('on-auth') >= 0))
-     || (_isHub && !siteUrlBase && !isAdminPage); %>
-<%# In HUB-modus de chrome ALTIJD renderen (CSS verbergt 'm op de hub-landing via
-    body.on-hub) zodat htmx tussen hub-home en artiest-sites kan schakelen zónder
-    full-reload → de audioplayer blijft leven, geen verspringen. profile-header
-    self-hidet als er geen site is. Solo/circle: ongewijzigd (!bareChrome). %>
-<% var renderChrome = _isHub ? !_onAuth : !bareChrome; %>
-
-<% if (renderChrome) { %>
-  <%- include('partials/topnav') %>
-  <%- include('partials/profile-header') %>
-<% } %>
-
-<%# View switcher — visible on every non-admin page. On feed pages
-    (home, archive, tag, type, user) it toggles the visual layout;
-    on non-feed pages (post, account, search, auth) it navigates to /
-    in the chosen view. Click logic is in shell.ejs at the bottom. %>
-<% if (!isAdminPage && renderChrome) { %>
-  <%- include('partials/view-switcher') %>
-<% } %>
+<%# Site-chrome (topnav + profielkop + view-switcher) in één vaste slot #pcms-chrome.
+    Bij htmx-navigatie wordt dit slot out-of-band ververst (zie chrome.ejs +
+    render.js), zodat de kop ALTIJD bij de nieuwe pagina/artiest hoort terwijl de
+    audioplayer (los in document.body) blijft leven → geen verspringen. Op de
+    hub-landing is het slot leeg: de hero is daar de header. %>
+<%- include('partials/chrome') %>
 
 <%# hx-history-elt scopes HTMX history snapshots to #pcms-main only, so
@@ -360 +340 @@
     PAGE_CLASSES.forEach(function(c) { document.body.classList.remove(c); });
     document.body.classList.add(firstClass);
-    // 'on-hub' is een modifier náást de page-class: apart toggelen zodat de
-    // hub-chrome (topnav/view-switcher) via CSS mee-schakelt bij htmx-navigatie
-    // tussen hub-home (on-hub) en artiest-sites (geen on-hub).
-    document.body.classList.toggle('on-hub', /(^|\s)on-hub(\s|$)/.test(String(next)));
   });
 })();