source: Klonkt/src/views/pages/circle-feed.ejs@ b960185

<div class="container cirkel-head">
  <h1>Cirkel</h1>
  <p class="cirkel-sub">Wat er speelt bij de andere sites in mijn cirkel.</p>
</div>

<% if (!posts.length) { %>
  <div class="container">
    <p class="cirkel-empty">Nog niets in je cirkel. Voeg sites toe via
      <a href="/admin/circle">Beheer &rsaquo; Cirkel</a> en ververs ze.</p>
  </div>
<% } else { %>

  <%# Dezelfde view als de hoofdpagina: timeline (post-card) + grid (post-tile),
      gewisseld door de view-switcher via body[data-feed-view]. De remote-posts
      zijn in circle.js naar het lokale post-shape gevormd (met external_url,
      zodat de kaarten naar de bron-site linken). %>

  <!-- ===== TIMELINE (standaard) ===== -->
  <div class="container feed-timeline">
    <ul class="post-list feed-timeline-list">
      <% posts.forEach(function(post){ %>
        <%- include('../partials/post-card', { post: post }) %>
      <% }); %>
    </ul>
  </div>

  <!-- ===== GRID (body[data-feed-view="grid"]) ===== -->
  <section class="feed-grid container" aria-label="Grid-weergave">
    <div class="grid-tiles">
      <% posts.forEach(function(post){ %>
        <%- include('../partials/post-tile', { post: post }) %>
      <% }); %>
    </div>
  </section>

<% } %>

<style>
.cirkel-head { margin-top: 2rem; }
.cirkel-head h1 { font-family: var(--font-display, serif); font-size: 2rem; margin: 0 0 .25rem; }
.cirkel-sub { color: var(--ink-muted); margin: 0 0 1.5rem; }
.cirkel-empty { color: var(--ink-muted); }
.cirkel-empty a { color: var(--accent); }
</style>