Changeset aadb11e in Klonkt for src/views/pages

Timestamp:

06/24/2026 05:31:51 PM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

b2c3699

Parents:

48ca5fc

Message:

Fediverse UI: one ⭐ like, transparent circle logos, accent-following Klonkt gradient

• Merge the duplicate ⭐ like: drop the post-header like-button; the 'From the fediverse' section now always shows and its ⭐ is the clickable like (with count).
• Circle-feed avatar: transparent background behind a logo image (accent stays only for the letter fallback) — fixes the accent showing through transparent logos.
• Klonkt palette now uses the generic accent glow so its background gradient follows the chosen accent (dropped the hard-coded navy override). style.css?v=47.

Co-Authored-By: Claude <noreply@…>

Location:

src/views/pages

Files:

• circle-feed.ejs (modified) (1 diff)
• post.ejs (modified) (2 diffs)

src/views/pages/circle-feed.ejs

@@ -20 +20 @@
       <% 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-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><% } %>

src/views/pages/post.ejs

@@ -31 +31 @@
       <% } %>
     </div>
-    <% if (post.status === 'published') { %>
-      <div class="post-like-row">
-        <%- include('../partials/like-button', { post: post, noteUri: (typeof ogOrigin !== 'undefined' && ogOrigin ? ogOrigin : '') + (typeof _base !== 'undefined' && _base ? _base : '') + '/' + post.slug, fediLikeCount: (typeof fediverse !== 'undefined' && fediverse ? fediverse.likeCount : 0), fediPh: t('fedi.remote_ph') }) %>
-      </div>
-    <% } %>
   </header>
 
@@ -72 +67 @@
   <% } %>
 
-  <!-- Fediverse interactions (threaded: inbound replies/likes/boosts + our replies) -->
-  <% if (typeof fediverse !== 'undefined' && fediverse && fediverse.total > 0) { %>
+  <!-- Fediverse interactions — single place: ⭐ like (clickable) + 🔁/💬 counts + reply -->
+  <% var _postAbsUrl = (typeof ogOrigin !== 'undefined' && ogOrigin ? ogOrigin : '') + (typeof _base !== 'undefined' && _base ? _base : '') + '/' + post.slug; %>
+  <% var _fedi = (typeof fediverse !== 'undefined' && fediverse) ? fediverse : { thread: [], likeCount: 0, announceCount: 0 }; %>
+  <% if (post.status === 'published') { %>
     <section class="post-fediverse post-comments" id="fediverse">
       <h2 class="comments-heading"><%= t('fedi.heading') %></h2>
       <p class="fedi-stats">
-        <span title="<%= t('fedi.likes') %>">⭐ <%= fediverse.likeCount %></span>
-        <span title="<%= t('fedi.boosts') %>">🔁 <%= fediverse.announceCount %></span>
-        <span title="<%= t('fedi.replies') %>">💬 <%= (fediverse.thread || []).length %></span>
+        <button type="button" class="fedi-stat-btn fedi-remote-reply-btn" data-fedi-uri="<%= _postAbsUrl %>" data-fedi-ph="<%= t('fedi.remote_ph') %>" title="<%= t('like.fedi_title') %>">⭐ <%= _fedi.likeCount %></button>
+        <span title="<%= t('fedi.boosts') %>">🔁 <%= _fedi.announceCount %></span>
+        <span title="<%= t('fedi.replies') %>">💬 <%= (_fedi.thread || []).length %></span>
       </p>
-      <% if (fediverse.thread && fediverse.thread.length) { %>
+      <% if (_fedi.thread && _fedi.thread.length) { %>
         <ol class="comments-list">
-          <% fediverse.thread.forEach(function(n){ %>
+          <% _fedi.thread.forEach(function(n){ %>
             <li class="comment"><%- include('../partials/fedi-node', { n: n, t: t, canManageSite: (typeof canManageSite !== 'undefined' ? canManageSite : false), _base: _base, siteAvatar: (typeof siteAvatar !== 'undefined' ? siteAvatar : null), formatDateTime: formatDateTime }) %></li>
           <% }); %>
         </ol>
       <% } %>
+      <div class="post-fediverse-cta">
+        <button type="button" class="btn fedi-remote-reply-btn" data-fedi-uri="<%= _postAbsUrl %>" data-fedi-ph="<%= t('fedi.remote_ph') %>">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
+          <%= t('fedi.remote_reply') %>
+        </button>
+      </div>
     </section>
   <% } %>
-
-  <!-- Reply via the fediverse (remote interaction: bounces to the visitor's own server) -->
-  <% var _postAbsUrl = (typeof ogOrigin !== 'undefined' && ogOrigin ? ogOrigin : '') + (typeof _base !== 'undefined' && _base ? _base : '') + '/' + post.slug; %>
-  <div class="post-fediverse-cta">
-    <button type="button" class="btn fedi-remote-reply-btn" data-fedi-uri="<%= _postAbsUrl %>" data-fedi-ph="<%= t('fedi.remote_ph') %>">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
-      <%= t('fedi.remote_reply') %>
-    </button>
-  </div>
   <script>
   (function(){