bsky_comments_widget - v1.0.1

bsky_comments_widget

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

Package Version Hex Docs

usage

from a CDN

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

<script src="https://cdn.jsdelivr.net/npm/bsky_comments_widget@1.0.0/bsky_comments_widget.js" 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 { register } from "bsky_comments_widget"

register()

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.

development

pnpm install   # install the required dependencies
pnpm run dev   # run the project through vite
✨ Search Document