fix: webmention avatar errors + placeholder

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "4.3.2",
+  "version": "4.3.3",
   "description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {

src/_includes/partials/webmentions/comments.liquid

@@ -6,7 +6,11 @@
         <div class="comment__wrapper--interior flex--centered">
           <a href={{mention.url}}>
             <div class="avatar__wrapper flex--centered">
-                {% image mention.author.photo, mention.author.name, 'avatar__wrapper-image' %}
+              <img
+                src="{{ mention.author.photo }}"
+                alt="{{ mention.author.name }}"
+                class="avatar__image"
+                onerror="this.onerror=null; this.src='/assets/img/icons/user.webp'" />
             </div>
           </a>
           <div class="comment">

src/_includes/partials/webmentions/interaction.liquid

@@ -11,7 +11,11 @@
     {% for mention in mentions[type] %}
     <a href={{mention.url}}>
       <div class="avatar__wrapper flex--centered">
-        {% image mention.author.photo, mention.author.name, 'avatar__wrapper-image' %}
+        <img
+          src="{{ mention.author.photo }}"
+          alt="{{ mention.author.name }}"
+          class="avatar__image"
+          onerror="this.onerror=null; this.src='/assets/img/icons/user.webp'" />
       </div>
     </a>
     {% endfor %}

src/assets/styles/widgets/webmentions.css

@@ -90,6 +90,15 @@
 .webmentions .interaction .avatar__wrapper .avatar__wrapper-image > * {
   width: 100%;
   height: 100%;
+}
+
+.webmentions .interaction .avatar__wrapper img {
+  width: 101%;
+  height: 101%;
+}
+
+.webmentions .interaction .avatar__wrapper img,
+.webmentions .interaction .avatar__wrapper .avatar__wrapper-image > * {
   border-radius: var(--rounded-full);
 }