74 lines
2.0 KiB
Plaintext
74 lines
2.0 KiB
Plaintext
= 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>
|
|
----
|
|
|
|
== 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 portion the comment.
|
|
|===============================================================
|
|
|
|
==== Example CSS
|
|
|
|
[source,CSS]
|
|
----
|
|
.mastodon-api-comment
|
|
{
|
|
margin-left: 1em;
|
|
border: 0.1em solid black;
|
|
padding: 0.1em 1em;
|
|
}
|
|
.mastodon-api-comment:nth-child(even)
|
|
{
|
|
background-color:#0402
|
|
}
|
|
.mastodon-api-comment:nth-child(odd)
|
|
{
|
|
background-color:#2402
|
|
}
|
|
----
|