open comments in mastodon

archetypes/default.md

@@ -9,4 +9,8 @@ description: "Jour 006/100 du défi 100DaysToOffLoad."
 categories:
   - cat1
 toc: true
+comments:
+  host: gts.colmaris.fr
+  username: colmaris
+  id:
 ---

themes/hugo-blog-awesome/i18n/fr-fr.yaml

@@ -25,3 +25,15 @@
 
 - id: "errors.404_description"
   translation: "Vous avez suivi une adresse qui n'existe pas."
+
+- id: "Comments"
+  translation: "Commentaires"
+
+- id: "Use_fediverse_account"
+  translation: 'Vous pouvez répondre sur <strong><a class="link" href="https://{{ .host }}/@{{ .username }}/{{ .id }}">Mastodon !</a></strong>'
+  
+- id: "Load_comments"
+  translation: "Charger les commentaires"
+
+- id: "No_comment"
+  translation: "Pas encore de commentaire, soyez le premier à réagir !"

themes/hugo-blog-awesome/layouts/_default/single.html

@@ -16,6 +16,7 @@
             <div class="page-content">
                 {{ .Content }}
             </div>
+            {{ partial "masto-comments.html" . }}
         </article>
         {{- partial "comments.html" . -}}
     </main>

themes/hugo-blog-awesome/layouts/partials/masto-comments.html

@@ -0,0 +1,81 @@
+{{ with .Params.comments }}
+<div class="article-content">
+  {{ $icon := index $.Site.Data.fontawesome.icons "comments" }}
+  {{ $svg := $icon.svg.solid | default $icon.svg.regular | default $icon.svg.brands }}
+  <h2><span class="icons">{{ safeHTML $svg.raw }}</span> {{ i18n "Comments" . }}</h2>
+  <p>
+    {{ i18n "Use_fediverse_account" . | safeHTML }}
+  </p>
+  <p id="mastodon-comments-list"><button id="load-comment">{{ i18n "Load_comments" . }}</button></p>
+  <noscript><p>You need JavaScript to view the comments.</p></noscript>
+  <script src="/js/purify.min.js"></script>
+  <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" />`);
+                });
+                reply.media_previews='';
+                if(typeof reply.media_attachments !== "undefined") {
+                  reply.media_attachments.forEach(media => {
+                    if(typeof media.preview_url !== "undefined" && typeof media.type !== "undefined" && media.type=="image")
+                      reply.media_previews+='<img src="'+media.preview_url+'" /> ';
+                  });
+                }
+                mastodonComment =
+                  `<div class="mastodon-container" id="${reply.id}">
+                   <div class="mastodon-comment">
+                     <div class="avatar">
+                       <img src="${escapeHtml(reply.account.avatar_static)}" height=60 width=60 alt="">
+                     </div>
+                     <div class="content">
+                       <div class="author">
+                         <a class="date" href="${reply.uri}" rel="nofollow">
+                           ${reply.created_at.substr(0, 10)} ${reply.created_at.substr(11, 5)} ${reply.created_at.substr(-1)}
+                         </a>
+                         <a href="${reply.account.url}" rel="nofollow">
+                           <span>${reply.account.display_name}</span>
+                           <span class="disabled">/ @${escapeHtml(reply.account.acct)}</span>
+                         </a>
+                       </div>
+                       <div class="mastodon-comment-content">${reply.content}</div> 
+                       <div class="mastodon-comment-media">${reply.media_previews}</div> 
+                     </div>
+                   </div>
+                   </div>`;
+                reply_to_id = reply.in_reply_to_id;
+                parentComment = document.getElementById(reply_to_id);
+                if(parentComment !== null)
+                  parentComment.appendChild(DOMPurify.sanitize(mastodonComment, {'RETURN_DOM_FRAGMENT': true}));
+                else
+                  document.getElementById('mastodon-comments-list').appendChild(DOMPurify.sanitize(mastodonComment, {'RETURN_DOM_FRAGMENT': true}));
+              });
+          } else {
+            document.getElementById('mastodon-comments-list').innerHTML = "<p>{{ i18n "No_comment" . }}</p>";
+          }
+        });
+      });
+  </script>
+</div>
+{{ end }}