Adding Comments to My Blog with Bluesky!

Introduction

Bluesky has been gaining a lot of traction and publicity recently, and there are a few aspects of the platform that have piqued my interest in a way that no other social media platform has done.

What gets me most excited about Bluesky is that both the platform and the underlying AT Protocol are open source^{1 2}. The open source nature of the platform is great for transparency (something other platforms sorely lack), and also makes it really easy for developers to improve on and build off of the platform. (The AT protocol is also very interesting and will likely enable many exciting projects in the future, but that's a topic for another day)

What I'd like to talk about today is one specific example of a tool that was built off of Bluesky, embeddable blog post comments.

Embedding Bluesky for Blog Comments

The idea of using Bluesky threads as blog comments was first debuted by Emily Liu (a Bluesky developer) in a post a couple of days ago. It quickly got people very excited, with many requests for example code.

Fortunately, she published her code in a new post the very next day. Unfortunately, her code³ was built specifically around NextJS and TailwindCSS, but this code was enough of a starting point for me and (presumably) a number of other developers to start adapting it for other frameworks and applications.

I found Cory Zue's implementation⁴ in React pretty early on in its development, but I wasn't able to get it working with my site, as (at the time) the library only worked with React projects. As such, I set out to make my own version of the library in Svelte, since that is the framework I use for my site.

Building the Library

To begin, I used the Svelte library creation tool (npx sv create) to set up a base project (I chose to use JavaScript and JSDoc for types).

In a similar design to Emily Liu, I created Svelte components for 'Actions', 'Comments', and the 'CommentSection', with the 'CommentSection' being the main exported component to be used in other pages. I wrote the component in a way that allows for either a post URI or a Bluesky handle to be used, with the handle option using the Bluesky API to find the most recent post containing the blog post URL (returning an error message if none are found).

I set up some basic CSS styling for the components, and created some variables to allow styling of certain aspects to be outsourced to library users. This part of the library could likely be improved; I was unsure about which parts of the styling should be handled on the library's end instead of being delegated to users. I hope to address this soon (I'd also very happily accept feature requests and contributions).

The last step was publishing the library so that I (and hopefully others) could use the library. I had never published an NPM package before, but the process was actually quite simple, as the library creation tool provided the necessary scripts. After running npm package (and making some tweaks to 'package.json'), my library was published to the NPM registry⁵. (The source code is also available⁶)

Integrating the Library Into My Site

To get the newly published library integrated with my site, all I had to do was install it:

1npm install bluesky-comments-svelte

Import the component into my blog post '+page.svelte' file and set the author prop:

1<script>
2  import { CommentSection } from "bluesky-comments-svelte";
3  const author = "pdewey.com";
4</script>

And then add the component to the page itself:

1<div>
2  <h2>Comments</h2>
3  <div class="comment-section">
4    <CommentSection {author} opts={{ showCommentsTitle: false }} />
5  </div>
6</div>

With just a few styling modifications (mostly colors), everything looked the way I wanted it.

 1<style>
 2  :root {
 3    --comment-border-color: var(--tan);
 4    --avatar-size: 2rem;
 5    --font-size-title: 1.5rem;
 6    --handle-color: var(--green);
 7    --comment-content-alignment: flex-start;
 8    --font-size-comment-body: 1rem;
 9  }
10
11  .comment-section {
12    background-color: var(--dark-brown-alt);
13    padding: 10px;
14    border-radius: 8px;
15  }
16</style>

All that was left to take advantage of it was creating a new post (on the blog and on Bluesky)!

Closing Thoughts

Bluesky development feels like the wild west right now with many developers creating innovative new tools and integrations for and with the platform, and I'm enjoying being a part of it. I had a lot of fun developing my library and learning about how the Bluesky API works, and I'm quite happy with the result.

If you use Svelte for your website, and want to integrate a comments section powered by Bluesky, give my library a try (and feel free to make suggestions that you think would improve the experience).
If you are not a Svelte user, but you want to add Bluesky comments, I also recommend Cory Zue's bluesky-comments library which is available through NPM⁷, and I think it can be used with any framework now as well (although the bundle size is considerably bigger than the Svelte version if that is something you care about).

Overall, this was a great learning experience, and I look forward to seeing all the cool stuff that gets built around Bluesky.