Changeset 03bfdce in Klonkt

Timestamp:

06/16/2026 11:35:13 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

108fd5f

Parents:

09ac0a5

Message:

Hub: always render chrome + CSS toggle (body.on-hub) → hub nav via htmx (no audio jumping)

In hub mode, topnav/view-switcher are now always in the DOM; CSS hides them
on the hub landing (body.on-hub, also toggled in the htmx body-class swap).
Roster, main card, feed, and brand links are now htmx → navigating between
hub-home and an artist happens in-place, so the persistent audio player
stays alive (no jumping). Solo/circle completely unchanged
(renderChrome = !bareChrome there).

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

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• views/pages/hub-home.ejs (modified) (3 diffs)
• views/partials/topnav.ejs (modified) (1 diff)
• views/shell.ejs (modified) (3 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/views/pages/hub-home.ejs

@@ -34 +34 @@
     <% if (mainSite) { %>
     <section class="hub-sec hub-sec-main">
-      <a class="hub-main-card" href="/user/<%= mainSite.slug %>">
+      <a class="hub-main-card" href="/user/<%= mainSite.slug %>"
+         hx-get="/user/<%= mainSite.slug %>?partial=1" hx-target="#pcms-main" hx-swap="innerHTML"
+         hx-push-url="/user/<%= mainSite.slug %>" hx-indicator="#pcms-loading">
         <% var _mAva = mainSite.profile_photo || mainSite.owner_avatar; %>
         <span class="hub-main-avatar"<% if (_mAva) { %> style="background-image:url('<%= _mAva %>')"<% } else { %> style="background:<%= mainSite.accent || 'var(--accent)' %>;color:#fff"<% } %>>
@@ -60 +62 @@
       <div class="roster">
         <% artists.forEach(function(a){ %>
-          <a class="roster-card" href="/user/<%= a.slug %>">
+          <a class="roster-card" href="/user/<%= a.slug %>"
+             hx-get="/user/<%= a.slug %>?partial=1" hx-target="#pcms-main" hx-swap="innerHTML"
+             hx-push-url="/user/<%= a.slug %>" hx-indicator="#pcms-loading">
             <% var _ava = a.profile_photo || a.owner_avatar; %>
             <span class="roster-avatar"<% if (_ava) { %> style="background-image:url('<%= _ava %>')"<% } else { %> style="background:<%= a.accent || 'var(--accent)' %>;color:#fff"<% } %>>
@@ -85 +89 @@
       <div class="hub-feed">
         <% posts.forEach(function(p){ %>
-          <a class="feed-item" href="/user/<%= p.site_slug %>/<%= p.slug %>">
+          <a class="feed-item" href="/user/<%= p.site_slug %>/<%= p.slug %>"
+             hx-get="/user/<%= p.site_slug %>/<%= p.slug %>?partial=1" hx-target="#pcms-main" hx-swap="innerHTML"
+             hx-push-url="/user/<%= p.site_slug %>/<%= p.slug %>" hx-indicator="#pcms-loading">
             <% if (p.cover_image_url) { %>
               <span class="feed-cover" style="background-image:url('<%= p.cover_image_url %>')"></span>

src/views/partials/topnav.ejs

@@ -28 +28 @@
         <a href="<%= _siteUrlBase %>/" class="nav-link nav-link-admin">← Terug naar site</a>
       <% } else if (typeof tenancy !== 'undefined' && tenancy === 'hub') { %>
-        <%# Hub: de brand is de hub-naam en gaat naar de hub-home (volledige nav, geen
-            HTMX, zodat de headerloze overview correct rendert). Eigen class want
-            .site-title is overal display:none. %>
-        <a class="nav-hub-home" href="/" aria-label="Home" title="Home">
+        <%# Hub: de brand gaat naar de hub-home via HTMX. De chrome wordt in hub-modus
+            altijd gerenderd en via body.on-hub (CSS) verborgen op de landing, dus htmx
+            kan schakelen zonder full-reload → de audioplayer blijft leven. %>
+        <a class="nav-hub-home" href="/" aria-label="Home" title="Home"
+           hx-get="/?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/" hx-indicator="#pcms-loading">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
         </a>

src/views/shell.ejs

@@ -267 +267 @@
     - 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))
-     || ((typeof tenancy !== 'undefined' && tenancy === 'hub') && !siteUrlBase && !isAdminPage); %>
-
-<% if (!bareChrome) { %>
+     || (_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') %>
@@ -279 +286 @@
     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 && !bareChrome) { %>
+<% if (!isAdminPage && renderChrome) { %>
   <%- include('partials/view-switcher') %>
 <% } %>
@@ -353 +360 @@
     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)));
   });
 })();