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"> <script type="module">
import * as webmentionUtils from "/assets/js/webmention-utils.mjs"; import {
const ignore = [ getMentions,
renderMentions,
} from "/assets/js/webmention-utils.mjs";
const ignorePaths = [
"/", "/",
"/categories/", "/categories/",
"/about/", "/about/",
@ -89,11 +93,10 @@
const url = new URL( const url = new URL(
document.URL.replace("http://localhost:4000", "https://ayos.blog") document.URL.replace("http://localhost:4000", "https://ayos.blog")
); );
if (!ignore.includes(url.pathname)) { if (!ignorePaths.includes(url.pathname)) {
const mentions = webmentionUtils const mentions = getMentions(url.toString())
.getMentions(url.toString())
.then((mentions) => { .then((mentions) => {
webmentionUtils.renderMentions(mentions, ".blog-post__web-mentions"); renderMentions(mentions, ".blog-post__web-mentions");
}) })
.catch((err) => console.log("err", err)); .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); const webMentionsSection = document.querySelector(className);
mentions = mentions.filter((m) => m["wm-private"] !== true); mentions = mentions.filter((m) => m["wm-private"] !== true);
if (mentions.length)
webMentionsSection.innerHTML =
"<h2>Mentions Across the World Wide Web</h2>";
const heading = { const heading = {
"like-of": "👍 {x} Likes", "like-of": "👍 {x} Likes",
"repost-of": "🔁 {x} Reposts", "repost-of": "🔁 {x} Reposts",
@ -64,26 +68,32 @@ export function renderMentions(mentions, className) {
} }
function createAvatarBlock(mentions, heading) { function createAvatarBlock(mentions, heading) {
const clearLikes = document.createElement("div"); const clearDiv = document.createElement("div");
clearLikes.style.clear = "both"; clearDiv.style.clear = "both";
const likesWrapper = document.createElement("div");
likesWrapper.append(clearLikes); const avatarBlock = document.createElement("div");
const likesHeader = document.createElement("h3"); avatarBlock.append(clearDiv);
likesHeader.innerHTML = heading.replace("{x}", mentions.length);
likesWrapper.append(likesHeader); const heading = document.createElement("h3");
const likesAvatars = document.createElement("div"); heading.innerHTML = heading.replace("{x}", mentions.length);
likesAvatars.className = "avatar-block"; avatarBlock.append(heading);
mentions.forEach((like) => {
const avatars = document.createElement("div");
avatars.className = "avatar-block";
mentions.forEach((mention) => {
const image = document.createElement("img"); const image = document.createElement("img");
image.src = like.author.photo; image.src = mention.author.photo;
image.alt = `Avatar for ${like.author.name}`; image.alt = `Avatar for ${mention.author.name}`;
const link = document.createElement("a"); const link = document.createElement("a");
link.href = like.author.url; link.href = mention.author.url;
link.append(image); link.append(image);
likesAvatars.append(link); avatars.append(link);
}); });
likesWrapper.append(likesAvatars);
return likesWrapper; avatarBlock.append(avatars);
return avatarBlock;
} }
export async function getMentions(url) { export async function getMentions(url) {