Bluesky Comments 🦋

Add comments to any URL, powered by Bluesky!

Installation:

Install @hamstack/bluesky-comments via your favorite package manager:

bun install @hamstack/bluesky-comments

Importantly, @hamstack/bluesky-comments uses Tailwind for styling, you'll need to ensure you configure Tailwind to scan the library for classnames.

Here's an example using Tailwind v4 configuration within a .css file:


/* path will depend on where your tailwind root css file is located */
/* the dist part of the path is necessary, since that might be ignored by default */
@source "../node_modules/@hamstack/bluesky-comments/dist/index.js";

Usage:

With an explicit URI:

Import the CommentSection component and pass it a Bluesky URI:

import {
  CommentSection
} from "@hamstack/bluesky-comments";

<CommentSection
  uri="https://bsky.app/profile/matthamlin.me/post/3lerablgzd22x"
/>

Live example:

Loading comments...

Automatic URI detection:

If you do not provide a uri prop, you can instead pass in an author prop and the component will automatically look up the most liked post by the author that references the current URL (e.g.window.location.href)

import {
  CommentSection
} from "@hamstack/bluesky-comments";

<CommentSection
  author="matthamlin.me"
/>

Live Example:

(Note: If there is no post found with the current URL, then nothing will be rendered)

About:

This library is a fork of the original bluesky-comments package.

This fork makes the following core changes:

Use tailwind for styling instead of a separate stylesheet
Externalize all dependencies used by the library, and require them as peerDeps (e.g. @atproto/api)