62 lines
1.6 KiB
JavaScript
62 lines
1.6 KiB
JavaScript
let hasLoadedComments = false;
|
|
const container = document.getElementById("comments-container");
|
|
container.addEventListener("toggle", (_) => {
|
|
if (container.open && !hasLoadedComments) {
|
|
hasLoadedComments = true;
|
|
fetchComments();
|
|
}
|
|
});
|
|
|
|
async function fetchComments() {
|
|
if (typeof commentsPostID !== "undefined") {
|
|
const res = await fetch(
|
|
`https://social.shadowfacts.net/api/v1/statuses/${commentsPostID}/context`,
|
|
);
|
|
const json = await res.json();
|
|
const comments = json.descendants.map(makeCommentHTML).join("");
|
|
const list = document.getElementById("comments-list");
|
|
list.innerHTML = comments;
|
|
list.querySelectorAll(".comment-body a").forEach((a) => {
|
|
a.target = "_blank";
|
|
a.rel = "nofollow";
|
|
});
|
|
}
|
|
}
|
|
|
|
function makeCommentHTML(status) {
|
|
const date = new Date(status.created_at);
|
|
const month = [
|
|
"Jan",
|
|
"Feb",
|
|
"Mar",
|
|
"Apr",
|
|
"May",
|
|
"Jun",
|
|
"Jul",
|
|
"Aug",
|
|
"Sep",
|
|
"Oct",
|
|
"Nov",
|
|
"Dec",
|
|
][date.getMonth()];
|
|
return `
|
|
<div class="comment">
|
|
<div class="comment-user">
|
|
<img src="${status.account.avatar}" loading="lazy">
|
|
<div class="comment-user-name">
|
|
<h3>${status.account.display_name}</h3>
|
|
<a href="${status.account.url}" target="_blank">@${status.account.acct}</a>
|
|
</div>
|
|
<a href="${status.url}" target="_blank">
|
|
<time datetime="${status.created_at}">
|
|
${month} ${date.getDate()}, ${date.getFullYear()}
|
|
</time>
|
|
</a>
|
|
</div>
|
|
<div class="comment-body">
|
|
${status.content}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|