Embed Bluesky comments on your website easily.
- Add the default styles the page
<head>somewhere in a base template:
<link rel="stylesheet" href="https://unpkg.com/bluesky-comments@0.3.0/dist/bluesky-comments.css">- Add the comments (and React dependencies) to the end of the body on any page that you wnat to show comments on:
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/bluesky-comments@0.3.0/dist/bluesky-comments.umd.js"></script>- Initialize the comments by passing in a link to the post you want to use as a base:
<script>
document.addEventListener('DOMContentLoaded', function() {
const uri = 'https://bsky.social/coryzue.com/posts/3jxgux';
if (uri) {
initBlueskyComments('bluesky-comments', {uri});
}
});
</script>Or by passing the author:
<script>
document.addEventListener('DOMContentLoaded', function() {
const author = 'coryzue.com';
if (author) {
initBlueskyComments('bluesky-comments', {author});
}
});
</script>If you use this mode, it will use the most popular post by that author that links to the current page.
npm install bluesky-commentsI don't publish a lot of JavaScript packages, but I think you can import it by doing this!
To develop on this package, you can run:
npm install
npm run watch
This will watch for changes and copy the built files to the dist directory.
From there you can reference the files in your own project and any updates you make
should show up instantly.