source: Klonkt/src/views/partials/quote-card.ejs@ 86e6a45

main
Last change on this file since 86e6a45 was 3597763, checked in by Robin Genis <roboburr@…>, 7 weeks ago

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@…>
  • Property mode set to 100644
File size: 1.0 KB
Line 
1<%
2 // FEP-044f embedded quote card: the quoted post itself (author + content +
3 // first image), nested under a note — the web mirror of the Shaer QuoteCard.
4 // `q` is the resolved snapshot from noteQuote(p.quote_json).
5 var _qa = q.author || {};
6 var _qm = Array.isArray(q.media) ? q.media.filter(function (m) { return m && m.url && (!m.type || /^image\//.test(m.type)); }) : [];
7%>
8<div class="tl-quote">
9 <div class="tl-quote-head">
10 <% if (_qa.icon) { %><img class="tl-quote-avatar" src="<%= avatar(_qa.icon, 96) %>" alt="" loading="lazy"><% } %>
11 <span class="tl-quote-name"><%- emojiName(_qa.name || _qa.handle || '', _qa.emojis) %></span>
12 <% if (_qa.handle) { %><span class="tl-quote-handle"><%= _qa.handle %></span><% } %>
13 </div>
14 <% if (q.content) { %><div class="tl-quote-body"><%- emojiHtml(q.content, q.emojis) %></div><% } %>
15 <% if (_qm.length) { %><a class="tl-quote-media" href="<%= _qm[0].url %>" target="_blank" rel="noopener"><img src="<%= thumb(_qm[0].url, 640) %>" alt="" loading="lazy"></a><% } %>
16</div>
Note: See TracBrowser for help on using the repository browser.