Changeset 3597763 in Klonkt for src/views/pages/news.ejs

Timestamp:

07/26/2026 09:37:48 AM (6 weeks ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

ef1853c

Parents:

b5c2538

Message:

Web-timeline: custom-emoji + embedded quote-kaart (afgekeken van Shaer)

De Shaer-apps renderen FEP-9098 custom-emoji's en de FEP-044f quote-kaart
inline; de Klonkt web-timeline toonde nog letterlijke :shortcodes: en geen
quote. Nu rendert de web-nieuwsfeed dezelfde dingen server-side: emoji's in
content, auteur-naam en booster-naam, plus de geneste quote-kaart (avatar +
naam + content + thumbnail). De byline (avatar/naam/handle) en de boost-icon
(SVG, themebaar) had de web-UI al.

De data was al aanwezig op de timeline-rijen (emoji_json, author_emoji_json,
reblog_emoji_json, quote_json); dit is puur de render-kant.

New file:
src/services/NoteRender.js

• pure helpers: emojiMap (beide vormen), emojiHtml (tag-bewust, skip code/pre), emojiName (escape + emoji), parseQuote

src/views/partials/quote-card.ejs

• geneste quote-kaart (mirror van de Shaer QuoteCard)

test/note-render.test.js

• 7 tests voor de render-helpers

Changed files:
src/middleware/render.js

• emojiHtml/emojiName/noteQuote als template-helpers in de render-locals

src/views/partials/tl-item.ejs

• content, auteur-naam en booster-naam via de emoji-helpers; quote-kaart erna

src/views/pages/news.ejs

• CSS: img.emoji (inline, geen media-styling) + .tl-quote* (themebaar)

remarks: 187 tests groen (was 180). Visueel geverifieerd via een standalone
render van tl-item met echte emoji-urls. Volgende surfaces (messages, profiel,
cirkel) kunnen dezelfde helpers hergebruiken.

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

File:

• src/views/pages/news.ejs (modified) (1 diff)

src/views/pages/news.ejs

@@ -137 +137 @@
   .tl-readmore:hover { text-decoration: underline; }
 
+  /* FEP-9098 custom emojis: small inline images, never treated as media. */
+  img.emoji { height: 1.35em; width: auto; margin: 0 .04em; vertical-align: -0.22em;
+    display: inline-block; border-radius: 0; background: none; box-shadow: none; }
+  .tl-content img.emoji, .tl-quote-body img.emoji { max-width: none; }
+
+  /* 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; }