Initial commit.

README.adoc

@@ -0,0 +1,40 @@
+= mastodon-api-comments
+:uri-mastodon.js: https://github.com/Kirschn/mastodon.js
+:uti-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" %}}
+// ----

mastodon-api-comments.html

@@ -0,0 +1,9 @@
+{{ $instance := .Get "instance" | default "false" }}
+{{ $status_id := .Get "status_id" | default "false" }}
+
+<!-- Comments via Mastodon-API -->
+{{ partial "mastodon-api-comments-scripts.html" . }}
+<p id="fediverse-comments"></p>
+<script type="application/javascript">
+ fetch_fediverse_comments("{{ $instance }}", "{{ $status_id }}");
+</script>

mastodon-api-comments.js

@@ -0,0 +1,73 @@
+/* globals MastodonAPI */
+
+function fetch_fediverse_comments(instance, status_id)
+{
+    const root = document.getElementById("fediverse-comments");
+
+    let api = new MastodonAPI(
+        {
+            instance: "https://" + instance,
+            api_user_token: ""
+        });
+
+    // Get the URL of the status and write the intro.
+    api.get("statuses/" + status_id, function(data)
+            {
+                root.appendChild(comments_intro(data.url));
+            });
+
+    // Get all the replies to the status and write them to the page.
+    api.get("statuses/" + status_id + "/context", function(data)
+            {
+                write_comments(data);
+            });
+}
+
+function comments_intro(url)
+{
+    const p = document.createElement("p");
+    const a = document.createElement("a");
+    p.appendChild(document.createTextNode("You can "));
+    p.setAttribute("class", "fediverse-comment-intro");
+    a.setAttribute("href", url);
+    a.appendChild(
+        document.createTextNode("comment on this post in the Fediverse"));
+    p.appendChild(a);
+    p.appendChild(document.createTextNode("."));
+
+    return p;
+}
+
+
+function write_comments(data)
+{
+    const root = document.getElementById("fediverse-comments");
+
+    for (const status of data.descendants)
+    {
+        let content = status.content;
+        for (const emoji of status.emojis)
+        {
+            content = content.replace(
+                ':' + emoji.shortcode + ':',
+                '<img style="height: 1em;" src="' + emoji.url + '">');
+        }
+
+        const p = document.createElement("p");
+        p.setAttribute("class", "fediverse-comment");
+        p.appendChild(author_html(status));
+        p.innerHTML += content;
+        root.appendChild(p);
+    }
+}
+
+function author_html(status)
+{
+    const p = document.createElement("p");
+    p.setAttribute("class", "fediverse-comment-author");
+    const strong = document.createElement("strong");
+    strong.appendChild(document.createTextNode(status.display_name));
+    p.appendChild(strong);
+    p.appendChild(document.createTextNode(" (" + status.acct + ") wrote:"));
+    return p;
+}