Add link to comtodon.

README.adoc

@@ -2,6 +2,10 @@
 :uri-mastodon-js: https://github.com/Kirschn/mastodon.js
 :uri-jquery: https://jquery.com/download/
 
+[TIP]
+After I wrote this, I discovered a far better solution:
+https://git.wadza.fr/me/comtodon[comtodon].
+
 == Setup
 
 First copy `mastodon-api-comments.html` to your shortcodes directory. This is
@@ -56,6 +60,8 @@ The generated HTML uses these classes:
 | 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
@@ -65,6 +71,8 @@ The generated HTML uses these classes:
 .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)

mastodon-api-comments.html

@@ -1,8 +1,9 @@
-{{ $instance := .Get "instance" | default "false" }}
-{{ $status_id := .Get "status_id" | default "false" }}
+{{ $instance := .Get "instance" | default "" }}
+{{ $status_id := .Get "status_id" | default "" }}
 
 {{ partial "mastodon-api-comments-scripts.html" . }}
-<p id="mastodon-api-comments_{{ $status_id }}" class="mastodon-api-comments"></p>
+<style type="text/css">.mastodon-api-comment-avatar,.mastodon-api-comment-emoji{height:1em;}</style>
+<div id="mastodon-api-comments_{{ $status_id }}" class="mastodon-api-comments"></div>
 <noscript><p>Comments only work with JavaScript enabled.</p></noscript>
 <script type="application/javascript">
  fetch_mastodon_api_comments("{{ $instance }}", "{{ $status_id }}");

mastodon-api-comments.js

@@ -43,47 +43,66 @@ function write_comments(root, data)
 {
     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 content = add_emojis(status.content, status.emojis);
 
-        const p = document.createElement("p");
-        p.setAttribute("class", "mastodon-api-comment");
-        p.appendChild(author_html(status));
+        const div = document.createElement("div");
+        div.setAttribute("class", "mastodon-api-comment");
+        div.appendChild(author_html(status));
         if (status.spoiler_text.length > 0)
         {
-            const subject_p = document.createElement("p");
-            subject_p.setAttribute("class", "mastodon-api-comment-subject");
-            const subject = document.createElement("strong");
-            subject.appendChild(document.createTextNode(status.spoiler_text));
-            subject_p.appendChild(subject);
-            p.appendChild(subject_p);
+            div.appendChild(subject_html(status));
         }
         const content_p = document.createElement("p");
         content_p.setAttribute("class", "mastodon-api-comment-content");
         content_p.innerHTML = content;
-        p.appendChild(content_p);
-        root.appendChild(p);
+        div.appendChild(content_p);
+        root.appendChild(div);
     }
 }
 
+function add_emojis(text, emojis)
+{
+    for (const emoji of emojis)
+    {
+        text = text.replace(
+            ':' + emoji.shortcode + ':',
+            '<img class="mastodon-api-comment-emoji" src="' + emoji.url + '">');
+    }
+
+    return text;
+}
+
 function author_html(status)
 {
     const p = document.createElement("p");
     p.setAttribute("class", "mastodon-api-comment-author");
+
+    const img = document.createElement("img");
+    img.setAttribute("class", "mastodon-api-comment-avatar");
+    img.setAttribute("src", status.account.avatar);
+    p.appendChild(img);
+    p.innerHTML += " ";
+
     const strong = document.createElement("strong");
     strong.appendChild(document.createTextNode(status.account.display_name));
     p.appendChild(strong);
+
     p.appendChild(
         document.createTextNode(" (" + status.account.acct + ") wrote on "
                                 + get_status_time(status) + ":"));
     return p;
 }
 
+function subject_html(status)
+{
+    const p = document.createElement("p");
+    p.setAttribute("class", "mastodon-api-comment-subject");
+    const subject = document.createElement("strong");
+    subject.innerHTML += add_emojis(status.spoiler_text, status.emojis);
+    p.appendChild(subject);
+    return p;
+}
+
 // Human readable time, YYYY-MM-DD HH:MM.
 function get_status_time(status)
 {