Changeset 495b019 in Klonkt for src/views

Timestamp:

10/25/2026 09:52:01 AM (2 days ago)

Author:

Bart <bart@…>

Children:

b4aaadd

Parents:

5d0d3f35

git-author:

Bart <bart@…> (10/14/2026 02:48:46 PM)

git-committer:

Bart <bart@…> (10/25/2026 09:52:01 AM)

Message:

Lay-outthema's: een pakket, de beheerder kiest, en de zijbalk als eerste

Een lay-out is nu een pakket: een map in src/themes/ met een theme.json (id,
naam, versie, contract, stylesheet) en de stylesheet zelf. De zijbalk is het
eerste ingebouwde thema; een thema van buiten installeren komt later en gaat
door dezelfde lader, zodat er één vorm is.

Dezelfde markup, een ander stelsel: een thema verandert geen template. Het
contract (1) is de afspraak over de ids en klassen waar het op mag bouwen; een
thema op een ander contract valt terug op de gewone kop in plaats van half te
werken. Elke regel staat onder html[data-layout="<id>"], en een toets bewaakt
dat, zodat een thema niets raakt zolang het niet gekozen is.

WIE KIEST: de beheerder, in het sitebeheer (sites.layout). Een bezoeker niet
-- de server zet data-layout zelf, het bezoekersscript met localStorage is
weg, en ?layout= werkt alleen als voorproefje voor wie de site beheert. Het
beheer houdt altijd de gewone kop, ook bij navigeren via htmx (de lay-out reist
mee in pcmsNav): een kapot thema mag je nooit buitensluiten van de instelling
waarmee je het uitzet.

Geserveerd op /themes/<id>/<versie>/<bestand>, met de versie in het pad als
cache-buster; alleen wat het pakket zelf noemt komt eruit. De actor noemt het
gekozen thema als shaer:theme, zodat Shaer het van zijn eigen site kan halen
in plaats van er zelf een te kiezen.

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

Location:

src/views

Files:

• pages/admin-site-edit.ejs (modified) (1 diff)
• shell.ejs (modified) (3 diffs)

src/views/pages/admin-site-edit.ejs

@@ -103 +103 @@
       </fieldset>
 
+      <%# ── De lay-out (experimental/theme) ──────────────────────────────
+          Een thema uit src/themes/. Alleen de beheerder kiest; een bezoeker
+          niet. Het beheer zelf houdt altijd de gewone kop, zodat een kapot
+          thema je nooit buitensluit van deze instelling. %>
+      <% if (typeof layouts !== 'undefined' && layouts && layouts.length) { %>
+      <fieldset class="layout-choice">
+        <legend><%= t('asite.layout') %></legend>
+        <% const lc = site.layout || ''; %>
+        <label class="cb">
+          <input type="radio" name="layout" value="" <%= lc === '' ? 'checked' : '' %>>
+          <span><%= t('asite.layout_top') %></span>
+        </label>
+        <% layouts.forEach(function (l) { %>
+        <label class="cb">
+          <input type="radio" name="layout" value="<%= l.id %>" <%= lc === l.id ? 'checked' : '' %>>
+          <span><%= l.name %></span>
+          <% if (site.slug) { %><a class="layout-preview" href="/?layout=<%= encodeURIComponent(l.id) %>" target="_blank" rel="noopener">voorproefje</a><% } %>
+        </label>
+        <% }); %>
+        <p class="hint"><%= t('asite.layout_hint') %></p>
+      </fieldset>
+      <% } %>
+
       <fieldset class="palette-grid">
         <legend><%= t('asite.palette') %></legend>

src/views/shell.ejs

@@ -132 +132 @@
 const MOD_V = 68;
 %><!DOCTYPE html>
-<html lang="<%- _e(lang) %>" data-palette="<%- _e((typeof palette !== 'undefined' && palette) ? palette : (safeSite.palette || 'klonkt')) %>">
+<html lang="<%- _e(lang) %>" data-palette="<%- _e((typeof palette !== 'undefined' && palette) ? palette : (safeSite.palette || 'klonkt')) %>" data-layout="<%- _e((typeof layoutTheme !== 'undefined' && layoutTheme) ? layoutTheme.id : 'top') %>">
 <head>
 <meta charset="utf-8">
@@ -234 +234 @@
 <!-- v9 stylesheet (full palette system) -->
 <link rel="stylesheet" href="/assets/css/style.css?v=111">
+<%# De lay-outthema's (experimental/theme): de stylesheet van het thema dat de
+    site koos, plus die van een voorproefje voor wie de site beheert. Hun regels
+    gelden alleen onder <html data-layout="...">, dat de server hierboven al zet
+    -- dus geen script, geen flits, en geen bezoeker die iets anders kiest. %>
+<% if (typeof layoutSheets !== 'undefined' && layoutSheets) { layoutSheets.forEach(function (href) { %>
+<link rel="stylesheet" href="<%= href %>">
+<% }); } %>
 <script>
 /* iOS safe-area, built by hand. env(safe-area-inset-top) resolves to 0 on this iOS in
@@ -485 +492 @@
     if (d.palette && /^[a-z0-9-]+$/i.test(d.palette)) {
       document.documentElement.setAttribute('data-palette', d.palette);
+    }
+    // De lay-out van de NIEUWE pagina (experimental/theme). De <html> wordt bij
+    // htmx-navigatie niet opnieuw gerenderd, dus zonder dit hield het beheer de
+    // zijbalk van de pagina ervoor -- terwijl beheer altijd de gewone kop hoort
+    // te hebben. Zelfde vorm als een thema-id, dus niets anders kan erin.
+    if (typeof d.layout === 'string' && /^[a-z0-9][a-z0-9.-]{0,63}$/.test(d.layout)) {
+      document.documentElement.setAttribute('data-layout', d.layout);
     }