skip to content
Site header image Nerdy Momo Cat

Bluesky comments now work on Webtrotion

Last Updated:
Coding Webtrotion

Two days ago, I added this comment to Making Webtrotion:

After Emily’s post, there was a flurry of efforts to use bluesky as a commenting system. I am actually surprised more people didn’t use Twitter as a commenting system when their API was free for all. That led to Cory creating a package, which was react based. So, I tried finding if people had previously added bluesky comments to astro, and of course they had: see graysky, snorre (also has the option to reply from the comment section but needs bluesky app password, I’ll revisit this after OAuth), and Jade’s (statically builds comments, and doesn’t update in real-time). Then I found Lou’s post here and was relieved to know that you can do this without react. I ended up using the version by Matt here (the person whose code I am using for Bluesky post embeds now work on Webtrotion as well). The good part about Matt’s version is that it has an option to search for did:{xx}plc:{{yy} format, instead of expecting people to find the exact at format URI. And lastly, I used this post from Jack to auto-search a post (and the idea of using a echo-feed-emoji). There is a react version of this (modified from Cory’s version) here by Nico.

Update Nov 27, 2024, 04:20 AM: I saw this cool trick by Garrick here to filter out hidden, blocked or not found replies and added that to the script.

All this together, and webtrotion now has its bluesky commenting system. I am not going to add an explicit URL here to show that auto-search works, while I added an explicit URL to the Bluesky post embeds post.

How to use Bluesky Comments in Webtrotion

Remember, these are currently only read-only comments, interaction needs to happen on Bluesky (there is a handy-dandy link added on top of comments). Once Bluesky has OAuth, I’ll try to make it so that people can also comment through your webpage.

Step 1: If you are just now duplicating the template here, you should be fine. If you have already been using Webtrotion, add a property called Bluesky Post Link to the database with type as URL. Make sure that the property name matches.

Step 2: In your constants-config.json file, you will see this:

	"bluesky-comments": {
		"show-comments-from-bluesky": false,
		"auto-search-for-match": {
			"turn-on-auto-search": false,
			"author": "",
			"echo-feed-emoji": ""
		}
	}
  • show-comments-from-bluesky decides whether you want to show a bluesky comment section at all or not. It is false by default, but if you turn it to true, bluesky comment rendering script will be executed.
  • Now, whichever link you paste into Bluesky Post Link for a post, that thread will be used to render the comments on your post.
  • If we used this system as is, given Webtrotion builds every 8 hours (configurable), we would need to wait for it to compile to post, then make a post on Bluesky, then copy that URL and paste it into the Bluesky Post Link field, and wait for it to build again. auto-search-for-match allows you to automatically search your profile for posts that mention the link (only parent posts, not in replies).
    • turn-on-auto-search decides whether you want to turn auto-search on or off.
    • author is your bluesky handle. You can specify this as handle (do not include @ sign) or as the did: protocol value. If you do not specify a handle here, auto-search will not be executed.
    • echo-feed-emoji: Only searches posts that mention the echo-feed character. If you set it to empty, it will search all your parent posts.

The variables look like this:

const post_slug = new URL(
  getPostLink(post.Slug),
  import.meta.env.SITE
).toString();
const bluesky_url = post.BlueSkyPostLink || "";
const BLUESKY_COMM = {
  "show-comments-from-bluesky": true,
  "auto-search-for-match": {
    "turn-on-auto-search": false,
    "author": "",
    "echo-feed-emoji": "",
  },
};

Here is the latest version of the script: