https://github.com/dpecos/mastodon-comments
Webcomponent that embeds a Mastodon's toot conversation in a HTML page
https://github.com/dpecos/mastodon-comments
comments mastodon webcomponent
Last synced: about 1 month ago
JSON representation
Webcomponent that embeds a Mastodon's toot conversation in a HTML page
- Host: GitHub
- URL: https://github.com/dpecos/mastodon-comments
- Owner: dpecos
- License: gpl-3.0
- Created: 2023-07-23T09:07:51.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2025-02-18T15:43:21.000Z (3 months ago)
- Last Synced: 2025-03-31T10:08:54.386Z (about 2 months ago)
- Topics: comments, mastodon, webcomponent
- Language: JavaScript
- Homepage: https://danielpecos.com/2022/12/25/mastodon-as-comment-system-for-your-static-blog/
- Size: 183 KB
- Stars: 86
- Watchers: 6
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - dpecos/mastodon-comments - Webcomponent that embeds a Mastodon's toot conversation in a HTML page (JavaScript)
README
# mastodon-comments
`mastodon-comments` is a [webcomponent](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components) that will embed a Mastodon's toot conversation in a website.
This webcomponent is explained in detail in the [following blog post](https://danielpecos.com/2022/12/25/mastodon-as-comment-system-for-your-static-blog/), where you can see a live example as well.
## Characteristics
- Implemented as a standard web component, easy to integrate
- Lazy-loads the toot conversation, only when the component is part of the viewport
## Styling the component
These are the default values that the component exposes as CSS vars (no need to specify them if you are happy with the current values):
```css
mastodon-comments {
--font-color: #5d686f;
--font-size: 1.0rem;
--block-border-width: 1px;
--block-border-radius: 3px;
--block-border-color: #ededf0;
--block-background-color: #f7f8f8;
--comment-indent: 40px;
--comment-padding: 20px;
}
```
## Example
Include the following lines in the head of your HTML:
```html
```
then just use `mastodon-comments` tag to point to the appropiate mastodon toot as shown below:
```html
```
You can see a full example here: [Example embedding a toot into a HTML](./example/index.html)
