Now we can have comments!

layouts/partials/comments/include.html

@@ -0,0 +1,112 @@
+{{ if .Site.Params.comments.enabled }}
+
+  <section id="email-comments">
+    <p>If you want to start a discussion about this topic, you can send me an <strong><a href="mailto:{{ $.Site.Params.comments.commentsEmail }}?subject={{ replace (printf "Re: %s" $.Page.Title) "\"" "'" }}">e-mail: <i>blog@rennerocha.com</i></a></strong> ✉️</p>
+  </section>
+
+  {{ if .Params.mastodon_id}}
+  <section id="mastodon-comments">
+    <h4>Comments</h4>
+    <div class="comment-ingress">
+      Comment by replying to <strong><a href="https://chaos.social/@rennerocha/{{ .Params.mastodon_id }}">this post on Mastodon</a></strong>.
+    </div>
+
+    <div id="comments" data-id="{{ .Params.mastodon_id }}">
+      <p>Loading comments...</p>
+    </div>
+
+    <div class="continue-discussion">
+      <p>Continue discussion on <a href="https://chaos.social/@rennerocha/{{ .Params.mastodon_id }}">Fediverse</a> &#187;</p>
+    </div>
+  </section>
+
+  <template id="comment-template">
+    <hr />
+    <article class="blog-comment" style="display: grid; grid-template-columns: 10% 90%;">
+      <div>
+        <img />
+      </div>
+      <div class="comment-content">
+        <div class="author" style="font-size: smaller; font-weight: bold"></div>
+        <div class="publish-date" style="font-size: smaller; font-weight: lighter; font-style: italic;"></div>
+        <div class="comment" style="font-size: larger; font-weight: bold"></div>
+      </div>
+    </article>
+  </template>
+
+  <script type="text/javascript">
+    function renderComment(comment, target, parentId) {
+      const node = document
+        .querySelector("template#comment-template")
+        .content.cloneNode(true);
+
+      const author = node.querySelector(".author");
+
+      let mastodonAcct = comment.account.acct;
+      if (mastodonAcct === "rennerocha") {
+        mastodonAcct = "rennerocha@chaos.social";
+      }
+
+      let in_reply_to_id = comment.in_reply_to_id;
+
+      author.innerHTML = `<a href="${comment.account.url}" target=_blank>${comment.account.display_name} (${mastodonAcct})</a>`;
+
+      const commentContainer = node.querySelector(".blog-comment");
+      if (in_reply_to_id !== parentId) {
+        commentContainer.classList.add("indent");
+      }
+
+      const publishDate = node.querySelector(".publish-date");
+      const dateObj = new Date(comment.created_at);
+
+      const dateTime = `${dateObj.getDate()}.${
+        dateObj.getMonth() + 1
+      }.${dateObj.getFullYear()} ${dateObj.getHours()}:${dateObj.getMinutes()}`;
+
+      publishDate.innerHTML = `<a href="${comment.url}" target=_blank>${dateTime}</a>`;
+
+      const userComment = node.querySelector(".comment");
+      userComment.innerHTML = comment.content;
+
+      const avatar = node.querySelector("img");
+      avatar.src = comment.account.avatar_static;
+      avatar.setAttribute("width", "50");
+      avatar.setAttribute("height", "50");
+
+      target.appendChild(node);
+    }
+
+    async function renderComments() {
+      const commentsNode = document.querySelector("#comments");
+
+      const mastodonPostId = commentsNode.dataset?.id;
+
+      if (!mastodonPostId) {
+        return;
+      }
+
+      commentsNode.innerHTML = "";
+
+      const originalPost = await fetch(
+        `https://chaos.social/api/v1/statuses/${mastodonPostId}`
+      );
+      const originalData = await originalPost.json();
+      renderComment(originalData, commentsNode, null);
+
+      const response = await fetch(
+        `https://chaos.social/api/v1/statuses/${mastodonPostId}/context`
+      );
+      const data = await response.json();
+      const comments = data.descendants;
+
+      comments.forEach((comment) => {
+        renderComment(comment, commentsNode, mastodonPostId);
+      });
+    }
+
+    renderComments();
+</script>
+
+{{ end }}
+
+{{ end }}