feat: respect user faces

_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,

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);
   });
 

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,15 +491,17 @@ 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 {
+    .avatar-block img,
+    .avatar-block svg {
         border-radius: 50%;
-      border: 3px solid white;
+        border: 3px solid blue;
         float: left;
     }