Changeset 495b019 in Klonkt for src/views/pages

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/pages/admin-site-edit.ejs (modified) (1 diff)

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>