Implement mastodon comments

_includes/mastodonComments.njk

@@ -0,0 +1,94 @@
+{% if mastodon_id %}
+<section id="comment-section">
+	<h2>Comments</h2>
+	<div class="comment-ingress"></div>
+	<div id="comments" data-id="{{ mastodon_id }}">
+		<p>Loading comments...</p>
+	</div>
+	<div class="continue-discussion">
+		<a class="big-link" href="https://{{ metadata.mastodonHost }}/@{{ metadata.mastodonUser }}/{{ mastodon_id }}">Comment by replying to this post on Mastodon &#187;</a>
+</section>
+
+<template id="comment-template">
+	<wc-comment
+	author_name=""
+	author_url=""
+	avatar_url=""
+	comment_content=""
+	publish_date=""
+	sharp_corner="">
+	</wc-comment>
+</template>
+
+<script>
+const monthMap = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+const dateSuffixAdder = (date) => {
+	if (date > 9 && date < 20) {
+		return "th";
+	} else {
+		let dateString = date < 10 ? "0" + date : "" + date;
+		if (dateString[1] < 4 && dateString[1] > 0) {
+			return dateString[1] == 1 ? "st" :
+				dateString[1] == 2 ? "nd" :
+					dateString[1] == 3 ? "rd" : null;
+		} else {
+			return "th"
+		}
+	}
+}
+
+const timeFormatter = (hours, minutes) => {
+		return `${hours < 12 ? hours : hours - 12}:${minutes < 10 ? "0" : ""}${minutes} ${hours < 12 ? "AM" : "PM"}`
+}
+
+const renderComment = (comment, target, parentIdm) => {
+  const node = document
+    .querySelector("template#comment-template")
+    .content.cloneNode(true);
+
+  const dateObj = new Date(comment.created_at);
+
+  const dateTime = `${dateObj.getDate()}${dateSuffixAdder(dateObj.getDate())} of ${monthMap[dateObj.getMonth()]}, ${dateObj.getFullYear()}, at ${timeFormatter(dateObj.getHours(), dateObj.getMinutes())}`;
+
+    node.querySelector("wc-comment").setAttribute("author_name", comment.account.display_name);
+    node.querySelector("wc-comment").setAttribute("author_url",
+    `${comment.account.acct == "{{ metadata.mastodonUser }}" ? "https://{{ metadata.mastodonHost }}/@{{ metadata.mastodonUser }}" : comment.account.acct}`);
+    node.querySelector("wc-comment").setAttribute("avatar_url", comment.account.avatar_static);
+    node.querySelector("wc-comment").setAttribute("comment_content", comment.content);
+		node.querySelector("wc-comment").setAttribute("publish_date", dateTime);
+
+  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://{{ metadata.mastodonHost }}/api/v1/statuses/${mastodonPostId}`
+  );
+  const originalData = await originalPost.json();
+  renderComment(originalData, commentsNode, null);
+
+  const response = await fetch(
+    `https://{{ metadata.mastodonHost }}/api/v1/statuses/${mastodonPostId}/context`
+  );
+  const data = await response.json();
+  const comments = data.descendants;
+
+  comments.forEach((comment) => {
+    renderComment(comment, commentsNode, mastodonPostId);
+  });
+}
+
+renderComments();
+</script>
+{% endif %}