source: Klonkt/src/views/partials/post-tile.ejs@ 55bba23

<%
// Square Instagram-style tile for the .feed-grid view (v9 pattern).
//   - With cover  → background-image, dark gradient overlay reveals title on hover/touch
//   - No cover    → .grid-tile-gradient with the title centered (random hue per tile)
const _tileHue = ((post.id || post.slug || '0').charCodeAt(0) * 7) % 360;
const _isPinned = !!post.pinned;
const _hasCover = !!post.cover_image_url;
const _typeLabel = (post.type && post.type !== 'post') ? post.type : '';
const _src = post.source_name || '';   // bron-site (cirkel-feed: van welke site komt deze post)
const _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
const _external = post.external_url || null;
const _href = _external || (_base + '/' + post.slug);
const _ext = !!_external;
%>
<a class="grid-tile<%= _hasCover ? '' : ' grid-tile-gradient' %><%= _isPinned ? ' is-pinned' : '' %>"
   href="<%= _href %>"
   <% if (_hasCover) { %>style="background-image: url('<%= post.cover_image_url %>'); --tile-hue: <%= _tileHue %>;"<% } else { %>style="--tile-hue: <%= _tileHue %>;"<% } %>
   <% if (_ext) { %>target="_blank" rel="noopener"<% } else { %>hx-get="<%= _href %>?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="<%= _href %>" hx-indicator="#pcms-loading"<% } %>>

  <% if (_typeLabel) { %>
    <span class="grid-tile-type"><%= _typeLabel %></span>
  <% } %>
  <% if (_isPinned) { %>
    <span class="grid-tile-pin"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>Pinned</span>
  <% } %>

  <% if (_hasCover) { %>
    <div class="grid-tile-overlay">
      <strong><%= post.title || '(untitled)' %></strong>
      <% if (_src) { %><span class="grid-tile-overlay-src">van <%= _src %></span><% } %>
    </div>
  <% } else { %>
    <span class="grid-tile-title"><%= post.title || '(untitled)' %></span>
    <% if (_src) { %><span class="grid-tile-gradient-src">van <%= _src %></span><% } %>
  <% } %>
</a>