Update bsky likes design

Author: whitep4nth3r

README.md

@@ -16,7 +16,7 @@ npm install
 
 ### Run the site locally
 
-Use the Netlify CLI to inject environment variables stored against the Netlify site — no local `.env` file needed!
+Use the Netlify CLI to inject environment variables stored against the Netlify site — no local `.env` file needed.
 
 ```bash
 ntl dev

src/_client_scripts/bsky_post_likes.js

@@ -25,7 +25,7 @@ function drawLikes(likesActors, postLikesCount) {
 
     if (like.actor.avatar !== undefined) {
       likeEl.innerHTML = `
-      <img class="post__like__avatar" src="${like.actor.avatar.replace("avatar", "avatar_thumbnail")}" alt="${
+        <img class="post__like__avatar" src="${like.actor.avatar.replace("avatar", "avatar_thumbnail")}" alt="${
         like.actor.displayName
       }" />`;
     } else {

src/_components/svg/heartIcon.js

@@ -0,0 +1,18 @@
+function HeartIcon() {
+  return /*html*/ `
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    height="40" 
+    width="40" 
+    viewBox="0 0 512 512" 
+    aria-label="Heart"
+    role="img">
+        <path
+    fill="currentColor"
+    d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"
+  />
+    </svg>
+  `;
+}
+
+module.exports = HeartIcon;

src/_css/main.css

@@ -458,6 +458,15 @@
   line-height: 1.2;
   margin-bottom: 1rem;
   color: var(--color-fg-copy);
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 0.5rem;
+  align-items: center;
+
+  svg {
+    color: var(--pink);
+  }
 }
 
 .post__likesCta {
@@ -467,6 +476,10 @@
   font-style: italic;
   margin-bottom: 2rem;
   display: block;
+
+  &:focus-visible {
+    @include utils.link_focus;
+  }
 }
 
 .post__likesList {
@@ -481,13 +494,33 @@
 .post__like {
   width: 4rem;
   aspect-ratio: 1/1;
-  margin-right: -1rem;
-  border-radius: 100%;
-  filter: var(--base-shadow-filter);
+  filter: contrast(150%);
+  display: flex;
+  overflow: hidden;
+
+  &::before {
+    top: -50%;
+    left: -50%;
+    right: -50%;
+    bottom: -50%;
+    content: "";
+    position: absolute;
+    transform: rotate(20deg);
+    background: radial-gradient(circle at center, #000, #fff);
+    background-size: 0.15em 0.15em;
+  }
 }
 
 .post__like__avatar {
-  border-radius: 100%;
+  width: 100%;
+  filter: grayscale(1) brightness(90%) contrast(150%);
+  height: auto;
+  transition: all 500ms cubic-bezier(0.42, 0, 0.58, 1);
+  mix-blend-mode: hard-light;
+
+  &:hover {
+    filter: unset;
+  }
 }
 
 .post__like--placeholder,
@@ -500,6 +533,11 @@
   align-items: center;
   font-size: 1rem;
   font-style: italic;
-  background-color: #208bfe;
+  background-color: var(--pink);
   color: #fff;
+  filter: unset;
+
+  &::before {
+    content: unset;
+  }
 }

src/_css/main.css.map

@@ -7,6 +7,7 @@ const PublishedDate = require("../_components/publishedDate");
 const TableOfContents = require("../_components/tableOfContents");
 const isSponsored = require("../_components/isSponsored");
 const Card = require("../_components/card");
+const HeartIcon = require("../_components/svg/heartIcon");
 const PostStructuredData = require("../_components/postStructuredData");
 const OpenGraph = require("../../lib/openGraph");
 
@@ -126,8 +127,10 @@ exports.render = async function (data) {
               post.blueskyPostId
                 ? `
               <section class="post__likes" data-bsky-container>
-                <h3 class="post__likesTitle">🦋 <span data-bsky-likes-count></span> likes on Bluesky</h3>
-                <a class="post__likesCta" href="https://bsky.app/profile/whitep4nth3r.com/post/${post.blueskyPostId}" target="_blank">Like this post on Bluesky to see your face on this page</a>
+                <h3 class="post__likesTitle">${HeartIcon()} <span data-bsky-likes-count></span> likes</h3>
+                <a class="post__likesCta" href="https://bsky.app/profile/whitep4nth3r.com/post/${
+                  post.blueskyPostId
+                }" target="_blank">Like this post on Bluesky to see your face on this page</a>
                 <ul data-bsky-likes class="post__likesList"></ul>
               </section>`
                 : ""