<% // Eén bericht in de leesstroom. // // Dit is het stuk dat de client AANVULT: bij de onderrand komt de oudere buur // eronder, bij de bovenrand de nieuwere erboven. Geen sprongen, geen // scrollpositie die stiekem verzet wordt -- de stroom groeit gewoon in de // richting waarin je leest, en de browser snapt naar de grenzen. // // Elk artikel draagt zijn eigen buren, dus de client hoeft niets te onthouden: // wat er nog te halen valt staat op het stuk dat er al is. var _b = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : ''; var _newer = (typeof newerPost !== 'undefined' && newerPost) ? newerPost : null; var _older = (typeof olderPost !== 'undefined' && olderPost) ? olderPost : null; %>
<%# Het SNAPPUNT, en met opzet een leeg element van nul hoog in plaats van het artikel zelf. Een snapgebied dat GROTER is dan het scherm mag van de spec overal blijven staan waar het het scherm nog vult -- dus bij een bericht van 1009px op een scherm van 812 accepteert de browser elke positie tussen de bovenkant en "onderkant op de onderrand". Die tweede stand zet de bovenkant van het VOLGENDE bericht op de onderrand van het scherm, en dat is wat Robin zag (20-8). Een anker van nul hoog heeft maar een geldige positie: zijn bovenkant op de bovenrand. %> <%# De titel is een echte link naar het bericht zelf. De leesstroom toont de TEKST, maar reacties, waarderingen en boosts staan op de berichtpagina -- en een stroom waar je niet uit kunt naar het gesprek is een doodlopende weg. Een en niet alleen een tik-afhandelaar: dat werkt ook met een toetsenbord, met een schermlezer, en met cmd-klik. %> <%# De cover hoort hier net zo goed als op de berichtpagina: het is het beeld van het stuk, en zonder hem begint elk bericht in de stroom met kale tekst. Boven de titel, in dezelfde volgorde als post.ejs. Twee dingen komen hier van post-card en NIET van post.ejs: - De SLUIER. Op de berichtpagina hangt de waarschuwing als banner boven de hele pagina, want daar staat een bericht. In een stroom kan dat niet: de buren rollen gewoon voorbij, dus het beeld moet zijn eigen sluier dragen of het is onderweg al te zien. De afhandelaar zit gedelegeerd op document (shell.ejs), dus hij werkt ook op wat de client later aanschuift. - thumb(). De bron kan het volle bestand zijn en hier staan er meerdere onder elkaar in een stroom die dooraanvult. cover_image_url en cover_video_url komen mee: beide voedingen van readerItems() halen `SELECT p.*` op (routes/posts.js, de pinned- en de gewone feed-query). Nagekeken, want een versmalde lijst zou hier niets opleveren zonder ergens te klagen. %> <% if (post.cover_image_url || post.cover_video_url) { %>
<% if (post.cover_image_url) { %> <%= post.cover_alt || '' %> data-ios-mp4="<%= post.cover_video_url %>"<% } %>> <% } else { %> <% } %> <% if (post.nsfw) { %><%- include('nsfw-veil', { cw: post.content_warning }) %><% } %>
<% } %>

<%= post.title || '' %>

<% if (post.published_at) { %>

<%= formatDateTime(post.published_at) %>

<% } %>
<%- include('post-body', { post: post, access: entry.access, teaser: entry.teaser, content_html: entry.content_html, _base: _b, }) %> <%# Zegt waar je heen gaat, in plaats van te vertrouwen op een tik die niemand ziet. De tik-afhandelaar in mod/read.js is het gemak; dit is de aankondiging. #fediverse is de sectie op de berichtpagina met de ⭐/🔁/💬-tellers en de reacties (post.ejs). Alleen DEZE link springt daarheen: de titel en de tik openen het bericht bovenaan, want die zeggen "lees dit", niet "laat het gesprek zien". Staat de sectie er niet -- AP uit, of een concept -- dan negeert de browser de anker en beland je gewoon bovenaan. %>