README.md

# bsky_comments_widget

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

[![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://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:
```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 { register } from "bsky_comments_widget"

register()
```

### 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.

## development

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