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

style: avatars and web mentions

Browse source
This commit is contained in:
Ayo 2023-05-30 21:25:23 +02:00
parent 9a7a1b0671
commit e6917a15f1
3 changed files with 73 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
_includes/head.html
View file

@ -103,42 +103,77 @@
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)
if (likes.length) {
// render on meta header
document.getElementById(
"page-likes"
).innerHTML = `👍 ${likes.length}`;
).innerHTML = `• 👍 ${likes.length} Likes`;
if (reposts.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}`;
likesAvatars.append(image);
});
likesWrapper.append(likesAvatars);
webMentionsSection.append(likesWrapper);
}
if (reposts.length) {
// render on meta header
document.getElementById(
"page-reposts"
).innerHTML = `🔁 ${reposts.length}`;
).innerHTML = `• 🔁 ${reposts.length} Reposts`;
if (likes.length || reposts.length) {
const avatars = document.createElement("div");
avatars.className = "avatar-block";
[...reposts, ...likes].forEach((mention) => {
// 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");
image.src = mention.author.photo;
image.alt = `Avatar for ${mention.author.name}`;
avatars.append(image);
image.src = repost.author.photo;
image.alt = `Avatar for ${repost.author.name}`;
repostsAvatars.append(image);
});
avatars.append(clearDiv);
webMentionsSection.append(avatars);
repostsWrapper.append(repostsAvatars);
webMentionsSection.append(repostsWrapper);
}
if (replies.length) {
// render to post header meta
// render on meta header
document.getElementById(
"page-replies"
).innerHTML = `💬 ${replies.length}`;
).innerHTML = `• 💬 ${replies.length} Replies`;
// 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);
// render to replies section
const repliesTable = document.createElement("table");
replies.forEach((reply) => {
const row = document.createElement("tr");
@ -162,22 +197,8 @@
cell.appendChild(card);
repliesTable.append(row);
});
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;
}
};
webMentionsSection.append(button);
webMentionsSection.append(repliesTable);
repliesWrapper.append(repliesTable);
webMentionsSection.append(repliesWrapper);
}
})
.catch((err) => console.log("err", err));

9
_layouts/post.html
View file

@ -30,6 +30,9 @@ layout: default
default: "%b %-d, %Y" %} {{ page.date | date: date_format }}
</span>
</time>
<span id="page-replies"></span>
<span id="page-likes"></span>
<span id="page-reposts"></span>
</div>
{% if page.image %}
<img
@ -81,10 +84,6 @@ layout: default
</div>
</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>
<div class="blog-post__web-mentions"></div>
<a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
</article>

24
assets/main.scss
View file

@ -438,20 +438,16 @@ table.image caption {
&__web-mentions {
margin: 2em 0;
max-width: fit-content;
text-align: center;
.avatar-block {
display: block;
margin: 1em auto;
padding: 0 1em;
display: inline-block;
margin-bottom: 1.5em;
padding-left: 1.5em;
max-width: fit-content;
border-left: 3px solid rgba(34, 34, 34, 0.15);
img {
width: 2em;
height: 2em;
border-radius: 50%;
border: 1px solid #80ae3c;
margin-left: -0.7em;
float: left;
margin-left: -1em;
}
}
@ -463,10 +459,12 @@ table.image caption {
border-left: 3px solid rgba(34, 34, 34, 0.15);
}
.reply-photo {
width: 2em;
height: 2em;
.reply-photo,
.avatar-block img {
width: 3em;
height: 3em;
border-radius: 50%;
border: 3px solid white;
float: left;
}