feat: display like count by laying out organ images

3 files changed, 42 insertions, 1 deletions

diff --git a/layouts/_partials/posts/action-menu.html b/layouts/_partials/posts/action-menu.html
index 5f6c903f..fed2def8 100644
--- a/layouts/_partials/posts/action-menu.html
+++ b/layouts/_partials/posts/action-menu.html
@@ -1,12 +1,14 @@
 <div id="action-menu" class="my-8 mb-4">
   <!-- Action Buttons -->
-  <div class="flex justify-between items-center mb-6">
+  <div class="flex justify-between items-center">
     <div class="flex gap-2">
         {{ partial "posts/action-menu/comment-button" . }}
         {{ partial "posts/action-menu/like-button" . }}
     </div>
     {{ partial "posts/action-menu/info-links" . }}
   </div>
+  <!-- Like Count Display -->
+  <div id="organ-farm" class="flex flex-wrap gap-4 hidden animate-duration-200"></div>
   <!-- Comment Section -->
   <div class="overflow-hidden my-4">
       <div class="mt-4 hidden animate-duration-200" id="comments-section">
diff --git a/layouts/_partials/scripts/action-menu-js.html b/layouts/_partials/scripts/action-menu-js.html
index 38527b4e..7bdc6e0b 100644
--- a/layouts/_partials/scripts/action-menu-js.html
+++ b/layouts/_partials/scripts/action-menu-js.html
@@ -117,6 +117,7 @@ function initializeLikes(pageId) {
       elements.count.innerText = data.likes ?? 0;
       if (localStorage.getItem("liked_" + pageId)) {
         setLikedState();
+        updateOrganFarm(data.likes);
       }
     } catch(e) {
       console.log(e);
@@ -136,6 +137,7 @@ function initializeLikes(pageId) {
       const data = await response.json();
       localStorage.setItem("liked_" + pageId, "1");
       elements.count.innerText = data.likes ?? 1;
+      updateOrganFarm(data.likes);
       setLikedState();
     } catch(e) {
       console.log(e);
@@ -143,6 +145,41 @@ function initializeLikes(pageId) {
     }
   };
 
+  function updateOrganFarm(count) {
+    const organFarm = document.getElementById("organ-farm");
+    const organCount = count || parseInt(elements.count.innerText);
+    const organImages = [
+      "https://image.guhub.cn/picgo2025/oragn-3.png",
+      "https://image.guhub.cn/picgo2025/organ-1.png",
+      "https://image.guhub.cn/picgo2025/organ-2.png"
+    ];
+
+    if (!organFarm) return;
+    if (organFarm.classList.contains("hidden")) {
+      organFarm.classList.remove("hidden");
+      organFarm.classList.add("animate-slide-in-down");
+    }
+
+    organFarm.innerHTML = "";
+    for (let i = 0; i < organCount; i++) {
+      const img = document.createElement("img");
+      img.className = "transition hover:scale-150";
+
+      const sizeRange = [6, 10];
+      const size = Math.floor(Math.random() * (sizeRange[1] - sizeRange[0] + 1)) + sizeRange[0];
+      img.classList.add(`w-${size}`, `h-${size}`);
+
+      img.src = organImages[Math.floor(Math.random() * organImages.length)];
+      // randomly offset and rotate
+      img.classList.add("rotate-" + Math.floor(Math.random() * 5));
+      img.classList.add("translate-x-" + Math.floor(Math.random() * 5));
+      img.classList.add("translate-y-" + Math.floor(Math.random() * 5));
+      img.classList.add("opacity" + (100 - Math.floor(Math.random() * 3)*10));
+
+      organFarm.appendChild(img);
+    }
+  }
+
   // fetch likes when action menu is visible
   const observer = new IntersectionObserver((entries, obs) => {
     if (entries[0].isIntersecting) {
diff --git a/uno.config.js b/uno.config.js
index ad8f2f0b..a2f74617 100644
--- a/uno.config.js
+++ b/uno.config.js
@@ -51,6 +51,8 @@ export default defineConfig({
 
     ...range(10, i => `opacity-${i * 10}`),
     ...rangeWithPrefixes(5, 'rotate', ['', '-']),
+    ...rangeWithPrefixes(5, 'translate-x', ['', '-']),
+    ...rangeWithPrefixes(5, 'translate-y', ['', '-']),
     ...rangeWithPrefixes(30, 'w', ['', 'md:', 'lg:']),
     ...rangeWithPrefixes(30, 'h', ['', 'md:']),
     ...rangeWithPrefixes(30, 'right', ['', 'md:', '-', 'md:-']),