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

refactor: avatar block

Browse source
This commit is contained in:
Ayo 2023-05-31 22:07:50 +02:00
parent 050cc25e1a
commit fa70cc0d9c
2 changed files with 35 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
_includes/head.html
View file

@ -74,8 +74,12 @@
/>
<script type="module">
import * as webmentionUtils from "/assets/js/webmention-utils.mjs";
const ignore = [
import {
getMentions,
renderMentions,
} from "/assets/js/webmention-utils.mjs";
const ignorePaths = [
"/",
"/categories/",
"/about/",
@ -89,11 +93,10 @@
const url = new URL(
document.URL.replace("http://localhost:4000", "https://ayos.blog")
);
if (!ignore.includes(url.pathname)) {
const mentions = webmentionUtils
.getMentions(url.toString())
if (!ignorePaths.includes(url.pathname)) {
const mentions = getMentions(url.toString())
.then((mentions) => {
webmentionUtils.renderMentions(mentions, ".blog-post__web-mentions");
renderMentions(mentions, ".blog-post__web-mentions");
})
.catch((err) => console.log("err", err));
}

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

@ -2,6 +2,10 @@ export function renderMentions(mentions, className) {
const webMentionsSection = document.querySelector(className);
mentions = mentions.filter((m) => m["wm-private"] !== true);
if (mentions.length)
webMentionsSection.innerHTML =
"<h2>Mentions Across the World Wide Web</h2>";
const heading = {
"like-of": "👍 {x} Likes",
"repost-of": "🔁 {x} Reposts",
@ -64,26 +68,32 @@ export function renderMentions(mentions, className) {
}
function createAvatarBlock(mentions, heading) {
const clearLikes = document.createElement("div");
clearLikes.style.clear = "both";
const likesWrapper = document.createElement("div");
likesWrapper.append(clearLikes);
const likesHeader = document.createElement("h3");
likesHeader.innerHTML = heading.replace("{x}", mentions.length);
likesWrapper.append(likesHeader);
const likesAvatars = document.createElement("div");
likesAvatars.className = "avatar-block";
mentions.forEach((like) => {
const clearDiv = document.createElement("div");
clearDiv.style.clear = "both";
const avatarBlock = document.createElement("div");
avatarBlock.append(clearDiv);
const heading = document.createElement("h3");
heading.innerHTML = heading.replace("{x}", mentions.length);
avatarBlock.append(heading);
const avatars = document.createElement("div");
avatars.className = "avatar-block";
mentions.forEach((mention) => {
const image = document.createElement("img");
image.src = like.author.photo;
image.alt = `Avatar for ${like.author.name}`;
image.src = mention.author.photo;
image.alt = `Avatar for ${mention.author.name}`;
const link = document.createElement("a");
link.href = like.author.url;
link.href = mention.author.url;
link.append(image);
likesAvatars.append(link);
avatars.append(link);
});
likesWrapper.append(likesAvatars);
return likesWrapper;
avatarBlock.append(avatars);
return avatarBlock;
}
export async function getMentions(url) {