Comments Powered by Mastodon

This blog now uses Carl Schwan’s great idea (and code) to add a comment section to this (static) website. The whole thing works by using a Mastodon/Fediverse post as an “anchor” for a comment thread. All replies to that Mastodon post are then visible as comments for the respective blog post.

Previously, I experimented with Isso as a comment system, which is also great, but requires me to host a server myself.

I basically used Carl’s code verbatim with some minor modifications. Possibly the largest modification is that I use an IntersectionObserver object that listens for the “Comments” headline becoming visible and then automatically loads the comments, instead of needing to click a button. My JavaScript is horrible, so the code is probably not very good, but if anyone wants to mimic this, this is how it works for me:

 1let intersectOptions = {
 2	root: null,
 3	rootMargin: "0px",
 4	threshold: 1.0,
 5};
 6
 7const intersectCallback = (entries) => {
 8	entries.forEach((entry) => {
 9		if (entry.isIntersecting) {
10			loadComments();
11		}
12	});
13};
14
15let observer = new IntersectionObserver(intersectCallback, intersectOptions);
16observer.observe(document.getElementById("comment-header"));

(Where comment-header is the id of the respective h2 element, and loadComments() is the function which is the button callback in Carl’s implementation.)

Carl published his code under CC-BY-SA 4.0, so I of course also release my adapted version under CC-BY-SA 4.0.

I like this solution a lot, the only downside I see is that publishing an article is a three-step process now: Publish the article, post about it on Mastodon, modify the article to include the Mastodon post id, and re-publish the article.