Shortcode for Hugo to display the replies to a Fediverse-thread as blog comments.
Перейти к файлу
tastytea 60d81c6d4c
Add link to comtodon.
2019-11-03 07:50:00 +01:00
README.adoc Add link to comtodon. 2019-11-03 07:50:00 +01:00
mastodon-api-comments.html No inline-CSS in elements. 2019-11-02 07:55:46 +01:00
mastodon-api-comments.js Replace emojicodes with emojis in subject. 2019-11-02 08:06:34 +01:00

README.adoc

mastodon-api-comments

Tip
After I wrote this, I discovered a far better solution: comtodon.

Setup

First copy mastodon-api-comments.html to your shortcodes directory. This is either layouts/shortcodes or themes/{your-theme}/layouts/shortcodes.

Then download mastodon.js and JQuery and copy it together with mastodon-api-comments.js from this repo into content/scripts.

Then add the following code to layouts/partials/mastodon-api-comments-scripts.html or themes/{your-theme}/layouts/partials/mastodon-api-comments-scripts.html:

<script type="application/javascript" src="/scripts/jquery-3.4.1.min.js"></script>
<script type="application/javascript" src="/scripts/mastodon.js"></script>
<script type="application/javascript" src="/scripts/mastodon-api-comments.js"></script>
Note
If you use pagination with showfullcontent = true, the JavaScripts will be included several times.

Usage

The shortcode takes the following arguments:

Argument Description

instance

The domain name of the instance.

status_id

The ID of the status.

Example

{{% mastodon-api-comments instance="likeable.space" status_id="9nIqtmAXvu4harUb7Q" %}}

Styling

The generated HTML uses these classes:

Name Description

mastodon-api-comments

Encompasses everything.

mastodon-api-comment-intro

The introduction sentence.

mastodon-api-comment

A complete comment.

mastodon-api-comment-author

The author line the comment.

mastodon-api-comment-subject

The subject of the comment.

mastodon-api-comment-content

The text of the comment.

mastodon-api-comment-avatar

The avatar of the author.

mastodon-api-comment-emoji

An emoji.

Example CSS

.mastodon-api-comment
{
    margin-left: 1em;
    margin-bottom: 0.4em;
    padding: 0 0.4em;
    border: 0.1em solid black;
}
.mastodon-api-comment:nth-child(even)
{
    background-color:#0402
}
.mastodon-api-comment:nth-child(odd)
{
    background-color:#2402
}