show webmentions avatars

_includes/head.html

@@ -91,17 +91,52 @@
     if (!ignore.includes(url.pathname)) {
       const mentions = getMentions(url.toString())
         .then((mentions) => {
+          const webMentionsSection = document.querySelector(
+            ".blog-post__web-mentions"
+          );
+          const likes = mentions
+            .filter((m) => m.author.name !== "Ayo Ayco")
+            .filter((m) => m["wm-property"] === "like-of");
+          const reposts = mentions
+            .filter((m) => m.author.name !== "Ayo Ayco")
+            .filter((m) => m["wm-property"] === "repost-of");
           const replies = mentions.filter(
             (m) => m["wm-property"] === "in-reply-to"
           );
+          const clearDiv = document.createElement("div");
+          clearDiv.style.clear = "both";
+
+          if (likes.length || reposts.length || replies.length)
+            webMentionsSection.insertAdjacentHTML = "<h3>Web Mentions</h3>";
+
+          if (likes.length)
+            document.getElementById(
+              "page-likes"
+            ).innerHTML = `👍 ${likes.length}`;
+
+          if (reposts.length)
+            document.getElementById(
+              "page-reposts"
+            ).innerHTML = `🔁 ${reposts.length}`;
+
+          if (likes.length || reposts.length) {
+            const avatars = document.createElement("div");
+            avatars.className = "avatar-block";
+            [...reposts, ...likes].forEach((mention) => {
+              const image = document.createElement("img");
+              image.src = mention.author.photo;
+              image.alt = `Avatar for ${mention.author.name}`;
+              avatars.append(image);
+            });
+            avatars.append(clearDiv);
+            webMentionsSection.append(avatars);
+          }
+
           if (replies.length) {
             // render to post header meta
-            const repliesSection = document.querySelector(
-              ".blog-post__replies"
-            );
             document.getElementById(
               "page-replies"
-            ).innerHTML = `• 💬 ${replies.length}`;
+            ).innerHTML = `💬 ${replies.length}`;
 
             // render to replies section
             const repliesTable = document.createElement("table");
@@ -120,38 +155,30 @@
               }</span><a href="${reply.url}" class="reply-date">${new Date(
                 reply.published
               ).toLocaleDateString()}</a><div class="clear-both"></div>`;
-              const replyBlock = document.createElement("div");
+              const card = document.createElement("div");
-              replyBlock.className = "reply-block";
+              card.className = "reply-card";
-              replyBlock.innerHTML = reply.content.html;
+              card.innerHTML = reply.content.html;
-              replyBlock.insertBefore(author, replyBlock.firstChild);
+              card.insertBefore(author, card.firstChild);
-              cell.appendChild(replyBlock);
+              cell.appendChild(card);
               repliesTable.append(row);
             });
+            repliesTable.style.display = "none";
+            const button = document.createElement("button");
+            const text = `Show ${replies.length} replies`;
+            button.innerHTML = text;
+            button.onclick = () => {
+              if (repliesTable.style.display === "none") {
+                repliesTable.style.display = "block";
+                button.innerHTML = "Hide replies";
+              } else {
+                repliesTable.style.display = "none";
+                button.innerHTML = text;
+              }
+            };
 
-            repliesSection.innerHTML = `<h2>Web Mentions</h2><p>Replies across{% if page.fedi-url %}
+            webMentionsSection.append(button);
-              <a href="{{page.fedi-url}}">
+            webMentionsSection.append(repliesTable);
-            {% endif %}
-              the Fediverse
-            {% if page.fedi-url %}
-              </a>
-            {% endif %} and the Web...</p>`;
-
-            repliesSection.append(repliesTable);
           }
-
-          const likes = mentions.filter((m) => m["wm-property"] === "like-of");
-          if (likes.length)
-            document.getElementById(
-              "page-likes"
-            ).innerHTML = `• 👍 ${likes.length}`;
-
-          const reposts = mentions.filter(
-            (m) => m["wm-property"] === "repost-of"
-          );
-          if (reposts.length)
-            document.getElementById(
-              "page-reposts"
-            ).innerHTML = `• 🔁 ${reposts.length}`;
         })
         .catch((err) => console.log("err", err));
     }

_layouts/post.html

@@ -30,9 +30,6 @@ layout: default
         default: "%b %-d, %Y" %} {{ page.date | date: date_format }}
         </span>
       </time>
-      <span class="blog-post__header__meta__engagement" id="page-replies"></span>
-      <span  class="blog-post__header__meta__engagement" id="page-likes"></span>
-      <span  class="blog-post__header__meta__engagement" id="page-reposts"></span>
     </div>
     {% if page.image %}
       <img
@@ -84,6 +81,10 @@ layout: default
     </div>
   </div>
 
-  <div class="blog-post__replies"></div>
+  <div class="blog-post__web-mentions">
+    <span class="blog-post__header__meta__engagement" id="page-replies"></span>
+    <span  class="blog-post__header__meta__engagement" id="page-likes"></span>
+    <span  class="blog-post__header__meta__engagement" id="page-reposts"></span>
+  </div>
   <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
 </article>

assets/main.scss

@@ -435,10 +435,28 @@ table.image caption {
         "Open Sans", "Helvetica Neue", sans-serif !important;
     }
   }
-  &__replies {
+  &__web-mentions {
     margin: 2em 0;
     max-width: fit-content;
-    .reply-block {
+    text-align: center;
+
+    .avatar-block {
+      display: block;
+      margin: 1em auto;
+      padding: 0 1em;
+      max-width: fit-content;
+      img {
+        width: 2em;
+        height: 2em;
+        border-radius: 50%;
+        border: 1px solid #80ae3c;
+        margin-left: -0.7em;
+        float: left;
+      }
+    }
+
+    .reply-card {
+      max-width: fit-content;
       display: block;
       margin: 1em 0;
       padding: 0 1em;