v6/site/static/js/comments.js

let hasLoadedComments = false;
const commentsContainer = document.getElementById("comments-container");
commentsContainer.addEventListener("toggle", (_) => {
    if (commentsContainer.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>
  `;
}