From e6917a15f1812623d380f36401226772e2963f6d Mon Sep 17 00:00:00 2001 From: Ayo Date: Tue, 30 May 2023 21:25:23 +0200 Subject: [PATCH] style: avatars and web mentions --- _includes/head.html | 95 +++++++++++++++++++++++++++------------------ _layouts/post.html | 9 ++--- assets/main.scss | 24 ++++++------ 3 files changed, 73 insertions(+), 55 deletions(-) diff --git a/_includes/head.html b/_includes/head.html index 061dedd..8a48849 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -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 = "

Web Mentions

"; - - 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)); diff --git a/_layouts/post.html b/_layouts/post.html index 7279f75..6c58203 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -30,6 +30,9 @@ layout: default default: "%b %-d, %Y" %} {{ page.date | date: date_format }} + + + {% if page.image %} -
- - - -
+
diff --git a/assets/main.scss b/assets/main.scss index dddfd23..6ebbde5 100644 --- a/assets/main.scss +++ b/assets/main.scss @@ -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; }