= mastodon-api-comments
:uri-mastodon-js: https://github.com/Kirschn/mastodon.js
:uri-jquery: https://jquery.com/download/

== Setup

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

Then download link:{uri-mastodon-js}[mastodon.js] and link:{uri-jquery}[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`:

[source,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:

[options="header"]
|=============================================
| 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:

[options="header"]
|===============================================================
| 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

[source,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
}
----