add comments via mastodon toots

Author: ghostletters

content/notes/2020/3/23/2210/index.md

@@ -0,0 +1,19 @@
+---
+title: "Add Comments to Hugo Blog"
+date: 2021-03-23T22:19:10+01:00
+draft: false
+tags: ["note", "comment", "mastodon", "javascript"]
+description: "Use JavaScript to load comments from Mastodon"
+
+comments:
+  host: fosstodon.org
+  username: ghost_letters
+  id: 
+---
+
+After reading this [Toot from Surendrajat](https://fosstodon.org/web/statuses/105935391504191020) I wanted to add Mastodon Toots as comments. Thanks [@carl](https://linuxrocks.online/@carl) for inventing the smart comment solution and sharing the required JavaScript / Hugo integration.
+
+Original source: [Adding comments to your static blog with Mastodon](https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/)
+
+If you want to see how it all comes together, check out this [git commit]().
+

themes/ghostletters/layouts/_default/single.html

@@ -6,5 +6,6 @@ <h1>{{ .Title }}</h1>
         <hr>
         {{ partial "metadata.html" . }}
     </footer>
+    {{ partial "comments.html" . }}
 </article>
 {{ end }}

themes/ghostletters/layouts/partials/comments.html

@@ -0,0 +1,61 @@
+{{ with .Params.comments }}
+<div class="article-content">
+    <h2>Comments</h2>
+    <p>You can use your Mastodon account to reply to this <a class="link" href="https://{{ .host }}/@{{ .username }}/{{ .id }}">post</a>.</p>
+    <p><a class="button" href="https://{{ .host }}/interact/{{ .id }}?type=reply">Reply</a></p>
+    <p id="mastodon-comments-list"><button id="load-comment">Load comments</button></p>
+    <noscript><p>You need JavaScript to view the comments.</p></noscript>
+    <script type="text/javascript">
+    function escapeHtml(unsafe) {
+      return unsafe
+           .replace(/&/g, "&amp;")
+           .replace(/</g, "&lt;")
+           .replace(/>/g, "&gt;")
+           .replace(/"/g, "&quot;")
+           .replace(/'/g, "&#039;");
+   }
+
+    document.getElementById("load-comment").addEventListener("click", function() {
+      document.getElementById("load-comment").innerHTML = "Loading";
+      fetch('https://{{ .host }}/api/v1/statuses/{{ .id }}/context')
+        .then(function(response) {
+          return response.json();
+        })
+        .then(function(data) {
+          if(data['descendants'] &&
+             Array.isArray(data['descendants']) &&
+            data['descendants'].length > 0) {
+              document.getElementById('mastodon-comments-list').innerHTML = "";
+              data['descendants'].forEach(function(reply) {
+                reply.account.display_name = escapeHtml(reply.account.display_name);
+                reply.account.emojis.forEach(emoji => {
+                  reply.account.display_name = reply.account.display_name.replace(`:${emoji.shortcode}:`,
+                    `<img src="${escapeHtml(emoji.static_url)}" alt="Emoji ${emoji.shortcode}" height="20" width="20" />`);
+                });
+                mastodonComment =
+                  `<div class="mastodon-comment">
+                    <div class="comment_author">
+                        <img class="comment_avatar" src="${escapeHtml(reply.account.avatar_static)}" height=40 width=40 alt="">
+                        <a class="comment_display_name" href="${reply.account.url}" rel="nofollow">
+                            ${reply.account.display_name}
+                        </a>
+                        ${reply.created_at.substr(0, 10)}
+                        <a class="comment_reply" href="${reply.uri}" rel="nofollow">
+                            Reply
+                        </a>
+                    </div>
+                    <div class="content">
+                        <div class="mastodon-comment-content">${reply.content}</div>
+                    </div>
+                </div>`;
+                document.getElementById('mastodon-comments-list').appendChild(DOMPurify.sanitize(mastodonComment, {'RETURN_DOM_FRAGMENT': true}));
+              });
+          } else {
+            document.getElementById('mastodon-comments-list').innerHTML = "<p>Not comments found</p>";
+          }
+        });
+      });
+  </script>
+    <script src="/js/purify.min.js"></script>
+</div>
+{{ end }}

themes/ghostletters/layouts/partials/head.html

@@ -2,6 +2,10 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="/css/style.css">
 
+{{ if isset .Page.Params "comments" }}
+    <link rel="stylesheet" type="text/css" href="/css/style_comments.css">
+{{ end }}
+
 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 

themes/ghostletters/layouts/partials/metadata.html

@@ -1,7 +1,7 @@
 <div class="grid-left-right">
     <div class="left">
         {{ $dateTime := .PublishDate.Format "2006-01-02" }}
-        {{ $dateFormat := .Site.Params.dateFormat | default "Jan 2, 2006" }}
+        {{ $dateFormat := .Site.Params.dateFormat | default "2006-01-02" }}
         Published
         <time datetime="{{ $dateTime }}">{{ .PublishDate.Format $dateFormat }}</time>
     </div>

themes/ghostletters/static/css/style_comments.css

@@ -0,0 +1,23 @@
+.mastodon-comment {
+  background-color: mistyrose;
+  padding: 8px;
+  margin-bottom: 8px;
+  border-radius: 8px;
+}
+
+.comment_author {
+  display: flex;
+}
+
+.comment_display_name {
+  margin-right: 8px;
+}
+
+.comment_reply {
+  flex-grow: 1;
+  text-align: right;
+}
+
+.comment_avatar {
+  margin-right: 8px;
+}