From 2b6e9b23c256624ac6200f19e750a3504b126a9b Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Sat, 6 Jan 2024 08:47:10 -0800
Subject: [PATCH] fix: webmention avatar errors + placeholder

---
 package.json                                      |   2 +-
 .../partials/webmentions/comments.liquid          |   6 +++++-
 .../partials/webmentions/interaction.liquid       |   6 +++++-
 src/assets/img/icons/user.webp                    | Bin 0 -> 610 bytes
 src/assets/styles/widgets/webmentions.css         |   9 +++++++++
 5 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/img/icons/user.webp

diff --git a/package.json b/package.json
index fe1714d7..7b1f7690 100644
--- a/package.json
+++ b/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": {
diff --git a/src/_includes/partials/webmentions/comments.liquid b/src/_includes/partials/webmentions/comments.liquid
index c89fa8c2..e0e6f506 100644
--- a/src/_includes/partials/webmentions/comments.liquid
+++ b/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">
diff --git a/src/_includes/partials/webmentions/interaction.liquid b/src/_includes/partials/webmentions/interaction.liquid
index 12d7a833..56bbd843 100644
--- a/src/_includes/partials/webmentions/interaction.liquid
+++ b/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 %}
diff --git a/src/assets/img/icons/user.webp b/src/assets/img/icons/user.webp
new file mode 100644
index 0000000000000000000000000000000000000000..325bab2ddb8221a185a4fab5f72ac42ccb4910b6
GIT binary patch
literal 610
zcmV-o0-gO*Nk&Fm0ssJ4MM6+kP&gn?0ssII69An7Du4ih06v{cpG!D3ip3fLECk|O
zKm~Z;_MWbslW73^e-n!8?=Zj)13w31&1VDYPhbv%U$;KNqv{J!Pm_7y`wT)-CN1I{
zWvFto@}Zfo%b)XPEYZoQ*Z&v;_-?gHut(S69VTwswfx0?pJq4JU(zV@70z!Uae5Ci
zi@Z<sgQBxmOgp)dqqpPQsIi0-&{Ms_<JfX^e%~+v0RH%S03A$)Y{}71LlZIp1b6K%
z=im$rF<_LLQeML+N4tk*@r%n++HA!#{Pw9r3)c#jn-Hx3g&=D3eEmV0s+UL=PooCN
zdg+WlgdwH}GGw21ai+xTnj9liu*fto@1R$B+aBq$o#cB{UZj-wEh6Ep+FJrEc`Lc;
zj$cPmAxnV&#%TX5Z5c=E0bxvXSu&81&;>FulO_bpU3fU@6Vfo9h$UT*T@R^;8NE3B
zYuj3+LP>l<;4VH*tB)#Et1=?>Zyn!DN8;=sh(2!l?SUAfRg>>?%e~Qp{Ufjfyz>K9
z^~+Z~4HL&tq#r?#zm#(;-QKDZu0zjBH}4*gxCB^dWqT)x$PwJ8=JIJ3zshBK%ylso
zsKntE0cm&DouNbhZ7!M}m+IDJol^|73*VLAc-dmop)MlBX3DKz0AJ!`&BDzyFW;|j
zS<l~fOC^c5=zL}Ym=+wYoKT<Ixvj-u<G2BnT0OihY8om4a=x06%G*Vl&#`{%hXMP?
wDI5@sbx>m}m;;Box+w&;!R_^zp!e(*go*CTb1HHOJ{GevGO5^vBG3Q;058BHS^xk5

literal 0
HcmV?d00001

diff --git a/src/assets/styles/widgets/webmentions.css b/src/assets/styles/widgets/webmentions.css
index d8f593fa..1752b993 100644
--- a/src/assets/styles/widgets/webmentions.css
+++ b/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);
 }