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

<div class="container cirkel-hero">
  <span class="cirkel-badge" aria-hidden="true">
    <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <defs>
        <marker id="cf-a" viewBox="0 0 10 10" refX="6.5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse"><path d="M1.5 1.5 L8.5 5 L1.5 8.5 Z" fill="currentColor" stroke="none"/></marker>
      </defs>
      <line x1="28.95" y1="43.5" x2="63.05" y2="26.5" stroke-width="2.6" marker-start="url(#cf-a)" marker-end="url(#cf-a)"/>
      <line x1="72" y1="32" x2="72" y2="66" stroke-width="2.6" marker-end="url(#cf-a)"/>
      <line x1="28.8" y1="52.7" x2="63.2" y2="71.3" stroke-width="2.6" marker-end="url(#cf-a)"/>
      <circle cx="20" cy="48" r="7" stroke-width="2.4"/>
      <circle cx="72" cy="22" r="7" stroke-width="2.4"/>
      <circle cx="72" cy="76" r="7" stroke-width="2.4"/>
    </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 %>');background-color:transparent"<% } %>><% 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 { %>
      <%# More than 5: the count pill becomes a button that opens a modal listing every
          member (avatar + name + link). CSS-only via a hidden checkbox — no JS, so it's
          CSP- (no inline handler) and htmx-safe. Checkbox must precede .cirkel-modal so
          the `:checked ~` sibling selector matches. %>
      <input type="checkbox" id="cirkel-more-cb" class="cirkel-more-cb" hidden>
      <label for="cirkel-more-cb" class="cirkel-count cirkel-count-btn" role="button" tabindex="0"><%= t('cfeed.count', { n: sites.length }) %></label>
      <div class="cirkel-modal" role="dialog" aria-modal="true" aria-label="<%= t('cfeed.title') %>">
        <label for="cirkel-more-cb" class="cirkel-modal-backdrop" aria-label="<%= t('cfeed.close') %>"></label>
        <div class="cirkel-modal-card">
          <label for="cirkel-more-cb" class="cirkel-modal-x" aria-label="<%= t('cfeed.close') %>" role="button" tabindex="0">&times;</label>
          <h2 class="cirkel-modal-h"><%= t('cfeed.count', { n: sites.length }) %></h2>
          <ul class="cirkel-modal-list">
            <% sites.forEach(function(s){ %>
              <li>
                <% if (s.url) { %><a class="cirkel-modal-link" href="<%= s.url %>" target="_blank" rel="noopener"><% } else { %><span class="cirkel-modal-link"><% } %>
                  <span class="cirkel-avatar"<% if (s.avatar) { %> style="background-image:url('<%= s.avatar %>');background-color:transparent"<% } %>><% if (!s.avatar) { %><%= (s.name || '?').charAt(0).toUpperCase() %><% } %></span>
                  <span class="cirkel-member-name"><%= s.name %></span>
                  <% if (s.url) { %><span class="cirkel-modal-go" aria-hidden="true">↗</span><% } %>
                <% if (s.url) { %></a><% } else { %></span><% } %>
              </li>
            <% }); %>
          </ul>
        </div>
      </div>
    <% } %>
  <% } %>
</div>

<% if (!posts.length) { %>
  <div class="container">
    <p class="cirkel-empty"><%= t('cfeed.empty') %></p>
  </div>
<% } else { %>

  <%# Same view as the home page: timeline (post-card) + grid (post-tile),
      switched by the view-switcher via body[data-feed-view]. The remote posts
      are shaped to the local post format in circle.js (with external_url,
      so cards link to the source site). %>

  <!-- ===== TIMELINE (standaard) ===== -->
  <div class="container feed-timeline">
    <ul class="post-list feed-timeline-list" id="post-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" id="grid-tiles">
      <% posts.forEach(function(post){ %>
        <%- include('../partials/post-tile', { post: post }) %>
      <% }); %>
    </div>
  </section>

  <% if (typeof hasMore !== 'undefined') { %>
  <div class="container feed-more-wrap">
    <%- include('../partials/load-more', { hasMore: hasMore, nextOffset: nextOffset, moreBase: moreBase, moreTarget: '#post-list', morePath: '/cirkel' }) %>
  </div>
  <% } %>

<% } %>

<style>
.cirkel-hero { text-align: center; max-width: 640px; margin: 2.5rem auto 2rem; }
.cirkel-badge { display: block; width: 100px; height: 100px; margin: 0 auto .7rem; color: var(--accent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 65%, transparent)) drop-shadow(0 0 1px 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-count-btn { cursor: pointer; user-select: none; transition: border-color .15s, color .15s, transform .15s; }
.cirkel-count-btn:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); }
.cirkel-empty { color: var(--ink-muted); text-align: center; margin: 2rem auto; }
.cirkel-empty a { color: var(--accent); }
/* CSS-only "more members" modal (toggled by the hidden checkbox, no JS) */
.cirkel-more-cb { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.cirkel-modal { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: 1rem; }
.cirkel-more-cb:checked ~ .cirkel-modal { display: flex; }
.cirkel-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); cursor: pointer; }
.cirkel-modal-card { position: relative; background: var(--paper); color: var(--ink); border-radius: 18px;
  padding: 1.4rem 1.2rem; width: min(420px, 92vw); max-height: 78vh; overflow-y: auto; text-align: left;
  box-shadow: 0 20px 60px rgba(0,0,0,.32); }
.cirkel-modal-x { position: absolute; top: .55rem; right: .65rem; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.45rem;
  line-height: 1; color: var(--ink-muted); background: var(--paper-2); }
.cirkel-modal-x:hover { color: var(--ink); }
.cirkel-modal-h { font-family: var(--font-display, serif); font-size: 1.3rem; margin: .1rem 0 1rem; text-align: center; }
.cirkel-modal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.cirkel-modal-link { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem; border-radius: 12px;
  text-decoration: none; color: var(--ink); transition: background .15s; }
.cirkel-modal-link:hover { background: var(--paper-2); }
.cirkel-modal-go { margin-left: auto; color: var(--accent); font-weight: 700; }
</style>