bsky_comments_widget

a web component that shows the replies to a linked bsky post as comments.

a screenchot

usage

from a CDN

include this element at the end of your <head>:

<script src="https://unpkg.com/bsky_comments_widget" defer></script>

then you can use the web component wherever you want. for example:

<style>
  .comments-container {
    padding: 8rem;
    padding-top: 2rem;
    width: 100%;
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
  }
</style>

<body>
  <div class="comments-container">
    comments here
    <bsky-comments post_url="https://bsky.app/profile/mrgan.com/post/3michx3lqa22y" />
  </div>
</body>

you can download the js file from the cdn and serve it yourself, too.

from NPM

npm install bsky_comments_widget

then:

import "bsky_comments_widget"

from Gleam (`vite-gleam` needed)

gleam add bsky_comments_widget@1

import bsky_comments_widget/widget

pub fn main() {
  widget.register()
  // then the web component should work in any HTML template you use
}

styling

the component will load any classes from its parent document. this means that you can override the class styles with your own. you can find an example of this here: https://tangled.org/lekkice.moe/lekkice/blob/main/src/styles/global.css#L70

development

pnpm install   # install the required dependencies
pnpm run dev   # run the project through vite