My unsophisticated blog commenting system using Mastodon
Deciding whether to enable comments on my blog posts has been challenging due to a low genuine comment-to-spam ratio. Considering this is a static website built with Quarto, I explored native commenting solutions like Giscus and Utterance, which integrate with the site’s GitHub repository. However, this requires a GitHub account, potentially alienating non-technical visitors. As an alternative, I can use Disqus, a third-party application. However, ethically, it would require me to declare its usage in the site’s privacy policy as it might track users. I have not employed user tracking or analytics on this website.
Consequently, I’ve opted for Mastodon as a comment aggregator. My practice of promoting blog posts on Mastodon, where my content already sparks discussions, led me to leverage this platform for comments. While elaborate JavaScript solutions exist to fetch and display comments from Mastodon under blog posts, their complexity deterred me. Instead, I’ve adopted a simpler approach: after publishing a post, I’ll share it on Mastodon, then update the blog post with a link to the Mastodon discussion. This method, foregoing JavaScript for direct links, simplifies engagement while encouraging reader interaction with the content. Below are the steps that I followed.
In Quarto, and I am sure in other static site generators (SSG), the variables declared in the post’s YAML front matter can be invoked in the body of the post. I utilized this feature to include Mastodon’s hostname, username, and toot ID in the front matter, like in the example below.
comment:
host: “fosstodon.org”
user: “swatantra”
id: “173478499918727”Then, at the bottom of the blog post, I include the code below.
<div class="card border-primary mb-3">
<div class="card-header">Comments</div>
<div class="card-body">
To comment or participate in a discussion related to this blog post, please respond to the following
[Toot](https://{{< meta comment.host >}}/@{{< meta comment.username >}}/{{< meta comment.id >}}){.btn .btn-primary} on Mastodon/Fediverse.
Since Mastodon is decentralized, you can use your existing account hosted by another Mastodon server or compatible platform if you don't have an account on this one.
</div>
</div>This code block adds a box with a hyperlinked button to the toot and some text explaining its purpose. The HTML code to generate the box is tailored to the theme I use in Quarto. The essential code to generate the hyperlink to the toot by fetching the hostname, username, and toot ID from the front matter is:
[Toot](https://{{< meta comment.host >}}/@{{< meta comment.username >}}/{{< meta comment.id >}})Different SSGs have different syntax for invoking variables from the front matter, so check it out for your SSG. Invoking variables from the front matter allows the comment box code to remain the same for all the pages. I usually import the comment box code from an external markdown file. In Quarto, you can do it like this:
{{< include _comment.md >}}Importing the code from an external file reduces the number of lines of code in the blog post markdown file and makes it less error-prone.
Please follow this link to see the complete code (for Quarto) that produced this blog post and the comment box below.