style: avatars and web mentions

_includes/head.html

@@ -103,42 +103,77 @@
           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)
+          if (likes.length) {
-            webMentionsSection.insertAdjacentHTML = "<h3>Web Mentions</h3>";
+            // render on meta header
-
-          if (likes.length)
             document.getElementById(
               "page-likes"
-            ).innerHTML = `👍 ${likes.length}`;
+            ).innerHTML = `• 👍 ${likes.length} Likes`;
 
-          if (reposts.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}`;
+              likesAvatars.append(image);
+            });
+            likesWrapper.append(likesAvatars);
+
+            webMentionsSection.append(likesWrapper);
+          }
+
+          if (reposts.length) {
+            // render on meta header
             document.getElementById(
               "page-reposts"
-            ).innerHTML = `🔁 ${reposts.length}`;
+            ).innerHTML = `• 🔁 ${reposts.length} Reposts`;
 
-          if (likes.length || reposts.length) {
+            // render on webmentions section
-            const avatars = document.createElement("div");
+            const repostsWrapper = document.createElement("div");
-            avatars.className = "avatar-block";
+            const clearReposts = document.createElement("div");
-            [...reposts, ...likes].forEach((mention) => {
+            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");
-              image.src = mention.author.photo;
+              image.src = repost.author.photo;
-              image.alt = `Avatar for ${mention.author.name}`;
+              image.alt = `Avatar for ${repost.author.name}`;
-              avatars.append(image);
+              repostsAvatars.append(image);
             });
-            avatars.append(clearDiv);
+            repostsWrapper.append(repostsAvatars);
-            webMentionsSection.append(avatars);
+
+            webMentionsSection.append(repostsWrapper);
           }
 
           if (replies.length) {
-            // render to post header meta
+            // render on meta header
             document.getElementById(
               "page-replies"
-            ).innerHTML = `💬 ${replies.length}`;
+            ).innerHTML = `• 💬 ${replies.length} Replies`;
+
+            // 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`;
+            repliesWrapper.append(repliesHeader);
 
-            // render to replies section
             const repliesTable = document.createElement("table");
             replies.forEach((reply) => {
               const row = document.createElement("tr");
@@ -162,22 +197,8 @@
               cell.appendChild(card);
               repliesTable.append(row);
             });
-            repliesTable.style.display = "none";
+            repliesWrapper.append(repliesTable);
-            const button = document.createElement("button");
+            webMentionsSection.append(repliesWrapper);
-            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;
-              }
-            };
-
-            webMentionsSection.append(button);
-            webMentionsSection.append(repliesTable);
           }
         })
         .catch((err) => console.log("err", err));

_layouts/post.html

@@ -30,6 +30,9 @@ 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
@@ -81,10 +84,6 @@ layout: default
     </div>
   </div>
 
-  <div class="blog-post__web-mentions">
+  <div class="blog-post__web-mentions"></div>
-    <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

@@ -438,20 +438,16 @@ table.image caption {
   &__web-mentions {
     margin: 2em 0;
     max-width: fit-content;
-    text-align: center;
 
     .avatar-block {
-      display: block;
+      display: inline-block;
-      margin: 1em auto;
+      margin-bottom: 1.5em;
-      padding: 0 1em;
+      padding-left: 1.5em;
       max-width: fit-content;
+      border-left: 3px solid rgba(34, 34, 34, 0.15);
+
       img {
-        width: 2em;
+        margin-left: -1em;
-        height: 2em;
-        border-radius: 50%;
-        border: 1px solid #80ae3c;
-        margin-left: -0.7em;
-        float: left;
       }
     }
 
@@ -463,10 +459,12 @@ table.image caption {
       border-left: 3px solid rgba(34, 34, 34, 0.15);
     }
 
-    .reply-photo {
+    .reply-photo,
-      width: 2em;
+    .avatar-block img {
-      height: 2em;
+      width: 3em;
+      height: 3em;
       border-radius: 50%;
+      border: 3px solid white;
       float: left;
     }