README.md

# bsky_comments_widget

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

![a screenchot](./screenshot.png)

[![Package Version](https://img.shields.io/hexpm/v/bsky_comments_widget)](https://hex.pm/packages/bsky_comments_widget)
[![Hex Docs](https://img.shields.io/badge/hex-docs-ffaff3)](https://hexdocs.pm/bsky_comments_widget/)

## usage

### from a CDN

include this element at the end of your `<head>`:
```html
<script src="https://unpkg.com/bsky_comments_widget" defer></script>
```

then you can use the web component wherever you want. for example:
```html
<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

```sh
npm install bsky_comments_widget
```

then:
```js
import "bsky_comments_widget"
```

### from Gleam (`vite-gleam` needed)

```sh
gleam add bsky_comments_widget@1
```

```gleam
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

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