Bluesky And The Blog

Around the time I started working on this site,Cassidoo shared this guide from Jade’s Blog in her weekly newsletter.

This is a full step-by-step guide on how to display Bluesky comments on your Blog, so thank you Jade for the wonderful walkthrough! Thanks also to this tool for the DID generation (something I wasn’t aware of with Bluesky).

I had the CommentSection.astro component set up for a while but now it’s time to test it out!

Some minor tweaks were made to above component to allow for images within the comments:

 <div class="comment-content">
  {comment.post.record.text}
  {comment.post.record.embed?.images?.map((img) => {
    const imageCID = img.image.ref["$link"];
    const imageURL = `https://bsky.social/xrpc/com.atproto.sync.getBlob?did=${comment.post.author.did}&cid=${imageCID}`;

    return (
      <Image
        width={720}
        height={405}
        src={imageURL}
        alt={img.alt}
      />
    );
  })}
</div>

And for the images within comment replies:

<div class="comment-content">
  {reply.post.record.text}
  {reply.post.record.embed?.images?.map((img) => {
    const imageCID = img.image.ref["$link"];
    const imageURL = `https://bsky.social/xrpc/com.atproto.sync.getBlob?did=${reply.post.author.did}&cid=${imageCID}`;

    return (
      <Image
        width={720}
        height={405}
        src={imageURL}
        alt={img.alt}
      />
    );
  })}
</div>