Roman Böhm

Use Mastodon as a Comment System

2023-09-23

hugo blogmeta mastodon html javascript

Problem

I wanted to have a comment system for the posts in this blog. Not because I think there’s demand for it, but because I can. 😎

Solution

The first thing which came to my mind was abusing Mastodon’s toot system for my comment system. And of course, I (luckily) wasn’t the first person to have that idea. Daniel Pecos provided both a detailed instructional post as well as webcomponent to embed Mastodon discussion on one’s site.

Going from there was quite easy, fortunately:

Providing the Supporting Scripts

In order to pull in the JavaScript supporting Daniel’s webcomponent, I adjusted my site’s <head> partial:

In layouts/partials/head.html:

...
{{ with .Params.tootId }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.5/purify.min.js" integrity="sha512-uHOKtSfJWScGmyyFr2O2+efpDx2nhwHU2v7MVeptzZoiC7bdF6Ny/CmZhN2AwIK1oCFiVQQ5DA/L9FSzyPNu6Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/js/mastodon-comments.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
{{ end }}
...

mastodon-comments.js is Daniel’s script, which resides in my static/js folder, i.e. it’s not subject to any mangling by the blog engine and will be served just like that, as an asset. I modified it ever so slighty in that I moved the following code from the webcomponent’s constructor into the connectedCallback function, else it wouldn’t work:

this.host = this.getAttribute("host");
this.user = this.getAttribute("user");
this.tootId = this.getAttribute("tootId");

Mind you, I have no idea of webcomponents, this was just the first thing I found when searching the web, and it worked.

Additionally, I made all scripts required for the comment system conditional so that they will only be loaded if the page you’re on has a tootId param in the front matter.

Embedding the Component

layouts/posts/single.html and layouts/til/single.html both received this addition to make the comment section appear between content and footer:

...
{{ .Content }}

{{ with .Params.tootId }}
<mastodon-comments host="{{ site.Params.mastodonHost }}" user="{{ site.Params.mastodonUser }}" tootId="{{ . }}"></mastodon-comments>
{{ end }}

{{ end }}

Again, a conditional include since I only want to provide a comment section where I’ve prepared one (see explanation below). In that case, I’ll add a tootId param to the front matter like mentioned above.

Providing the Configuration

In config.yaml, I then added the values for mastodonHost and mastodonUser:

params:
  ...
  mastodonHost: "mastodon.social"
  mastodonUser: "romanboehm"

How It Works

In case the post in question hasn’t been published yet:

Prepare the post.
Just before publishing, create the accompanying Mastodon toot, and copy its id from the URL.
Provide tootId: "<designated-comment-toot's-id> in the post’s front matter.
Publish the post. (In my case commit and push.)

If I want to enable comments for an existing post:

Create the accompanying Mastodon toot and copy its id from the URL.
Provide tootId: "<designated-comment-toot's-id> in the post’s front matter.
Re-publish the post.