From fa70cc0d9c2101fdca1577cab778fd999b60affb Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Wed, 31 May 2023 22:07:50 +0200
Subject: [PATCH] refactor: avatar block

---
 _includes/head.html            | 15 +++++++-----
 assets/js/webmention-utils.mjs | 42 +++++++++++++++++++++-------------
 2 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/_includes/head.html b/_includes/head.html
index 4e6083a..3b880e9 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -74,8 +74,12 @@
   />
 
   <script type="module">
-    import * as webmentionUtils from "/assets/js/webmention-utils.mjs";
-    const ignore = [
+    import {
+      getMentions,
+      renderMentions,
+    } from "/assets/js/webmention-utils.mjs";
+
+    const ignorePaths = [
       "/",
       "/categories/",
       "/about/",
@@ -89,11 +93,10 @@
     const url = new URL(
       document.URL.replace("http://localhost:4000", "https://ayos.blog")
     );
-    if (!ignore.includes(url.pathname)) {
-      const mentions = webmentionUtils
-        .getMentions(url.toString())
+    if (!ignorePaths.includes(url.pathname)) {
+      const mentions = getMentions(url.toString())
         .then((mentions) => {
-          webmentionUtils.renderMentions(mentions, ".blog-post__web-mentions");
+          renderMentions(mentions, ".blog-post__web-mentions");
         })
         .catch((err) => console.log("err", err));
     }
diff --git a/assets/js/webmention-utils.mjs b/assets/js/webmention-utils.mjs
index 8a529ce..e1f41da 100644
--- a/assets/js/webmention-utils.mjs
+++ b/assets/js/webmention-utils.mjs
@@ -2,6 +2,10 @@ export function renderMentions(mentions, className) {
   const webMentionsSection = document.querySelector(className);
   mentions = mentions.filter((m) => m["wm-private"] !== true);
 
+  if (mentions.length)
+    webMentionsSection.innerHTML =
+      "<h2>Mentions Across the World Wide Web</h2>";
+
   const heading = {
     "like-of": "👍 {x} Likes",
     "repost-of": "🔁 {x} Reposts",
@@ -64,26 +68,32 @@ 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 clearDiv = document.createElement("div");
+  clearDiv.style.clear = "both";
+
+  const avatarBlock = document.createElement("div");
+  avatarBlock.append(clearDiv);
+
+  const heading = document.createElement("h3");
+  heading.innerHTML = heading.replace("{x}", mentions.length);
+  avatarBlock.append(heading);
+
+  const avatars = document.createElement("div");
+  avatars.className = "avatar-block";
+
+  mentions.forEach((mention) => {
     const image = document.createElement("img");
-    image.src = like.author.photo;
-    image.alt = `Avatar for ${like.author.name}`;
+    image.src = mention.author.photo;
+    image.alt = `Avatar for ${mention.author.name}`;
     const link = document.createElement("a");
-    link.href = like.author.url;
+    link.href = mention.author.url;
     link.append(image);
-    likesAvatars.append(link);
+    avatars.append(link);
   });
-  likesWrapper.append(likesAvatars);
-  return likesWrapper;
+
+  avatarBlock.append(avatars);
+
+  return avatarBlock;
 }
 
 export async function getMentions(url) {