Implement mastodon comments

_includes/footer.njk

@@ -1,12 +1,13 @@
 <footer>
-	{% if metadata.copyrightNotice %}<p>{{ metadata.copyrightNotice }}</p>{% endif %}<br>
+	<p>{% if metadata.copyrightNotice %}<span class="copyright-notice">{{ metadata.copyrightNotice }}</span>{% endif %}
 
 	{% if metadata.webrings %}
 	{% for webring in metadata.webrings %}
+	<span class="webring">
 	{% if webring.previousURL %}<a href="{{ webring.previousURL  }}">←</a>{% endif %}
 			{% if webring.ringURL %}<a href="{{ webring.ringURL }}">{{ webring.name }}</a>{% endif %}
 			{% if webring.nextURL %}<a href="{{ webring.nextURL }}">→</a>{% endif %}
-	<br>
+	</span>
 	{% endfor %}
-	{% endif %}
+	{% endif %}</p>
 </footer>

_includes/layouts/post.njk

@@ -3,6 +3,7 @@ layout: layouts/base.njk
 ---
 {# Only include the syntax highlighter CSS on blog posts #}
 {%- css %}{% include "public/css/code.css" %}{% endcss %}
+<article class="post">
 <h1>{{ title }}</h1>
 
 <div class="post-metadata">
@@ -28,5 +29,7 @@ layout: layouts/base.njk
 </div>
 
 {{ content | safe }}
-
+</article>
+{% include "mastodonComments.njk" %}
+<h2>Read Next</h2>
 {% include "nextLast.njk" %}

_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 %}

_includes/metadata.njk

@@ -4,6 +4,7 @@
 <link rel="icon" type="image/x-icon" href="/img/logo_favicon.svg">
 <meta name="description" content="{{ description or metadata.description }}">
 <meta name="robots" content="noai, noimageai">
+<meta name="generator" content="{{ eleventy.generator }}">
 <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
 <link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
-<meta name="generator" content="{{ eleventy.generator }}">
+<script type="module" src="/js/main.js"></script>