Changeset 8afbdd6 in Klonkt for src/views/pages/hub-home.ejs

Timestamp:

06/14/2026 06:07:51 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

c869272

Parents:

b94c08e

Message:

feat: viewer role + artists directory + Klonkt Hub Beta rebrand

Viewer role (replaces the separate view-mode/readonly toggle):

• 'kijker' is now a real role (VALID_ROLES) selectable in Admin. May view EVERYTHING including Admin, but cannot modify anything.
• isViewer(user) (= role kijker or legacy readonly flag) is the source; requireGod/requireSiteManager(BySlug) let a viewer through (viewing), the global guard 403s every write. Existing readonly accounts are migrated on each role change (readonly=0).
• Write leaks via GET patched: /prutter/new (INSERT) blocks for viewers, /prutter/:id skips markAsRead (UPDATE); WS upgrade rejects viewers (the HTTP guard doesn't cover WebSockets).
• Clean "Viewer mode" page (viewer-blocked) instead of raw 403 text; styled sticky banner; account page shows read-only UI instead of an upload button that silently 403s. canMutate hides write buttons.

Scalability (>50 artists):

• Hub home shows max 24 (most active first) + "All N artists ->".
• New searchable, paginated /artiesten directory (hub only).
• 'user' + 'artiesten' reserved as slugs.

Rebrand PrutFolio v1 -> Klonkt Hub Beta (footer, PWA manifest, account/
admin texts, default page title, startup, README; internal package +
PWA id 'prutfolio' remain for stability).

Co-Authored-By: Claude <noreply@…>

File:

• src/views/pages/hub-home.ejs (modified) (3 diffs)

src/views/pages/hub-home.ejs

@@ -33 +33 @@
     <%# ── ARTIESTEN-ROSTER ─────────────────────────────────────────── %>
     <% if (artists && artists.length) { %>
+    <% var _total = (typeof totalArtists !== 'undefined') ? totalArtists : artists.length; %>
+    <% var _hasMore = _total > artists.length; %>
     <section class="hub-sec">
-      <h2 class="hub-sec-title">Artiesten</h2>
+      <h2 class="hub-sec-title">
+        Artiesten
+        <% if (_hasMore) { %><span class="hub-sec-count"><%= _total %></span><% } %>
+      </h2>
       <div class="roster">
         <% artists.forEach(function(a){ %>
@@ -48 +53 @@
         <% }); %>
       </div>
+      <% if (_hasMore) { %>
+        <div class="hub-more">
+          <a class="hub-more-link" href="/artiesten">Alle <%= _total %> artiesten <span aria-hidden="true">→</span></a>
+        </div>
+      <% } %>
     </section>
     <% } %>
@@ -131 +141 @@
 }
 .hub-sec-title::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
+.hub-sec-count {
+  font-family: var(--font-ui, system-ui); font-size: 0.8rem; font-weight: 700;
+  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
+  padding: 0.1rem 0.55rem; border-radius: 99px; order: 1;
+}
+.hub-more { margin-top: 1.25rem; text-align: center; }
+.hub-more-link {
+  display: inline-flex; align-items: center; gap: 0.4rem;
+  padding: 0.6rem 1.3rem; border: 1px solid var(--rule); border-radius: 99px;
+  background: var(--paper-2); color: var(--ink); text-decoration: none;
+  font-weight: 600; font-size: 0.92rem; transition: border-color 140ms, background 140ms;
+}
+.hub-more-link:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--paper-2)); }
 
 /* ── Roster (artiesten) ───────────────────────────────────────────── */