Using Bluesky for comments in Statamic

Why not add another Statamic addon to the list? There’s 14 already, so here’s number 15.

This is aimed as devs who have a site (such as a blog) and would like to use a thread on Bluesky for comments.

Introducing: Bluesky Comments for Statamic.

This is the initial release - and there’s a little manual thing to do for now - but will keep extending it to make it more automated too.

And as it evolves, I’ll also flesh out docs for the Mity Digital docs site.

Install it via composer:

Easy.

You can either use built-in layouts (needs one extra step) or include these in your project (need to publish the views, more on that later).

If you’re using the built-in layouts, you’ll need to also update your Tailwind config to pull in the styles from:

There are two things you need to do in your Statamic site setup.

Add a bluesky_thread_uri field

In the Blueprint for the entries that you want to have Bluesky comments you need to add a text field with the handle bluesky_thread_uri. Make sure this is not a required field.

This is where you’ll paste a full URI to a Bluesky thread to use as the Comments for the entry.

Add the tag

In your layout, add the Bluesky Comments tag where you would like to place the comments on your blog:

This will take care of including the required logic once per page, plus the comment block per entry (if multiple are on the one page).

For entries that do not have a Bluesky Thread URI, the tag will simply output nothing: so you don’t need to do this for all of your historical entries (unless you want to, of course).

And that is the setup complete.

At the moment, this is a manual step. There’s a slight three-step process to get things hooked up:

1. Publish your Entry

2. Create a Post on Bluesky, and visit the post - copy the post’s full URI

3. Paste this in the Bluesky Thread URI field we created before, and save your Entry

My plan is to write a CP action that can automate this process… so stay tuned for that.

The tag will output the necessary logic and directive, plus base layout, and then all of the magic happens client-side when the page loads: the thread is loaded from Bluesky, and the comments are displayed on your page.

If you want to modify the layout, you need to publish the views:

This will publish the two Antlers files to resources/views/vendor/statamic-bluesky-comments.

You now have full control over how the comments will appear on your site.

There are three key pieces:

1. The main layout, including summary and placeholder details (like “loading” messages),

2. The logic data

3. A directive (aka a reusable component)

You have the ability to adjust all of these files to meet your needs.

The x-data logic will load the thread from Bluesky’s public API, and store it internally.

The main layout will include summary details, as well as start outputting the comments. By default it will show 5 at a time (but you can easily customise that too).

The main layout makes use of the bluesky-comment directive, which renders out all of the innards of each comment, making it recursive to support nested comments.

Within the directive you will see a template string - this is what will be used to render each comment. You’ll have all of the data at your disposal from the initial API call - so if you want a property not currently used (and it exists), it is there for you to use.

You can add a data-show-increment property to the main layout wrapper element if you want to override the logic - maybe make it 10 at a time. This expects an integer to load by default, and then increment by for each click of “show more comments”.

If you have any queries, comments or feedback, let me know - you can reach me on Bluesky if you like!

Up next I’d like to write a CP action that can help automate the population of the bluesky_thread_uri property (and do the initial Post to Bluesky). So stay tuned for that!

Want to get stuck in to the code? Check it out on Github:
https://github.com/mitydigital/statamic-bluesky-comments

This addon is a port/re-imagining of Emily Liu’s React-based approach to using Bluesky for comments.