Changeset 495b019 in Klonkt for src/views/shell.ejs

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@…>

File:

• src/views/shell.ejs (modified) (3 diffs)

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);
     }