Sunsetting Comments: Embracing Bluesky

07 Dec, 2024

I've been using Bear Blog as my blogging platform, and I quite like it. It's simple, relies on markdown, and spares me the hassle of hosting my own site or dealing with backend logistics. It was a quick and painless way to get started with blogging. However, one feature I missed on Bear Blog was having a comment section.

For me, having a comment section feels like an integral part of blogging. After some research, I found several options for adding comments by injecting scripts into the blog's footer. I eventually settled on Isso, a self-hosted commenting system. While Isso worked well, it had some drawbacks: users didn't get email notifications for replies to their comments, and there was no verification—anyone could technically comment under any name.

Today, I came across a creative solution using Bluesky. Some users managed to turn replies to a skeet containing their blog post link into a comment section¹ for their blog². That's a cool idea! With some research, I found a solution on GitHub that lets you implement this functionality, much like Isso. After a bit of tinkering, I managed to set it up. I think it's a great use case for Bluesky. Here's how you can do it too.

Setting Up Bluesky Comments on Bear Blog

Requirements: To use this setup, you need a paid Bear Blog account. It won't work with the free version.

Start by navigating to your Bear Blog dashboard and going to Settings -> Header and footer directives. In the Head directive, add this line of code to include the stylesheet for Bluesky comments:

<link rel="stylesheet" href="https://unpkg.com/bluesky-comments@0.7.0/dist/bluesky-comments.css">

This stylesheet ensures the comments are styled correctly. Make sure to check for updates to the package here and replace 0.7.0 with the latest version if necessary.

Next, in the Footer directive, paste the following script. Replace <YOUR-BSKY-NAME> with your Bluesky username:

<script type="importmap">
{
  "imports": {
    "react": "https://esm.sh/react@18",
    "react-dom": "https://esm.sh/react-dom@18"
  }
}
</script>

<script type="module">
  import BlueskyComments from 'https://unpkg.com/bluesky-comments@0.7.0/dist/bluesky-comments.es.js';

  document.addEventListener('DOMContentLoaded', function () {
    // Check if the current page is a blog post
    if (document.body.classList.contains('post')) {
        // Execute the script
        const author = '<YOUR-BSKY-NAME>';
        if (author) {
          BlueskyComments.init('bluesky-comments', {
            author,
            onEmpty: (details) => {
              console.error('Failed to load comments:', details);
              document.getElementById('bluesky-comments').innerHTML =
                'No comments on this post yet. Details: ' + details.message;
            },
            commentFilters: [
              BlueskyComments.Filters.NoPins,
              BlueskyComments.Filters.MinCharacterCountFilter(1),
            ],
          });
        }
    }
  });
</script>

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

What the Scripts Do

• Load Required Libraries: The script imports React and ReactDOM, which are essential dependencies for the comments to function.
• Check Page Type: It ensures the script runs only on blog post pages by checking the page's CSS class, avoiding unnecessary execution on other pages.
• Initialize the Comment Section: Fetches replies to your skeets that link to your blog post and displays them as comments.
• Handle Errors Gracefully: If comments fail to load or don't exist, the script displays a placeholder message to keep the page functional.
• Apply Filters: Excludes replies that:
  • Contain only a 📌.
  • Are empty or consist solely of images (as image-only replies are currently unsupported).

Caveats

Here are some issues I encountered and how to address them:

1. Comments Won't Load Without a Bluesky Post
   Comments only appear if there's a skeet linking to your blog post. If you haven't posted it on Bluesky, the comments won't load. You can link the post at any time after publishing.
2. Updating Package Versions
   Check for new releases periodically and update the version numbers in both the stylesheet and script links.
3. No Image Support in Comments
   Comments containing only images won't render correctly—they'll appear as empty blocks.
4. Issues with Multiple Skeets
   The setup uses your most popular skeet containing a link to your post to display comments. If you share your blog post multiple times on Bluesky, the script may not use the skeet you expect for comments.

Theme-Specific Adjustments.

Depending on your Bear Blog theme, you might need to tweak the CSS to make the comments look better. Below are a few fixes I used:

Reduce Vertical Spacing:

footer p {
  margin: 0;
}

Fix Link Hover Effects:

footer a:hover {
  background-color: inherit !important;
  color: inherit !important;
}

Remove Bottom Borders on Links:

footer a {
  border-bottom: none !important;
}

Final Thoughts

This setup has been working well so far, and I'm excited to see how it evolves. While I can't speak for other platforms, this method should work on any blog platform that allows you to edit the head and footer directives (you may need to remove the conditional checks for a blog post).

I hope this will help you to create an engaging comment section for your own blog using Bluesky!

Further Reading

#bluesky #meta