source: Klonkt/src/middleware/render.js@ d5e78f7

main
Last change on this file since d5e78f7 was d5e78f7, checked in by Robin Genis <roboburr@…>, 3 months ago

fix: Vary: HX-Request + no-store on partials — no unstyled page on back navigation

The browser cached an htmx partial (only #pcms-main, without <head>/CSS) under
the URL and served it on back/forward as a full page → bare HTML. Vary:
HX-Request separates partial vs full in the cache; no-store on the partial
forces a fresh full-load on back.

Co-Authored-By: Claude <noreply@…>
  • Property mode set to 100644
File size: 10.3 KB
RevLine 
[7bc636b]1/**
2 * Render helper — THE pattern for the entire app.
3 *
4 * Two modes:
5 * 1. HTMX request → render just the page content (no shell)
6 * 2. Full page request → render content, then embed in shell
7 *
8 * Usage:
9 * renderPage(req, res, 'pages/home', { posts, ...data })
10 */
11
[83faa57]12import fs from 'fs';
[7bc636b]13import path from 'path';
14import { fileURLToPath } from 'url';
15import ejs from 'ejs';
[8cb1dc7]16import db from '../config/database.js';
[7bc636b]17import PermissionsService from '../services/PermissionsService.js';
[8afbdd6]18import { isViewer } from './auth.js';
[42081fb]19import { getSetting } from '../services/SettingsService.js';
[8aa85d0]20import { isPremium as isPremiumInstance, premiumEnabled, premiumUnlocked } from '../services/PatreonService.js';
[c9c6a2d]21import { unreadCount as notifUnreadCount } from '../services/NotificationService.js';
[cb01666]22import { audioEnabled as audioFeatureEnabled } from '../config/features.js';
[7bc636b]23import { PLATFORMS as PLATFORMS_CATALOG } from '../services/PlatformIcons.js';
[03fa548]24import { t as i18nT, resolveLang, SUPPORTED as LANGS, LANG_NAMES } from '../services/i18n.js';
[7bc636b]25
26const __dirname = path.dirname(fileURLToPath(import.meta.url));
27const VIEWS_DIR = path.join(__dirname, '..', 'views');
28
[3bb8719]29// App-versie (uit package.json) + korte commit-hash (uit .klonkt-version, door de
30// deploy geschreven) — getoond in de footer naast "Klonkt Beta". De hash loopt
31// automatisch mee bij élke deploy, dus de versie is nooit meer stale.
[83faa57]32let APP_VERSION = '';
33try {
34 APP_VERSION = JSON.parse(fs.readFileSync(path.join(__dirname, '..', '..', 'package.json'), 'utf8')).version || '';
[3bb8719]35 try {
36 const sha = fs.readFileSync(path.join(__dirname, '..', '..', '.klonkt-version'), 'utf8').trim().slice(0, 7);
37 if (sha) APP_VERSION += ' · ' + sha;
38 } catch { /* geen .klonkt-version (lokale dev) */ }
[83faa57]39} catch { /* geen versie beschikbaar */ }
40
[421c2d4]41// Site-tijdzone (Beheer → Instellingen). Leeg = server-default (UTC). Wordt
42// toegepast op álle server-side geformatteerde datums zodat ze in de zone van
43// de site staan i.p.v. UTC.
44const siteTimezone = () => getSetting('timezone') || undefined;
45
[7bc636b]46const formatDate = (iso) => {
47 if (!iso) return '';
[421c2d4]48 return new Date(iso).toLocaleDateString('nl-NL', { timeZone: siteTimezone(), day: 'numeric', month: 'long', year: 'numeric' });
[7bc636b]49};
50
51const formatDateTime = (iso) => {
52 if (!iso) return '';
[421c2d4]53 return new Date(iso).toLocaleString('nl-NL', { timeZone: siteTimezone(), dateStyle: 'medium', timeStyle: 'short' });
[7bc636b]54};
55
56export async function renderPage(req, res, viewName, data = {}) {
57 // Decide: partial (HTMX) or full?
58 const isPartial = req.headers['hx-request'] === 'true' || req.query.partial === '1';
59
[d5e78f7]60 // Voorkom dat de browser een htmx-PARTIAL (alleen #pcms-main, zónder <head>/CSS)
61 // onder dezelfde URL cachet en bij "terug" als volledige pagina serveert →
62 // ongestylede HTML. Vary: HX-Request scheidt partial- en full-responses in de
63 // cache; no-store op de partial zelf laat "terug" altijd de volledige pagina
64 // opnieuw ophalen. (Vary geldt ook voor tussenliggende caches/Cloudflare.)
65 res.setHeader('Vary', 'HX-Request');
66 if (isPartial) res.setHeader('Cache-Control', 'no-store');
67
[8cb1dc7]68 // Bezit deze (niet-god) user een eigen site? Bepaalt of 'ie een "Beheer"-
69 // ingang ziet (artiest-zelfbeheer). god ziet beheer sowieso (op rol).
[1ee967d]70 let _u = req.session?.user || null;
71 // Ververs avatar + rol uit de DB zodat een stale sessie (bv. na een
72 // avatar-wijziging of rolwissel) zichzelf herstelt zonder opnieuw inloggen.
73 if (_u && _u.id) {
[5e61b17]74 const _fresh = db.prepare('SELECT avatar_url, role, lang FROM users WHERE id = ?').get(_u.id);
75 if (_fresh) _u = { ..._u, avatar_url: _fresh.avatar_url, role: _fresh.role, lang: _fresh.lang };
[1ee967d]76 }
[8cb1dc7]77 const userOwnsSite = !!(_u && _u.role !== 'god' &&
78 db.prepare('SELECT 1 FROM sites WHERE owner_id = ? LIMIT 1').get(_u.id));
79
[baa2e59]80 // De avatar van de SITE-EIGENAAR (niet de kijker!) — voor de Klonkt-site-kop,
[ab544fd]81 // zodat de artiest z'n eigen account-foto als sitefoto kan gebruiken.
82 const _site = data.site || res.locals.site || null;
83 const siteOwnerAvatar = (_site && _site.owner_id)
84 ? (db.prepare('SELECT avatar_url FROM users WHERE id = ?').get(_site.owner_id)?.avatar_url || null)
85 : null;
86
[8afbdd6]87 // Kijker-modus: alles bekijken mag, niets wijzigen. Views gebruiken canMutate
88 // om schrijf-knoppen (posten, opslaan, verwijderen) te verbergen/uit te zetten.
89 const _isViewer = isViewer(_u);
90
[a3169f5]91 // Wie ziet de "Beheer"-link? god/admin, een site-eigenaar (artiest-zelfbeheer),
92 // én een kijker (mag het Beheer alleen-lezen inzien). Eén bron van waarheid,
93 // gespiegeld in topnav/hub-nav/profielsheet — anders raakt de link verborgen
94 // voor wie 'm wél mag zien (kijker zag 'm eerst nergens).
95 const _role = _u ? _u.role : null;
96 const canSeeBeheer = !!(_u && (_role === 'god' || _role === 'admin' || _role === 'kijker' || userOwnsSite));
97
[5e61b17]98 // Interface-taal: sessie-keuze (deze sessie) → eigen voorkeur van de ingelogde
99 // gebruiker (users.lang) → admin-ingestelde standaard (Beheer) → env → browser → nl.
100 const _lang = resolveLang(req, {
101 userLang: _u && _u.lang,
102 defaultLang: getSetting('default_lang'),
103 });
[03fa548]104
[7bc636b]105 // Common locals
106 const locals = {
[8cb1dc7]107 user: _u,
[03fa548]108 lang: _lang,
109 t: (key, vars) => i18nT(_lang, key, vars),
110 langs: LANGS.map((c) => ({ code: c, name: LANG_NAMES[c], active: c === _lang })),
[421c2d4]111 timezone: getSetting('timezone') || '',
[c9c6a2d]112 notifUnread: _u ? notifUnreadCount(_u.id) : 0,
[8cb1dc7]113 userOwnsSite,
[a3169f5]114 canSeeBeheer,
[8afbdd6]115 isViewer: _isViewer,
116 canMutate: !_isViewer,
[1b4d5dd]117 isPremium: isPremiumInstance(),
118 premiumEnabled: premiumEnabled(),
[8aa85d0]119 premiumUnlocked: premiumUnlocked(),
[ab544fd]120 siteOwnerAvatar,
121 site: _site,
[cb01666]122 audioEnabled: audioFeatureEnabled(),
[7bc636b]123 audioTracks: data.audioTracks || res.locals.audioTracks || [],
124 siteUrlBase: res.locals.siteUrlBase || '',
[2cc887b]125 tenancy: res.locals.tenancy || 'solo',
[42081fb]126 hubTitle: getSetting('hub_title') || '',
[da6fd02]127 footerNewsletter: getSetting('footer_newsletter') === '1', // nieuwsbrief-aanmelding in footer (premium)
[68b27a4]128 agendaEnabled: getSetting('agenda_enabled') === '1', // Agenda/evenementen tonen in de pill (premium, opt-in)
[7bc636b]129 platforms_catalog: PLATFORMS_CATALOG,
130 permissions: PermissionsService,
131 formatDate,
132 formatDateTime,
[83faa57]133 pageTitle: data.pageTitle || (data.site && data.site.title) || 'Klonkt Beta',
134 appVersion: APP_VERSION,
[7bc636b]135 bodyClass: data.bodyClass || 'on-home',
136 socialDescr: data.socialDescr || '',
137 socialImage: data.socialImage || '',
138 cspNonce: () => '',
139 currentPath: req.path,
140 ...data,
141 };
142
143 try {
144 // Step 1: Render the page view to HTML
145 const viewPath = path.join(VIEWS_DIR, viewName + '.ejs');
146 const pageContent = await ejs.renderFile(viewPath, locals, { async: false });
147
148 if (isPartial) {
[00d54bc]149 // HTMX: just send the content. Set HX-Trigger for body class swap.
150 // HTTP-header values are Latin-1 only — a title with an em-dash, smart
151 // quote or emoji (e.g. "Welkom — gebouwd met Klonkt") would make
152 // setHeader throw ERR_INVALID_CHAR and 500 the partial, so the card
153 // looks "unclickable". Escape any non-ASCII to \uXXXX: the header stays
154 // ASCII-safe and remains valid JSON that htmx parses back unchanged.
[a3e2f17]155 // Per-site accent + palette zitten in de shell-<head> (style#pcms-site-accent
156 // + html[data-palette]) en worden NIET mee-geswapt bij htmx-nav. Stuur ze mee
157 // zodat de client ze bijwerkt — anders erft een artiest de kleuren van de
158 // vorige pagina (bv. hub-paars i.p.v. eigen groen). Zelfde afleiding als shell.ejs.
159 const _navAccent = (_site && _site.accent && /^#[0-9a-fA-F]{6}$/.test(_site.accent))
[9b851e7]160 ? _site.accent : '#e8b04b';
[dd7e2a2]161 const _navPalette = (_site && _site.palette) ? _site.palette : 'klonkt';
[00d54bc]162 const triggerJson = JSON.stringify({
[a3e2f17]163 pcmsNav: { bodyClass: locals.bodyClass, accent: _navAccent, palette: _navPalette },
[7bc636b]164 pcmsPostSwap: data.post ? {
165 title: data.post.title,
166 slug: data.post.slug,
167 pageTitle: locals.pageTitle,
168 } : null,
[00d54bc]169 }).replace(/[€-￿]/g, (ch) => '\\u' + ch.charCodeAt(0).toString(16).padStart(4, '0'));
170 res.setHeader('HX-Trigger-After-Settle', triggerJson);
[3cd1aaa]171 // Site-chrome out-of-band mee-renderen, zodat de kop (topnav/profielkop/
172 // view-switcher) bij navigatie ALTIJD bij de nieuwe pagina/artiest hoort —
173 // terwijl de audioplayer (los in document.body) blijft leven (geen
174 // verspringen). htmx vervangt #pcms-chrome via hx-swap-oob. Niet kritisch:
175 // faalt 't, dan blijft de oude chrome staan (geen crash).
176 let oobChrome = '';
177 try {
178 oobChrome = await ejs.renderFile(
179 path.join(VIEWS_DIR, 'partials', 'chrome.ejs'),
180 { ...locals, oob: true },
181 { async: false },
182 );
183 } catch (e) { /* chrome-OOB overslaan */ }
184 return res.send(pageContent + oobChrome);
[7bc636b]185 }
186
187 // Full: wrap content in shell
188 locals.pageContent = pageContent;
189 res.render('shell', locals);
190 } catch (err) {
191 console.error('[renderPage] Error rendering', viewName, err);
192 if (process.env.NODE_ENV === 'production') {
193 return res.status(500).send('Internal Server Error');
194 }
195 // Dev: surface the underlying cause prominently. EJS rewrites err.message
196 // to include the file/line/code-context, so we also surface name+stack
197 // separately in case the message was truncated or empty.
198 const escape = (s) => String(s == null ? '' : s)
199 .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
200 res.status(500).send(`<!doctype html>
201<meta charset="utf-8">
202<title>Render error: ${escape(viewName)}</title>
203<style>
204 body { font: 14px/1.5 ui-monospace, monospace; max-width: 1100px; margin: 2rem auto; padding: 0 1rem; background:#1a1a1a; color:#eee; }
205 h1 { color:#dc2626; font-family: ui-sans-serif, system-ui; }
206 h2 { color:#fb923c; font-size:1rem; margin-top:1.5rem; }
207 pre { background:#0a0a0a; border:1px solid #333; border-radius:6px; padding:1rem; overflow:auto; white-space:pre-wrap; word-break:break-word; }
208 .cause { background:#3d0a0a; border-color:#7a1a1a; color:#fca5a5; font-weight:600; }
209</style>
210<h1>Render error in ${escape(viewName)}</h1>
211<h2>Cause</h2>
212<pre class="cause">${escape(err.name || 'Error')}: ${escape(err.message || '(no message)')}</pre>
213<h2>Stack</h2>
214<pre>${escape(err.stack || '(no stack)')}</pre>
215${err.path ? `<h2>File</h2><pre>${escape(err.path)}</pre>` : ''}
216`);
217 }
218}
Note: See TracBrowser for help on using the repository browser.