mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Latest Posts support

Browse Source
This commit is contained in:
prototypa
2022-11-06 15:47:44 -05:00
parent 8c646d7f72
commit 2d0687d885
8 changed files with 102 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/blog/ListItem.astro
View File

@ -11,21 +11,23 @@ const { post } = Astro.props;
const image = await findImage(post.image);
---
<article class="max-w-md mx-auto md:max-w-none grid md:grid-cols-2 gap-6 md:gap-8">
<a class="relative block group" href={getPermalink(post.slug, 'post')}>
<div
class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg"
>
<Picture
src={image}
class="absolute inset-0 object-cover w-full h-full mb-6 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>
</a>
<article class={`max-w-md mx-auto md:max-w-none grid gap-6 md:gap-8 ${image ? 'md:grid-cols-2' : ''}`}>
{
image && (
<a class="relative block group" href={getPermalink(post.slug, 'post')}>
<div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
<Picture
src={image}
class="absolute inset-0 object-cover w-full h-full mb-6 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>
</a>
)
}
<div>
<header>
<h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2 font-heading">