chore: webmention fixes

config/filters.js

@@ -29,6 +29,10 @@ module.exports = {
     if (image && image !== '') return image
     return `${BASE_URL}/assets/img/social-card.jpg`
   },
+  getUserImage: (image) => {
+    if (image && image !== '') return image
+    return `http://localhost:8080/assets/img/media/missing-user.jpg`
+  },
   getPopularPosts: (posts, analytics) => {
     return posts
       .filter((post) => {
@@ -46,6 +50,7 @@ module.exports = {
       'like-of': [],
       'repost-of': [],
       'in-reply-to': [],
+      'mention-of': [],
     }
 
     const hasRequiredFields = (entry) => {
@@ -55,7 +60,7 @@ module.exports = {
 
     const filtered =
       webmentions
-        .filter((entry) => entry['wm-target'].replace(utmPattern, '') === `${BASE_URL}${url}`)
+        .filter((entry) => entry['wm-target'] === `${BASE_URL}${url}`)
         .filter((entry) => allowedTypes.includes(entry['wm-property'])) || []
 
     filtered.forEach((m) => {
@@ -74,6 +79,7 @@ module.exports = {
       }
     })
 
+    // data['in-reply-to'] = [...data['in-reply-to'], ...data['mention-of']]
     data['in-reply-to'].sort((a, b) =>
       a.published > b.published ? 1 : b.published > a.published ? -1 : 0
     )

src/_includes/partials/webmentions/comments.liquid

@@ -4,7 +4,8 @@
     {% for mention in mentions['in-reply-to'] %}
       <div class="border-bottom flex flex-row items-center border-gray-100 pb-4 w-full">
         <a class="text-gray-700 dark:text-gray-200 group flex flex-row space-between items-center" href={{mention.url}}>
-          {% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all ease-in-out duration-300 group-hover:border-pink-500 dark:group-hover:border-pink-500', '56px' %}
+          {% assign photo = mention.author.photo | getUserImage %}
+          {% image photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all ease-in-out duration-300 group-hover:border-pink-500 dark:group-hover:border-pink-500', '56px' %}
           <div class="ml-3">
             <p class="text-sm group-hover:text-pink-500 dark:group-hover:text-pink-500">{{ mention.content.text }}</p>
             <p class="mt-1 text-xs group-hover:text-pink-500 dark:group-hover:text-pink-500">{{ mention.published | isoDateOnly }}</p>