Fix broken profile images on webmentions (#191)

Author: Copilot

src/_includes/macros.njk

@@ -367,7 +367,7 @@
 			">
 			<div class="webmention__author p-author h-card">
 				{% if c.avatar %}
-					<img class="webmention__author__photo u-photo" src="https://res.cloudinary.com/aarongustafson/image/fetch/c_fill,f_auto,q_auto,w_48,h_48/{{ c.avatar }}" width="48" height="48" alt="" title="{{ c.author }}" loading="lazy">
+					<img class="webmention__author__photo u-photo" src="https://res.cloudinary.com/aarongustafson/image/fetch/c_fill,f_auto,q_auto,w_48,h_48/{{ c.avatar }}" width="48" height="48" alt="" title="{{ c.author }}" loading="lazy" data-responsiver="false">
 				{% endif %}
 				<b class="p-name">{{ c.author }}</b>
 			</div>

src/_includes/partials/post/comment.njk

@@ -5,7 +5,7 @@
 		">
 		<div class="webmention__author p-author h-card">
 			{% if comment.avatar %}
-				<img class="webmention__author__photo u-photo" src="https://res.cloudinary.com/aarongustafson/image/fetch/c_fill,f_auto,q_auto,w_48,h_48/{{ comment.avatar }}" width="48" height="48" alt="" title="{{ comment.author }}" loading="lazy">
+				<img class="webmention__author__photo u-photo" src="https://res.cloudinary.com/aarongustafson/image/fetch/c_fill,f_auto,q_auto,w_48,h_48/{{ comment.avatar }}" width="48" height="48" alt="" title="{{ comment.author }}" loading="lazy" data-responsiver="false">
 			{% endif %}
 			<b class="p-name">{{ comment.author }}</b>
 		</div>

src/_includes/partials/post/linkedface.njk

@@ -1,6 +1,8 @@
 <div class="webmention__author p-author h-card">
   <a class="u-url" href="{{ webmention.author.url }}" rel="nofollow">
-    <img class="webmention__author__photo u-photo" src="https://res.cloudinary.com/aarongustafson/image/fetch/c_fill,f_auto,q_auto,w_48,h_48/{{ webmention.author.photo | replace('http://pbs.twimg.com', 'https://pbs.twimg.com') }}" width="48" height="48" alt="{% if show_name %}{% else %}{{ webmention.author.name }}{% endif %}" title="{{ webmention.author.name }}" loading="lazy">
+    {% if webmention.author.photo %}
+      <img class="webmention__author__photo u-photo" src="https://res.cloudinary.com/aarongustafson/image/fetch/c_fill,f_auto,q_auto,w_48,h_48/{{ webmention.author.photo | urlencode }}" width="48" height="48" alt="{% if show_name %}{% else %}{{ webmention.author.name }}{% endif %}" title="{{ webmention.author.name }}" loading="lazy" data-responsiver="false">
+    {% endif %}
     {% if show_name %}
       <b class="p-name">{{ webmention.author.name }}</b>
     {% endif %}

src/_includes/partials/webmentions/likes.njk

@@ -5,7 +5,7 @@
         <li id="webmention-{{ webmention.id }}" class="webmentions__item webmention webmention--{{ webmention.type }}">
           <div class="webmention__author p-author h-card">
             <a class="u-url" href="{{ webmention.author.url }}">
-              <img class="webmention__author__photo u-photo" src="https://res.cloudinary.com/aarongustafson/image/fetch/c_fill,f_auto,q_auto,w_48,h_48/{{ webmention.author.photo }}" alt="" title="{{ webmention.author.name }}" loading="lazy">
+              <img class="webmention__author__photo u-photo" src="https://res.cloudinary.com/aarongustafson/image/fetch/c_fill,f_auto,q_auto,w_48,h_48/{{ webmention.author.photo | urlencode }}" alt="" title="{{ webmention.author.name }}" loading="lazy" data-responsiver="false">
             </a>
           </div>
         </li>

src/_includes/partials/webmentions/reposts.njk

@@ -5,7 +5,7 @@
         <li id="webmention-{{ webmention.id }}" class="webmentions__item webmention webmention--{{ webmention.type }}">
           <div class="webmention__author p-author h-card">
             <a class="u-url" href="{{ webmention.author.url }}">
-              <img class="webmention__author__photo u-photo" src="https://res.cloudinary.com/aarongustafson/image/fetch/c_fill,f_auto,q_auto,w_48,h_48/{{ webmention.author.photo }}" alt="" title="{{ webmention.author.name }}" loading="lazy">
+              <img class="webmention__author__photo u-photo" src="https://res.cloudinary.com/aarongustafson/image/fetch/c_fill,f_auto,q_auto,w_48,h_48/{{ webmention.author.photo | urlencode }}" alt="" title="{{ webmention.author.name }}" loading="lazy" data-responsiver="false">
             </a>
           </div>
         </li>

src/_javascript/post/WebmentionIO.js

@@ -295,12 +295,17 @@ WebmentionIO.types = {
 			}
 		}
 
-		// Process author photos
+		// Process author photos - wrap in Cloudinary fetch to match server-side rendering
+		var cloudinaryPrefix =
+			"https://res.cloudinary.com/aarongustafson/image/fetch/c_fill,f_auto,q_auto,w_48,h_48/";
 		var authorPhotos = temp.querySelectorAll("[data-mention-author-photo]");
 		for (var k = 0; k < authorPhotos.length; k++) {
 			var photoUrl = authorPhotos[k].getAttribute("data-mention-author-photo");
 			if (photoUrl) {
-				authorPhotos[k].setAttribute("src", photoUrl);
+				authorPhotos[k].setAttribute(
+					"src",
+					cloudinaryPrefix + encodeURIComponent(photoUrl),
+				);
 				authorPhotos[k].removeAttribute("data-mention-author-photo");
 			}
 		}

src/_javascript/post/social-media-avatars.js

@@ -4,7 +4,11 @@
 	"use strict";
 
 	if ("addEventListener" in window && document.getElementById("webmentions")) {
-		window.addEventListener("load", init, false);
+		if (document.readyState === "complete") {
+			init();
+		} else {
+			window.addEventListener("load", init, false);
+		}
 	}
 
 	function logDebug() {