53 lines
1.2 KiB
Plaintext
53 lines
1.2 KiB
Plaintext
---
|
|
interface Props {
|
|
title: string;
|
|
excerpt: string;
|
|
date: string;
|
|
category: string;
|
|
image: string;
|
|
url: string;
|
|
readTime?: string;
|
|
}
|
|
|
|
const {
|
|
title,
|
|
excerpt,
|
|
date,
|
|
category,
|
|
image,
|
|
url,
|
|
readTime = "5 min read"
|
|
} = Astro.props;
|
|
---
|
|
|
|
<article class="post-card">
|
|
<a href={url} aria-label={`Read more about ${title}`}>
|
|
<img src={image} alt="" class="post-image" width="720" height="360" loading="lazy" /> {/* Added alt="", loading */}
|
|
</a>
|
|
<div class="post-content">
|
|
<div class="post-meta">
|
|
<span class="post-date">{date}</span>
|
|
{category && <span class="post-category">{category}</span>}
|
|
</div>
|
|
<h3 class="post-title">
|
|
<a href={url}>{title}</a>
|
|
</h3>
|
|
<p class="post-excerpt">
|
|
{excerpt}
|
|
</p>
|
|
<div class="post-footer">
|
|
<span class="post-read-time">{readTime}</span>
|
|
<a href={url} class="read-more">Read More</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<style>
|
|
/* Styles are in global.css */
|
|
.post-card a:has(img) { /* Ensure image link covers image */
|
|
display: block;
|
|
}
|
|
.post-image {
|
|
background-color: var(--bg-secondary); /* Add bg color for loading */
|
|
}
|
|
</style> |