Changeset d9ad6c5 in Klonkt for src/assets/css/guardian.css

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@…>

File:

• src/assets/css/guardian.css (modified) (1 diff)

src/assets/css/guardian.css

@@ -88 +88 @@
 .g-card.feed .feed-body { margin-top: 6px; line-height: 1.4; }
 .g-card.feed .feed-body img { max-width: 100%; border-radius: 8px; }
+
+/* ── The body of a post ────────────────────────────────────────────────────
+   The 🛟 card shows a real post, so it is rendered by the same partial de
+   Krant and Berichten use (partials/note-body). These are that partial's
+   classes, in the PWA's own colours: the dashboard is standalone and does not
+   load the site's stylesheet. */
+.g-note .tl-content { line-height: 1.5; overflow-wrap: anywhere; }
+.g-note .tl-content p { margin: .35rem 0; }
+.g-note .tl-content p:first-child { margin-top: 0; }
+.g-note .tl-content p:last-child { margin-bottom: 0; }
+.g-note .tl-content a { color: var(--accent); }
+.g-note img.emoji { height: 1.25em; width: auto; margin: 0 .05em; vertical-align: -.2em;
+  display: inline-block; border-radius: 0; background: none; }
+
+/* Quote card and link preview: one card, two origins. */
+.g-note .tl-quote { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px;
+  border: 1px solid var(--line); background: var(--card-2, rgba(128,128,128,.07)); }
+.g-note .tl-quote-head { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; min-width: 0; }
+.g-note .tl-quote-avatar { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
+.g-note .tl-quote-name { font-weight: 600; font-size: .82rem; white-space: nowrap; }
+.g-note .tl-quote-handle { color: var(--sub); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.g-note .tl-quote-body { color: var(--sub); font-size: .88rem; line-height: 1.45; max-height: 14em; overflow: hidden; }
+.g-note .tl-quote-media { display: block; margin: 6px 0 0; }
+
+/* The capture a 🛟 usually carries. */
+.g-note .tl-media { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; }
+.g-note .tl-media-img { display: block; border-radius: 10px; overflow: hidden; }
+.g-note .tl-media-img img { width: 100%; height: auto; display: block; background: #fff; }
+.g-note .tl-media-video, .g-note .tl-media-audio { width: 100%; margin: 8px 0 0; border-radius: 10px; display: block; }
+.g-note .tl-media-video { max-height: 320px; background: #000; }