extract webmention utilities to own js
This commit is contained in:
Ayo
parent
1adebc9240
commit
d45e510299
2 changed files with 142 additions and 145 deletions
|
|
@ -73,7 +73,8 @@
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<script>
|
<script type="module">
|
||||||
|
import * as webmentionUtils from "/assets/js/webmention-utils.mjs";
|
||||||
const ignore = [
|
const ignore = [
|
||||||
"/",
|
"/",
|
||||||
"/categories/",
|
"/categories/",
|
||||||
|
|
@ -89,153 +90,12 @@
|
||||||
document.URL.replace("http://localhost:4000", "https://ayos.blog")
|
document.URL.replace("http://localhost:4000", "https://ayos.blog")
|
||||||
);
|
);
|
||||||
if (!ignore.includes(url.pathname)) {
|
if (!ignore.includes(url.pathname)) {
|
||||||
const mentions = getMentions(url.toString())
|
const mentions = webmentionUtils
|
||||||
|
.getMentions(url.toString())
|
||||||
.then((mentions) => {
|
.then((mentions) => {
|
||||||
const webMentionsSection = document.querySelector(
|
webmentionUtils.renderMentions(mentions, ".blog-post__web-mentions");
|
||||||
".blog-post__web-mentions"
|
|
||||||
);
|
|
||||||
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 = `<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);
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
.catch((err) => console.log("err", err));
|
.catch((err) => console.log("err", err));
|
||||||
}
|
}
|
||||||
|
|
||||||
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
|
|
||||||
);
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
137
assets/js/webmention-utils.mjs
Normal file
137
assets/js/webmention-utils.mjs
Normal file
|
|
@ -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 = `<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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue