Context Navigation

post.ejs@ f6c414e

main

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

feat(fediverse): star = like via your own fediverse account (server-only input)

The post heart is now a star that lets any visitor like the post from their own
fediverse account: click -> enter just your server (e.g. mastodon.social) -> bounce
to your server's authorize_interaction. No full @handle needed (your server knows
who you are). Count shows incoming fediverse likes. Reuses the remote-interaction
popover; placeholder simplified to the server.

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

Property mode set to 100644

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

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

Download in other formats:

Original Format