chore: merge in comment mentions as webmention replies; show some mention links

config/filters.js

@@ -46,11 +46,18 @@ module.exports = {
       'like-of': [],
       'repost-of': [],
       'in-reply-to': [],
+      'mention-of': [],
+      'link-to': [],
     }
 
-    const hasRequiredFields = (entry) => {
+    const hasRequiredReplyFields = (entry) => {
       const { author, published, content } = entry
-      return author.name && published && content
+      return author.name && author.photo && published && content
+    }
+
+    const hasRequiredMentionFields = (entry) => {
+      const { name, url } = entry
+      return name && url
     }
 
     const filtered =
@@ -61,19 +68,22 @@ module.exports = {
     filtered.forEach((m) => {
       if (data[m['wm-property']]) {
         const isReply = m['wm-property'] === 'in-reply-to'
-        const isValidReply = isReply && hasRequiredFields(m)
-        if (isReply) {
+        const isMention = m['wm-property'] === 'mention-of'
+        const isValidReply = (isReply || isMention) && hasRequiredReplyFields(m)
+        if (isReply || isMention) {
           if (isValidReply) {
             m.sanitized = sanitizeHTML(m.content.html)
             data[m['wm-property']].unshift(m)
           }
+
+          if (isMention && hasRequiredMentionFields(m)) data['link-to'].push(m)
           return
         }
-
         data[m['wm-property']].unshift(m)
       }
     })
 
+    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

@@ -1,6 +1,6 @@
 {% if mentions['in-reply-to'].size > 0 %}
   <h2 class="text-lg md:text-xl font-black leading-tight dark:text-gray-200">Comments</h2>
-  <div class="mt-4 flex flex-col items-center not-prose">
+  <div class="mt-4 mb-4 flex flex-col items-center not-prose">
     {% 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}}>

src/_includes/partials/webmentions/container.liquid

@@ -4,5 +4,6 @@
     {% render "partials/webmentions/interaction.liquid", mentions: mentions, type: 'repost-of' %}
     {% render "partials/webmentions/interaction.liquid", mentions: mentions, type: 'like-of' %}
     {% render "partials/webmentions/comments.liquid", mentions: mentions %}
+    {% render "partials/webmentions/links.liquid", mentions: mentions %}
   </div>
 {% endif %}

src/_includes/partials/webmentions/links.liquid

@@ -0,0 +1,14 @@
+{% if mentions['link-to'].size > 0 %}
+  <h2 class="text-lg md:text-xl font-black leading-tight dark:text-gray-200">Links</h2>
+  <div class="mt-2.5 flex flex-col not-prose">
+    <ul class="list-inside list-disc pl-5 md:pl-10">
+      {% for mention in mentions['link-to'] %}
+        <li class="mt-1.5 mb-2">
+          <a href="{{ mention.url }}" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300">
+            {{ mention.name }}
+          </a>
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+{% endif %}