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

feat: respect user faces

Browse source
This commit is contained in:
Ayo Ayco 2024-05-15 21:25:56 +02:00
parent 0f6a146c6d
commit ff3182c946
3 changed files with 21 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
_includes/head.html
View file

@ -57,6 +57,7 @@
/> />
<script type="module"> <script type="module">
import { minidenticonSvg } from 'https://cdn.jsdelivr.net/npm/minidenticons@4.2.1/minidenticons.min.js'
import { import {
getMentions, getMentions,
renderMentions, renderMentions,

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

@ -53,18 +53,16 @@ function createRepliesBlock(replies, heading) {
repliesHeader.innerHTML = heading.replace("{x}", replies.length); repliesHeader.innerHTML = heading.replace("{x}", replies.length);
repliesWrapper.append(repliesHeader); repliesWrapper.append(repliesHeader);
const repliesTable = document.createElement("table"); const frag = document.createDocumentFragment();
const cards = []
replies.forEach((reply) => { replies.forEach((reply) => {
const row = document.createElement("tr");
const cell = document.createElement("td");
row.append(cell);
const author = document.createElement("p"); const author = document.createElement("p");
author.className = "author-wrapper"; author.className = "author-wrapper";
author.innerHTML = `<a href="${reply.author.url}"><img alt="Avatar for ${ author.innerHTML = `<a href="${reply.author.url}"><minidenticon-svg username="${reply.author.url}" alt="Avatar for ${
reply.author.name reply.author.name
}" class="reply-photo" src="${ }" class="reply-photo" src="${
reply.author.photo reply.author.photo
}" /></a> <span class="reply-name">${reply.author.name}</span><a href="${ }"></minidenticon-svg></a> <span class="reply-name">${reply.author.name}</span><a href="${
reply.url reply.url
}" class="reply-date">${new Date( }" class="reply-date">${new Date(
reply.published reply.published
@ -79,10 +77,9 @@ function createRepliesBlock(replies, heading) {
card.innerHTML = reply.content.html; card.innerHTML = reply.content.html;
} }
card.insertBefore(author, card.firstChild); card.insertBefore(author, card.firstChild);
cell.appendChild(card); frag.appendChild(card);
repliesTable.append(row);
}); });
repliesWrapper.append(repliesTable); repliesWrapper.append(frag);
return repliesWrapper; return repliesWrapper;
} }
@ -102,12 +99,12 @@ function createAvatarBlock(mentions, headingText) {
avatars.className = "avatar-block"; avatars.className = "avatar-block";
mentions.forEach((mention) => { mentions.forEach((mention) => {
const image = document.createElement("img"); const identicon = document.createElement("minidenticon-svg");
image.src = mention.author.photo; identicon.setAttribute('username', mention.author.url)
image.alt = `Avatar for ${mention.author.name}`;
const link = document.createElement("a"); const link = document.createElement("a");
link.href = mention.author.url; link.href = mention.author.url;
link.append(image); link.append(identicon);
avatars.append(link); avatars.append(link);
}); });

13
assets/main.scss
View file

@ -474,10 +474,11 @@ iframe.mastodon-embed {
width: calc(100% - 1em); width: calc(100% - 1em);
border-left: 3px solid rgba(34, 34, 34, 0.15); border-left: 3px solid rgba(34, 34, 34, 0.15);
img { img, svg {
margin-left: -0.7em; margin-left: -0.7em;
width: 2em; width: 2em;
height: 2em; height: 2em;
background: white;
} }
} }
@ -490,15 +491,17 @@ iframe.mastodon-embed {
} }
.reply-photo:hover, .reply-photo:hover,
.avatar-block img:hover { .avatar-block img:hover,
.avatar-block svg:hover {
berder-width: 5px; berder-width: 5px;
border-color: #bb4a03; border-color: #80ae3c;
} }
.reply-photo, .reply-photo,
.avatar-block img { .avatar-block img,
.avatar-block svg {
border-radius: 50%; border-radius: 50%;
border: 3px solid white; border: 3px solid blue;
float: left; float: left;
} }