A minimal commenting system for static blogs using external Mastodon or API compatible server
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
sheychen 8104930209 new tab and bad class naming 6 months ago
README.md new tab and bad class naming 6 months ago
comtodon.js new tab and bad class naming 6 months ago
comtodon.min.js new tab and bad class naming 6 months ago
index.html Initial version 6 months ago
index.pug Initial version 6 months ago
style.css new tab and bad class naming 6 months ago
style.css.map Initial version 6 months ago
style.sass new tab and bad class naming 6 months ago

README.md

Comtodon

A minimal commenting system for static blogs using external Mastodon or API compatible server.

  • painless: use already existing fediverse accounts
  • serverless: hosted on static server or cdn
  • lightweight: any useless features (IMO)
  • no dependencies: pure native js
  • personal: no style, no tracking
<div class="comtodon" data-domain="mastodon.social" data-status="100745593232538751"></div>
<script src="comtodon.min.js" defer></script>

See index.html

Deep

Create a tree by adding data-deep=N

  • 0: Full tree
  • 1: Only “direct” replies
  • 2: With replies to replies
  • And so on

Moderation ?

Add data-moderator="{moderator_id}" to display only approved (replied) comments

Note: Can’t use fav, it requires authentication

Hugo

Put comtodon.min.js in static folder

In your site config

params:
  comtodon:
    domain: mastodon.social
    # moderator: 358957

In your single page layout

{{ if .Params.comtodon }}
<div class="comtodon" data-domain="{{ .Site.Params.comtodon.domain }}" data-status="{{ .Params.comtodon }}" {{ with .Site.Params.comtodon.moderator }}data-moderator="{{ . }}"{{ end }}></div>
<script src="/comtodon.min.js" defer></script>
{{- end }}

In your content header

comtodon: 100745593232538751

Style it

Mastodon

Only use /api/v1/statuses/:id/context. See doc

No authentication required

{
  descendants: [{
    account: {
      acct,
      avatar_static,
      display_name,
      id,
      emojis: [{shortcode, static_url}],
      url
    },
    created_at,
    content,
    emojis: [{shortcode, static_url}],
    id,
    in_reply_to_id,
    sensitive,
    spoiler_text
  }]
}

No js ?

Simple placeholder

<div class="comtodon" data-domain="mastodon.social" data-status="100745593232538751">
    <p class="no-js sad">Enable JavaScript to see comments</p>
</div>

TODO

  • Use personal status as sample
  • Create proxy backend for cache and moderating with fav
  • Auto-magically create statuses from hugo ???