Display webmentions

src/_includes/article.njk

@@ -22,10 +22,11 @@ layout: base.njk
     {{ content | safe }}
   </div>
   <a class="u-url hidden" href="{{ page.url }}">Permalink</a>
+  {% include 'webmentions.njk' %}
 </article>
 <footer>
-  <p>Talk to me <a href="https://techhub.social/@RadDevon" rel="me">on Mastodon.</a></p>
-  <a href="https://techhub.social/@RadDevon" rel="me"><img src="/images/mastodon-logo.png" alt="Mastodon logo"></a>
+  <p>Talk to me <a href="https://{{ metadata.author.mastodon.instance }}/@{{ metadata.author.mastodon.username }}" rel="me">on Mastodon.</a></p>
+  <a href="https://{{ metadata.author.mastodon.instance }}/@{{ metadata.author.mastodon.username }}" rel="me"><img src="/images/mastodon-logo.png" alt="Mastodon logo"></a>
 
   <a href="mailto:devon@devon.lol" rel="me" class="hidden">devon@devon.lol</a>
 </footer>

src/_includes/base.njk

@@ -16,7 +16,7 @@
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
   <link rel="manifest" href="/site.webmanifest">
 
-  <link rel="me" href="https://techhub.social/@RadDevon" />
+  <link rel="me" href="https://{{ metadata.author.mastodon.instance }}/@{{ metadata.author.mastodon.username }}" />
   <link rel="me" href="https://github.com/raddevon" />
 
   <link rel="webmention" href="https://webmention.io/devon.lol/webmention" />

src/_includes/webmentions.njk

@@ -0,0 +1,64 @@
+{% set pageAbsoluteUrl = page.url | absoluteUrl(metadata.url) %}
+{% set mentions = webmentions | webmentionsByUrl(pageAbsoluteUrl) %}
+{% set mastodonSourcePrefix = r/^https:\/\/brid\.gy\/\w+\/mastodon\// %}
+
+{% if mentions['in-reply-to'] | length %}
+  <h2 class="mention-heading">Replies</h2>
+  <ol class="webmentions-replies">
+    {%- for reply in mentions['in-reply-to'] %}
+      <li class="{% if mastodonSourcePrefix.test(reply['wm-source']) %}from-mastodon{% endif %}">
+        <a rel="noopener" href="{{ reply.author.url }}">
+          <img
+            src="{{ reply.author.photo }}"
+            title="{{ reply.author.name }}"
+            alt="{{ reply.author.name }}'s avatar"
+          >
+        </a>
+        <div class="content">
+          <a href="{{ reply.url }}">
+            <time
+              class="published-datetime"
+              datetime="{{ reply.published }}"
+              aria-label="Published on {{ reply.published | formatDatetimeForHumans }}"
+            >{{ reply.published | formatDatetimeForHumans }}</time>
+          </a>
+          <p>{{ reply.content.html | safe }}</p>
+        </div>
+      </li>
+    {% endfor %}
+  </ol>
+{% endif %}
+
+{% if mentions['repost-of'] | length %}
+  <h2 class="mention-heading">Boosts</h2>
+  <ol class="webmentions-boosts">
+    {%- for boost in mentions['repost-of'] %}
+      <li class="{% if mastodonSourcePrefix.test(boost['wm-source']) %}from-mastodon{% endif %}">
+        <a rel="noopener" href="{{boost.author.url}}">
+          <img
+            src="{{boost.author.photo}}"
+            title="{{boost.author.name}}"
+            alt="{{boost.author.name}}'s avatar"
+          >
+        </a>
+      </li>
+    {% endfor%}
+  </ol>
+{% endif %}
+
+{% if mentions['like-of'] | length %}
+  <h2 class="mention-heading">Likes</h2>
+  <ol class="webmentions-likes">
+    {%- for like in mentions['like-of'] %}
+      <li class="{% if mastodonSourcePrefix.test(like['wm-source']) %}from-mastodon{% endif %}">
+        <a rel="noopener" href="{{like.author.url}}">
+          <img
+            src="{{like.author.photo}}"
+            title="{{like.author.name}}"
+            alt="{{like.author.name}}'s avatar"
+          >
+        </a>
+      </li>
+    {% endfor%}
+  </ol>
+{% endif %}