From ff3182c946763c877f5e6134edfae847c3ff5dbb Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ayo@ayco.io>
Date: Wed, 15 May 2024 21:25:56 +0200
Subject: [PATCH] feat: respect user faces

---
 _includes/head.html            |  1 +
 assets/js/webmention-utils.mjs | 23 ++++++++++-------------
 assets/main.scss               | 17 ++++++++++-------
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/_includes/head.html b/_includes/head.html
index 52403a1..b22f6c7 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -57,6 +57,7 @@
   />
 
   <script type="module">
+    import { minidenticonSvg  } from 'https://cdn.jsdelivr.net/npm/minidenticons@4.2.1/minidenticons.min.js'
     import {
       getMentions,
       renderMentions,
diff --git a/assets/js/webmention-utils.mjs b/assets/js/webmention-utils.mjs
index 7fea49e..1e4da1a 100644
--- a/assets/js/webmention-utils.mjs
+++ b/assets/js/webmention-utils.mjs
@@ -53,18 +53,16 @@ function createRepliesBlock(replies, heading) {
   repliesHeader.innerHTML = heading.replace("{x}", replies.length);
   repliesWrapper.append(repliesHeader);
 
-  const repliesTable = document.createElement("table");
+  const frag = document.createDocumentFragment();
+  const cards = []
   replies.forEach((reply) => {
-    const row = document.createElement("tr");
-    const cell = document.createElement("td");
-    row.append(cell);
     const author = document.createElement("p");
     author.className = "author-wrapper";
-    author.innerHTML = `<a href="${reply.author.url}"><img alt="Avatar for ${
+    author.innerHTML = `<a href="${reply.author.url}"><minidenticon-svg username="${reply.author.url}" alt="Avatar for ${
       reply.author.name
     }" class="reply-photo" src="${
       reply.author.photo
-    }" /></a> <span class="reply-name">${reply.author.name}</span><a href="${
+    }"></minidenticon-svg></a> <span class="reply-name">${reply.author.name}</span><a href="${
       reply.url
     }" class="reply-date">${new Date(
       reply.published
@@ -79,10 +77,9 @@ function createRepliesBlock(replies, heading) {
       card.innerHTML = reply.content.html;
     }
     card.insertBefore(author, card.firstChild);
-    cell.appendChild(card);
-    repliesTable.append(row);
+    frag.appendChild(card);
   });
-  repliesWrapper.append(repliesTable);
+  repliesWrapper.append(frag);
   return repliesWrapper;
 }
 
@@ -102,12 +99,12 @@ function createAvatarBlock(mentions, headingText) {
   avatars.className = "avatar-block";
 
   mentions.forEach((mention) => {
-    const image = document.createElement("img");
-    image.src = mention.author.photo;
-    image.alt = `Avatar for ${mention.author.name}`;
+    const identicon = document.createElement("minidenticon-svg");
+    identicon.setAttribute('username', mention.author.url)
+
     const link = document.createElement("a");
     link.href = mention.author.url;
-    link.append(image);
+    link.append(identicon);
     avatars.append(link);
   });
 
diff --git a/assets/main.scss b/assets/main.scss
index 6fba858..6a85cd6 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -474,10 +474,11 @@ iframe.mastodon-embed {
       width: calc(100% - 1em);
       border-left: 3px solid rgba(34, 34, 34, 0.15);
 
-      img {
+      img, svg {
         margin-left: -0.7em;
         width: 2em;
         height: 2em;
+        background: white;
       }
     }
 
@@ -490,16 +491,18 @@ iframe.mastodon-embed {
     }
 
     .reply-photo:hover,
-    .avatar-block img:hover {
+    .avatar-block img:hover,
+    .avatar-block svg:hover {
       berder-width: 5px;
-      border-color: #bb4a03;
+      border-color: #80ae3c;
     }
 
     .reply-photo,
-    .avatar-block img {
-      border-radius: 50%;
-      border: 3px solid white;
-      float: left;
+    .avatar-block img,
+    .avatar-block svg {
+        border-radius: 50%;
+        border: 3px solid blue;
+        float: left;
     }
 
     .reply-photo {