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