Context Navigation

post.ejs@ aadb11e

main

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

Fediverse UI: one ⭐ like, transparent circle logos, accent-following Klonkt gradient

Merge the duplicate ⭐ like: drop the post-header like-button; the 'From the fediverse' section now always shows and its ⭐ is the clickable like (with count).
Circle-feed avatar: transparent background behind a logo image (accent stays only for the letter fallback) — fixes the accent showing through transparent logos.
Klonkt palette now uses the generic accent glow so its background gradient follows the chosen accent (dropped the hard-coded navy override). style.css?v=47.

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

Property mode set to 100644

File size: 19.9 KB

Line
1	<%
2	// In hub mode the site is accessible under /user/<slug>; all site-scoped links
3	// (tag, edit, delete, comments) must carry that prefix otherwise they fall back
4	// to the primary site → 404 / wrong site. In solo mode _base = ''.
5	const _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
6	%>
7	<article class="container post-page">
8
9	<%# Navigation across ALL posts — ABOVE the post (shared partial). %>
10	<%- include('../partials/post-nav', { newerPost: newerPost, olderPost: olderPost }) %>
11
12	<% if (post.cover_image_url) { %>
13	<figure class="post-cover">
14	<img src="<%= post.cover_image_url %>" alt="">
15	</figure>
16	<% } %>
17
18	<header class="post-header">
19	<h1 class="post-title"><%= post.title %></h1>
20	<div class="post-meta">
21	<a class="author" href="/users/<%= encodeURIComponent(post.author_username) %>"
22	hx-get="/users/<%= encodeURIComponent(post.author_username) %>?partial=1"
23	hx-target="#pcms-main" hx-swap="innerHTML"
24	hx-push-url="/users/<%= encodeURIComponent(post.author_username) %>"
25	hx-indicator="#pcms-loading"><%= post.author_username %></a>
26	<span class="meta-sep">·</span>
27	<time datetime="<%= post.published_at \|\| post.created_at %>"><%= formatDate(post.published_at \|\| post.created_at) %></time>
28	<% if (post.status !== 'published') { %>
29	<span class="meta-sep">·</span>
30	<span class="status-badge status-<%= post.status %>"><%= post.status %></span>
31	<% } %>
32	</div>
33	</header>
34
35	<div class="post-content">
36	<%- post.content_html %>
37	</div>
38
39	<% if (post.tags && post.tags.length > 0) { %>
40	<div class="post-tags">
41	<% post.tags.forEach(t => { %>
42	<a class="tag" href="<%= _base %>/tag/<%= encodeURIComponent(t) %>"
43	hx-get="<%= _base %>/tag/<%= encodeURIComponent(t) %>?partial=1"
44	hx-target="#pcms-main" hx-swap="innerHTML"
45	hx-push-url="<%= _base %>/tag/<%= encodeURIComponent(t) %>"
46	hx-indicator="#pcms-loading">#<%= t %></a>
47	<% }); %>
48	</div>
49	<% } %>
50
51	<!-- Inline admin actions: only visible if user has permission -->
52	<% if (user && (permissions.canEditPost(user, post, site) \|\| permissions.canDeletePost(user, post, site))) { %>
53	<aside class="post-actions">
54	<% if (permissions.canEditPost(user, post, site)) { %>
55	<a href="<%= _base %>/posts/<%= post.slug %>/edit" class="btn"
56	hx-get="<%= _base %>/posts/<%= post.slug %>/edit?partial=1" hx-target="#pcms-main"
57	hx-push-url="<%= _base %>/posts/<%= post.slug %>/edit" hx-indicator="#pcms-loading">
58	✏️ Edit
59	</a>
60	<% } %>
61	<% if (permissions.canDeletePost(user, post, site)) { %>
62	<form method="post" action="<%= _base %>/posts/<%= post.slug %>/delete" style="display:inline" onsubmit="return confirm('Delete this post?')">
63	<button type="submit" class="btn btn-danger">🗑 Delete</button>
64	</form>
65	<% } %>
66	</aside>
67	<% } %>
68
69	<!-- Fediverse interactions — single place: ⭐ like (clickable) + 🔁/💬 counts + reply -->
70	<% var _postAbsUrl = (typeof ogOrigin !== 'undefined' && ogOrigin ? ogOrigin : '') + (typeof _base !== 'undefined' && _base ? _base : '') + '/' + post.slug; %>
71	<% var _fedi = (typeof fediverse !== 'undefined' && fediverse) ? fediverse : { thread: [], likeCount: 0, announceCount: 0 }; %>
72	<% if (post.status === 'published') { %>
73	<section class="post-fediverse post-comments" id="fediverse">
74	<h2 class="comments-heading"><%= t('fedi.heading') %></h2>
75	<p class="fedi-stats">
76	<button type="button" class="fedi-stat-btn fedi-remote-reply-btn" data-fedi-uri="<%= _postAbsUrl %>" data-fedi-ph="<%= t('fedi.remote_ph') %>" title="<%= t('like.fedi_title') %>">⭐ <%= _fedi.likeCount %></button>
77	<span title="<%= t('fedi.boosts') %>">🔁 <%= _fedi.announceCount %></span>
78	<span title="<%= t('fedi.replies') %>">💬 <%= (_fedi.thread \|\| []).length %></span>
79	</p>
80	<% if (_fedi.thread && _fedi.thread.length) { %>
81	<ol class="comments-list">
82	<% _fedi.thread.forEach(function(n){ %>
83	<li class="comment"><%- include('../partials/fedi-node', { n: n, t: t, canManageSite: (typeof canManageSite !== 'undefined' ? canManageSite : false), _base: _base, siteAvatar: (typeof siteAvatar !== 'undefined' ? siteAvatar : null), formatDateTime: formatDateTime }) %></li>
84	<% }); %>
85	</ol>
86	<% } %>
87	<div class="post-fediverse-cta">
88	<button type="button" class="btn fedi-remote-reply-btn" data-fedi-uri="<%= _postAbsUrl %>" data-fedi-ph="<%= t('fedi.remote_ph') %>">
89	<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
90	<%= t('fedi.remote_reply') %>
91	</button>
92	</div>
93	</section>
94	<% } %>
95	<script>
96	(function(){
97	if (window.__fediRemoteWired) return; window.__fediRemoteWired = true;
98	var current = null, currentBtn = null;
99	function close(){ if (current) { current.remove(); current = null; currentBtn = null; } }
100	function go(raw, uri){
101	var d = (raw\|\|'').trim().replace(/^@?[^@\s]@/, '').replace(/^https?:\/\//i, '').replace(/\/.$/, '').trim();
102	if (d) location.href = 'https://' + d + '/authorize_interaction?uri=' + encodeURIComponent(uri\|\|'');
103	}
104	function place(f, b){
105	var r = b.getBoundingClientRect();
106	f.style.top = (r.bottom + window.scrollY + 6) + 'px';
107	f.style.left = Math.max(8, Math.min(r.left + window.scrollX, window.scrollX + window.innerWidth - 340)) + 'px';
108	}
109	document.addEventListener('click', function(e){
110	if (e.target.closest && e.target.closest('.fedi-remote-cancel')) { close(); return; }
111	if (current && e.target.closest && e.target.closest('.fedi-remote-form')) return; // click inside → keep
112	var b = e.target.closest && e.target.closest('.fedi-remote-reply-btn');
113	if (b) {
114	e.preventDefault();
115	if (currentBtn === b) { close(); return; } // toggle off
116	close();
117	var f = document.createElement('form');
118	f.className = 'fedi-remote-form';
119	f.dataset.uri = b.getAttribute('data-fedi-uri') \|\| '';
120	f.innerHTML = '<input type="text" autocomplete="off" spellcheck="false">'
121	+ '<button type="submit" class="btn btn-primary fedi-remote-go" aria-label="ok">→</button>'
122	+ '<button type="button" class="fedi-remote-cancel" aria-label="x">×</button>';
123	f.querySelector('input').placeholder = b.getAttribute('data-fedi-ph') \|\| 'mastodon.social';
124	document.body.appendChild(f); // floating popover → no layout reflow
125	place(f, b); current = f; currentBtn = b;
126	f.querySelector('input').focus();
127	return;
128	}
129	if (current) close(); // click anywhere else closes it
130	});
131	document.addEventListener('submit', function(e){
132	var f = e.target.closest && e.target.closest('.fedi-remote-form');
133	if (!f) return; e.preventDefault();
134	go(f.querySelector('input').value, f.dataset.uri);
135	});
136	document.addEventListener('keydown', function(e){ if (e.key === 'Escape') close(); });
137	window.addEventListener('scroll', close, true);
138	})();
139	</script>
140
141
142	<%# ── Related posts (3-card grid) ─────────────────────────────
143	Always shown if at least one related post exists. Selection logic
144	lives server-side: same-tag posts ranked by overlap, falling back
145	to most-recent if there's no tag overlap. %>
146	<% if (relatedPosts && relatedPosts.length > 0) { %>
147	<section class="post-related" aria-labelledby="related-heading">
148	<h2 class="post-related-heading" id="related-heading"><%= t('related.title') %></h2>
149	<ul class="post-related-grid">
150	<% relatedPosts.forEach(function(rp) { %>
151	<li class="post-related-card">
152	<a href="<%= rp._urlBase \|\| '' %>/<%= rp.slug %>"<% if (!rp._urlBase) { %>
153	hx-get="/<%= rp.slug %>?partial=1" hx-target="#pcms-main"
154	hx-push-url="/<%= rp.slug %>" hx-indicator="#pcms-loading"<% } %>>
155	<% if (rp.cover_image_url) { %>
156	<span class="post-related-cover"
157	style="background-image: url('<%= rp.cover_image_url %>')"
158	aria-hidden="true"></span>
159	<% } else { %>
160	<span class="post-related-cover post-related-cover--empty" aria-hidden="true"></span>
161	<% } %>
162	<span class="post-related-meta">
163	<span class="post-related-date"><%= formatDate(rp.published_at) %></span>
164	<span class="post-related-title"><%= rp.title %></span>
165	</span>
166	</a>
167	</li>
168	<% }); %>
169	</ul>
170	</section>
171	<% } %>
172
173	</article>
174	<style>
175	.post-page { max-width: 720px; margin: 0.5rem auto 2rem; padding: 0 1rem; }
176	.post-cover { margin: 0 0 2rem; border-radius: 8px; overflow: hidden; }
177	.post-cover img { width: 100%; height: auto; display: block; }
178	.post-header { margin-bottom: 2rem; }
179	.post-title { font-family: var(--font-display, serif); font-size: 2.5rem; line-height: 1.1; margin: 0 0 1rem; }
180	@media (max-width: 600px) { .post-title { font-size: 1.85rem; } }
181	.post-meta { font-size: 0.9rem; color: var(--ink-muted); }
182	.author { font-weight: 500; color: var(--ink-soft); text-decoration: none; }
183	.author:hover { color: var(--accent); }
184	.post-content { font-family: var(--font-body, serif); font-size: 1.1rem; line-height: 1.7; color: var(--ink); }
185	.post-content p { margin: 1.2em 0; }
186	.post-like-row { margin-top: 1rem; }
187	.like-btn {
188	display: inline-flex; align-items: center; gap: 0.45rem;
189	padding: 0.4rem 0.85rem; border: 1px solid var(--rule); border-radius: 999px;
190	background: var(--paper-2); color: var(--ink); font: inherit; font-size: 0.95rem;
191	cursor: pointer; text-decoration: none; transition: border-color 120ms, color 120ms, background 120ms;
192	}
193	.like-btn:hover { border-color: var(--accent); }
194	.like-btn .like-heart { font-size: 1.1rem; line-height: 1; }
195	.like-btn.is-liked { border-color: var(--accent); color: var(--accent); }
196	.like-btn.is-liked .like-heart { color: var(--accent); }
197	.like-btn .like-count { font-variant-numeric: tabular-nums; }
198	.post-content h2 { font-family: var(--font-display, serif); font-size: 1.6rem; margin: 2rem 0 1rem; }
199	.post-content h3 { font-family: var(--font-display, serif); font-size: 1.3rem; margin: 1.5rem 0 0.75rem; }
200	.post-content a { color: var(--accent); }
201	.post-content code { background: var(--paper-2); padding: 0.1em 0.4em; border-radius: 3px; font-family: var(--font-mono, monospace); font-size: 0.9em; }
202	.post-content pre { background: var(--paper-2); padding: 1rem; border-radius: 6px; overflow-x: auto; }
203	.post-content blockquote { border-left: 3px solid var(--accent); padding-left: 1rem; margin: 1.5rem 0; color: var(--ink-soft); font-style: italic; }
204	.post-content img { max-width: 100%; height: auto; border-radius: 6px; }
205	.post-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 2rem 0; }
206	.tag { background: var(--paper-2); color: var(--ink-soft); padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.85rem; text-decoration: none; transition: background 120ms, color 120ms; }
207	.tag:hover { background: var(--accent); color: white; }
208	.post-actions { display: flex; gap: 0.5rem; margin: 2rem 0; padding: 1rem; background: var(--paper-2); border-radius: 6px; flex-wrap: wrap; }
209
210	/* ============================================================
211	Comments
212	============================================================ */
213	.post-comments {
214	margin-top: 3rem;
215	padding-top: 2rem;
216	border-top: 1px solid var(--rule);
217	}
218	.comments-heading {
219	font-family: var(--font-display, serif);
220	font-size: 1.5rem;
221	margin: 0 0 1.5rem;
222	}
223	.comments-empty { color: var(--ink-muted, var(--ink-soft)); margin: 0 0 1.5rem; }
224	.comments-pending-flash {
225	background: rgba(40, 160, 90, 0.15);
226	color: #2a9d5e;
227	border: 1px solid rgba(40, 160, 90, 0.3);
228	padding: 0.75rem 1rem;
229	border-radius: 6px;
230	margin-bottom: 1rem;
231	font-size: 0.9rem;
232	}
233	.comments-empty a { color: var(--accent); }
234
235	.comments-list, .comment-replies {
236	list-style: none;
237	padding: 0;
238	margin: 0 0 2rem;
239	}
240
241	.comment {
242	display: flex;
243	gap: 0.85rem;
244	padding: 1rem 0;
245	border-top: 1px solid var(--rule);
246	}
247	.comments-list > .comment:first-child { border-top: 0; padding-top: 0; }
248
249	.comment-avatar {
250	flex-shrink: 0;
251	width: 40px;
252	height: 40px;
253	border-radius: 50%;
254	background: var(--paper-2);
255	border: 1px solid var(--rule);
256	overflow: hidden;
257	display: inline-flex;
258	align-items: center;
259	justify-content: center;
260	}
261	.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
262	.comment-avatar span {
263	font-family: var(--font-display, serif);
264	font-weight: 700;
265	color: var(--accent);
266	}
267
268	.comment-body { flex: 1; min-width: 0; }
269	.comment-meta {
270	display: flex;
271	gap: 0.5rem;
272	align-items: baseline;
273	font-size: 0.85rem;
274	margin-bottom: 0.3rem;
275	}
276	.comment-author { color: var(--ink); font-weight: 600; text-decoration: none; }
277	.comment-author:hover { color: var(--accent); }
278	.comment-time { color: var(--ink-muted, var(--ink-soft)); }
279	.comment-content {
280	white-space: pre-wrap;
281	word-wrap: break-word;
282	color: var(--ink);
283	line-height: 1.5;
284	font-size: 0.95rem;
285	}
286
287	.comment-actions {
288	display: flex;
289	gap: 0.5rem;
290	margin-top: 0.4rem;
291	}
292	.comment-reply-btn, .comment-delete-btn {
293	background: none;
294	border: 0;
295	color: var(--ink-muted, var(--ink-soft));
296	font-size: 0.8rem;
297	cursor: pointer;
298	padding: 0.2rem 0;
299	font-family: inherit;
300	text-transform: uppercase;
301	letter-spacing: 0.04em;
302	}
303	.comment-reply-btn:hover { color: var(--accent); }
304	.comment-delete-btn:hover { color: #c33; }
305
306	.comment-replies {
307	margin-top: 1rem;
308	margin-left: 0;
309	border-left: 2px solid var(--rule);
310	padding-left: 1rem;
311	}
312	.comment-reply { padding: 0.75rem 0; }
313	.comment-replies > .comment-reply:first-child { border-top: 0; padding-top: 0; }
314	.comment-reply .comment-avatar { width: 32px; height: 32px; }
315	.comment-reply .comment-avatar span { font-size: 0.85rem; }
316
317	.comment-form, .comment-reply-form {
318	display: flex;
319	flex-direction: column;
320	gap: 0.6rem;
321	background: var(--paper-2);
322	border: 1px solid var(--rule);
323	border-radius: 8px;
324	padding: 1rem;
325	margin-top: 1rem;
326	}
327	.comment-form-label { display: flex; flex-direction: column; gap: 0.4rem; }
328	.comment-form-label > span { font-size: 0.85rem; color: var(--ink-muted, var(--ink-soft)); }
329	.comment-form textarea, .comment-reply-form textarea {
330	width: 100%;
331	resize: vertical;
332	min-height: 70px;
333	padding: 0.65rem 0.85rem;
334	border: 1px solid var(--rule);
335	border-radius: 5px;
336	background: var(--paper);
337	color: var(--ink);
338	font-family: inherit;
339	font-size: 0.95rem;
340	line-height: 1.4;
341	box-sizing: border-box;
342	}
343	.comment-form button { align-self: flex-start; }
344	.comment-reply-form-actions { display: flex; gap: 0.5rem; }
345	/* Show the reply form only AFTER clicking REPLY. The display:flex above would
346	otherwise override the [hidden] attribute → form was always open. */
347	.comment-reply-form[hidden] { display: none; }
348	/* DELETE button is inside a <form>; display:contents makes it a direct flex-sibling
349	of REPLY → pixel-perfect alignment + equal gap. */
350	.comment-actions form { display: contents; }
351
352	.comments-login-cta { margin-top: 1.5rem; text-align: center; }
353
354	/* ─── Related posts (3-card grid above pinned-nav) ─────────────── */
355	.post-related {
356	margin: 3rem auto 1.5rem;
357	/* Break out of the 720px article column so the cards have room to breathe.
358	Cap at 1100 to match other wide content. */
359	max-width: 1100px;
360	padding: 0 1rem;
361	}
362	.post-related-heading {
363	font-family: var(--font-ui, system-ui), sans-serif;
364	font-size: 0.75rem;
365	font-weight: 600;
366	text-transform: uppercase;
367	letter-spacing: 0.15em;
368	color: var(--ink-muted, var(--ink-soft));
369	margin: 0 0 1rem;
370	}
371	.post-related-grid {
372	list-style: none;
373	padding: 0; margin: 0;
374	display: grid;
375	grid-template-columns: repeat(3, minmax(0, 1fr));
376	gap: 1rem;
377	}
378	@media (max-width: 880px) { .post-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
379	@media (max-width: 540px) { .post-related-grid { grid-template-columns: 1fr; } }
380
381	.post-related-card {
382	background: var(--paper);
383	border: 1px solid var(--rule);
384	border-radius: 10px;
385	overflow: hidden;
386	transition: border-color 150ms, transform 150ms;
387	}
388	.post-related-card:hover { border-color: var(--accent); transform: translateY(-2px); }
389	.post-related-card a {
390	display: block;
391	color: inherit;
392	text-decoration: none;
393	}
394	.post-related-cover {
395	display: block;
396	aspect-ratio: 16 / 10;
397	background: var(--paper-2) center/cover no-repeat;
398	}
399	.post-related-cover--empty {
400	background-image: linear-gradient(135deg,
401	color-mix(in srgb, var(--accent) 12%, var(--paper-2)),
402	var(--paper-2));
403	}
404	.post-related-meta {
405	display: flex; flex-direction: column; gap: 0.4rem;
406	padding: 0.85rem 1rem 1.1rem;
407	}
408	.post-related-date {
409	font-size: 0.78rem;
410	color: var(--ink-muted, var(--ink-soft));
411	font-variant-numeric: tabular-nums;
412	}
413	.post-related-title {
414	font-family: var(--font-display, serif);
415	font-size: 1.1rem;
416	font-weight: 600;
417	color: var(--ink);
418	line-height: 1.25;
419	}
420
421	/* ─── Pinned navigation cards (v9 style) ───────────────────────── */
422	.post-pinned-nav {
423	display: grid;
424	grid-template-columns: 1fr 1fr;
425	gap: 1rem;
426	margin: 1.5rem auto 2rem;
427	max-width: 1100px;
428	padding: 0 1rem;
429	}
430	@media (max-width: 600px) {
431	.post-pinned-nav { grid-template-columns: 1fr; }
432	}
433
434	.post-pinned-card {
435	display: flex; align-items: center; gap: 1rem;
436	padding: 1rem 1.25rem;
437	border: 1.5px solid color-mix(in srgb, var(--accent) 50%, transparent);
438	background: color-mix(in srgb, var(--accent) 6%, var(--paper));
439	border-radius: 10px;
440	text-decoration: none;
441	color: var(--ink);
442	transition: border-color 150ms, background 150ms, transform 150ms;
443	min-height: 88px;
444	}
445	.post-pinned-card:hover {
446	border-color: var(--accent);
447	background: color-mix(in srgb, var(--accent) 11%, var(--paper));
448	transform: translateY(-2px);
449	}
450	.post-pinned-arrow {
451	font-size: 1.6rem;
452	color: var(--accent);
453	flex-shrink: 0;
454	line-height: 1;
455	}
456	.post-pinned-card--next {
457	/* "Volgende" card aligns text to the right with the arrow on the right
458	side, mirroring v9 — the arrow is on the OPPOSITE end from the body. */
459	flex-direction: row-reverse;
460	text-align: right;
461	}
462	.post-pinned-body {
463	display: flex; flex-direction: column; gap: 0.25rem;
464	flex: 1; min-width: 0;
465	}
466	.post-pinned-label {
467	font-family: var(--font-ui, system-ui), sans-serif;
468	font-size: 0.7rem; font-weight: 600;
469	text-transform: uppercase;
470	letter-spacing: 0.1em;
471	color: var(--accent);
472	}
473	.post-pinned-title {
474	font-family: var(--font-display, serif);
475	font-size: 1.05rem; font-weight: 600;
476	color: var(--ink);
477	line-height: 1.25;
478	overflow: hidden;
479	text-overflow: ellipsis;
480	display: -webkit-box;
481	-webkit-line-clamp: 2;
482	-webkit-box-orient: vertical;
483	}
484	.post-pinned-cta {
485	font-size: 0.78rem;
486	color: var(--accent);
487	font-weight: 500;
488	}
489
490	/* Edge-of-stack indicator: dashed border, muted styling. */
491	.post-pinned-card--edge {
492	flex-direction: column;
493	align-items: flex-start;
494	justify-content: center;
495	gap: 0.35rem;
496	border-style: dashed;
497	background: transparent;
498	color: var(--ink-muted, var(--ink-soft));
499	cursor: default;
500	}
501	.post-pinned-card--edge:hover {
502	/* Edge cards aren't clickable — undo the lift effect. */
503	transform: none;
504	border-color: color-mix(in srgb, var(--accent) 50%, transparent);
505	background: transparent;
506	}
507	.post-pinned-edge-label {
508	font-family: var(--font-ui, system-ui), sans-serif;
509	font-size: 0.72rem;
510	font-weight: 600;
511	text-transform: uppercase;
512	letter-spacing: 0.15em;
513	color: var(--accent);
514	}
515	.post-pinned-edge-title {
516	font-family: var(--font-display, serif);
517	font-size: 1.05rem;
518	font-weight: 600;
519	color: var(--ink);
520	}
521	</style>

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

Download in other formats:

Original Format