From d45e51029959cdbb416010812c729d29be96ef3d Mon Sep 17 00:00:00 2001 From: Ayo Date: Wed, 31 May 2023 14:50:06 +0200 Subject: [PATCH] extract webmention utilities to own js --- _includes/head.html | 150 ++------------------------------- assets/js/webmention-utils.mjs | 137 ++++++++++++++++++++++++++++++ 2 files changed, 142 insertions(+), 145 deletions(-) create mode 100644 assets/js/webmention-utils.mjs diff --git a/_includes/head.html b/_includes/head.html index fe5aab3..4e6083a 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -73,7 +73,8 @@ rel="stylesheet" /> - diff --git a/assets/js/webmention-utils.mjs b/assets/js/webmention-utils.mjs new file mode 100644 index 0000000..feba231 --- /dev/null +++ b/assets/js/webmention-utils.mjs @@ -0,0 +1,137 @@ +export function renderMentions(mentions, className) { + const webMentionsSection = document.querySelector(className); + const likes = mentions + .filter((m) => m.author.name !== "Ayo Ayco") + .filter((m) => m["wm-property"] === "like-of"); + const reposts = mentions + .filter((m) => m.author.name !== "Ayo Ayco") + .filter((m) => m["wm-property"] === "repost-of"); + const replies = mentions.filter((m) => m["wm-property"] === "in-reply-to"); + + if (likes.length) { + // render on meta header + document.getElementById("page-likes").innerHTML = `• 👍 ${likes.length}`; + + // render on webmentions section + const clearLikes = document.createElement("div"); + clearLikes.style.clear = "both"; + const likesWrapper = document.createElement("div"); + likesWrapper.append(clearLikes); + const likesHeader = document.createElement("h2"); + likesHeader.innerHTML = `👍 ${likes.length} Likes`; + likesWrapper.append(likesHeader); + const likesAvatars = document.createElement("div"); + likesAvatars.className = "avatar-block"; + likes.forEach((like) => { + const image = document.createElement("img"); + image.src = like.author.photo; + image.alt = `Avatar for ${like.author.name}`; + const link = document.createElement("a"); + link.href = like.author.url; + link.append(image); + likesAvatars.append(link); + }); + likesWrapper.append(likesAvatars); + + webMentionsSection.append(likesWrapper); + } + + if (reposts.length) { + // render on meta header + document.getElementById( + "page-reposts" + ).innerHTML = `• 🔁 ${reposts.length}`; + + // render on webmentions section + const repostsWrapper = document.createElement("div"); + const clearReposts = document.createElement("div"); + clearReposts.style.clear = "both"; + repostsWrapper.append(clearReposts); + const repostsHeader = document.createElement("h2"); + repostsHeader.innerHTML = `🔁 ${reposts.length} Reposts`; + repostsWrapper.append(repostsHeader); + + const repostsAvatars = document.createElement("div"); + repostsAvatars.className = "avatar-block"; + reposts.forEach((repost) => { + const image = document.createElement("img"); + const link = document.createElement("a"); + link.href = repost.author.url; + image.src = repost.author.photo; + image.alt = `Avatar for ${repost.author.name}`; + link.append(image); + repostsAvatars.append(link); + }); + repostsWrapper.append(repostsAvatars); + + webMentionsSection.append(repostsWrapper); + } + + if (replies.length) { + // render on meta header + document.getElementById( + "page-replies" + ).innerHTML = `• 💬 ${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("h2"); + repliesHeader.innerHTML = `💬 ${replies.length} Replies`; + 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 = `Avatar for ${ + reply.author.name + } ${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); + } +} + +export async function getMentions(url) { + let mentions = []; + let page = 0; + let perPage = 100; + + while (true) { + const results = await fetch( + `https://webmention.io/api/mentions.jf2?target=${url}&per-page=${perPage}&page=${page}` + ).then((r) => r.json()); + + mentions = mentions.concat(results.children); + + if (results.children.length < perPage) { + break; + } + + page++; + } + + return mentions.sort((a, b) => + (a.published || a["wm-received"]) < (b.published || b["wm-received"]) + ? -1 + : 1 + ); +}