Changeset d9ad6c5 in Klonkt for src/views

Timestamp:

07/28/2026 06:17:36 PM (6 weeks ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

a7bcf66

Parents:

2708282

Message:

Een hulpvraag hoort in Berichten, niet in de Krant

Een 🛟 van een ward kwam bij de guardian op twee plekken binnen: als mention in
Berichten en de Guardian PWA, maar ook als gewone post in de Krant. Op
sound-fabrics.com stonden vijf van de zes hulpvragen in allebei.

De oorzaak zat in de inbox: de tijdlijn-insert vroeg alleen "is dit een
top-level post van iemand die ik volg" en keek niet naar wie de post geadresseerd
was. Dat is nu belongsInTimeline: een directe note is aan iemand persoonlijk
gericht, dus een bericht en geen post. Dat dekt meteen de wave en de gewone DM,
die om dezelfde reden in de Krant terechtkwamen. De self-heal ruimt de al
opgeslagen exemplaren op, beperkt tot de twee soorten die achteraf nog te
herkennen zijn; een publieke mention van iemand die je volgt is wel een post en
blijft staan.

Tweede helft: de weergave gelijkgetrokken. De Krant rendert een post met
emoji's, een quote- of linkkaart en de media; Berichten liet daar niks van zien
(zelfs de shortcodes bleven staan, want ap_mentions had geen emoji_json) en de
Guardian PWA plakte de kale content in een div. Die opmaak zat bovendien in de
<style> van de Krant zelf, dus een post buiten de Krant kwam sowieso ongestyled
binnen.

Nu is er één partial, note-body, met de opmaak in shared-styles ernaast. Alle
drie de oppervlakken gebruiken hem: de PWA bouwt zijn kaarten in de browser en
krijgt de body server-side gerenderd mee. ap_mentions en ap_interactions kregen
de kolommen die daarvoor nodig zijn, gevuld bij binnenkomst, met de quote- of
linkkaart out of band zoals de tijdlijn dat al deed.

En passant: de embed-gate stond alleen op de C2S-read, dus een ward zag in de
web-Krant nog steeds linkvoorbeelden die de guardians hadden uitgezet. Die gate
zit nu ook op /news en /messages.

Changed files:
src/services/ActivityPubService.js

• belongsInTimeline: een directe note is geen tijdlijn-post
• self-heal v21 verwijdert al opgeslagen hulpvragen en waves uit ap_timeline
• resolveCard: quote of linkvoorbeeld, één kaart, out of band opgelost
• mentions en replies slaan emoji's, media en die kaart op
• getNotifications geeft die kolommen door aan Berichten

src/config/database.js

• kolommen op ap_mentions en ap_interactions voor emoji's, media, quote, embed

src/middleware/render.js

• renderNoteBody: dezelfde partial als string, voor niet-EJS oppervlakken

src/routes/posts.js

• gateEmbeds op /news en /messages (FEP-633c gated feature)

src/routes/guardian.js

• hulpvragen krijgen body_html en name_html mee

src/assets/js/guardian.js

• kaart rendert die body in plaats van de kale content

src/assets/css/guardian.css

• opmaak voor de gedeelde post-body in de kleuren van de PWA

src/views/partials/tl-item.ejs

• body vervangen door de gedeelde partial

src/views/partials/msg-item.ejs

• idem, plus een 🛟-markering bij een hulpvraag

src/views/partials/shared-styles.ejs

• .tl-content, .tl-quote* en .tl-media* hierheen verhuisd

src/views/pages/news.ejs

• die regels weggehaald, alleen Krant-eigen opmaak blijft

src/services/i18n.js

• msg.help_request in nl, en, de

New file:
src/views/partials/note-body.ejs

• de body van een post: content, quote/linkkaart, media

test/help-request-timeline.test.js

• een 🛟 blijft uit de Krant en in Berichten

test/note-body-shared.test.js

• één renderer, en beide views gaan er doorheen

remarks: geverifieerd op een wegwerp-database in de browser: de hulpvraag
verdwijnt bij het opstarten uit de Krant en staat mét quote en capture in
Berichten en de PWA. Nog niet uitgerold.

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>

Location:

src/views

Files:

• pages/news.ejs (modified) (2 diffs)
• partials/msg-item.ejs (modified) (2 diffs)
• partials/note-body.ejs (added)
• partials/shared-styles.ejs (modified) (1 diff)
• partials/tl-item.ejs (modified) (1 diff)

src/views/pages/news.ejs

@@ -124 +124 @@
   .tl-time { color: var(--ink-soft, #999); font-size: .78rem; flex: 0 0 auto; align-self: flex-start; white-space: nowrap; }
 
-  .tl-content { line-height: 1.55; overflow-wrap: anywhere; }
-  .tl-content p { margin: .4rem 0; } .tl-content p:first-child { margin-top: 0; } .tl-content p:last-child { margin-bottom: 0; }
-  .tl-content a { color: var(--accent, #06c); }
-  .tl-content img { max-width: 100%; height: auto; border-radius: 10px; background: #fff; }
+  /* .tl-content, .tl-quote* and .tl-media* now live in partials/shared-styles,
+     next to partials/note-body: the markup is shared with Berichten and the
+     Guardian PWA, so the styling has to be too. What stays here is Krant-only. */
   /* Long posts collapse to a max height with a fade + "read more" (added by JS only when it overflows). */
   .tl-content.tl-clamp { max-height: 20em; overflow: hidden;
@@ -137 +136 @@
   .tl-readmore:hover { text-decoration: underline; }
 
-  /* FEP-044f embedded quote card (mirror of the Shaer QuoteCard). */
-  .tl-quote { margin: .75rem 0 0; padding: .6rem .7rem; border-radius: 12px;
-    border: 1px solid color-mix(in srgb, var(--ink, #000) 12%, transparent);
-    background: color-mix(in srgb, var(--ink, #000) 3.5%, transparent); }
-  .tl-quote-head { display: flex; align-items: center; gap: .4rem; margin: 0 0 .35rem; min-width: 0; }
-  .tl-quote-avatar { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #fff; }
-  .tl-quote-name { font-weight: 700; font-size: .85rem; color: var(--ink, inherit); white-space: nowrap; }
-  .tl-quote-handle { color: var(--ink-soft, #888); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
-  .tl-quote-body { line-height: 1.5; font-size: .92rem; color: var(--ink-soft, #555);
-    overflow-wrap: anywhere; max-height: 16em; overflow: hidden; }
-  .tl-quote-body p { margin: .3rem 0; } .tl-quote-body p:first-child { margin-top: 0; } .tl-quote-body p:last-child { margin-bottom: 0; }
-  .tl-quote-body a { color: var(--accent, #06c); }
-  .tl-quote-media { display: block; margin: .45rem 0 0; }
-  .tl-quote-media img { max-width: 100%; height: auto; border-radius: 8px; }
-
-  /* Always show the FULL image at its natural ratio — never cropped, no letterbox. */
-  .tl-media { display: flex; flex-direction: column; gap: .4rem; margin: .75rem 0 0; }
-  .tl-media-img { display: block; border-radius: 12px; overflow: hidden;
-    background-image: linear-gradient(135deg,
-      color-mix(in srgb, var(--accent, #888) 22%, var(--paper-2, var(--paper))) 0%,
-      color-mix(in srgb, var(--accent, #888) 6%, var(--paper-2, var(--paper))) 100%); }
-  .tl-media-img img { width: 100%; height: auto; display: block; background: #fff; transition: opacity .4s ease; }
-  .tl-media-img img.is-loading { opacity: 0; }
-  /* Reserve placeholder space while the (natural-aspect) feed image loads. */
-  .tl-media-img:has(img.is-loading) { min-height: 220px; }
-
-  .tl-media-video, .tl-media-audio { width: 100%; margin: .75rem 0 0; border-radius: 12px; display: block; }
-  .tl-media-video { max-height: 480px; background: #000; }
   .tl-poll { margin: .75rem 0 0; display: flex; flex-direction: column; gap: 8px; }
   .tl-poll-form { display: flex; flex-direction: column; gap: 8px; }

src/views/partials/msg-item.ejs

@@ -55 +55 @@
               <% } else if (_t === 'boost') { %><%= t('notif.boosted') %>
               <% } else if (_t === 'report') { %><%= t('notif.reported') %>
+              <% } else if (_t === 'mention' && n.help_request) { %>🛟 <%= t('msg.help_request') %>
               <% } else if (_t === 'mention' && n.wave) { %>👋 <%= t('msg.waved_at_you') %>
               <% } else if (_t === 'mention') { %><%= t('notif.mentioned') %>
@@ -67 +68 @@
 
             <% if (_t === 'report' && n.content) { %><div class="msg-content"><%= n.content %></div>
-            <% } else if ((_t === 'reply' || _t === 'mention' || _t === 'sent') && n.content) { %><div class="msg-content"><%- emojiHtml(n.content, n.emoji_json) %></div>
+            <% } else if ((_t === 'reply' || _t === 'mention' || _t === 'sent') && n.content) { %><div class="msg-content msg-note"><%- include('../partials/note-body', { nb: n }) %></div>
               <% if (_t === 'mention' && n.wave && n.actorUri && canMutate) { %>
                 <form class="msg-quickreply" method="post" action="<%= (typeof siteUrlBase !== 'undefined' ? siteUrlBase : '') %>/messages/quick-reply" style="display:flex;gap:6px;flex-wrap:wrap;margin-top:6px">

src/views/partials/shared-styles.ejs

@@ -202 +202 @@
 .tl-author img.emoji, .tl-boost-by img.emoji, .tl-quote-name img.emoji, .msg-who img.emoji, .comment-author img.emoji {
   max-width: none; height: 1.3em; border-radius: 0; background: none; box-shadow: none; vertical-align: -0.2em; }
+
+/* ── The body of a post ────────────────────────────────────────────────────
+   Shared with partials/note-body.ejs, so a post looks the same in de Krant, in
+   Berichten and in the Guardian PWA. These used to live in the Krant's own
+   <style> block, which is why a post outside de Krant came out unstyled.
+   Krant-only behaviour (the clamp + "read more", the poll, the action bar)
+   stays in pages/news.ejs. */
+.tl-content { line-height: 1.55; overflow-wrap: anywhere; }
+.tl-content p { margin: .4rem 0; } .tl-content p:first-child { margin-top: 0; } .tl-content p:last-child { margin-bottom: 0; }
+.tl-content a { color: var(--accent, #06c); }
+.tl-content img { max-width: 100%; height: auto; border-radius: 10px; background: #fff; }
+
+/* FEP-044f embedded quote card (mirror of the Shaer QuoteCard). Also carries
+   an external link preview: same card, different origin. */
+.tl-quote { margin: .75rem 0 0; padding: .6rem .7rem; border-radius: 12px;
+  border: 1px solid color-mix(in srgb, var(--ink, #000) 12%, transparent);
+  background: color-mix(in srgb, var(--ink, #000) 3.5%, transparent); }
+.tl-quote-head { display: flex; align-items: center; gap: .4rem; margin: 0 0 .35rem; min-width: 0; }
+.tl-quote-avatar { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #fff; }
+.tl-quote-name { font-weight: 700; font-size: .85rem; color: var(--ink, inherit); white-space: nowrap; }
+.tl-quote-handle { color: var(--ink-soft, #888); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.tl-quote-body { line-height: 1.5; font-size: .92rem; color: var(--ink-soft, #555);
+  overflow-wrap: anywhere; max-height: 16em; overflow: hidden; }
+.tl-quote-body p { margin: .3rem 0; } .tl-quote-body p:first-child { margin-top: 0; } .tl-quote-body p:last-child { margin-bottom: 0; }
+.tl-quote-body a { color: var(--accent, #06c); }
+.tl-quote-media { display: block; margin: .45rem 0 0; }
+.tl-quote-media img { max-width: 100%; height: auto; border-radius: 8px; }
+
+/* Always show the FULL image at its natural ratio — never cropped, no letterbox. */
+.tl-media { display: flex; flex-direction: column; gap: .4rem; margin: .75rem 0 0; }
+.tl-media-img { display: block; border-radius: 12px; overflow: hidden;
+  background-image: linear-gradient(135deg,
+    color-mix(in srgb, var(--accent, #888) 22%, var(--paper-2, var(--paper))) 0%,
+    color-mix(in srgb, var(--accent, #888) 6%, var(--paper-2, var(--paper))) 100%); }
+.tl-media-img img { width: 100%; height: auto; display: block; background: #fff; transition: opacity .4s ease; }
+.tl-media-img img.is-loading { opacity: 0; }
+/* Reserve placeholder space while the (natural-aspect) feed image loads. */
+.tl-media-img:has(img.is-loading) { min-height: 220px; }
+.tl-media-video, .tl-media-audio { width: 100%; margin: .75rem 0 0; border-radius: 12px; display: block; }
+.tl-media-video { max-height: 480px; background: #000; }
+
+/* In Berichten a post sits inside a notification row, so it starts tighter and
+   its media stays modest: the row is a pointer to the post, not the post page. */
+.msg-note .tl-content { line-height: 1.5; }
+.msg-note .tl-quote, .msg-note .tl-media, .msg-note .tl-media-video, .msg-note .tl-media-audio { margin-top: .5rem; }
+.msg-note .tl-media-img:has(img.is-loading) { min-height: 120px; }
+.msg-note .tl-media-video { max-height: 320px; }
 </style>

src/views/partials/tl-item.ejs

@@ -10 +10 @@
           </div>
 
-          <%
-            var media = []; try { media = JSON.parse(p.media_json || '[]'); } catch (e) { media = []; }
-            var imgs = media.filter(function(m){ return m && m.url && (!m.type || /^image\//.test(m.type)); });
-            var vids = media.filter(function(m){ return m && m.url && m.type && /^video\//.test(m.type); });
-            var auds = media.filter(function(m){ return m && m.url && m.type && /^audio\//.test(m.type); });
-            var _nsfwVisual = !!p.nsfw && (imgs.length || vids.length || auds.length);
-            var _nsfwText = !!p.nsfw && !(imgs.length || vids.length || auds.length);
-          %>
-          <% if (_nsfwText) { %>
-            <div class="tl-content nsfw-media"><span class="nsfw-veil"><%- include('../partials/nsfw-veil', { cw: p.cw }) %></span><%- emojiHtml(p.content, p.emoji_json) %></div>
-          <% } else { %>
-            <div class="tl-content"><%- emojiHtml(p.content, p.emoji_json) %></div>
-          <% } %>
-          <%
-            // One card for both: a fediverse quote and an external embed look
-            // identical; only where they came from differs. An embed carries a
-            // title and a thumbnail, never an iframe.
-            var _quote = noteQuote(p.quote_json);
-            if (!_quote) {
-              var _emb = noteQuote(p.embed_json);
-              // The title comes from a third-party oEmbed provider, so it is
-              // escaped here: the quote card renders `content` as HTML (fine for
-              // AP content, which we sanitise on the way in, but not for this).
-              if (_emb) _quote = { url: _emb.url, author: _emb.author || (_emb.provider ? { name: _emb.provider } : null),
-                                   content: _emb.title ? ('<p>' + emojiName(_emb.title, null) + '</p>') : '', media: _emb.media || [] };
-            }
-          %>
-          <% if (_quote) { %><%- include('../partials/quote-card', { q: _quote }) %><% } %>
-          <% if (_nsfwVisual) { %><div class="nsfw-media"><% } %>
-          <% if (imgs.length) { %>
-            <div class="tl-media">
-              <% imgs.forEach(function(m){ %>
-                <a class="tl-media-img" href="<%= m.url %>" target="_blank" rel="noopener"><img src="<%= thumb(m.url, 1280) %>" alt="" loading="lazy" decoding="async"></a>
-              <% }); %>
-            </div>
-          <% } %>
-          <% vids.forEach(function(m){ %><video class="tl-media-video" src="<%= m.url %>" poster="<%= thumb(m.url, 1280) %>" controls preload="metadata" playsinline></video><% }); %>
-          <% /* A Klonkt audio post carries an embed player (embedHtml/embedUrl) that already
-                covers these tracks, so don't ALSO render the raw Audio attachments as bare
-                players here. Posts without a Klonkt embed (e.g. a plain remote audio) keep them. */ %>
-          <% if (!p.embedHtml && !p.embedUrl) { auds.forEach(function(m){ %><audio class="tl-media-audio" src="<%= m.url %>" controls preload="none"></audio><% }); } %>
-          <% if (_nsfwVisual) { %><div class="nsfw-veil"><%- include('../partials/nsfw-veil', { cw: p.cw }) %></div></div><% } %>
+          <% /* Content, quote/preview card and media: shared with Berichten and the
+                Guardian PWA so a post looks the same wherever it turns up.
+                suppressAudio: a Klonkt audio post carries an embed player below
+                that already covers these tracks, so don't ALSO render the raw
+                Audio attachments as bare players. */ %>
+          <%- include('../partials/note-body', { nb: Object.assign({}, p, { suppressAudio: !!(p.embedHtml || p.embedUrl) }) }) %>
 
           <% if (p.embedHtml) { %><div class="tl-embed"><%- p.embedHtml %></div><% } %>