show webmentions avatars
This commit is contained in:
Ayo
parent
710d080031
commit
9a7a1b0671
3 changed files with 84 additions and 38 deletions
|
|
@ -91,17 +91,52 @@
|
|||
if (!ignore.includes(url.pathname)) {
|
||||
const mentions = getMentions(url.toString())
|
||||
.then((mentions) => {
|
||||
const webMentionsSection = document.querySelector(
|
||||
".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"
|
||||
);
|
||||
const clearDiv = document.createElement("div");
|
||||
clearDiv.style.clear = "both";
|
||||
|
||||
if (likes.length || reposts.length || replies.length)
|
||||
webMentionsSection.insertAdjacentHTML = "<h3>Web Mentions</h3>";
|
||||
|
||||
if (likes.length)
|
||||
document.getElementById(
|
||||
"page-likes"
|
||||
).innerHTML = `👍 ${likes.length}`;
|
||||
|
||||
if (reposts.length)
|
||||
document.getElementById(
|
||||
"page-reposts"
|
||||
).innerHTML = `🔁 ${reposts.length}`;
|
||||
|
||||
if (likes.length || reposts.length) {
|
||||
const avatars = document.createElement("div");
|
||||
avatars.className = "avatar-block";
|
||||
[...reposts, ...likes].forEach((mention) => {
|
||||
const image = document.createElement("img");
|
||||
image.src = mention.author.photo;
|
||||
image.alt = `Avatar for ${mention.author.name}`;
|
||||
avatars.append(image);
|
||||
});
|
||||
avatars.append(clearDiv);
|
||||
webMentionsSection.append(avatars);
|
||||
}
|
||||
|
||||
if (replies.length) {
|
||||
// render to post header meta
|
||||
const repliesSection = document.querySelector(
|
||||
".blog-post__replies"
|
||||
);
|
||||
document.getElementById(
|
||||
"page-replies"
|
||||
).innerHTML = `• 💬 ${replies.length}`;
|
||||
).innerHTML = `💬 ${replies.length}`;
|
||||
|
||||
// render to replies section
|
||||
const repliesTable = document.createElement("table");
|
||||
|
|
@ -120,38 +155,30 @@
|
|||
}</span><a href="${reply.url}" class="reply-date">${new Date(
|
||||
reply.published
|
||||
).toLocaleDateString()}</a><div class="clear-both"></div>`;
|
||||
const replyBlock = document.createElement("div");
|
||||
replyBlock.className = "reply-block";
|
||||
replyBlock.innerHTML = reply.content.html;
|
||||
replyBlock.insertBefore(author, replyBlock.firstChild);
|
||||
cell.appendChild(replyBlock);
|
||||
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);
|
||||
});
|
||||
|
||||
repliesSection.innerHTML = `<h2>Web Mentions</h2><p>Replies across{% if page.fedi-url %}
|
||||
<a href="{{page.fedi-url}}">
|
||||
{% endif %}
|
||||
the Fediverse
|
||||
{% if page.fedi-url %}
|
||||
</a>
|
||||
{% endif %} and the Web...</p>`;
|
||||
|
||||
repliesSection.append(repliesTable);
|
||||
repliesTable.style.display = "none";
|
||||
const button = document.createElement("button");
|
||||
const text = `Show ${replies.length} replies`;
|
||||
button.innerHTML = text;
|
||||
button.onclick = () => {
|
||||
if (repliesTable.style.display === "none") {
|
||||
repliesTable.style.display = "block";
|
||||
button.innerHTML = "Hide replies";
|
||||
} else {
|
||||
repliesTable.style.display = "none";
|
||||
button.innerHTML = text;
|
||||
}
|
||||
};
|
||||
|
||||
const likes = mentions.filter((m) => m["wm-property"] === "like-of");
|
||||
if (likes.length)
|
||||
document.getElementById(
|
||||
"page-likes"
|
||||
).innerHTML = `• 👍 ${likes.length}`;
|
||||
|
||||
const reposts = mentions.filter(
|
||||
(m) => m["wm-property"] === "repost-of"
|
||||
);
|
||||
if (reposts.length)
|
||||
document.getElementById(
|
||||
"page-reposts"
|
||||
).innerHTML = `• 🔁 ${reposts.length}`;
|
||||
webMentionsSection.append(button);
|
||||
webMentionsSection.append(repliesTable);
|
||||
}
|
||||
})
|
||||
.catch((err) => console.log("err", err));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,9 +30,6 @@ layout: default
|
|||
default: "%b %-d, %Y" %} {{ page.date | date: date_format }}
|
||||
</span>
|
||||
</time>
|
||||
<span class="blog-post__header__meta__engagement" id="page-replies"></span>
|
||||
<span class="blog-post__header__meta__engagement" id="page-likes"></span>
|
||||
<span class="blog-post__header__meta__engagement" id="page-reposts"></span>
|
||||
</div>
|
||||
{% if page.image %}
|
||||
<img
|
||||
|
|
@ -84,6 +81,10 @@ layout: default
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="blog-post__replies"></div>
|
||||
<div class="blog-post__web-mentions">
|
||||
<span class="blog-post__header__meta__engagement" id="page-replies"></span>
|
||||
<span class="blog-post__header__meta__engagement" id="page-likes"></span>
|
||||
<span class="blog-post__header__meta__engagement" id="page-reposts"></span>
|
||||
</div>
|
||||
<a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -435,10 +435,28 @@ table.image caption {
|
|||
"Open Sans", "Helvetica Neue", sans-serif !important;
|
||||
}
|
||||
}
|
||||
&__replies {
|
||||
&__web-mentions {
|
||||
margin: 2em 0;
|
||||
max-width: fit-content;
|
||||
.reply-block {
|
||||
text-align: center;
|
||||
|
||||
.avatar-block {
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
padding: 0 1em;
|
||||
max-width: fit-content;
|
||||
img {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #80ae3c;
|
||||
margin-left: -0.7em;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-card {
|
||||
max-width: fit-content;
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
padding: 0 1em;
|
||||
|
|
|
|||
Loading…
Reference in a new issue