All new posts on logfile.ch will now include a link to a Mastodon toot referencing the post from this blog’s new Mastodon account at @logfile@mstdn.io. Replies to this toot will be displayed in the Comments section at the bottom of each blog post. The replies are retrieved directly using JavaScript in your browser from mstdn.io, which means that I can keep my blog as a static web site and do not need to introduce additional technical complexity.

How does it work? The whole-setup is surprisingly simple: All my blog posts get a new mastodon parameter in their YAML front-matter for Jekyll which expects the ID of the toot referencing this post on my Framapiaf profile. In my blog post template, I check for this parameter and if it is set, I display the Comments section with a little JavaScript to retrieve any replies to this toot:

<script src="/assets/js/purify.min.js"></script>
<script type="text/javascript">
  fetch('https://mstdn.io/api/v1/statuses/101065476986200703/context')
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      if(data['descendants'] &&
         Array.isArray(data['descendants']) && 
        data['descendants'].length > 0) {
        document.getElementById('mastodon-comments-list').innerHTML = 
          data['descendants'].reduce(function(prev, reply) {
            mastodonComment = `<div class="mastodon-comment">
                               <div class="mastodon-comment-content">${reply.content}</div> 
                               <div class="mastodon-comment-footer">[ 
                                 <a href="${reply.account.url}" rel="nofollow">
                                   ${reply.account.acct}
                                 </a> |
                                 <a href="${reply.uri}" rel="nofollow">
                                   ${reply.created_at.substr(0, 10)}
                                 </a>
                               ]</div>
                             </div>`;
            return prev + DOMPurify.sanitize(mastodonComment);
          }, '');
      }
    });
</script>

There is only one downside to this approach: I can only create the toot (in fact I automate the creation of the toot using the great feed2toot tool and the RSS feed of my blog) after the blog post has been published, but I need its ID as part of the blog post. I have not yet found a good and easy solution for this, so I go through the additional hoop of publishing my blog post first, then wait for the toot to appear and then add the toot ID in a second step to the post.