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