Airview Comments

Commenting for any webpage, powered by Bluesky posts.

Inspired by this post by Bluesky team member, Emily Liu, Airview Comments is a free drop-in JavaScript file that will create a comment section for any web page powered by Bluesky posts.

Simply paste in the JavaScript tag and then initialise the comment section with an origin post URL. All replies to that original post will be displayed on your site.

Features:

  • Nested comments
  • Author names, handles and avatars
  • Reply, quote and like counts for each reply
  • Links to posts on Bluesky to leave new comments
  • Images displayed within posts
  • Under 4 KB in size

Ideas for the future

  • Auth with Bluesky to leave replies directly in the thread

How to install

Copy this script and add it to the bottom of your website, just before the closing <body> tag or at least beneath the main content of your page.

If you use a CMS or some sort of templating system, you can add this script once to your main site layout/template.

<script src="https://cdn.airview.so/comments.js"></script>

Next you need to add a container element into the pages where you want comments to load.

<div id="airview-comments"></div>

Finally, on those same pages you also need to add this script. You need to have first created a post on Bluesky (for example, about your blog post) which the script uses to get replies for.

<script>
new AirviewComments({
  postUrl: 'https://bsky.app/profile/...'
});
</script>

There are some options available:

  • postUrl: The URL to the original Bluesky post.
  • container: (default "#airview-comments") The HTML element the comments should load inside.
  • perPage: (number, default 50) How many top-level comments to load at a time.
  • showPoweredBy: (boolean, default true) Show or hide the "Powered by" link beneath the comments block.

Depending on your CMS, it might be easier if the post URL is defined outside of the main script. You can do this by defining an airviewPostUrl variable anywhere on the page above the main script.

<script>const airviewPostUrl = 'https://bsky.app/profile/...';</script>

Then you can omit postUrl when initialising the comments:

<script>
new AirviewComments();
</script>

Styling

There is no default styling available, to be as flexible as possible. Below is some CSS you can use and adapt to your needs.

All elements in the rendered HTML have been given class names so the comment section is easy to style with custom CSS.

<style>
.airview-comment + .airview-comment {
  margin-top: 1.5rem;
}
.airview-nested-comments {
  padding-left: 1.5rem;
  margin-top: 1rem;
}
a.airview-author {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 15px;
  margin-bottom: 4px;
  text-decoration: none;
}
.airview-author-avatar {
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-color: #ccc;
  border-radius: 10px;
}
.airview-author-avatar img {
  width: 100%;
  border-radius: 10px;
  margin: 0;
}
.airview-author-name {
  font-weight: 600;
}
.airview-author-handle {
  opacity: 0.5;
}
.airview-images {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 8px;
}
.airview-image {
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,0.1);
  width: 70%;
}
.airview-comment-meta {
  margin-top: 4px;
}
.airview-comment-meta a {
  display: flex;
  gap: 0.7rem;
  font-size: 13px;
  text-decoration: none;
}
.airview-show-more {
  appearance: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background-color: #111;
  color: #fff;
  font-size: inherit;
}
</style>

Comments

Test it out here!