Changeset 63edb0d in Klonkt

Timestamp:

06/16/2026 01:08:28 AM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

0b7ebbf

Parents:

af5407f

Message:

hub: hero image upload + dark overlay slider

Reconcile of live edits on /srv that were not yet in git (split-brain).

• admin-settings: multer upload (jpg/png/webp/gif, 5MB, SVG blocked against XSS) + overlay clamp
• hub.js / hub-home.ejs: dark overlay as CSS var (default 45%, non-breaking)

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

Location:

src

Files:

• routes/admin-settings.js (modified) (4 diffs)
• routes/hub.js (modified) (1 diff)
• views/pages/admin-settings.ejs (modified) (2 diffs)
• views/pages/hub-home.ejs (modified) (2 diffs)

src/routes/admin-settings.js

@@ -2 +2 @@
  * Admin: globale instellingen.
  *  - tenancy-modus (Solo/Hub)
- *  - hub-branding (naam/tagline/intro van de generieke hub-hoofdpagina)
+ *  - hub-branding (naam/tagline/intro/hero van de generieke hub-hoofdpagina)
  *
  * GET  /admin/settings   -> toon huidige instellingen
- * POST /admin/settings   -> sla op (god-only)
+ * POST /admin/settings   -> sla op (god-only). Accepteert nu ook een geuploade
+ *                           hero-afbeelding (multipart); een upload wint van het
+ *                           URL-tekstveld. Zonder upload blijft het URL-veld leidend.
  *
  * De hub-pagina is generiek (van geen enkele user); deze branding leeft in
@@ -12 +14 @@
 
 import express from 'express';
+import path from 'path';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+import multer from 'multer';
+import { v4 as uuid } from 'uuid';
 import { renderPage } from '../middleware/render.js';
 import { requireGod } from '../middleware/auth.js';
@@ -17 +24 @@
 
 const router = express.Router();
+
+// Hero dark-overlay: percentage 0-100 (0 = geen overlay, 100 = volledig zwart).
+// Default 45 = de oude hardgecodeerde waarde, zodat bestaande hubs niet wijzigen.
+function clampOverlay(raw) {
+  const v = parseInt(raw, 10);
+  return Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 45;
+}
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+// Hero-uploads landen in storage/media/hero → bereikbaar als /media/hero/<file>
+// (de /media static handler serveert storage/media). Zelfde model als avatars.
+const HERO_DIR = path.resolve(
+  process.env.HERO_PATH || path.join(__dirname, '..', '..', 'storage', 'media', 'hero')
+);
+fs.mkdirSync(HERO_DIR, { recursive: true });
+
+// Alleen raster-formaten voor de upload. SVG mag bewust NIET via upload (raw
+// SVG kan script bevatten → opgeslagen-XSS bij direct openen); een SVG-hero kan
+// nog steeds via het URL-veld (zoals de meegeleverde demo-placeholder).
+const ALLOWED_HERO_EXT = new Set(['.jpg', '.jpeg', '.png', '.webp', '.gif']);
+const MAX_HERO_BYTES = 5 * 1024 * 1024;
+
+const heroUpload = multer({
+  storage: multer.diskStorage({
+    destination: (req, file, cb) => cb(null, HERO_DIR),
+    filename: (req, file, cb) => {
+      const ext = path.extname(file.originalname).toLowerCase();
+      cb(null, `${uuid()}${ext}`);
+    },
+  }),
+  limits: { fileSize: MAX_HERO_BYTES },
+  fileFilter: (req, file, cb) => {
+    const ext = path.extname(file.originalname).toLowerCase();
+    if (!ALLOWED_HERO_EXT.has(ext)) {
+      return cb(new Error('Hero-afbeelding moet jpg/png/webp/gif zijn'));
+    }
+    cb(null, true);
+  },
+});
 
 router.get('/', requireGod, (req, res) => {
@@ -27 +73 @@
     hubIntro: getSetting('hub_intro') || '',
     hubHeroImage: getSetting('hub_hero_image') || '',
+    hubHeroOverlay: clampOverlay(getSetting('hub_hero_overlay')),
     success: req.query.success || null,
+    error: req.query.error || null,
   });
 });
 
 router.post('/', requireGod, (req, res) => {
-  if (typeof req.body.tenancy !== 'undefined') {
-    setTenancy(req.body.tenancy === 'hub' ? 'hub' : 'solo');
-  }
-  if (typeof req.body.hub_title !== 'undefined') {
-    setSetting('hub_title', (req.body.hub_title || '').toString().slice(0, 80).trim());
-  }
-  if (typeof req.body.hub_tagline !== 'undefined') {
-    setSetting('hub_tagline', (req.body.hub_tagline || '').toString().slice(0, 120).trim());
-  }
-  if (typeof req.body.hub_intro !== 'undefined') {
-    setSetting('hub_intro', (req.body.hub_intro || '').toString().slice(0, 400).trim());
-  }
-  if (typeof req.body.hub_hero_image !== 'undefined') {
-    setSetting('hub_hero_image', (req.body.hub_hero_image || '').toString().slice(0, 300).trim());
-  }
-  res.redirect('/admin/settings?success=' + encodeURIComponent('Opgeslagen'));
+  // multer.single verwerkt multipart (hub-branding form). Bij een gewone
+  // urlencoded POST (tenancy-form) doet multer niets en blijft req.body intact.
+  heroUpload.single('hub_hero_file')(req, res, (err) => {
+    if (err) {
+      return res.redirect('/admin/settings?error=' + encodeURIComponent(err.message));
+    }
+
+    if (typeof req.body.tenancy !== 'undefined') {
+      setTenancy(req.body.tenancy === 'hub' ? 'hub' : 'solo');
+    }
+    if (typeof req.body.hub_title !== 'undefined') {
+      setSetting('hub_title', (req.body.hub_title || '').toString().slice(0, 80).trim());
+    }
+    if (typeof req.body.hub_tagline !== 'undefined') {
+      setSetting('hub_tagline', (req.body.hub_tagline || '').toString().slice(0, 120).trim());
+    }
+    if (typeof req.body.hub_intro !== 'undefined') {
+      setSetting('hub_intro', (req.body.hub_intro || '').toString().slice(0, 400).trim());
+    }
+
+    // Hero: een geüploade afbeelding wint; anders het URL-tekstveld.
+    if (req.file) {
+      const newUrl = `/media/hero/${req.file.filename}`;
+      // Ruim een vorige geüploade hero op (alleen als die uit onze hero-map kwam).
+      const old = getSetting('hub_hero_image') || '';
+      if (old.startsWith('/media/hero/')) {
+        try { fs.unlinkSync(path.join(HERO_DIR, path.basename(old))); } catch {}
+      }
+      setSetting('hub_hero_image', newUrl);
+    } else if (typeof req.body.hub_hero_image !== 'undefined') {
+      setSetting('hub_hero_image', (req.body.hub_hero_image || '').toString().slice(0, 300).trim());
+    }
+
+    if (typeof req.body.hub_hero_overlay !== 'undefined') {
+      setSetting('hub_hero_overlay', String(clampOverlay(req.body.hub_hero_overlay)));
+    }
+
+    res.redirect('/admin/settings?success=' + encodeURIComponent('Opgeslagen'));
+  });
 });
 

src/routes/hub.js

@@ -71 +71 @@
     intro: getSetting('hub_intro') || '',
     heroImage: getSetting('hub_hero_image') || '',
+    heroOverlay: (() => { const v = parseInt(getSetting('hub_hero_overlay'), 10); return Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 45; })(),
   };
 

src/views/pages/admin-settings.ejs

@@ -38 +38 @@
       Hier stel je de naam en intro in. Jouw eigen Klonkt Hub blijft los bestaan onder <code>/user/</code>.
     </p>
-    <form method="post" action="/admin/settings" class="set-form">
+    <form method="post" action="/admin/settings" class="set-form" enctype="multipart/form-data">
       <label class="set-field">
         <span>Naam</span>
@@ -55 +55 @@
         <input type="text" name="hub_hero_image" maxlength="300" value="<%= hubHeroImage %>" placeholder="/media/... of https://...">
       </label>
+      <label class="set-field">
+        <span>…of upload een afbeelding <small style="font-weight:400;color:var(--ink-muted)">— jpg/png/webp/gif, max 5 MB; vervangt de URL hierboven</small></span>
+        <input type="file" name="hub_hero_file" accept="image/png,image/jpeg,image/webp,image/gif">
+      </label>
+      <label class="set-field">
+        <span>Donkere overlay <small style="font-weight:400;color:var(--ink-muted)">— maakt de hero donkerder zodat de tekst leesbaar blijft</small></span>
+        <span style="display:flex;align-items:center;gap:0.75rem">
+          <input type="range" name="hub_hero_overlay" min="0" max="100" step="5" value="<%= hubHeroOverlay %>" style="flex:1"
+            oninput="this.parentNode.querySelector('.ov-val').textContent=this.value+'%';var o=document.getElementById('hero-ov-preview');if(o)o.style.opacity=this.value/100">
+          <span class="ov-val" style="min-width:3.5ch;text-align:right;font-variant-numeric:tabular-nums"><%= hubHeroOverlay %>%</span>
+        </span>
+      </label>
+      <% if (hubHeroImage) { %>
+      <div class="set-field">
+        <span style="font-weight:400;color:var(--ink-muted);font-size:0.9rem">Voorbeeld (met overlay):</span>
+        <div style="position:relative;display:inline-block;margin-top:0.4rem;max-width:100%">
+          <img src="<%= hubHeroImage %>" alt="Hero-voorbeeld" style="display:block;max-width:100%;max-height:160px;border-radius:8px;border:1px solid var(--rule)">
+          <div id="hero-ov-preview" style="position:absolute;inset:0;background:#000;opacity:<%= (hubHeroOverlay/100).toFixed(2) %>;border-radius:8px;pointer-events:none"></div>
+        </div>
+      </div>
+      <% } %>
       <button type="submit" class="btn btn-primary">Opslaan</button>
     </form>

src/views/pages/hub-home.ejs

@@ -17 +17 @@
 
   <%# ── HERO (label) — de pagina begint hier, geen header erboven ────── %>
-  <header class="hub-hero<%= hub.heroImage ? ' has-img' : '' %>"<% if (hub.heroImage) { %> style="--hero-img:url('<%= hub.heroImage %>')"<% } %>>
+  <header class="hub-hero<%= hub.heroImage ? ' has-img' : '' %>"<% if (hub.heroImage) { %> style="--hero-img:url('<%= hub.heroImage %>'); --hero-ov:<%= ((hub.heroOverlay == null ? 45 : hub.heroOverlay)/100).toFixed(2) %>"<% } %>>
     <div class="hub-hero-inner container">
       <h1 class="hub-hero-title"><%= hub.title %></h1>
@@ -128 +128 @@
 .hub-hero.has-img {
   background:
-    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 100%),
+    linear-gradient(rgba(0,0,0,var(--hero-ov,.45)), rgba(0,0,0,var(--hero-ov,.45))),
     var(--hero-img) center / cover no-repeat;
   border-bottom: 0;