ldez/new-manga
1
0
Fork 0
mirror of https://github.com/ld3z/new-manga.git synced 2026-11-09 20:53:45 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

added timer to the comic card

Browse source
This commit is contained in:
ld3zian 2025-01-26 11:10:05 -07:00
parent db585307f5
commit 007ec1856f
1 changed files with 51 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/components/ComicCard.astro
View file

@ -97,6 +97,7 @@ const isNSFW = comic.md_comics.content_rating === 'erotica';
</div>
<div class="mt-auto pt-4 flex items-center justify-between text-sm text-primary/60 border-t border-hover/30">
<div class="flex flex-col gap-1">
<time datetime={comic.updated_at}>
{new Date(comic.updated_at).toLocaleString(undefined, {
month: 'short',
@ -105,6 +106,12 @@ const isNSFW = comic.md_comics.content_rating === 'erotica';
minute: '2-digit'
})}
</time>
{comic.publish_at && (
<div class="countdown-timer text-xs" data-publish-at={comic.publish_at}>
Publishing in: <span class="font-medium text-accent">calculating...</span>
</div>
)}
</div>
<span class="group-hover:text-accent transition-colors duration-300">Read Now →</span>
</div>
</div>
@ -176,5 +183,41 @@ const isNSFW = comic.md_comics.content_rating === 'erotica';
}
});
});
// Add countdown timer functionality
const countdownTimers = document.querySelectorAll('.countdown-timer');
function updateTimer(element: Element) {
const publishAt = new Date(element.getAttribute('data-publish-at') || '').getTime();
const now = new Date().getTime();
const distance = publishAt - now;
const timerSpan = element.querySelector('span');
if (!timerSpan) return;
if (distance < 0) {
timerSpan.textContent = 'Published';
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
let timeString = '';
if (days > 0) timeString += `${days}d `;
if (hours > 0 || days > 0) timeString += `${hours}h `;
if (minutes > 0 || hours > 0 || days > 0) timeString += `${minutes}m `;
timeString += `${seconds}s`;
timerSpan.textContent = timeString;
}
countdownTimers.forEach(timer => {
updateTimer(timer);
// Update every second
setInterval(() => updateTimer(timer), 1000);
});
});
</script>