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

<div class="container cirkel-hero">
  <span class="cirkel-badge" aria-hidden="true">
    <svg viewBox="0 0 1024 1024" fill="none">
      <defs>
        <marker id="cf-arrow" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto"><path d="M0,0 L12,6 L0,12 Z" fill="currentColor"/></marker>
      </defs>
      <circle cx="512" cy="512" r="420" fill="none" stroke="currentColor" stroke-width="10"/>
      <g fill="currentColor">
        <circle cx="300" cy="520" r="24"/>
        <circle cx="500" cy="510" r="28"/>
        <circle cx="670" cy="320" r="24"/>
        <circle cx="720" cy="610" r="24"/>
        <circle cx="400" cy="760" r="24"/>
      </g>
      <g stroke="currentColor" stroke-width="10" fill="none">
        <line x1="330" y1="520" x2="460" y2="510" marker-end="url(#cf-arrow)"/>
        <line x1="520" y1="500" x2="640" y2="350" marker-end="url(#cf-arrow)"/>
        <line x1="530" y1="520" x2="680" y2="600" marker-end="url(#cf-arrow)"/>
        <line x1="690" y1="350" x2="710" y2="580" marker-end="url(#cf-arrow)"/>
        <line x1="320" y1="550" x2="390" y2="720" marker-end="url(#cf-arrow)"/>
        <line x1="420" y1="740" x2="690" y2="620" marker-end="url(#cf-arrow)"/>
        <path d="M610 280 C480 260, 430 360, 460 480" marker-end="url(#cf-arrow)"/>
        <path d="M710 340 C860 360, 860 700, 450 800" marker-end="url(#cf-arrow)"/>
        <path d="M330 600 C480 660, 600 760, 720 650" marker-end="url(#cf-arrow)"/>
      </g>
    </svg>
  </span>
  <h1><%= t('cfeed.title') %></h1>
  <p class="cirkel-sub"><%= t('cfeed.sub') %></p>
  <% if (typeof sites !== 'undefined' && sites && sites.length) { %>
    <% if (sites.length <= 5) { %>
    <div class="cirkel-members">
      <% sites.forEach(function(s){ %>
        <% if (s.url) { %><a class="cirkel-member" href="<%= s.url %>" target="_blank" rel="noopener" title="<%= s.name %>"><% } else { %><span class="cirkel-member" title="<%= s.name %>"><% } %>
          <span class="cirkel-avatar"<% if (s.avatar) { %> style="background-image:url('<%= s.avatar %>')"<% } %>><% if (!s.avatar) { %><%= (s.name || '?').charAt(0).toUpperCase() %><% } %></span>
          <span class="cirkel-member-name"><%= s.name %></span>
        <% if (s.url) { %></a><% } else { %></span><% } %>
      <% }); %>
    </div>
    <% } else { %>
      <%# Meer dan 5: geen chips (zou een muur worden) — alleen het aantal. %>
      <span class="cirkel-count"><%= t('cfeed.count', { n: sites.length }) %></span>
    <% } %>
  <% } %>
</div>

<% if (!posts.length) { %>
  <div class="container">
    <p class="cirkel-empty"><%= t('cfeed.empty') %></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="<%= t('cfeed.grid_view') %>">
    <div class="grid-tiles">
      <% posts.forEach(function(post){ %>
        <%- include('../partials/post-tile', { post: post }) %>
      <% }); %>
    </div>
  </section>

<% } %>

<style>
.cirkel-hero { text-align: center; max-width: 640px; margin: 2.5rem auto 2rem; }
.cirkel-badge { display: block; width: 112px; height: 112px; margin: 0 auto .7rem; color: var(--accent); }
.cirkel-badge svg { width: 100%; height: 100%; }
.cirkel-hero h1 { font-family: var(--font-display, serif); font-size: 2.4rem; margin: 0 0 .3rem; }
.cirkel-sub { color: var(--ink-muted); margin: 0 0 1.25rem; font-size: 1.02rem; }
.cirkel-members { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.cirkel-member { display: inline-flex; align-items: center; gap: .45rem;
  padding: .28rem .8rem .28rem .3rem; border: 1px solid var(--rule); border-radius: 999px;
  text-decoration: none; color: var(--ink); background: var(--paper-2);
  transition: border-color .15s, transform .15s; }
.cirkel-member:hover { border-color: var(--accent); transform: translateY(-1px); }
.cirkel-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background-size: cover; background-position: center; background-color: var(--accent);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .82rem; }
.cirkel-member-name { font-size: .9rem; font-weight: 600; }
.cirkel-count { display: inline-block; color: var(--ink-muted); font-size: .92rem; font-weight: 600;
  padding: .35rem 1rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper-2); }
.cirkel-empty { color: var(--ink-muted); text-align: center; margin: 2rem auto; }
.cirkel-empty a { color: var(--accent); }
</style>