From eed4c382d5bfa092bc8fae10dcd12eb50530cd0b Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Wed, 31 May 2023 21:55:46 +0200
Subject: [PATCH] refactor: reusable avatar block

---
 _layouts/post.html             |   6 +-
 assets/js/webmention-utils.mjs | 122 +++++++++++++--------------------
 2 files changed, 51 insertions(+), 77 deletions(-)

diff --git a/_layouts/post.html b/_layouts/post.html
index 6c58203..cfb5926 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -30,9 +30,6 @@ layout: default
         default: "%b %-d, %Y" %} {{ page.date | date: date_format }}
         </span>
       </time>
-      <span id="page-replies"></span>
-      <span id="page-likes"></span>
-      <span id="page-reposts"></span>
     </div>
     {% if page.image %}
       <img
@@ -84,6 +81,7 @@ layout: default
     </div>
   </div>
 
-  <div class="blog-post__web-mentions"></div>
+  <div class="blog-post__web-mentions">
+  </div>
   <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
 </article>
diff --git a/assets/js/webmention-utils.mjs b/assets/js/webmention-utils.mjs
index feba231..8a529ce 100644
--- a/assets/js/webmention-utils.mjs
+++ b/assets/js/webmention-utils.mjs
@@ -1,85 +1,38 @@
 export function renderMentions(mentions, className) {
   const webMentionsSection = document.querySelector(className);
-  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");
+  mentions = mentions.filter((m) => m["wm-private"] !== true);
+
+  const heading = {
+    "like-of": "👍 {x} Likes",
+    "repost-of": "🔁 {x} Reposts",
+    "bookmark-of": "🔖 {x} Bookmarks",
+    "mention-of": "💬 {x} Mentions",
+    "in-reply-to": "💬 {x} Replies",
+  };
+
+  ["like-of", "repost-of", "bookmark-of", "mention-of"].forEach((type) => {
+    const mentionsOfType = mentions
+      .filter((m) => m.author.name !== "Ayo Ayco")
+      .filter((m) => m["wm-property"] === type);
+
+    if (mentionsOfType.length) {
+      const avatarBlock = createAvatarBlock(mentionsOfType, heading[type]);
+      webMentionsSection.append(avatarBlock);
+    }
+  });
+
   const replies = mentions.filter((m) => m["wm-property"] === "in-reply-to");
-
-  if (likes.length) {
-    // render on meta header
-    document.getElementById("page-likes").innerHTML = `• 👍 ${likes.length}`;
-
-    // render on webmentions section
-    const clearLikes = document.createElement("div");
-    clearLikes.style.clear = "both";
-    const likesWrapper = document.createElement("div");
-    likesWrapper.append(clearLikes);
-    const likesHeader = document.createElement("h2");
-    likesHeader.innerHTML = `👍 ${likes.length} Likes`;
-    likesWrapper.append(likesHeader);
-    const likesAvatars = document.createElement("div");
-    likesAvatars.className = "avatar-block";
-    likes.forEach((like) => {
-      const image = document.createElement("img");
-      image.src = like.author.photo;
-      image.alt = `Avatar for ${like.author.name}`;
-      const link = document.createElement("a");
-      link.href = like.author.url;
-      link.append(image);
-      likesAvatars.append(link);
-    });
-    likesWrapper.append(likesAvatars);
-
-    webMentionsSection.append(likesWrapper);
-  }
-
-  if (reposts.length) {
-    // render on meta header
-    document.getElementById(
-      "page-reposts"
-    ).innerHTML = `• 🔁 ${reposts.length}`;
-
-    // render on webmentions section
-    const repostsWrapper = document.createElement("div");
-    const clearReposts = document.createElement("div");
-    clearReposts.style.clear = "both";
-    repostsWrapper.append(clearReposts);
-    const repostsHeader = document.createElement("h2");
-    repostsHeader.innerHTML = `🔁 ${reposts.length} Reposts`;
-    repostsWrapper.append(repostsHeader);
-
-    const repostsAvatars = document.createElement("div");
-    repostsAvatars.className = "avatar-block";
-    reposts.forEach((repost) => {
-      const image = document.createElement("img");
-      const link = document.createElement("a");
-      link.href = repost.author.url;
-      image.src = repost.author.photo;
-      image.alt = `Avatar for ${repost.author.name}`;
-      link.append(image);
-      repostsAvatars.append(link);
-    });
-    repostsWrapper.append(repostsAvatars);
-
-    webMentionsSection.append(repostsWrapper);
-  }
-
   if (replies.length) {
-    // render on meta header
-    document.getElementById(
-      "page-replies"
-    ).innerHTML = `• 💬 ${replies.length}`;
-
     // render on webmentions section
     const repliesWrapper = document.createElement("div");
     const clearReplies = document.createElement("div");
     clearReplies.style.clear = "both";
     repliesWrapper.append(clearReplies);
-    const repliesHeader = document.createElement("h2");
-    repliesHeader.innerHTML = `💬 ${replies.length} Replies`;
+    const repliesHeader = document.createElement("h3");
+    repliesHeader.innerHTML = heading["in-reply-to"].replace(
+      "{x}",
+      replies.length
+    );
     repliesWrapper.append(repliesHeader);
 
     const repliesTable = document.createElement("table");
@@ -110,6 +63,29 @@ export function renderMentions(mentions, className) {
   }
 }
 
+function createAvatarBlock(mentions, heading) {
+  const clearLikes = document.createElement("div");
+  clearLikes.style.clear = "both";
+  const likesWrapper = document.createElement("div");
+  likesWrapper.append(clearLikes);
+  const likesHeader = document.createElement("h3");
+  likesHeader.innerHTML = heading.replace("{x}", mentions.length);
+  likesWrapper.append(likesHeader);
+  const likesAvatars = document.createElement("div");
+  likesAvatars.className = "avatar-block";
+  mentions.forEach((like) => {
+    const image = document.createElement("img");
+    image.src = like.author.photo;
+    image.alt = `Avatar for ${like.author.name}`;
+    const link = document.createElement("a");
+    link.href = like.author.url;
+    link.append(image);
+    likesAvatars.append(link);
+  });
+  likesWrapper.append(likesAvatars);
+  return likesWrapper;
+}
+
 export async function getMentions(url) {
   let mentions = [];
   let page = 0;