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

fix: update likes counter, metadata alignment

Browse Source
This commit is contained in:
Jesus Otero Lagunes
2025-08-25 20:06:15 -04:00
parent 989e10a5ba
commit 8e2d448618
2 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/_includes/post.njk
View File

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

8
src/js/like-button.js
View File

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