feat: enhance view count display with singular/plural formatting

src/_includes/post.njk

@@ -9,9 +9,12 @@ layout: "layout.njk"
         </a>
     </div>
     <h1>{{ title }}</h1>
-    <div class="post-meta">
+    <div class="post-meta flex items-center text-gray-400">
-        <p class="text-gray-400">Published on {{ date | readableDate }}</p>
+        <i class="fas fa-calendar-alt mr-2"></i>
-        <span class="view-count" data-view-count data-slug="{{ page.fileSlug }}">Loading views...</span>
+        <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 }}

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);