a web component that shows the replies to a linked bsky post as comments.
update README
+60
-7
+60
-7
README.md
+60
-7
README.md
···
1
1
# bsky_comments_widget
2
2
3
+
a web component that shows the replies to a linked bsky post as comments.
4
+
3
5
[](https://hex.pm/packages/bsky_comments_widget)
4
6
[](https://hexdocs.pm/bsky_comments_widget/)
5
7
8
+
## usage
9
+
10
+
### from a CDN
11
+
12
+
include this element at the end of your `<head>`:
13
+
```html
14
+
<script src="https://cdn.jsdelivr.net/npm/bsky_comments_widget@1.0.0/bsky_comments_widget.js" defer></script>
15
+
```
16
+
17
+
then you can use the web component wherever you want. for example:
18
+
```html
19
+
<style>
20
+
.comments-container {
21
+
padding: 8rem;
22
+
padding-top: 2rem;
23
+
width: 100%;
24
+
max-width: 56rem;
25
+
margin-left: auto;
26
+
margin-right: auto;
27
+
}
28
+
</style>
29
+
30
+
<body>
31
+
<div class="comments-container">
32
+
comments here
33
+
<bsky-comments post_url="https://bsky.app/profile/mrgan.com/post/3michx3lqa22y" />
34
+
</div>
35
+
</body>
36
+
```
37
+
38
+
you can download the js file from the cdn and serve it yourself, too.
39
+
40
+
### from NPM
41
+
42
+
```sh
43
+
npm install bsky_comments_widget
44
+
```
45
+
46
+
then:
47
+
```js
48
+
import { register } from "bsky_comments_widget"
49
+
50
+
register()
51
+
```
52
+
53
+
### from Gleam (`vite-gleam` needed)
54
+
6
55
```sh
7
56
gleam add bsky_comments_widget@1
8
57
```
58
+
9
59
```gleam
10
-
import bsky_comments_widget
60
+
import bsky_comments_widget/widget
11
61
12
-
pub fn main() -> Nil {
13
-
// TODO: An example of the project in use
62
+
pub fn main() {
63
+
widget.register()
64
+
// then the web component should work in any HTML template you use
14
65
}
15
66
```
16
67
17
-
Further documentation can be found at <https://hexdocs.pm/bsky_comments_widget>.
68
+
## styling
18
69
19
-
## Development
70
+
the component will load any classes from its parent document. this means that you can override the class styles with your own.
71
+
72
+
## development
20
73
21
74
```sh
22
-
gleam run # Run the project
23
-
gleam test # Run the tests
75
+
pnpm install # install the required dependencies
76
+
pnpm run dev # run the project through vite
24
77
```