Mastodon comments

Web component to show comments from Mastodon. Inspired by the work of Thiago Cerqueira who has inspired by Julian Fietkau, who has inspired by Cassidy James, who also was inspired by Jan Wildeboer who was inspired by Yidhra Farm, who was inspired by Joel Chrono who was inspired by Carl Schwan.

Recently I included support for Bluesky. Thanks to Andy for the idea and for let me borrow his code.

• 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:

<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:

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.

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

Customization

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

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.

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