Rendering Webmentions using Client Side JavaScript

Featured image for sharing metadata for article

On March 18 2019, I started rendering my Webmentions as part of this site's Hugo build process.

However, this only is useful if there are regular rebuilds of the site. On some days, I'm pushing new content to the site multiple times a day, each which rebuilds the site. However, I also go many days without updating which means that many webmentions are left un-rendered.

Since then I've been looking at enabling client-side rendering of the webmentions, but because I didn't want to duplicate code between the server-side rendering of Hugo templates and client-side rendering in JavaScript it's always been a bit of a difficult one. (As an aside, I usually follow the Rule of Three, but I knew I wanted to break it earlier than waiting for the third time).

In IndieWeb Summit 2019, day 1, fluffy mentioned that they had a client-side script for rendering Webmentions. So this afternoon I thought I'd give it a go, and it was super easy and drop-in to get it working.

With this announcement, I'm now using webmention.js to render all my webmentions on page load.

Now, I've kinda gone back on functionality because I've decided to only support client-side rendering. So folks who are viewing this site without JavaScript will not be able to see Webmentions. Sorry, but maybe in the future I'll make it better for you, again - this was a difficult decision.

Written by Jamie Tanna's profile image Jamie Tanna on , and last updated on .

Content for this article is shared under the terms of the Creative Commons Attribution Non Commercial Share Alike 4.0 International, and code is shared under the Apache License 2.0. #webmention #hugo.

Also on: IndieWebCamp logo logo

This post was filed under articles.

Interactions with this post

Interactions with this post

Below you can find the interactions that this page has had using WebMention.

Have you written a response to this post? Let me know the URL:

Do you not have a website set up with WebMention capabilities? You can use Comment Parade.