Comments, loaded from Bluesky

This is a live demo of the Bluesky comment renderer that ships with basalt. Scroll to the bottom and the thread populates from the AT Protocol's public appview. If you turn JavaScript off, the link at the top of the comment section still points at the canonical post.

How it works

Opt-in per post via front matter:

+++
comments = "bluesky"
bluesky = "https://bsky.app/profile/handle/post/id"
+++

At build time the template writes an empty <section id="comments"> with a data-platform="bluesky" attribute and the post URL. Nothing talks to the network until the reader scrolls the section into view.

When it does, comments-loader.js dynamically imports comments-bluesky.js, which does a two-call dance:

com.atproto.identity.resolveHandle to turn the handle into a DID. Cached in localStorage keyed by handle, so repeat visits to posts from the same author skip this step.
app.bsky.feed.getPostThread to pull the post, its replies, and the replies-to-replies. Rendered as a nested tree.

The endpoints are the official public.api.bsky.app appview. No PDS auth required. If you rate-limit yourself by sitting on the post for an hour, hit refresh.

What gets rendered

Reply text, author display name and handle, like and repost counts, relative timestamp. Links inside replies get rel="external nofollow". Avatars load from cdn.bsky.app with loading="lazy". Text content skips the sanitiser because the AT Protocol returns replies as plain text, not HTML. One of the small design calls the Bluesky team got right.

Cost

Loader: about 300 bytes. Renderer: about 3kb. No sanitiser needed. Avatars are the heaviest element and they lazy-load. On a post with ten replies, the cost of enabling comments is well under 10kb, and only after the reader scrolls to it.

Sister post

The Mastodon comments demo shows the same flow against the Mastodon public API. Both renderers share the loader and the DOM shape, so the same CSS applies.

Scroll down. The Bluesky thread should appear momentarily.