bsky_comments_widget#
a web component that shows the replies to a linked bsky post as comments.
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