alexlebens/site-profile
1
0
Fork 0
Code Issues 1 Pull Requests Actions Activity

feat: use metadata snippet for blog cards

Browse Source
This commit is contained in:
Alex Lebens
2026-03-10 22:25:08 -05:00
parent 265fd4f2cb
commit 18c2b54f65
6 changed files with 109 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/cards/LargeBlogLeftCard.astro
View File

@@ -1,12 +1,10 @@
---
import { Image } from 'astro:assets';
import getReadingTime from 'reading-time';
import type { Post } from '@lib/directusTypes';
import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
import Logo from '@components/images/Logo.astro';
import { formatShortDate } from '@support/time';
import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
import { getDirectusImageURL } from '@/support/url';
interface Props {
@@ -14,8 +12,6 @@ interface Props {
}
const { post } = Astro.props;
const readingTime = getReadingTime(post.content || '');
---
<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
@@ -26,51 +22,32 @@ const readingTime = getReadingTime(post.content || '');
>
<div>
<Image
class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full object-cover"
src={getDirectusImageURL(post.image)}
alt={post.image_alt}
draggable="false"
loading="lazy"
width="850"
height="420"
inferSize={true}
/>
</div>
<div class="bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6">
<h2 class="card-text-header mb-2">
<div class="flex flex-col bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6 gap-4">
<h2 class="card-text-header">
{post.title}
</h2>
<p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
<p class="card-text-title font-light text-pretty sm:text-lg max-w-prose">
{post.description}
</p>
<div class="card-text-title flex items-center justify-between w-full">
<ReadMoreButton/>
<div class="flex shrink-0 items-center gap-x-2 card-text-description text-sm overflow-hidden">
<div class="inline-flex items-center">
<div class="mr-2">
<Logo
srcLight={getDirectusImageURL(post.category.logoLight)}
srcDark={getDirectusImageURL(post.category.logoDark)}
alt={`Logo of ${post.category.title}`}
width={18}
height={18}
/>
</div>
{post.category.title}
</div>
<span>
/
</span>
<p>
{formatShortDate(post.published_date)}
</p>
<span>
/
</span>
<span>
{readingTime.minutes.toPrecision(1)} minutes
</span>
<div class="flex md:flex-col-reverse lg:flex-row items-center md:items-start lg:items-center justify-between w-full md:gap-4">
<div class="hidden md:block shrink-0 mt-4">
<ReadMoreButton/>
</div>
<div class="mt-2 lg:mt-4">
<PostMetadataSnippet
post={post}
enableCategoryLink={false}
/>
</div>
</div>
</div>
</a>
</div>