Skip to content

Commit 4ceb8ec

Browse files
committed
Refactor PostCard component structure for improved accessibility and layout
- Moved the anchor tag inside the image container to ensure the entire image is clickable. - Cleaned up the layout of the reading time badge and category list for better readability and consistency.
1 parent 136e79a commit 4ceb8ec

1 file changed

Lines changed: 22 additions & 22 deletions

File tree

src/components/PostCard.astro

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ if (post.body) {
3535
---
3636

3737
<article class="group bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-shadow duration-300">
38-
<a href={postUrl} class="block">
39-
<div class="relative h-48 overflow-hidden">
38+
<div class="relative h-48 overflow-hidden">
39+
<a href={postUrl} class="block h-full">
4040
<Image
4141
src={header_image}
4242
alt={title}
@@ -45,29 +45,29 @@ if (post.body) {
4545
width={800}
4646
height={400}
4747
/>
48+
</a>
4849

49-
<!-- Reading time badge -->
50-
{showReadingTime && (
51-
<div class="absolute top-3 right-3">
52-
<span class="px-2 py-1 text-xs font-medium bg-white/90 dark:bg-gray-900/90 text-gray-700 dark:text-gray-300 rounded-full shadow-sm">
53-
{readingTime} min read
54-
</span>
55-
</div>
56-
)}
50+
<!-- Reading time badge -->
51+
{showReadingTime && (
52+
<div class="absolute top-3 right-3">
53+
<span class="px-2 py-1 text-xs font-medium bg-white/90 dark:bg-gray-900/90 text-gray-700 dark:text-gray-300 rounded-full shadow-sm">
54+
{readingTime} min read
55+
</span>
56+
</div>
57+
)}
5758

58-
{categoryList.length > 0 && (
59-
<div class="absolute bottom-3 left-3">
60-
<div class="flex gap-1 flex-wrap">
61-
{categoryList.slice(0, 2).map(cat => (
62-
<span class="px-2 py-1 text-xs font-medium bg-black/70 text-white rounded">
63-
{cat}
64-
</span>
65-
))}
66-
</div>
59+
{categoryList.length > 0 && (
60+
<div class="absolute bottom-3 left-3">
61+
<div class="flex gap-1 flex-wrap">
62+
{categoryList.slice(0, 2).map(cat => (
63+
<span class="px-2 py-1 text-xs font-medium bg-black/70 text-white rounded">
64+
{cat}
65+
</span>
66+
))}
6767
</div>
68-
)}
69-
</div>
70-
</a>
68+
</div>
69+
)}
70+
</div>
7171

7272
<div class="p-4">
7373
<div class="text-sm text-gray-500 dark:text-gray-400 mb-2">

0 commit comments

Comments
 (0)