Mastodon-based commenting on this site

Thanks to a post by Carl Schwan, I now have some a very basic commenting system, provided someone actually has an account with which to reply on the Fediverse, and I have a Fediverse post linked to a blog post. That’s a lot of assumptions, but I assume this is better than nothing, and also, it does not use anything weird that goes after your data a lot.

The basic code is very much derived from above post, however it has been adapted a bit to work well in my Astro site.

Views into the code

An id for a mastodon post to be associated with a blog post is given through a new entry in a post’s frontmatter. This is specified in Astro’s config.

When the mastodonRef property is present, a new component is rendered in the page “template”.

The new Comments component then has the job to fetch the relevant data upon a click. There are some notable differences to Carl’s implementation in that the DOM-Element building was too hardcore for me.

I went for an interpolated string and then use a DOMParser to get the proper DOM out of it:

I make some use of data attributes to play nice with the styling (well, the styling ain’t gonna win a prize 😅). What is a bit special is that relevant setup data is given to the main script via data attributes. This is because the astro build step basically makes a javascript module out of a script on an Astro component. The whole component is here on github.