diff --git a/assets/js/webmention-utils.mjs b/assets/js/webmention-utils.mjs
index e1f41da..504d083 100644
--- a/assets/js/webmention-utils.mjs
+++ b/assets/js/webmention-utils.mjs
@@ -3,8 +3,7 @@ export function renderMentions(mentions, className) {
mentions = mentions.filter((m) => m["wm-private"] !== true);
if (mentions.length)
- webMentionsSection.innerHTML =
- "
Mentions Across the World Wide Web
";
+ webMentionsSection.innerHTML = "From Across the Web:
";
const heading = {
"like-of": "👍 {x} Likes",
@@ -25,49 +24,54 @@ export function renderMentions(mentions, className) {
}
});
- const replies = mentions.filter((m) => m["wm-property"] === "in-reply-to");
- if (replies.length) {
- // render on webmentions section
- const repliesWrapper = document.createElement("div");
- const clearReplies = document.createElement("div");
- clearReplies.style.clear = "both";
- repliesWrapper.append(clearReplies);
- const repliesHeader = document.createElement("h3");
- repliesHeader.innerHTML = heading["in-reply-to"].replace(
- "{x}",
- replies.length
- );
- repliesWrapper.append(repliesHeader);
+ ["in-reply-to"].forEach((type) => {
+ const replies = mentions.filter((m) => m["wm-property"] === type);
- const repliesTable = document.createElement("table");
- replies.forEach((reply) => {
- const row = document.createElement("tr");
- const cell = document.createElement("td");
- row.append(cell);
- const author = document.createElement("p");
- author.className = "author-wrapper";
- author.innerHTML = `
${reply.author.name}${new Date(
- reply.published
- ).toLocaleDateString()}`;
- const card = document.createElement("div");
- card.className = "reply-card";
- card.innerHTML = reply.content.html;
- card.insertBefore(author, card.firstChild);
- cell.appendChild(card);
- repliesTable.append(row);
- });
- repliesWrapper.append(repliesTable);
- webMentionsSection.append(repliesWrapper);
- }
+ if (replies.length) {
+ // render on webmentions section
+ const repliesWrapper = createRepliesBlock(replies, heading[type]);
+ webMentionsSection.append(repliesWrapper);
+ }
+ });
}
-function createAvatarBlock(mentions, heading) {
+function createRepliesBlock(replies, heading) {
+ const repliesWrapper = document.createElement("div");
+ const clearReplies = document.createElement("div");
+ clearReplies.style.clear = "both";
+ repliesWrapper.append(clearReplies);
+ const repliesHeader = document.createElement("h3");
+ repliesHeader.innerHTML = heading.replace("{x}", replies.length);
+ repliesWrapper.append(repliesHeader);
+
+ const repliesTable = document.createElement("table");
+ replies.forEach((reply) => {
+ const row = document.createElement("tr");
+ const cell = document.createElement("td");
+ row.append(cell);
+ const author = document.createElement("p");
+ author.className = "author-wrapper";
+ author.innerHTML = `
${reply.author.name}${new Date(
+ reply.published
+ ).toLocaleDateString()}`;
+ const card = document.createElement("div");
+ card.className = "reply-card";
+ card.innerHTML = reply.content.html;
+ card.insertBefore(author, card.firstChild);
+ cell.appendChild(card);
+ repliesTable.append(row);
+ });
+ repliesWrapper.append(repliesTable);
+ return repliesWrapper;
+}
+
+function createAvatarBlock(mentions, headingText) {
const clearDiv = document.createElement("div");
clearDiv.style.clear = "both";
@@ -75,7 +79,7 @@ function createAvatarBlock(mentions, heading) {
avatarBlock.append(clearDiv);
const heading = document.createElement("h3");
- heading.innerHTML = heading.replace("{x}", mentions.length);
+ heading.innerHTML = headingText.replace("{x}", mentions.length);
avatarBlock.append(heading);
const avatars = document.createElement("div");