Changeset 3a2c9d3 in Klonkt for src/views/pages


Ignore:
Timestamp:
06/24/2026 12:16:43 PM (3 months ago)
Author:
Robin Genis <roboburr@…>
Branches:
main
Children:
52ea6df
Parents:
55bc7f9
Message:

style(activitypub): match fediverse section to native comment styling

Reuse .comment/.comments-list/.comment-reply markup so inbound replies look
identical to native comments; our reply nests as a comment-reply; reply toggle
is a plain 'Reageer' action (no card/box).

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

File:
1 edited

Legend:

Unmodified
Added
Removed

  • src/views/pages/post.ejs

    r55bc7f9 r3a2c9d3  
    7373
    7474  <!-- Fediverse interactions (inbound replies / likes / boosts via ActivityPub) -->
     75  <!-- Mirrors the native comment markup/classes so it looks identical. -->
    7576  <% if (typeof fediverse !== 'undefined' && fediverse && fediverse.total > 0) { %>
    76     <section class="post-fediverse" id="fediverse">
    77       <h2 class="fedi-heading"><%= t('fedi.heading') %></h2>
     77    <section class="post-fediverse post-comments" id="fediverse">
     78      <h2 class="comments-heading"><%= t('fedi.heading') %></h2>
    7879      <p class="fedi-stats">
    7980        <span title="<%= t('fedi.likes') %>">⭐ <%= fediverse.likeCount %></span>
    … …  
    8283      </p>
    8384      <% if (fediverse.replies.length) { %>
    84         <ul class="fedi-replies">
     85        <ol class="comments-list">
    8586          <% fediverse.replies.forEach(function(r) { %>
    86             <li class="fedi-reply">
    87               <div class="fedi-avatar">
     87            <li class="comment">
     88              <div class="comment-avatar">
    8889                <% if (r.actor_icon) { %><img src="<%= r.actor_icon %>" alt="" loading="lazy">
    89                 <% } else { %><span class="fedi-avatar-fallback"><%= (r.actor_name || '?').charAt(0).toUpperCase() %></span><% } %>
     90                <% } else { %><span><%= (r.actor_name || '?').charAt(0).toUpperCase() %></span><% } %>
    9091              </div>
    91               <div class="fedi-main">
    92                 <div class="fedi-line">
    93                   <a class="fedi-name" href="<%= r.actor_url %>" rel="nofollow noopener" target="_blank"><%= r.actor_name %></a>
     92              <div class="comment-body">
     93                <div class="comment-meta">
     94                  <a class="comment-author" href="<%= r.actor_url %>" rel="nofollow noopener" target="_blank"><%= r.actor_name %></a>
    9495                  <span class="fedi-handle"><%= r.actor_handle %></span>
    95                   <% if (r.published || r.created_at) { %><time class="fedi-time"><%= formatDateTime(r.published || r.created_at) %></time><% } %>
     96                  <% if (r.published || r.created_at) { %><span class="comment-time"><%= formatDateTime(r.published || r.created_at) %></span><% } %>
    9697                </div>
    97                 <div class="fedi-text"><%- r.content %></div>
    98                 <% var mine = (typeof fediverse.outReplies !== 'undefined' ? fediverse.outReplies : []).filter(function(o){ return o.in_reply_to && o.in_reply_to === r.object_uri; }); %>
    99                 <% mine.forEach(function(o){ %>
    100                   <div class="fedi-ours"><span class="fedi-ours-label"><%= t('fedi.you') %></span> <span class="fedi-ours-body"><%- o.content %></span></div>
    101                 <% }); %>
     98                <div class="comment-content"><%- r.content %></div>
     99
    102100                <% if (typeof canManageSite !== 'undefined' && canManageSite) { %>
    103101                  <details class="fedi-replybox">
    104                     <summary><%= t('fedi.reply') %></summary>
    105                     <form method="post" action="<%= _base %>/posts/<%= post.slug %>/fedi-reply">
     102                    <summary class="comment-reply-btn fedi-reply-toggle"><%= t('fedi.reply') %></summary>
     103                    <form method="post" action="<%= _base %>/posts/<%= post.slug %>/fedi-reply" class="comment-reply-form">
    106104                      <input type="hidden" name="interaction_id" value="<%= r.id %>">
    107                       <textarea name="text" rows="2" required placeholder="<%= t('fedi.reply_ph') %>"></textarea>
    108                       <button type="submit" class="btn btn-primary"><%= t('fedi.send') %></button>
     105                      <textarea name="text" rows="3" required placeholder="<%= t('fedi.reply_ph') %>"></textarea>
     106                      <div class="comment-reply-form-actions">
     107                        <button type="submit" class="btn btn-primary"><%= t('fedi.send') %></button>
     108                      </div>
    109109                    </form>
    110110                  </details>
     111                <% } %>
     112
     113                <% var mine = (typeof fediverse.outReplies !== 'undefined' ? fediverse.outReplies : []).filter(function(o){ return o.in_reply_to && o.in_reply_to === r.object_uri; }); %>
     114                <% if (mine.length) { %>
     115                  <ol class="comment-replies">
     116                    <% mine.forEach(function(o){ %>
     117                      <li class="comment comment-reply">
     118                        <div class="comment-avatar"><span><%= t('fedi.you').charAt(0).toUpperCase() %></span></div>
     119                        <div class="comment-body">
     120                          <div class="comment-meta"><span class="comment-author"><%= t('fedi.you') %></span></div>
     121                          <div class="comment-content"><%- o.content %></div>
     122                        </div>
     123                      </li>
     124                    <% }); %>
     125                  </ol>
    111126                <% } %>
    112127              </div>
    113128            </li>
    114129          <% }); %>
    115         </ul>
     130        </ol>
    116131      <% } %>
    117132    </section>
Note: See TracChangeset for help on using the changeset viewer.