95 lines
3.0 KiB
Plaintext
95 lines
3.0 KiB
Plaintext
{% 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 »</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 %}
|