Devon/devon.lol
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Display webmentions

Browse source
This commit is contained in:
Devon Campbell 2024-06-20 14:25:29 -04:00
commit 91326c03fc
11 changed files with 314 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/_data/metadata.json Normal file
View file

@ -0,0 +1,14 @@
{
"title": "devon.lol",
"description": "I write essays to no one about video games, technology, the internet, and other things in the world.",
"language": "en-us",
"url": "https://devon.lol/",
"author": {
"name": "Devon Campbell",
"email": "devon@devon.lol",
"mastodon": {
"username": "RadDevon",
"instance": "techhub.social"
}
}
}

7
src/_data/webmentions.js
View file

@ -3,11 +3,10 @@ const EleventyFetch = require("@11ty/eleventy-fetch");
module.exports = async function fetchMentions() {
const url = `https://webmention.io/api/mentions.jf2?domain=devon.lol&token=${process.env.WEBMENTIONSIO_TOKEN}`;
const mentions = await EleventyFetch(url, {
const mentionsResponse = await EleventyFetch(url, {
duration: "1s",
type: "json",
});
console.log('mentions:', mentions);
console.log('mentions.children:', mentions.children);
return mentions.children;
const mentions = mentionsResponse.children;
return mentions;
};

5
src/_includes/article.njk
View file

@ -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>

2
src/_includes/base.njk
View file

@ -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" />

64
src/_includes/webmentions.njk Normal file
View file

@ -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 %}

8
src/feed.njk
View file

@ -2,14 +2,6 @@
permalink: feed.xml
eleventyExcludeFromCollections: true
date: git Last Modified
metadata:
title: devon.lol
description: I write essays to no one about video games, technology, the internet, and other things in the world.
language: en-us
url: https://devon.lol/
author:
name: Devon Campbell
email: devon@devon.lol
---
<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">

2
src/index.md
View file

@ -7,4 +7,6 @@ date: git Last Modified
**Last updated {{ page.date | formatDatetimeForHumans }}**
This site now both sends and receives WebMentions!
The Arc browser scares me. All the AI features and their insistence on referring to users as "members" just makes me feel like they're poised to make changes I couldn't live with. I decided to get ahead of them and [find an alternative browser](/blog/web-browser-review-06-2024).