add comments to your blog with BlueSky and ATProto [HTMX component]

I have recently switched my personal website to HTMX.

And I am a loving BlueSky user. A few weeks ago I have added to the reading list a blog post from Emily Liu, and I've decided to translate this to (my) reality, today.

The result is a small htmx component, that you can integrate in any site (vanilla, server side rendering, …)

Easy to integrate (kind of static):

<script src="https://unpkg.com/htmx.org@1.9.10"></script>

/* [...] */

<div
  id="bluesky-comments"
  data-bsky-uri="at://FIXME_BLUESKY_DID/app.bsky.feed.post/FIXME_BLUESKY_POSTID"
  hx-get="https://nilleb.co/components/bluesky-comments.html"
  hx-trigger="load"
></div>

Or slightly more dynamically (assuming that you fetch the post data somewhere)

<div id="bluesky-comments"></div>

<script>
window.BLUESKY_DID = 'did:plc:FIXME'
document.addEventListener('DOMContentLoaded', () => {
    // load post
    const commentsDiv = document.getElementById('bluesky-comments');
    commentsDiv.setAttribute('data-bsky-uri', `at://${window.BLUESKY_DID}/app.bsky.feed.post/${post.bskyId}`);
    commentsDiv.setAttribute('hx-get', '../../components/bluesky-comments.html');
    commentsDiv.setAttribute('hx-trigger', 'load');
    htmx.process(commentsDiv);
});
</script>

You still have to

retrieve your DID (you could visit your bluesky profile or any of your tweets with your network tools open and filter on "profile"; the string after %3A is your DID), or just execute this code in your Console

 JSON.parse(localStorage.BSKY_STORAGE).session.currentAccount.did

create a post (tweet) in bluesky and retrieve its ID; this time it's easier to retrieve since it's the last part of the URL

Reference

For convenience, all the sources I used to implement the component and my blog