README.md at main · lekkice.moe/bsky_comments

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

Configure Feed