Switching to Webmention Comments

A while back I introduced likes to the blog through the use of Webmentions and Bridgy. I even went so far as to release my own library for handing Webmentions which I'm pleased to say I've been steadily working on ever since. On the other hand, this blog has been using Utterances to handle comments practically since I started it. Despite how happy I've been with Utterances, I've also been very aware of it's limitations as a comment platform. Not everyone has a GitHub account, and while this blog is primarily targeted at technical individuals, I want to decrease barriers to interaction for those who are possibly newer to the development scene.

Webmentions supports comments, likes, reposts, quotes and a few other types of interaction which means I can actually use the same tech for both comments and likes. Bridgy also has support for GitHub issues which means if I transition to using Webmention comments, I need not loose the comments that have already been posted via Utterances.

Because of how my Webmention library works, It's actually been collecting Twitter and Reddit based comments and storing them since I introduced likes to the site. This means that by transitioning to Webmentions I actually get an influx of comments that previously wouldn't have been visible without finding the tweet responded to.

To begin with, I started by enabling Github issues for Bridgy. Unfortunately it complained that it couldn't link up the comments to the blog post and as a result it didn't know where to send the Webmention.

To fix this, I found that I needed to add a syndication link to the blog post. This would serve the purpose of linking the post with its relevant GitHub issue. Syndication links are another aspect of the indieweb for indicating that sub-content on a page is the same as content shown on social media or elsewhere. Adding this was quite straight forward, I just needed to include a link inside the article tag with the u-syndication class included on it.

I can fetch this link dynamically using the GitHub API so that I don't need to spend time manually linking up posts in future and by adding some caching I can avoid slowing down page requests by sending this request every page load.

Once that was added, I could re-run Bridgy and have it send Webmentions for each of the Utterance/Github issue comments that already existed.

Actually displaying the comments posed a couple of issues. To begin with I would need to display comments posted on different platforms using a consistent style. While I would like to have included like and retweet counts/buttons on twitter comments, this would unfortunately have made them appear disjointed from comments that were posted via other platforms. I also had to take into account that due to comments now being pulled from many sources, I would to have explain how to reply to the post. I could no longer rely on the fact that the comment box was shown at the top of the comments and existing internet literacy to explain how to respond.

To solve the design issue, I created a new simplified comment element which was partially based on the custom tweet embed that I built in my last post. It would still highlight hashtags and @s for tweets but would allow basic markdown functionality for those who instead used GitHub or Reddit.

As you can see I included a small info stamp at the bottom indicating through which website or platform the comment was posted. Clicking this will take you to the comment on it's original platform.

Solving the instruction issue proved to be a little more complex. I went through a few iterations for designs which my partner happily helped give me feedback on. In the end I decided to further adapt the comment element itself to create cohesion between the instructions and comments but with a little more visual gravity. If there is a tweet or GitHub issue which has already been created for the post then it will link to said tweet or issue so as to help guide readers if they are still unsure as to how to interact.

To actualy pull through the Comment Webmentions to the frontend, my library made that increadibly simple. I just had to call the Webmention handler function to get comment type mentions and then pass those through to the frontend. This worked great and further evidenced to me that my library worked in reasonable manner.

One small issue that I did find is that my site didn't always get comments sent through in the correct order. This isn't really an issue with Webmentions or even Bridgy but simply connected to how different services were being polled/notifying Bridgy that there was a new comment. As such I needed to do some sorting, based on the post date of the different comments, which thankfully was quite quick to add. This was likely also an issue on likes but due to me not displaying when a like was created, I didn't ever notice. Either way, a small fix.

With the new Webmention based comments, I can now also keep track of how many comments there are for each post, meaning that I can include this information on the listing page. This was not something I could do previously as it would have required me to send many requests to the github API in order to keep it up to date.

One last thing to note, Utterances comments used to show up instantly once posted. That's no longer the case for my Webmention based comments. Due to the asynchronous processing of Webmentions, my site will batch process all new comments at the turn of each hour, which depending on when you post your comment may mean that it takes a little while before your comment begins to show up.

Part of the reason it's been so long since my last post is that I had to update to the latest version of Sveltekit which included a tonne of breaking changes and as such, this is the first new feature that I've added since the update. That being said I feel that most of my recent changes (including the new homepage design and these comments) have been introducing a more constant style to the site, I'd love to hear feedback on what people think about this design direction - which is a good opportunity for you to try out the new Webmention based comments.