2019-10-31 05:34:19 +01:00
|
|
|
= mastodon-api-comments
|
2019-10-31 05:45:53 +01:00
|
|
|
:uri-mastodon-js: https://github.com/Kirschn/mastodon.js
|
|
|
|
|
:uri-jquery: https://jquery.com/download/
|
2019-10-31 05:34:19 +01:00
|
|
|
|
2019-11-03 07:50:00 +01:00
|
|
|
[TIP]
|
|
|
|
|
After I wrote this, I discovered a far better solution:
|
|
|
|
|
https://git.wadza.fr/me/comtodon[comtodon].
|
|
|
|
|
|
2019-10-31 05:34:19 +01:00
|
|
|
== Setup
|
|
|
|
|
|
|
|
|
|
First copy `mastodon-api-comments.html` to your shortcodes directory. This is
|
|
|
|
|
either `layouts/shortcodes` or `themes/{your-theme}/layouts/shortcodes`.
|
|
|
|
|
|
2019-10-31 05:45:53 +01:00
|
|
|
Then download link:{uri-mastodon-js}[mastodon.js] and link:{uri-jquery}[JQuery]
|
2019-10-31 05:34:19 +01:00
|
|
|
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>
|
|
|
|
|
----
|
|
|
|
|
|
2019-10-31 10:06:32 +01:00
|
|
|
[NOTE]
|
|
|
|
|
If you use pagination with `showfullcontent = true`, the JavaScripts will be
|
|
|
|
|
included several times.
|
|
|
|
|
|
2019-10-31 05:34:19 +01:00
|
|
|
== 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.
|
|
|
|
|
|=============================================
|
|
|
|
|
|
2019-10-31 09:05:22 +01:00
|
|
|
=== Example
|
2019-10-31 05:34:19 +01:00
|
|
|
|
2019-10-31 09:05:22 +01:00
|
|
|
----
|
|
|
|
|
{{% mastodon-api-comments instance="likeable.space" status_id="9nIqtmAXvu4harUb7Q" %}}
|
|
|
|
|
----
|
2019-10-31 06:20:47 +01:00
|
|
|
|
|
|
|
|
=== Styling
|
|
|
|
|
|
|
|
|
|
The generated HTML uses these classes:
|
|
|
|
|
|
|
|
|
|
[options="header"]
|
|
|
|
|
|===============================================================
|
2019-10-31 10:34:42 +01:00
|
|
|
| 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.
|
2019-11-01 06:17:07 +01:00
|
|
|
| mastodon-api-comment-content | The text of the comment.
|
2019-11-02 07:56:28 +01:00
|
|
|
| mastodon-api-comment-avatar | The avatar of the author.
|
|
|
|
|
| mastodon-api-comment-emoji | An emoji.
|
2019-10-31 06:20:47 +01:00
|
|
|
|===============================================================
|
|
|
|
|
|
|
|
|
|
==== Example CSS
|
|
|
|
|
|
|
|
|
|
[source,CSS]
|
|
|
|
|
----
|
|
|
|
|
.mastodon-api-comment
|
|
|
|
|
{
|
|
|
|
|
margin-left: 1em;
|
2019-11-02 06:54:59 +01:00
|
|
|
margin-bottom: 0.4em;
|
|
|
|
|
padding: 0 0.4em;
|
2019-10-31 06:20:47 +01:00
|
|
|
border: 0.1em solid black;
|
|
|
|
|
}
|
|
|
|
|
.mastodon-api-comment:nth-child(even)
|
|
|
|
|
{
|
|
|
|
|
background-color:#0402
|
|
|
|
|
}
|
|
|
|
|
.mastodon-api-comment:nth-child(odd)
|
|
|
|
|
{
|
|
|
|
|
background-color:#2402
|
|
|
|
|
}
|
|
|
|
|
----
|
