Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oom-components/mastodon-comments
Web component to show comments from mastodon and bluesky
https://github.com/oom-components/mastodon-comments
Last synced: 10 days ago
JSON representation
Web component to show comments from mastodon and bluesky
- Host: GitHub
- URL: https://github.com/oom-components/mastodon-comments
- Owner: oom-components
- License: mit
- Created: 2023-07-31T19:16:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-03T16:12:57.000Z (26 days ago)
- Last Synced: 2024-12-03T17:24:49.191Z (26 days ago)
- Language: JavaScript
- Homepage: https://oom-components.github.io/mastodon-comments/demo/
- Size: 32.2 KB
- Stars: 33
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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/@[email protected]/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
No comments yet
```
### 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
No comments yet.
```