| 1 | <%
|
|---|
| 2 | // EƩn bericht in de leesstroom.
|
|---|
| 3 | //
|
|---|
| 4 | // Dit is het stuk dat de client AANVULT: bij de onderrand komt de oudere buur
|
|---|
| 5 | // eronder, bij de bovenrand de nieuwere erboven. Geen sprongen, geen
|
|---|
| 6 | // scrollpositie die stiekem verzet wordt -- de stroom groeit gewoon in de
|
|---|
| 7 | // richting waarin je leest, en de browser snapt naar de grenzen.
|
|---|
| 8 | //
|
|---|
| 9 | // Elk artikel draagt zijn eigen buren, dus de client hoeft niets te onthouden:
|
|---|
| 10 | // wat er nog te halen valt staat op het stuk dat er al is.
|
|---|
| 11 | var _b = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
|
|---|
| 12 | var _newer = (typeof newerPost !== 'undefined' && newerPost) ? newerPost : null;
|
|---|
| 13 | var _older = (typeof olderPost !== 'undefined' && olderPost) ? olderPost : null;
|
|---|
| 14 | %>
|
|---|
| 15 | <article class="read-post"
|
|---|
| 16 | data-slug="<%= post.slug %>"
|
|---|
| 17 | data-newer="<%= _newer ? _newer.slug : '' %>"
|
|---|
| 18 | data-older="<%= _older ? _older.slug : '' %>"
|
|---|
| 19 | data-base="<%= _b %>"
|
|---|
| 20 | data-title="<%= post.title || '' %>"
|
|---|
| 21 | aria-label="<%= post.title || '' %>">
|
|---|
| 22 | <%# De titel is een echte link naar het bericht zelf. De leesstroom toont de
|
|---|
| 23 | TEKST, maar reacties, waarderingen en boosts staan op de berichtpagina --
|
|---|
| 24 | en een stroom waar je niet uit kunt naar het gesprek is een doodlopende weg.
|
|---|
| 25 | Een <a> en niet alleen een tik-afhandelaar: dat werkt ook met een
|
|---|
| 26 | toetsenbord, met een schermlezer, en met cmd-klik. %>
|
|---|
| 27 | <header class="read-head">
|
|---|
| 28 | <h1 class="read-title"><a href="<%= _b %>/<%= post.slug %>"><%= post.title || '' %></a></h1>
|
|---|
| 29 | <% if (post.published_at) { %><p class="read-when"><%= formatDateTime(post.published_at) %></p><% } %>
|
|---|
| 30 | </header>
|
|---|
| 31 |
|
|---|
| 32 | <%- include('post-body', {
|
|---|
| 33 | post: post, access: entry.access, teaser: entry.teaser,
|
|---|
| 34 | content_html: entry.content_html, _base: _b,
|
|---|
| 35 | }) %>
|
|---|
| 36 |
|
|---|
| 37 | <%# Zegt waar je heen gaat, in plaats van te vertrouwen op een tik die niemand
|
|---|
| 38 | ziet. De tik-afhandelaar in mod/read.js is het gemak; dit is de aankondiging.
|
|---|
| 39 |
|
|---|
| 40 | #fediverse is de sectie op de berichtpagina met de ā/š/š¬-tellers en de
|
|---|
| 41 | reacties (post.ejs). Alleen DEZE link springt daarheen: de titel en de tik
|
|---|
| 42 | openen het bericht bovenaan, want die zeggen "lees dit", niet "laat het
|
|---|
| 43 | gesprek zien". Staat de sectie er niet -- AP uit, of een concept -- dan
|
|---|
| 44 | negeert de browser de anker en beland je gewoon bovenaan. %>
|
|---|
| 45 | <footer class="read-foot">
|
|---|
| 46 | <a class="read-open" href="<%= _b %>/<%= post.slug %>#fediverse"><%= t('read.open') %> →</a>
|
|---|
| 47 | </footer>
|
|---|
| 48 | </article>
|
|---|