From 8e2d44861892f98524606468ed57a7486eb510c3 Mon Sep 17 00:00:00 2001
From: giteaadmin <gitea@twk95.net>
Date: Mon, 25 Aug 2025 20:06:15 -0400
Subject: [PATCH] fix: update likes counter, metadata alignment

---
 src/_includes/post.njk | 29 ++++++++++++++++-------------
 src/js/like-button.js  |  8 +++++++-
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/_includes/post.njk b/src/_includes/post.njk
index 2f9e907..88cb0bb 100644
--- a/src/_includes/post.njk
+++ b/src/_includes/post.njk
@@ -12,28 +12,31 @@ layout: "layout.njk"
     {% endif %}
     <h1>{{ title }}</h1>
     <div class="post-meta flex flex-col md:flex-row md:items-center text-gray-400">
+        <!--- Date Section -->
         <div class="flex items-center mb-1 md:mb-0">
-            <i class="fas fa-calendar-alt mr-2"></i>
-            <p>Published on {{ date | readableDate }}</p>
+            <i class="fas fa-fw fa-calendar-alt mr-2"></i>
+            <span>Published on {{ date | readableDate }}</span>
         </div>
+        <!--- Views Section -->
         <span class="hidden md:inline mx-2 text-gray-600">|</span>
-        <div class="flex items-center">
-            <i class="fas fa-eye mr-2"></i>
-            <span class="view-count" data-view-count data-slug="{{ page.fileSlug }}">...</span>
-        </div>
-        <span class="hidden md:inline mx-2 text-gray-600">|</span>
-        <div class="like-wrapper">
-            <i class="fas fa-heart like-icon mr-2" data-like-button data-slug="{{ page.fileSlug }}"></i>
-            <span class="like-count" data-like-count data-slug="{{ page.fileSlug }}">0</span>
+        <div class="flex items-center mb-1 md:mb-0">
+            <i class="fas fa-fw fa-eye mr-2"></i>
+            <span class="view-count" data-view-count data-slug="{{ page.fileSlug }}">Loading views</span>
         </div>
         <!--- Comments Section -->
         <!---
         <span class="hidden md:inline mx-2 text-gray-600">|</span>
-        <div class="flex items-center">
-            <i class="fas fa-comments mr-2"></i>
+        <div class="flex items-center mb-1 md:mb-0">
+            <i class="fas fa-fw fa-comments mr-2"></i>
             <a href="#disqus_thread">Comments</a>
         </div>
-        -->
+         -->
+        <!--- Likes Section -->
+        <span class="hidden md:inline mx-2 text-gray-600">|</span>
+        <div class="flex items-center mb-1 md:mb-0">
+            <i class="fas fa-fw fa-heart like-icon mr-2" data-like-button data-slug="{{ page.fileSlug }}"></i>
+            <span class="like-count" data-like-count data-slug="{{ page.fileSlug }}">No likes</span>
+        </div>
     </div>
     <br/>
     {{ content | safe }}
diff --git a/src/js/like-button.js b/src/js/like-button.js
index a72fa55..bb6a93a 100644
--- a/src/js/like-button.js
+++ b/src/js/like-button.js
@@ -9,7 +9,13 @@ document.addEventListener('DOMContentLoaded', () => {
     // Function to update the UI based on liked state and count
     const updateUI = (isLiked, count) => {
         if (likeCountSpan) {
-            likeCountSpan.textContent = count;
+            if (count === 0) {
+                likeCountSpan.textContent = 'No likes';
+            } else if (count === 1) {
+                likeCountSpan.textContent = '1 like';
+            } else {
+                likeCountSpan.textContent = `${count} likes`;
+            }
         }
         if (isLiked) {
             likeIcon.classList.add('liked');