ayo/blog
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: reusable replies block

Browse source
This commit is contained in:
Ayo 2023-05-31 22:16:07 +02:00
parent fa70cc0d9c
commit c3bd95a40b
1 changed files with 47 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
assets/js/webmention-utils.mjs
View file

@ -3,8 +3,7 @@ export function renderMentions(mentions, className) {
mentions = mentions.filter((m) => m["wm-private"] !== true); mentions = mentions.filter((m) => m["wm-private"] !== true);
if (mentions.length) if (mentions.length)
webMentionsSection.innerHTML = webMentionsSection.innerHTML = "<h2>From Across the Web:</h2>";
"<h2>Mentions Across the World Wide Web</h2>";
const heading = { const heading = {
"like-of": "👍 {x} Likes", "like-of": "👍 {x} Likes",
@ -25,49 +24,54 @@ export function renderMentions(mentions, className) {
} }
}); });
const replies = mentions.filter((m) => m["wm-property"] === "in-reply-to"); ["in-reply-to"].forEach((type) => {
if (replies.length) { const replies = mentions.filter((m) => m["wm-property"] === type);
// 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);
const repliesTable = document.createElement("table"); if (replies.length) {
replies.forEach((reply) => { // render on webmentions section
const row = document.createElement("tr"); const repliesWrapper = createRepliesBlock(replies, heading[type]);
const cell = document.createElement("td"); webMentionsSection.append(repliesWrapper);
row.append(cell); }
const author = document.createElement("p"); });
author.className = "author-wrapper";
author.innerHTML = `<a href="${reply.author.url}"><img alt="Avatar for ${
reply.author.name
}" class="reply-photo" src="${
reply.author.photo
}" /></a> <span class="reply-name">${reply.author.name}</span><a href="${
reply.url
}" class="reply-date">${new Date(
reply.published
).toLocaleDateString()}</a><div class="clear-both"></div>`;
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);
}
} }
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 = `<a href="${reply.author.url}"><img alt="Avatar for ${
reply.author.name
}" class="reply-photo" src="${
reply.author.photo
}" /></a> <span class="reply-name">${reply.author.name}</span><a href="${
reply.url
}" class="reply-date">${new Date(
reply.published
).toLocaleDateString()}</a><div class="clear-both"></div>`;
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"); const clearDiv = document.createElement("div");
clearDiv.style.clear = "both"; clearDiv.style.clear = "both";
@ -75,7 +79,7 @@ function createAvatarBlock(mentions, heading) {
avatarBlock.append(clearDiv); avatarBlock.append(clearDiv);
const heading = document.createElement("h3"); const heading = document.createElement("h3");
heading.innerHTML = heading.replace("{x}", mentions.length); heading.innerHTML = headingText.replace("{x}", mentions.length);
avatarBlock.append(heading); avatarBlock.append(heading);
const avatars = document.createElement("div"); const avatars = document.createElement("div");