twk95/11ty-site
Public Access
1
0
Fork 0
Code Actions Packages Activity

feat: enhance view count display with singular/plural formatting

Browse Source
This commit is contained in:
Jesus Otero Lagunes
2025-08-24 23:46:17 -04:00
parent 3416ee171c
commit 4ee51a59b0
2 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/_includes/post.njk
View File

@@ -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 }}

6
src/js/view-counter.js
View File

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