Context Navigation

shell.ejs@ fb6819d

main

Last change on this file since fb6819d was 7475ff3, checked in by roboburr <roboburr@…>, 2 months ago

style: drop the 0.4px blur on cover thumbnails

src/assets/css/style.css — remove filter:blur(.4px) from .grid-tile-img + .post-list-cover img; the server-side thumbnails are already crisp at ~2x display size, so the smoothing band-aid only softened them
src/views/shell.ejs — bump style.css buster v62 -> v63

Co-Authored-By: Claude <noreply@…>

Property mode set to 100644

File size: 38.9 KB

Line
1	<%
2	// ── Helpers used inside this template ─────────────────────────────
3	// Escape for double-quoted HTML attributes. IMPORTANT: emit this with the RAW EJS output
4	// tag, never the escaping one — escaping it a second time turned og:title "Jason's" into the
5	// double-escaped "Jason&#39;s", and naive OG scrapers (Signal/WhatsApp) show that literally.
6	// We deliberately do NOT escape the apostrophe: it is safe inside a double-quoted attribute and
7	// a literal apostrophe is what link-preview scrapers expect.
8	function _e(s) {
9	return String(s == null ? '' : s)
10	.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
11	.replace(/"/g, '"');
12	}
13
14	const safeSite = site \|\| {};
15	const safeUrlBase = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
16	const safeAccent = safeSite.accent && /^#[0-9a-fA-F]{6}$/.test(safeSite.accent) ? safeSite.accent : '#e8b04b';
17	const lang = safeSite.language \|\| 'nl';
18	const ogLocale = safeSite.og_locale \|\| (lang === 'nl' ? 'nl_NL' : (lang.length === 2 ? lang + '_' + lang.toUpperCase() : 'en_US'));
19	const homePath = safeUrlBase + '/';
20	const isPostPage = bodyClass && bodyClass.indexOf('on-post') >= 0;
21	const isHomePage = bodyClass && bodyClass.indexOf('on-home') >= 0;
22	const isSpecialPg = bodyClass && bodyClass.indexOf('on-special') >= 0;
23	const isAdminPage = bodyClass && bodyClass.indexOf('on-admin') >= 0;
24
25	// ── <title> via site.title_template ──────────────────────────────
26	// Template: '{title} — {site}'. If pageTitle equals site.title (homepage) we
27	// just use the site title alone, otherwise apply the template.
28	const _siteTitle = safeSite.title \|\| 'Klonkt';
29	const _rawTitle = pageTitle \|\| _siteTitle;
30	const _tpl = safeSite.title_template \|\| '{title} — {site}';
31	const _finalTitle = (_rawTitle === _siteTitle)
32	? _siteTitle
33	: _tpl.replace('{title}', _rawTitle).replace('{site}', _siteTitle);
34
35	// ── Robots: noindex on listing pages and on per-post override ─────
36	let _shouldIndex = safeSite.robots_index !== 0;
37	if (typeof post !== 'undefined' && post && post.noindex) _shouldIndex = false;
38	// Listing pages (search/tag/type/archive) shouldn't be indexed (dupe content)
39	if (currentPath) {
40	if (/^\/(?:search\|tag\|type\|archive\|users\|account\|admin)(?:$\|\/)/.test(currentPath)) {
41	_shouldIndex = false;
42	}
43	}
44	// Special-flagged views from routes opt out too
45	if (isSpecialPg && (currentPath === '/search' \|\| /^\/(tag\|type\|archive\|users)\//.test(currentPath))) {
46	_shouldIndex = false;
47	}
48
49	// ── Canonical URL: per-site override (admin SEO), else the .env base
50	// (PUBLIC_BASE_URL, via ogOrigin → falls back to the request host) ──
51	let _canonical = null;
52	const _canonBase = safeSite.canonical \|\| (typeof ogOrigin !== 'undefined' ? ogOrigin : '');
53	if (_canonBase) {
54	const _base = _canonBase.replace(/\/+$/, '');
55	let _path = '/';
56	if (typeof post !== 'undefined' && post && post.slug) _path = '/' + post.slug;
57	else if (currentPath) _path = currentPath;
58	_canonical = _base + _path;
59	}
60
61	// ── Social bits (OG/Twitter) ──────────────────────────────────────
62	const _socialTitle = (typeof post !== 'undefined' && post && post.title) ? post.title : _siteTitle;
63	const _socialDescr = (typeof socialDescr !== 'undefined' && socialDescr)
64	? socialDescr
65	: (safeSite.default_description \|\| safeSite.description \|\| '');
66	// og:image — custom (post/site) first; otherwise the auto-generated themed card
67	// (/og/<slug>.png), so every site has a branded social preview by default.
68	let _socialImage = '', _ogGenerated = false;
69	if (typeof socialImage !== 'undefined' && socialImage) _socialImage = socialImage;
70	else if (safeSite.og_image_default) _socialImage = safeSite.og_image_default;
71	else if (safeSite.default_cover) _socialImage = safeSite.default_cover;
72	else if (safeSite.slug && typeof ogOrigin !== 'undefined' && ogOrigin) {
73	_socialImage = ogOrigin + '/og/' + encodeURIComponent(safeSite.slug) + '.png';
74	_ogGenerated = true;
75	}
76	const _ogType = isPostPage ? 'article' : 'website';
77
78	// ── JSON-LD ───────────────────────────────────────────────────────
79	const _publisher = {
80	'@type': safeSite.schema_type === 'Organization' ? 'Organization' : 'Person',
81	name: safeSite.publisher_name \|\| _siteTitle,
82	url: safeSite.publisher_url \|\| (_canonical ? _canonical.split(/(?<=^[^/]*\/\/[^/]+)\//)[0] + '/' : null),
83	};
84	if (safeSite.publisher_logo) {
85	_publisher.logo = { '@type': 'ImageObject', url: safeSite.publisher_logo };
86	}
87	let _jsonLd = null;
88	if (typeof post !== 'undefined' && post && post.slug) {
89	_jsonLd = {
90	'@context': 'https://schema.org',
91	'@type': (post.type === 'foto' \|\| post.type === 'video') ? 'CreativeWork' : 'Article',
92	headline: post.title \|\| _siteTitle,
93	description: _socialDescr,
94	datePublished: post.published_at \|\| post.created_at \|\| new Date().toISOString(),
95	dateModified: post.updated_at \|\| post.published_at \|\| new Date().toISOString(),
96	publisher: _publisher,
97	};
98	if (_socialImage) _jsonLd.image = _socialImage;
99	if (post.author_username) _jsonLd.author = { '@type': 'Person', name: post.author_username };
100	if (Array.isArray(post.tags) && post.tags.length) _jsonLd.keywords = post.tags.join(', ');
101	} else if (isHomePage) {
102	_jsonLd = {
103	'@context': 'https://schema.org',
104	'@type': 'WebSite',
105	name: _siteTitle,
106	description: safeSite.description \|\| safeSite.default_description \|\| '',
107	publisher: _publisher,
108	};
109	}
110	%><!DOCTYPE html>
111	<html lang="<%- _e(lang) %>" data-palette="<%- _e((typeof palette !== 'undefined' && palette) ? palette : (safeSite.palette \|\| 'klonkt')) %>">
112	<head>
113	<meta charset="utf-8">
114	<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
115	<meta name="color-scheme" content="dark light">
116
117	<title><%= _finalTitle %></title>
118	<meta name="description" content="<%- _e(_socialDescr) %>">
119	<meta name="theme-color" content="<%- _e(safeAccent) %>">
120	<meta name="robots" content="<%= _shouldIndex ? 'index,follow' : 'noindex,nofollow' %>">
121	<% if (safeSite.author) { %><meta name="author" content="<%- _e(safeSite.author) %>"><% } %>
122	<% if (_canonical) { %><link rel="canonical" href="<%- _e(_canonical) %>"><% } %>
123
124	<!-- Search-engine verification -->
125	<% if (safeSite.google_verification) { %><meta name="google-site-verification" content="<%- _e(safeSite.google_verification) %>"><% } %>
126	<% if (safeSite.bing_verification) { %><meta name="msvalidate.01" content="<%- _e(safeSite.bing_verification) %>"><% } %>
127	<% if (safeSite.pinterest_verification) { %><meta name="p:domain_verify" content="<%- _e(safeSite.pinterest_verification) %>"><% } %>
128	<% if (safeSite.yandex_verification) { %><meta name="yandex-verification" content="<%- _e(safeSite.yandex_verification) %>"><% } %>
129
130	<!-- Feed autodiscovery -->
131	<% if (site) { %>
132	<link rel="alternate" type="application/rss+xml" title="<%- _e(_siteTitle) %> — RSS" href="<%- _e(safeUrlBase + '/feed.xml') %>">
133	<link rel="alternate" type="application/atom+xml" title="<%- _e(_siteTitle) %> — Atom" href="<%- _e(safeUrlBase + '/atom.xml') %>">
134	<% } %>
135
136	<!-- PWA -->
137	<link rel="manifest" href="<%- _e(safeUrlBase + '/manifest.webmanifest') %>">
138	<meta name="mobile-web-app-capable" content="yes">
139	<meta name="apple-mobile-web-app-capable" content="yes">
140	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
141	<meta name="apple-mobile-web-app-title" content="<%- _e(_siteTitle.slice(0, 16)) %>">
142	<link rel="apple-touch-icon" href="<%- _e(safeSite.profile_photo \|\| '/favicon.ico') %>">
143	<link rel="icon" type="image/svg+xml" href="/favicon.svg?v=sf">
144	<link rel="alternate icon" href="/favicon.ico?v=sf">
145
146	<!-- OpenGraph -->
147	<meta property="og:type" content="<%= _ogType %>">
148	<meta property="og:title" content="<%- _e(_socialTitle) %>">
149	<meta property="og:description" content="<%- _e(_socialDescr) %>">
150	<meta property="og:site_name" content="<%- _e(_siteTitle) %>">
151	<meta property="og:locale" content="<%- _e(ogLocale) %>">
152	<% if (_socialImage) { %>
153	<meta property="og:image" content="<%- _e(_socialImage) %>">
154	<meta property="og:image:alt" content="<%- _e(_socialTitle) %>">
155	<% if (_ogGenerated) { %>
156	<meta property="og:image:width" content="1200">
157	<meta property="og:image:height" content="630">
158	<meta property="og:image:type" content="image/png">
159	<% } %>
160	<% } %>
161	<% if (_canonical) { %><meta property="og:url" content="<%- _e(_canonical) %>"><% } %>
162	<%
163	// Fediverse/social PLAYER card for posts with audio: instead of shipping the raw
164	// mp3, point at our embeddable player (/embed?post=slug) so Mastodon shows an
165	// inline player that streams via the gated /audio/stream (no downloadable file).
166	const _postAudio = !!(typeof post !== 'undefined' && post
167	&& typeof postHasPlayableAudio !== 'undefined' && postHasPlayableAudio
168	&& typeof premiumUnlocked !== 'undefined' && premiumUnlocked);
169	const _embedUrl = _postAudio
170	? ((typeof ogOrigin !== 'undefined' && ogOrigin ? ogOrigin : '') + safeUrlBase + '/embed?post=' + encodeURIComponent(post.slug))
171	: '';
172	%>
173	<% if (_postAudio) { %>
174	<meta property="og:video" content="<%- _e(_embedUrl) %>">
175	<meta property="og:video:secure_url" content="<%- _e(_embedUrl) %>">
176	<meta property="og:video:type" content="text/html">
177	<meta property="og:video:width" content="480">
178	<meta property="og:video:height" content="480">
179	<% } %>
180	<% if (typeof post !== 'undefined' && post && post.published_at) { %>
181	<meta property="article:published_time" content="<%- _e(post.published_at) %>">
182	<% if (post.author_username) { %><meta property="article:author" content="<%- _e(post.author_username) %>"><% } %>
183	<% } %>
184	<% if (safeSite.facebook_app_id) { %><meta property="fb:app_id" content="<%- _e(safeSite.facebook_app_id) %>"><% } %>
185
186	<!-- Twitter Cards -->
187	<meta name="twitter:card" content="<%= _postAudio ? 'player' : (_socialImage ? 'summary_large_image' : 'summary') %>">
188	<% if (_postAudio) { %>
189	<meta name="twitter:player" content="<%- _e(_embedUrl) %>">
190	<meta name="twitter:player:width" content="480">
191	<meta name="twitter:player:height" content="480">
192	<% } %>
193	<meta name="twitter:title" content="<%- _e(_socialTitle) %>">
194	<meta name="twitter:description" content="<%- _e(_socialDescr) %>">
195	<% if (_socialImage) { %><meta name="twitter:image" content="<%- _e(_socialImage) %>"><% } %>
196	<% if (safeSite.twitter) { %><meta name="twitter:creator" content="<%- _e(safeSite.twitter) %>"><meta name="twitter:site" content="<%- _e(safeSite.twitter) %>"><% } %>
197
198	<% if (_jsonLd) { %>
199	<script type="application/ld+json"><%- JSON.stringify(_jsonLd) %></script>
200	<% } %>
201
202	<!-- Self-hosted fonts (privacy-first) -->
203	<link rel="preload" href="/assets/fonts/literata-latin-opsz-normal.woff2" as="font" type="font/woff2" crossorigin>
204	<link rel="preload" href="/assets/fonts/fraunces-latin-full-normal.woff2" as="font" type="font/woff2" crossorigin>
205
206	<!-- v9 stylesheet (full palette system) -->
207	<link rel="stylesheet" href="/assets/css/style.css?v=63">
208	<script>
209	/* iOS safe-area, built by hand. env(safe-area-inset-top) resolves to 0 on this iOS in
210	BOTH Safari and the installed PWA (standalone), even with viewport-fit=cover, so the
211	masthead can't clear the camera. We measure env directly and, when it comes back empty
212	on a notched iPhone, fall back to a fixed inset (a bit larger in standalone for the
213	Dynamic Island). We set --ios-safe-top AND force the masthead padding inline — the
214	latter survives a stale cached stylesheet that lacks the var. Re-applied after htmx
215	chrome swaps (the top-nav is out-of-band swapped on navigation). */
216	(function(){
217	var ua = navigator.userAgent \|\| '';
218	var isIOS = /iP(hone\|od\|ad)/.test(ua) \|\| (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
219	if (!isIOS) return;
220	var standalone = (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) \|\| navigator.standalone === true;
221	function apply(){
222	if (!document.body) return;
223	var p = document.createElement('div');
224	p.style.cssText = 'position:fixed;top:0;left:0;width:0;height:0;padding-top:env(safe-area-inset-top,0px);visibility:hidden;pointer-events:none';
225	document.body.appendChild(p);
226	var rawEnv = parseFloat(getComputedStyle(p).paddingTop) \|\| 0;
227	p.remove();
228	var i = rawEnv;
229	if (i < 20 && Math.max(screen.width, screen.height) >= 812) {
230	// Portrait: the island sits at the TOP → full inset (UNCHANGED: standalone?59:47).
231	// Landscape: the island moves to the SIDE, so the top inset is ~0 → no top padding
232	// (only the masthead's own base padding remains). env() can't tell us (returns 0),
233	// so we key off orientation directly.
234	i = (window.innerWidth > window.innerHeight) ? 0 : (standalone ? 59 : 47);
235	}
236	document.documentElement.style.setProperty('--ios-safe-top', i + 'px');
237	var mh = document.querySelector('.masthead');
238	var mhHidden = !mh \|\| getComputedStyle(mh).display === 'none' \|\| mh.offsetHeight === 0;
239	if (mhHidden) {
240	/* Mobile: the masthead is hidden (bottom-tab replaces it ≤767px) so it can't carry
241	the inset. Pad the body instead → the profile-header clears the island/notch. */
242	document.body.style.paddingTop = i + 'px';
243	if (mh) mh.style.paddingTop = '';
244	} else {
245	/* Desktop/landscape: the sticky masthead carries the inset in its own padding. */
246	document.body.style.paddingTop = '';
247	mh.style.paddingTop = 'calc(.55rem + ' + i + 'px)';
248	}
249	}
250	if (document.body) apply(); else document.addEventListener('DOMContentLoaded', apply);
251	document.addEventListener('htmx:afterSettle', apply);
252	window.addEventListener('orientationchange', function(){ setTimeout(apply, 250); });
253	})();
254	</script>
255
256	<!-- Audio player styles: loaded on every page so the mini-player works
257	anywhere (admin previews, post embeds, etc). The player itself is
258	a singleton — see the script tag near </body>. -->
259	<link rel="stylesheet" href="/assets/css/audio.css?v=11">
260	<!-- Eigen custom media-embeds (YouTube/SoundCloud/Spotify) in huisstijl. -->
261	<link rel="stylesheet" href="/assets/css/embed.css?v=9">
262
263	<%- include('partials/shared-styles') %>
264
265	<!-- v1 P55 — Inline the saved site accent. The base stylesheet only sets a
266	fallback (#c2410c orange) and palette blocks don't define --accent at
267	all, so without this override the saved accent never reaches the page.
268	:root + [data-palette] hits both unscoped and palette-scoped variants;
269	source-order wins on equal specificity, and this comes after style.css. -->
270	<style id="pcms-site-accent">
271	:root,
272	[data-palette] {
273	--accent: <%- _e(safeAccent) %>;
274	--accent-soft: color-mix(in srgb, <%- _e(safeAccent) %> 80%, white);
275	--accent-tint: color-mix(in srgb, <%- _e(safeAccent) %> 12%, transparent);
276	}
277	</style>
278
279	<!-- Per-site custom CSS injection -->
280	<% if (safeSite.custom_css) { %>
281	<style id="pcms-custom-css"><%- safeSite.custom_css %></style>
282	<% } %>
283
284	<!-- Apply theme ASAP, before paint. Precedence (first match wins):
285	1. localStorage override (visitor toggled earlier on this browser)
286	2. Site default (theme_override + palette) — what new visitors see
287	3. Device prefers-color-scheme (only if site default is empty/auto)
288	4. 'dark' as last-ditch fallback
289	Note: PALETTE never has a localStorage layer anymore. There's no UI for
290	visitors to pick a palette, so any cached pcms-palette is stale data
291	from old code paths and gets cleaned up here. Site default always wins
292	for palette. -->
293	<script>
294	(function() {
295	try {
296	var siteDefault = '<%= safeSite.theme_override \|\| "" %>';
297	var sitePalette = '<%= (typeof palette !== 'undefined' && palette) ? palette : (safeSite.palette \|\| 'klonkt') %>';
298
299	// One-time cleanup: drop the orphan pcms-palette key set by P43-P57
300	// bootstrap. After this it never re-appears because nothing writes it.
301	try { localStorage.removeItem('pcms-palette'); } catch(_) {}
302
303	// Theme: localStorage > site override > device pref > dark
304	var storedTheme = null;
305	try { storedTheme = localStorage.getItem('pcms-theme'); } catch(_) {}
306	var deviceDark = window.matchMedia &&
307	window.matchMedia('(prefers-color-scheme: dark)').matches;
308	var t = storedTheme
309	\|\| siteDefault
310	\|\| (deviceDark ? 'dark' : 'light');
311
312	// Palette: site default only.
313	document.documentElement.setAttribute('data-theme', t);
314	document.documentElement.setAttribute('data-palette', sitePalette);
315	} catch(e) {
316	document.documentElement.setAttribute('data-theme', 'dark');
317	}
318	})();
319	</script>
320
321	<!-- HTMX — bundled locally from node_modules at boot, zero third-party requests -->
322	<script src="/assets/js/htmx.min.js"></script>
323
324	<!-- Per-site custom <head> HTML (analytics, verification, etc.) -->
325	<% if (safeSite.custom_head_html) { %>
326	<%- safeSite.custom_head_html %>
327	<% } %>
328	</head>
329
330	<body class="<%= bodyClass \|\| 'on-home' %> has-bottom-tab" data-feed-view="<%- _e(safeSite.feed_view_default \|\| 'timeline') %>" data-grid-cols="3" data-site-base="<%- _e((typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '') %>">
331
332	<% if (typeof isViewer !== 'undefined' && isViewer) { %>
333	<div class="viewer-banner" role="status">
334	<span class="viewer-banner-ico" aria-hidden="true">👁️</span>
335	<span class="viewer-banner-text"><strong>Kijker-modus</strong> — je kunt alles bekijken, maar niets wijzigen.</span>
336	</div>
337	<style>
338	.viewer-banner {
339	position: sticky; top: 0; z-index: 60;
340	display: flex; align-items: center; justify-content: center; gap: 0.5rem;
341	padding: 0.5rem 1rem;
342	background: linear-gradient(90deg,
343	color-mix(in srgb, var(--accent) 88%, #000) 0%,
344	var(--accent) 100%);
345	color: #fff;
346	font-size: 0.85rem; line-height: 1.3;
347	box-shadow: 0 1px 6px color-mix(in srgb, var(--accent) 45%, transparent);
348	}
349	.viewer-banner-ico { font-size: 1rem; }
350	.viewer-banner-text strong { font-weight: 700; }
351	</style>
352	<% } %>
353
354	<%# Site-chrome (topnav + profielkop + view-switcher) in één vaste slot #pcms-chrome.
355	Bij htmx-navigatie wordt dit slot out-of-band ververst (zie chrome.ejs +
356	render.js), zodat de kop ALTIJD bij de nieuwe pagina/artiest hoort terwijl de
357	audioplayer (los in document.body) blijft leven → geen verspringen. Op de
358	hub-landing is het slot leeg: de hero is daar de header. %>
359	<%- include('partials/chrome') %>
360
361	<%# Geen hx-history-elt: htmx' eigen history staat uit (zie de link-boost).
362	Back/forward wordt door onze popstate-listener gedaan, die de partial
363	her-fetcht (incl. correcte OOB-chrome). Met hx-history-elt + htmx-history
364	aan dumpte htmx de partial ongefilterd hier → dubbele kop. %>
365	<main id="pcms-main" class="pcms-main">
366	<div id="pcms-loading" class="pcms-loading" aria-hidden="true"></div>
367	<%- pageContent %>
368	</main>
369
370	<%- include('partials/footer') %>
371
372	<!-- Mobile bottom-tab navigation (auto-hidden ≥768px). Toont overal — óók op de
373	hub-landing (zodat mobiel altijd Home/Zoek/Inloggen heeft) — behalve op de
374	auth-focusschermen. -->
375	<% if (!(typeof bodyClass === 'string' && bodyClass.indexOf('on-auth') >= 0)) { %>
376	<%- include('partials/bottom-tab') %>
377	<% } %>
378
379	<!-- Mobile profile sheet (auto-hidden ≥768px; only rendered when logged in) -->
380	<% if (user) { %>
381	<%- include('partials/profile-sheet') %>
382	<% } %>
383
384	<!-- Audio player: load on every page (admin + public) so window.pcmsAudioPlayer
385	is always available. The PCMS_SITE_TRACKS bootstrap is still gated on
386	enable_audio_player since it's a public-page concept (auto-discovered
387	tracks from rendered post embeds).
388
389	?v=N — cache-buster: bump bij elke audio-player.js wijziging zodat
390	Cloudflare (max-age=1y) niet de oude versie blijft serveren. -->
391	<script src="/assets/js/audio-player.js?v=31"></script>
392	<!-- Eigen custom media-embeds (YouTube/SoundCloud/Spotify) via de echte
393	player-API's + gedeelde mutual-exclusion registry met de site-speler. -->
394	<script src="/assets/js/embed-player.js?v=17" defer></script>
395	<% if (site && site.enable_audio_player && audioTracks && audioTracks.length > 0) { %>
396	<script>window.PCMS_SITE_TRACKS = <%- JSON.stringify(audioTracks) %>;</script>
397	<% } %>
398
399	<!-- Install-app button: detects platform + shows install instructions modal -->
400	<script src="/assets/js/install-app.js?v=2" defer></script>
401
402	<!-- Service Worker registration -->
403	<script>
404	if ('serviceWorker' in navigator) {
405	navigator.serviceWorker.register('/sw.js').catch(() => {});
406	}
407	</script>
408
409	<!-- HTMX navigation: keep body class in sync with the swapped page.
410	The server emits HX-Trigger-After-Settle: { pcmsNav: { bodyClass } } via
411	renderPage() in middleware/render.js. Without this listener the body
412	class stays whatever the initial page-load set, so the profile-header
413	never collapses/expands when navigating home → post → home via HTMX. -->
414	<script>
415	(function() {
416	// De page-context body-classes. Bij pcmsNav strippen we ze allemaal en zetten
417	// we opnieuw wat de server stuurde. 'on-auth' staat erbij zodat het login-
418	// focusscherm óók via htmx z'n styling krijgt (geen chrome, geen tab, audio op 0).
419	var PAGE_CLASSES = ['on-home','on-post','on-special','on-archive','on-search','on-admin','on-auth',
420	'on-shows','on-downloads','on-download','on-epk','on-linkbio','on-newsletter',
421	'on-tag','on-type','on-user','on-cirkel','on-hub','on-chat'];
422
423	document.body.addEventListener('pcmsNav', function(ev) {
424	var d = ev.detail \|\| {};
425	// Per-site accent + palette bijwerken (head wordt niet mee-geswapt bij htmx-nav,
426	// dus zonder dit erft een artiest de kleuren van de vorige pagina).
427	if (d.accent && /^#[0-9a-fA-F]{6}$/.test(d.accent)) {
428	var sa = document.getElementById('pcms-site-accent');
429	if (sa) {
430	sa.textContent =
431	':root,[data-palette]{--accent:' + d.accent +
432	';--accent-soft:color-mix(in srgb,' + d.accent + ' 80%,white)' +
433	';--accent-tint:color-mix(in srgb,' + d.accent + ' 12%,transparent);}';
434	}
435	}
436	if (d.palette && /^[a-z0-9-]+$/i.test(d.palette)) {
437	document.documentElement.setAttribute('data-palette', d.palette);
438	}
439
440	var next = d.bodyClass;
441	if (!next) return;
442	// De server kan meerdere page-classes sturen ("on-special on-auth"). Strip
443	// alle bekende en zet ALLE meegestuurde page-classes terug (niet alleen de
444	// eerste) — anders mist 'on-auth' bij htmx-nav en blijft het login-scherm
445	// de chrome/tab van de vorige pagina houden.
446	var matched = String(next).split(/\s+/).filter(function(c) {
447	return PAGE_CLASSES.indexOf(c) >= 0;
448	});
449	if (!matched.length) return;
450	PAGE_CLASSES.forEach(function(c) { document.body.classList.remove(c); });
451	matched.forEach(function(c) { document.body.classList.add(c); });
452	});
453
454	// (Back/forward wordt afgehandeld door de popstate-listener in de link-boost
455	// hieronder — die her-fetcht de partial via htmx.ajax, wat de OOB-chrome +
456	// de pcmsNav-trigger (accent/palette/bodyClass) correct toepast. De vroegere
457	// htmx:historyRestore-handler is vervallen nu htmx-history uitstaat.)
458	})();
459	</script>
460
461	<!-- View switcher + grid-cols persistence (event delegation: works for switcher
462	elements rendered later by HTMX, e.g. when navigating back to home). -->
463	<script>
464	(function() {
465	var body = document.body;
466	// Restore feed view + grid cols from localStorage (overrides server default)
467	try {
468	var v = localStorage.getItem('pcms-feed-view');
469	if (v === 'timeline' \|\| v === 'grid') body.dataset.feedView = v;
470	var c = parseInt(localStorage.getItem('pcms-grid-cols'), 10);
471	if (c === 2 \|\| c === 3 \|\| c === 4) body.dataset.gridCols = String(c);
472	} catch (e) {}
473
474	function syncAria() {
475	// Alleen op een feed-pagina hoort Tijdlijn/Grid 'actief' (wit) te zijn; op
476	// agenda/downloads/post/etc. beide grijs. Inline feed-check (FEED_PAGE_CLASSES
477	// staat verderop, maar deze functie draait al bij init).
478	var _feedC = ['on-home','on-tag','on-type','on-user','on-cirkel'];
479	var _onFeed = _feedC.some(function(c){ return body.classList.contains(c); });
480	document.querySelectorAll('.view-switch-btn').forEach(function(b) {
481	b.setAttribute('aria-selected', (_onFeed && b.dataset.view === body.dataset.feedView) ? 'true' : 'false');
482	});
483	document.querySelectorAll('.grid-cols-btn').forEach(function(b) {
484	b.classList.toggle('is-active', b.dataset.cols === body.dataset.gridCols);
485	});
486	}
487	syncAria();
488	// Re-sync after HTMX brings in new content (e.g. navigating back to home).
489	// pcmsNav vuurt ná de body-class-update (zie de pcmsNav-listener hierboven), dus
490	// dáár weet syncAria de juiste pagina-class — los van de afterSettle-timing.
491	// Een vertraagde herhaling wint eventuele resterende races (OOB-chrome-swap).
492	document.body.addEventListener('htmx:afterSettle', function(){ syncAria(); setTimeout(syncAria, 60); });
493	document.body.addEventListener('pcmsNav', function(){ syncAria(); setTimeout(syncAria, 60); });
494
495	// Pages where the body actually has a feed to toggle. On these the
496	// click stays put — it just flips body[data-feed-view] and CSS does
497	// the rest. Anywhere else (post detail, account, search, auth) we
498	// navigate to home in the chosen view, so the switcher is never
499	// a dead control.
500	// NB: 'on-archive' staat hier bewust NIET tussen — op het archief is er geen
501	// in-place timeline/grid-toggle; een klik op de switcher springt terug naar de
502	// feed in de gekozen weergave (zie de !isFeedPage()-tak hieronder).
503	var FEED_PAGE_CLASSES = ['on-home', 'on-tag', 'on-type', 'on-user', 'on-cirkel'];
504	function isFeedPage() {
505	for (var i = 0; i < FEED_PAGE_CLASSES.length; i++) {
506	if (body.classList.contains(FEED_PAGE_CLASSES[i])) return true;
507	}
508	return false;
509	}
510
511	// Event delegation — single listener handles current and future buttons.
512	document.addEventListener('click', function(e) {
513	var sw = e.target.closest('.view-switch-btn');
514	if (sw) {
515	var view = sw.dataset.view;
516	body.dataset.feedView = view;
517	try { localStorage.setItem('pcms-feed-view', view); } catch(_) {}
518	syncAria();
519	// On non-feed pages the switcher acts as a navigation: take the
520	// user back to home in the chosen view. Use HTMX if available so
521	// the page transition matches the rest of the site's nav.
522	if (!isFeedPage()) {
523	// Naar de SITE-home in de gekozen view (siteUrlBase), niet de globale '/'
524	// — in hub is '/' de hub-overview, niet de tijdlijn van deze artiest.
525	var base = body.dataset.siteBase \|\| '';
526	if (window.htmx) {
527	window.htmx.ajax('GET', base + '/?partial=1', { target: '#pcms-main', swap: 'innerHTML' });
528	history.pushState({}, '', base + '/');
529	} else {
530	location.href = base + '/';
531	}
532	}
533	return;
534	}
535	var gc = e.target.closest('.grid-cols-btn');
536	if (gc) {
537	body.dataset.gridCols = gc.dataset.cols;
538	try { localStorage.setItem('pcms-grid-cols', gc.dataset.cols); } catch(_) {}
539	syncAria();
540	}
541	});
542	})();
543	</script>
544
545	<!-- Globale link-boost: alle interne navigatie-links lopen via htmx in #pcms-main,
546	zodat de audioplayer (los in document.body) blijft spelen i.p.v. te verspringen
547	bij een full page-load. Werkt overal — Beheer, Account, posts, sites — zonder
548	elke link los htmx te maken. Links die écht een volledige load nodig hebben
549	(uitloggen/auth, downloads, feeds, media, assets, bestanden) worden overgeslagen,
550	net als links die al hun eigen hx-* hebben. -->
551	<script>
552	(function () {
553	if (!window.htmx) return;
554	// htmx' EIGEN history-afhandeling volledig uitzetten. We doen back/forward zelf
555	// via de popstate-listener hieronder (htmx.ajax → verwerkt de OOB-chrome netjes).
556	// Lieten we htmx z'n gang gaan, dan herstelde 'ie #pcms-main door de partial
557	// (inclusief de <div id=pcms-chrome hx-swap-oob>) ONGEFILTERD in #pcms-main te
558	// dumpen → een tweede, geneste kop = de pagina dubbel. Eén mechanisme nu.
559	try { window.htmx.config.historyEnabled = false; } catch (_) {}
560
561	function fullLoad(a, url) {
562	if (a.hasAttribute('download') \|\| a.hasAttribute('data-full-load')) return true;
563	if (a.hasAttribute('hx-get') \|\| a.hasAttribute('hx-post') \|\| a.hasAttribute('hx-boost')) return true;
564	if (a.target && a.target !== '_self') return true;
565	if (a.getAttribute('rel') === 'external') return true;
566	var p = url.pathname;
567	// Sessie/redirect-acties → volledige navigatie (cookies, Google-redirect).
568	// Maar de auth-FORMULIERpagina's (/auth/admin, /auth/login, /auth/register,
569	// /auth/reset…) mogen wél via htmx, zodat de audiospeler blijft doorspelen
570	// i.p.v. te herstarten/verspringen bij een volledige page-load.
571	if (/^\/(logout\|oauth)(?:\/\|$)/.test(p)) return true;
572	if (/^\/auth\/(logout\|google)(?:\/\|$)/.test(p)) return true;
573	// Feeds, PWA, service-worker, statics, media-streams, downloads.
574	if (/^\/(feed\|atom\|sitemap\|manifest\|robots\|sw\.js\|assets\|media\|audio\|uploads)(?:\/\|\.\|$)/.test(p)) return true;
575	if (/\.[a-z0-9]{2,5}$/i.test(p)) return true; // bestandsextensie → laat de browser 't halen
576	return false;
577	}
578
579	var lastPath = location.pathname + location.search;
580	var navTimer = null;
581
582	// Eén plek voor alle programmatische navigatie-swaps. Annuleert eerst een nog
583	// lopende request op #pcms-main (anti-race: bij snel klikken/terug-gaan kan een
584	// trage oude response anders een nieuwe pagina overschrijven → "kale content").
585	function doNav(dest) {
586	try { window.htmx.trigger('#pcms-main', 'htmx:abort'); } catch (_) {}
587	window.htmx.ajax('GET', dest, { target: '#pcms-main', swap: 'innerHTML' });
588	}
589
590	document.addEventListener('click', function (e) {
591	if (e.defaultPrevented \|\| e.button !== 0 \|\| e.metaKey \|\| e.ctrlKey \|\| e.shiftKey \|\| e.altKey) return;
592	var a = e.target.closest('a[href]');
593	if (!a) return;
594	var href = a.getAttribute('href');
595	if (!href \|\| href.charAt(0) === '#') return;
596	var url; try { url = new URL(a.href, location.href); } catch (_) { return; }
597	if (url.origin !== location.origin) return;
598	if (fullLoad(a, url)) return;
599	e.preventDefault();
600	var dest = url.pathname + url.search;
601	if (dest !== lastPath) history.pushState({ b: 1 }, '', dest);
602	lastPath = dest;
603	if (navTimer) { clearTimeout(navTimer); navTimer = null; }
604	doNav(dest);
605	try { window.scrollTo(0, 0); } catch (_) {}
606	});
607
608	window.addEventListener('popstate', function () {
609	var here = location.pathname + location.search;
610	if (here === lastPath) return;
611	lastPath = here;
612	// Debounce: bij heel snel/herhaald terug-vooruit niet elke tussenpagina ophalen,
613	// alleen de LAATSTE bestemming. Voorkomt overlappende swaps ("kale content").
614	if (navTimer) clearTimeout(navTimer);
615	navTimer = setTimeout(function () {
616	navTimer = null;
617	doNav(location.pathname + location.search);
618	}, 90);
619	});
620
621	// Links MÉT eigen hx-get + hx-push-url (post-card/post-tile/topnav/…) lopen NIET
622	// via de boost hierboven, en hx-push-url is een no-op nu htmx-history uitstaat.
623	// Doe daarom de adresbalk-update hier zelf zodra htmx swapt. Programmatische
624	// htmx.ajax-calls (boost/popstate) hebben geen elt met hx-push-url → geen dubbel.
625	document.body.addEventListener('htmx:beforeRequest', function (evt) {
626	try {
627	var elt = evt.detail && evt.detail.elt; // het TRIGGERENDE element (de link)
628	if (!elt \|\| !elt.closest) return;
629	var node = elt.closest('[hx-push-url]');
630	if (!node) return;
631	var u = node.getAttribute('hx-push-url');
632	if (!u \|\| u === 'false') return;
633	if (u !== (location.pathname + location.search)) history.pushState({ b: 1 }, '', u);
634	lastPath = u;
635	} catch (_) {}
636	});
637
638	// Spring naar boven na ELKE navigatie-swap van #pcms-main. De boost hierboven
639	// scrollt al, maar links met hun eigen hx-get (post-nav Newer/Older, post-kaarten)
640	// lopen NIET via de boost → zonder dit blijf je op de oude scrollpositie hangen
641	// bij het openen van een gerelateerde/volgende post. Alleen #pcms-main, zodat
642	// in-page swaps (comments e.d.) en de OOB-chrome-swap niet meescrollen.
643	document.body.addEventListener('htmx:afterSwap', function (evt) {
644	var t = evt.detail && evt.detail.target;
645	if (t && t.id === 'pcms-main') { try { window.scrollTo(0, 0); } catch (_) {} }
646	});
647	})();
648	</script>
649
650	<!-- Mobiel toetsenbord vs. site-layout: zet body.kb-open zodra het toetsenbord
651	open is (visual viewport fors korter dan het venster) ÉN er een invoerveld
652	focus heeft. CSS verbergt dan de vaste onderbalken (bottom-tab + mini-speler)
653	zodat ze niet over het invoerveld zweven. -->
654	<script>
655	(function () {
656	var vv = window.visualViewport;
657	if (!vv) return;
658	function isField(el) {
659	if (!el) return false;
660	var t = el.tagName;
661	return t === 'INPUT' \|\| t === 'TEXTAREA' \|\| el.isContentEditable;
662	}
663	function update() {
664	var open = (window.innerHeight - vv.height) > 150 && isField(document.activeElement);
665	document.body.classList.toggle('kb-open', open);
666	}
667	vv.addEventListener('resize', update);
668	vv.addEventListener('scroll', update);
669	document.addEventListener('focusin', function () { setTimeout(update, 60); });
670	document.addEventListener('focusout', function () { setTimeout(update, 60); });
671	})();
672	</script>
673
674	<!-- Afbeeldingen lastiger op te slaan: rechtsklik-menu + slepen blokkeren op <img>.
675	Frictie, geen echte beveiliging (DevTools/screenshot blijven kunnen). -->
676	<script>
677	(function () {
678	document.addEventListener('contextmenu', function (e) {
679	if (e.target && e.target.tagName === 'IMG') e.preventDefault();
680	});
681	document.addEventListener('dragstart', function (e) {
682	if (e.target && e.target.tagName === 'IMG') e.preventDefault();
683	});
684	})();
685	</script>
686
687	<!-- Auto-resize: elk <textarea> groeit mee met de inhoud i.p.v. intern te scrollen
688	(scroll-binnen-scroll is verwarrend). Site-breed; ook na htmx-swaps. -->
689	<script>
690	(function () {
691	function autoSize(ta) {
692	if (!ta \|\| ta.tagName !== 'TEXTAREA') return;
693	// Skip hidden textareas (e.g. inside a closed <details> or an unopened reply
694	// box): measuring scrollHeight there yields a bad height that sticks as inline
695	// style and makes the field open huge. They get sized on focus once visible.
696	if (ta.offsetParent === null && ta.offsetHeight === 0) return;
697	ta.style.height = 'auto';
698	var maxH = parseFloat(getComputedStyle(ta).maxHeight);
699	var sh = ta.scrollHeight;
700	var h = (maxH && !isNaN(maxH)) ? Math.min(sh, maxH) : sh; // respect a CSS max-height
701	ta.style.height = h + 'px';
702	ta.style.overflowY = sh > h ? 'auto' : 'hidden';
703	}
704	function sizeAll(root) {
705	(root \|\| document).querySelectorAll('textarea').forEach(autoSize);
706	}
707	document.addEventListener('input', function (e) { autoSize(e.target); });
708	document.addEventListener('focusin', function (e) { autoSize(e.target); });
709	// Init + opnieuw na htmx-navigatie/partials.
710	sizeAll();
711	document.body.addEventListener('htmx:afterSettle', function () { sizeAll(); });
712	window.addEventListener('load', function () { sizeAll(); });
713	})();
714	</script>
715
716	<!-- PWA install prompt — show button when browser fires beforeinstallprompt -->
717	<script>
718	(function() {
719	var btn = document.getElementById('pwa-install-btn');
720	if (!btn) return;
721	var deferred = null;
722	window.addEventListener('beforeinstallprompt', function(e) {
723	e.preventDefault();
724	deferred = e;
725	btn.hidden = false;
726	});
727	btn.addEventListener('click', async function() {
728	if (!deferred) return;
729	btn.hidden = true;
730	deferred.prompt();
731	try { await deferred.userChoice; } catch(e) {}
732	deferred = null;
733	});
734	window.addEventListener('appinstalled', function() {
735	btn.hidden = true;
736	deferred = null;
737	});
738	})();
739	</script>
740
741	<!-- NSFW / sensitive content: click a veil/reveal to un-blur. Capture-phase so the
742	click reveals instead of following the card link or firing htmx navigation. -->
743	<script>
744	// Cover fade-in: a cover image that's still loading is hidden so the accent-gradient
745	// placeholder behind it shows; it fades in once loaded. Cached/complete images stay
746	// visible (no flash). Runs on load + htmx swaps.
747	(function () {
748	if (window.__coverFadeWired) return; window.__coverFadeWired = true;
749	function scan(root) {
750	(root \|\| document).querySelectorAll('.grid-tile-img, .post-list-cover img, .tl-media-img img').forEach(function (img) {
751	if (img.dataset.fade) return; img.dataset.fade = '1';
752	if (img.complete && img.naturalWidth > 0) return; // already loaded → leave visible
753	img.classList.add('is-loading');
754	var done = function () { img.classList.remove('is-loading'); };
755	img.addEventListener('load', done, { once: true });
756	img.addEventListener('error', done, { once: true });
757	});
758	}
759	scan(document);
760	document.body.addEventListener('htmx:afterSettle', function (e) { scan(e.target); });
761	})();
762	</script>
763
764	<script>
765	(function () {
766	if (window.__nsfwWired) return; window.__nsfwWired = true;
767	document.addEventListener('click', function (e) {
768	var hit = e.target.closest && e.target.closest('.nsfw-veil, .nsfw-reveal');
769	if (!hit) return;
770	e.preventDefault(); e.stopPropagation();
771	var box = hit.closest('.nsfw-media, .nsfw-gate');
772	if (box) box.classList.add('is-shown');
773	}, true);
774	})();
775	</script>
776
777	<script>
778	// Delegated replacements for inline on* handlers, so the CSP needs no
779	// script-src-attr 'unsafe-inline'. Document-level → also covers htmx-swapped content.
780	(function () {
781	if (window.__pcmsHandlersWired) return; window.__pcmsHandlersWired = true;
782	// Confirm before submitting a form that carries data-confirm.
783	document.addEventListener('submit', function (e) {
784	var f = e.target;
785	if (f && f.dataset && f.dataset.confirm && !window.confirm(f.dataset.confirm)) e.preventDefault();
786	});
787	// Auto-submit a form / switch language when a <select> changes.
788	document.addEventListener('change', function (e) {
789	var el = e.target;
790	if (!el \|\| !el.dataset) return;
791	if (el.dataset.autosubmit !== undefined && el.form) el.form.submit();
792	else if (el.dataset.langSwitch !== undefined) {
793	location.href = '/lang/' + encodeURIComponent(el.value) + '?r=' + encodeURIComponent(location.pathname + location.search);
794	}
795	});
796	// Misc click helpers (select-all in a field, history-back button).
797	document.addEventListener('click', function (e) {
798	var el = e.target.closest && e.target.closest('[data-selectall],[data-back]');
799	if (!el) return;
800	if (el.dataset.selectall !== undefined && el.select) el.select();
801	if (el.dataset.back !== undefined) { e.preventDefault(); history.back(); }
802	});
803	// Image fallback (the error event doesn't bubble → capture phase).
804	document.addEventListener('error', function (e) {
805	var el = e.target;
806	if (el && el.tagName === 'IMG' && el.dataset && el.dataset.fallback !== undefined && el.parentElement) {
807	el.parentElement.innerHTML = '<span class="pl-cover-empty">⚠️</span>';
808	}
809	}, true);
810	})();
811	</script>
812
813	<!-- Per-site custom footer HTML -->
814	<% if (safeSite.custom_foot_html) { %>
815	<%- safeSite.custom_foot_html %>
816	<% } %>
817
818	</body>
819	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats:

Original Format