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

29
src/_includes/post.njk
View File

@@ -12,28 +12,31 @@ layout: "layout.njk"
{% endif %} {% endif %}
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
<div class="post-meta flex flex-col md:flex-row md:items-center text-gray-400"> <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"> <div class="flex items-center mb-1 md:mb-0">
<i class="fas fa-calendar-alt mr-2"></i> <i class="fas fa-fw fa-calendar-alt mr-2"></i>
<p>Published on {{ date | readableDate }}</p> <span>Published on {{ date | readableDate }}</span>
</div> </div>
<!--- Views Section -->
<span class="hidden md:inline mx-2 text-gray-600">|</span> <span class="hidden md:inline mx-2 text-gray-600">|</span>
<div class="flex items-center"> <div class="flex items-center mb-1 md:mb-0">
<i class="fas fa-eye mr-2"></i> <i class="fas fa-fw fa-eye mr-2"></i>
<span class="view-count" data-view-count data-slug="{{ page.fileSlug }}">...</span> <span class="view-count" data-view-count data-slug="{{ page.fileSlug }}">Loading views</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> </div>
<!--- Comments Section --> <!--- Comments Section -->
<!--- <!---
<span class="hidden md:inline mx-2 text-gray-600">|</span> <span class="hidden md:inline mx-2 text-gray-600">|</span>
<div class="flex items-center"> <div class="flex items-center mb-1 md:mb-0">
<i class="fas fa-comments mr-2"></i> <i class="fas fa-fw fa-comments mr-2"></i>
<a href="#disqus_thread">Comments</a> <a href="#disqus_thread">Comments</a>
</div> </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> </div>
<br/> <br/>
{{ content | safe }} {{ 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 // Function to update the UI based on liked state and count
const updateUI = (isLiked, count) => { const updateUI = (isLiked, count) => {
if (likeCountSpan) { 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) { if (isLiked) {
likeIcon.classList.add('liked'); likeIcon.classList.add('liked');