From 4ee51a59b0dadbc09fb120280ee434ac35dc46a1 Mon Sep 17 00:00:00 2001
From: giteaadmin <gitea@twk95.net>
Date: Sun, 24 Aug 2025 23:46:17 -0400
Subject: [PATCH] feat: enhance view count display with singular/plural
 formatting

---
 src/_includes/post.njk | 9 ++++++---
 src/js/view-counter.js | 6 ++++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/_includes/post.njk b/src/_includes/post.njk
index 5cbfa15..ccd9d59 100644
--- a/src/_includes/post.njk
+++ b/src/_includes/post.njk
@@ -9,9 +9,12 @@ layout: "layout.njk"
         </a>
     </div>
     <h1>{{ title }}</h1>
-    <div class="post-meta">
-        <p class="text-gray-400">Published on {{ date | readableDate }}</p>
-        <span class="view-count" data-view-count data-slug="{{ page.fileSlug }}">Loading views...</span>
+    <div class="post-meta flex items-center text-gray-400">
+        <i class="fas fa-calendar-alt mr-2"></i>
+        <p>Published on {{ date | readableDate }}</p>
+        <span class="mx-2 text-gray-600">|</span>
+        <i class="fas fa-eye mr-2"></i>
+        <span class="view-count" data-view-count data-slug="{{ page.fileSlug }}">...</span>
     </div>
     <br/>
     {{ content | safe }}
diff --git a/src/js/view-counter.js b/src/js/view-counter.js
index 9e8329d..1ebc8bd 100644
--- a/src/js/view-counter.js
+++ b/src/js/view-counter.js
@@ -31,7 +31,8 @@ document.addEventListener('DOMContentLoaded', () => {
                         return response.json();
                     })
                     .then(data => {
-                        element.textContent = data.count ?? 'Error';
+                        const count = data.count ?? 'Error';
+                        element.textContent = `${count} ${count === 1 ? 'view' : 'views'}`;
                         // Mark as viewed to prevent re-counting on refresh.
                         localStorage.setItem(`viewed-${slug}`, 'true');
                     })
@@ -47,7 +48,8 @@ document.addEventListener('DOMContentLoaded', () => {
                         return response.json();
                     })
                     .then(data => {
-                        element.textContent = data.count ?? 0;
+                        const count = data.count ?? 0;
+                        element.textContent = `${count} ${count === 1 ? 'view' : 'views'}`;
                     })
                     .catch(error => {
                         console.error(`Error fetching view count for slug ${slug}:`, error);