Deprecate comment embedding in favor of button

_includes/mastodonComments.njk

@@ -1,81 +1,12 @@
 {% if mastodon_id %}
 <section class="" 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="link-button" href="https://{{ metadata.mastodonHost }}/@{{ metadata.mastodonUser }}/{{ mastodon_id }}">
 			<button type="button">
-				Reply on Mastodon to comment &#187;
+			<img src="/img/mastodon.svg">
+				Discuss on Mastodon &#187;
 			</button>
 		</a>
 	</div>
 </section>
-
-<template id="comment-template">
-	<wc-card>
-		<wc-comment
-		author_name=""
-		author_url=""
-		avatar_url=""
-		comment_content=""
-		publish_date=""
-		sharp_corner="">
-		</wc-comment>
-	</wc-card>
-</template>
-
-<script type="module">
-import {dateSuffixAdder, monthMap, timeFormatter} from "../../js/modules/mastodonDateTools.js";
-
-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.url.replace(/\/[0-9]+/, ""));
-    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 %}

eleventy.config.js

@@ -13,7 +13,7 @@ import {
 	dateSuffixAdder,
 	monthMap,
 	timeFormatter,
-} from "./public/js/modules/mastodonDateTools.js";
+} from "./public/js/modules/dateTools.js";
 
 const figoptions = {
 	figcaption: true,
@@ -74,11 +74,12 @@ export default async function (eleventyConfig) {
 	eleventyConfig.addPlugin(pluginBundle);
 
 	// Filters
-	eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
+	eleventyConfig.addFilter("niceDate", (date) => {
-		// Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens
+		var day = new Date(date).getUTCDate();
-		return DateTime.fromJSDate(dateObj, { zone: zone || "utc" }).toFormat(
+		var monthIndex = new Date(date).getUTCMonth();
-			format || "dd LLLL yyyy",
+		var year = new Date(date).getUTCFullYear();
-		);
+
+		return `${day}${dateSuffixAdder(day)} of ${monthMap[monthIndex]}, ${year}`;
 	});
 
 	eleventyConfig.addFilter("htmlDateString", (dateObj) => {