@oom/mastodon-comments/README.md

Web component to show comments from Mastodon and Bluesky

# Mastodon comments

Web component to show comments from Mastodon. Inspired by the work of
[Thiago Cerqueira](https://thiagojedi.github.io/blog/activitypub-comments/) who
has inspired by
[Julian Fietkau](https://fietkau.blog/2023/another_blog_resurrection_fediverse_new_comment_system),
who has inspired by
[Cassidy James](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon/),
who also was inspired by
[Jan Wildeboer](https://jan.wildeboer.net/2023/02/Jekyll-Mastodon-Comments/) who
was inspired by
[Yidhra Farm](https://yidhra.farm/tech/jekyll/2022/01/03/mastodon-comments-for-jekyll.html),
who was inspired by
[Joel Chrono](https://joelchrono12.xyz/blog/how-to-add-mastodon-comments-to-jekyll-blog/)
who was inspired by
[Carl Schwan](https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/).

Recently I included support for Bluesky. Thanks to [Andy](https://pixelde.su/) for the idea and for [let me borrow his code](https://mastodon.gal/@pixel@desu.social/113569049052739770).

- No dependencies
- Light: ~300 lines of code (including comments and spaces)
- Follows the **progressive enhancement strategy:**
- Build with modern javascript, using ES6 modules and custom elements

## Usage

### HTML

Write the following HTML code with a link to a post from Mastodon and/or Bluesky:

```html
<oom-comments
  mastodon="https://mastodon.gal/@misteroom/110810445656343599"
  bluesky="https://bsky.app/profile/lume.land/post/3lc3b4k2n6p2x">
  No comments yet
</oom-comments>
```

### JS

Register the custom element:

```js
import Comments from "./mastodon-comments/comments.js";

//Register the custom element with your desired name
customElements.define("oom-comments", Comments);
```

### CSS

Import the CSS code from this package or create your own.

```css
@import "./mastodom-comments/styles.css";
```

## Customization

You can customize the HTML code generated by overriding the default
`renderComment` static function:

```js
import Comments from "./mastodon-comments/comments.js";

// Customize the HTML rendering
class CustomComments extends Comments {
  renderComment(comment) {
    // your render here
  }
};

//Register the custom element with your desired name
customElements.define("oom-comments", CustomComments);
```

## Cache

Use the `cache` attribute to cache the API responses. It accepts a number with
the time in seconds. The cache is also used offline.

```html
<!-- Cache for 1 minute (60 seconds) -->
<oom-comments
  cache="60"
  mastodon="https://mastodon.gal/@misteroom/110810445656343599"
>
  No comments yet.
</oom-comments>
```