n_u/nathanupchurch.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Deprecate comment embedding in favor of button

Browse Source
This commit is contained in:
Nathan Upchurch 2025-01-23 14:21:53 -06:00
parent f758f1c973
commit aaae71adf9
3 changed files with 9 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
_includes/mastodonComments.njk
View File

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

13
eleventy.config.js
View File

@ -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) => {
// Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens
return DateTime.fromJSDate(dateObj, { zone: zone || "utc" }).toFormat(
format || "dd LLLL yyyy",
);
eleventyConfig.addFilter("niceDate", (date) => {
var day = new Date(date).getUTCDate();
var monthIndex = new Date(date).getUTCMonth();
var year = new Date(date).getUTCFullYear();
return `${day}${dateSuffixAdder(day)} of ${monthMap[monthIndex]}, ${year}`;
});
eleventyConfig.addFilter("htmlDateString", (dateObj) => {

0
public/js/modules/mastodonDateTools.js → public/js/modules/dateTools.js
View File