---
type Props = {
instance?: string;
user?: string;
postId?: string;
};
const { instance, user, postId } = Astro.props;
---
<section
id="comment-section"
class="hidden px-2 font-serif"
aria-describedby="title-comment-section"
data-instance={instance || ""}
data-user={user || ""}
data-post-id={postId || ""}
>
<h2 id="title-comment-section" class="py-2 font-serif text-xl font-semibold text-stone-800 dark:text-stone-100">
Comments
</h2>
<div class="text-stone-800 dark:text-stone-100" id="comments">
<button
class="mx-auto w-64 rounded-lg bg-bm-300 px-4 py-1 underline disabled:bg-bm-400 disabled:no-underline dark:bg-green-800 dark:disabled:bg-green-900"
id="load-comments-button"
data-load-comments
>
<span>Click to load comments</span>
</button>
</div>
</section>
<template id="template-comments-loading">
<svg class="-mt-1 mr-1 inline h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path
class="opacity-100"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
<span>Loading...</span>
</template>
<template id="template-comment-box">
<div class="my-2 rounded-md border-2 border-stone-400 bg-stone-200 p-2 dark:border-stone-600 dark:bg-stone-800">
<div class="ml-1">
<a data-author class="text-link flex items-center text-lg hover:underline focus:underline">
<img data-avatar class="mr-2 w-10 rounded-full border border-stone-400 dark:border-stone-600" />
<span data-display-name></span>
</a>
<a data-post-link class="text-link my-1 flex items-center text-sm font-light hover:underline focus:underline">
<span class="mr-1" data-publish-date></span>
</a>
</div>
<div data-content class="prose-a:text-link prose prose-story my-1 dark:prose-invert prose-img:my-0"></div>
<div class="ml-1 flex flex-row pb-2 pt-1">
<div class="flex" aria-label="Favorites">
<span data-favorites></span>
<svg class="ml-2 w-5 fill-current" viewBox="0 0 576 512" aria-hidden>
<path
d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"
></path>
</svg>
</div>
<div class="ml-4 flex" aria-label="Reblogs">
<span data-reblogs></span>
<svg class="ml-2 w-5 fill-current" viewBox="0 0 512 512" aria-hidden>
<path
d="M0 224c0 17.7 14.3 32 32 32s32-14.3 32-32c0-53 43-96 96-96H320v32c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-9.2-9.2-22.9-11.9-34.9-6.9S320 19.1 320 32V64H160C71.6 64 0 135.6 0 224zm512 64c0-17.7-14.3-32-32-32s-32 14.3-32 32c0 53-43 96-96 96H192V352c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V448H352c88.4 0 160-71.6 160-160z"
></path>
</svg>
</div>
</div>
<div data-comment-thread class="-mb-2"></div>
</div>
</template>
<script>
interface Emoji {
shortcode: string;
url: string;
static_url: string;
}
interface Comment {
id: string;
in_reply_to_id: string;
url: string;
favourites_count: number;
reblogs_count: number;
created_at: string;
edited_at: string | null;
account: {
username: string;
acct: string;
display_name: string;
url: string;
avatar: string;
avatar_static: string;
emojis: Emoji[];
};
content: string;
emojis: Emoji[];
}
(function () {
const replaceEmojis = (text: string, emojis: Emoji[], imgClass: string) =>
emojis.reduce(
(acc, emoji) =>
acc.replaceAll(
`:${emoji.shortcode}:`,
`<img class="${imgClass}" alt=":${emoji.shortcode}: emoji" src="${emoji.url}" />`,
),
text,
);
const commentSection = document.querySelector<Element>("#comment-section")!;
const instance = commentSection.getAttribute("data-instance");
const user = commentSection.getAttribute("data-user");
const postId = commentSection.getAttribute("data-post-id");
if (instance && user && postId) {
commentSection.classList.remove("hidden");
commentSection.querySelector<HTMLButtonElement>("button[data-load-comments]")!.addEventListener("click", (e) => {
e.preventDefault();
const loadCommentsButton = e.target as HTMLButtonElement;
loadCommentsButton.setAttribute("disabled", "true");
loadCommentsButton.replaceChildren(
(document.getElementById("template-comments-loading") as HTMLTemplateElement).content.cloneNode(true),
);
const renderComments = async () => {
try {
if (!instance || !user || !postId) {
throw new Error(
`Cannot fetch comments without all fields (instance=${instance}, user=${user}, post-id=${postId})`,
);
}
const response = await fetch(`https://${instance}/api/v1/statuses/${postId}/context`);
if (!response.ok) {
throw new Error(`Received error status ${response.status} - ${response.statusText}!`);
}
const data: { ancestors: Comment[]; descendants: Comment[] } = await response.json();
// console.log(data);
const commentsList: HTMLElement[] = [];
const commentMap: Record<string, number> = {};
const commentTemplate = document.getElementById("template-comment-box") as HTMLTemplateElement;
data.descendants.forEach((comment) => {
const commentBox = commentTemplate.content.cloneNode(true) as HTMLDivElement;
const commentBoxAuthor = commentBox.querySelector<HTMLAnchorElement>("[data-author]")!;
commentBoxAuthor.href = comment.account.url;
commentBoxAuthor.target = "_blank";
const avatar = commentBoxAuthor.querySelector<HTMLImageElement>("[data-avatar]")!;
avatar.src = comment.account.avatar;
avatar.alt = `Profile picture of ${comment.account.username}`;
const displayName = commentBoxAuthor.querySelector<HTMLSpanElement>("[data-display-name]")!;
displayName.innerHTML = replaceEmojis(
comment.account.display_name,
comment.account.emojis,
"inline mx-[1px] w-5",
);
const commentBoxPostLink = commentBox.querySelector<HTMLAnchorElement>("[data-post-link]")!;
commentBoxPostLink.href = comment.url;
commentBoxPostLink.target = "_blank";
const publishDate = commentBoxPostLink.querySelector<HTMLSpanElement>("[data-publish-date]")!;
// TO-DO Pretty format date
publishDate.innerText = new Date(Date.parse(comment.created_at)).toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
});
if (comment.edited_at) {
const edited = document.createElement("span");
edited.className = "italic";
edited.innerText = "(edited)";
commentBoxPostLink.appendChild(edited);
}
const commentBoxContent = commentBox.querySelector<HTMLDivElement>("[data-content]")!;
commentBoxContent.innerHTML = replaceEmojis(comment.content, comment.emojis, "inline mx-[1px] w-5");
const commentBoxFavorites = commentBox.querySelector<HTMLSpanElement>("[data-favorites]")!;
commentBoxFavorites.innerText = comment.favourites_count.toString();
const commentBoxReblogs = commentBox.querySelector<HTMLSpanElement>("[data-reblogs]")!;
commentBoxReblogs.innerText = comment.reblogs_count.toString();
if (comment.in_reply_to_id === postId || !(comment.in_reply_to_id in commentMap)) {
commentMap[comment.id] = commentsList.length;
commentsList.push(commentBox);
} else {
const commentsIndex = commentMap[comment.in_reply_to_id];
commentMap[comment.id] = commentsIndex;
commentsList[commentsIndex]
.querySelector<HTMLDivElement>("[data-comment-thread]")!
.appendChild(commentBox);
}
});
const commentsDiv = commentSection.querySelector<HTMLDivElement>("#comments")!;
if (commentsList.length === 0) {
commentsDiv.innerHTML = `<p class="my-1">No comments yet. <a class="text-link underline" href="https://${instance}/@${user}/${postId}" target="_noblank">Be the first to join the conversation on Mastodon</a>.</p>`;
} else {
commentsDiv.innerHTML = `<p class="my-1">Join the conversation <a class="text-link underline" href="https://${instance}/@${user}/${postId}" target="_noblank">by replying on Mastodon</a>.</p>`;
commentsDiv.append(...commentsList);
}
} catch (e) {
loadCommentsButton.innerHTML = `<span>Unable to load comments.</span>`;
console.error("Fetch Mastodon comments error", e);
}
};
renderComments();
});
}
})();
</script>