Blog, now with Bluesky comments

After being inspired by Emily Liu’s post on how to do Bluesky comments, I thought I could add it here too, but with one minor plus to it.

Emily’s method was great, but required hardcoding the atproto URI into the post itself. That’s a little hard to do with my deployment and post method, where the RSS feed is generated, and then that triggers an Echofeed (Not Sponsored) that posts to Bluesky.

Because of this, I wanted something better. Ideally, I could have it just find the right post without me having to worry about it. Thanks to the power of the Bluesky API, I’m able to do that!

The special sauce is right here in getPostAndThreadData. It runs a search for the Echofeed emoji I use for all my posts (📝), looks for my author DID, as well as the page URL that would have been posted. It then limits it to 1, and grabs that URI. Once we’ve got a URI, we then pass it to Emily’s code like normal along with some styling and design tweaks.

Is it perfect? Not yet, but now it’s just fine tuning some CSS styling (and also getting React to be chunked a little better).

const getPostAndThreadData = async (
  slug: string,
  setThread,
  setUri,
  setError
) => {
  const agent = new Agent("https://public.api.bsky.app");
  const assembledUrl = "https://jack.is/posts/" + slug.toString();
  try {
    const response = await agent.app.bsky.feed.searchPosts({
      q: "📝",
      author: "did:plc:cwdkf4xxjpznceembuuspt3d",
      sort: "latest",
      limit: 1,
      url: assembledUrl,
    });
    const uri = response.data.posts[0].uri;
    setUri(uri);
    try {
      const thread = await getPostThread(uri);
      setThread(thread);
    } catch (err) {
      setError("Error loading comments");
    }
  } catch (err) {
    setError(err);
  }
};

In the words of Brennan Lee Mulligan: “GET IN THE COMMENTS!”