source: Klonkt/src/views/partials/lees-article.ejs@ f5cf299

<%
// Eén artikel in de meeslepende tijdlijn, met zijn schildwachten.
//
// Dit is precies het stuk dat bij het overscrollen wordt ingeruild, dus alles
// wat de navigatie nodig heeft staat erin: welke buren er zijn, en waar ze
// wonen. De client leest die van data-attributen en hoeft niets te onthouden --
// na een verwisseling klopt de staat vanzelf, want hij komt uit het nieuwe stuk.
//
// De schildwachten staan BINNEN dit blok en niet eromheen: zouden ze buiten
// staan, dan blijven ze na een swap naar het vorige bericht wijzen.
var _b = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
var _newer = (typeof newerPost !== 'undefined' && newerPost) ? newerPost : null;
var _older = (typeof olderPost !== 'undefined' && olderPost) ? olderPost : null;
%>
<article class="lees-article"
         id="lees-article"
         data-slug="<%= post.slug %>"
         data-newer="<%= _newer ? _newer.slug : '' %>"
         data-older="<%= _older ? _older.slug : '' %>"
         data-base="<%= _b %>">

  <%# Schildwacht BOVEN: verschijnt pas als je voorbij de bovenrand trekt.
      Leeg als er niets nieuwers is -- dan hoort er ook niets te gebeuren. %>
  <div class="lees-sentinel lees-sentinel--prev" data-dir="newer" aria-hidden="true"
       <% if (!_newer) { %>hidden<% } %>><span class="lees-cue">⏫</span></div>

  <header class="lees-head">
    <h1 class="lees-title"><%= post.title || '' %></h1>
    <% if (post.published_at) { %>
      <p class="lees-when"><%= formatDateTime(post.published_at) %></p>
    <% } %>
  </header>

  <%- include('post-body', { post: post, access: entry.access, teaser: entry.teaser, _base: _b }) %>

  <%# Schildwacht ONDER. %>
  <div class="lees-sentinel lees-sentinel--next" data-dir="older" aria-hidden="true"
       <% if (!_older) { %>hidden<% } %>><span class="lees-cue">⏬</span></div>
</article>