42 lines
1.1 KiB
Plaintext
42 lines
1.1 KiB
Plaintext
---
|
|
import { Picture } from '@astrojs/image/components';
|
|
|
|
import { findImage } from '~/utils/images';
|
|
import { getPermalink } from '~/utils/permalinks';
|
|
|
|
import type { Post } from '~/utils/posts';
|
|
|
|
export interface Props {
|
|
post: Post;
|
|
}
|
|
|
|
const { post } = Astro.props;
|
|
const image = await findImage(post.image);
|
|
---
|
|
|
|
<article class="mb-6 transition">
|
|
<div class="relative h-0 pb-[56.25%] lg:h-64 overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6">
|
|
{
|
|
image && (
|
|
<Picture
|
|
src={image}
|
|
class="object-cover w-full lg:h-64 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
|
|
widths={[400, 900]}
|
|
sizes="(max-width: 900px) 400px, 900px"
|
|
alt={post.title}
|
|
aspectRatio="16:9"
|
|
/>
|
|
)
|
|
}
|
|
</div>
|
|
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl font-heading">
|
|
<a
|
|
href={getPermalink(post.slug, 'post')}
|
|
class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
|
|
>
|
|
{post.title}
|
|
</a>
|
|
</h3>
|
|
<p class="text-gray-700 dark:text-gray-400">{post.excerpt || post.description}</p>
|
|
</article>
|