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

105
src/components/snippets/PostMetadataSnippet.astro
View File

@@ -4,57 +4,78 @@ import getReadingTime from 'reading-time';
import type { Post } from '@lib/directusTypes';
import Logo from '@components/images/Logo.astro';
import { formatShortDate } from '@support/time';
import { formatShortDate, formatDate } from '@support/time';
import { getDirectusImageURL } from '@/support/url';
interface Props {
post: Post;
enableCategoryLink?: boolean;
dateFormat?: 'short' | 'long';
}
const { post } = Astro.props;
const { post, enableCategoryLink = true, dateFormat = 'short' } = Astro.props;
const readingTime = getReadingTime(post.content || '');
---
<div>
<ol class="flex items-center justify-center sm:justify-start whitespace-nowrap gap-2 sm:gap-0 mt-6 sm:mt-4">
{post.category && (
<li class="inline-flex items-center">
<a
class="inline-flex items-center text-secondary hover:text-secondary-hover text-sm transition-all duration-300"
href={`/categories/${post.category.slug}`}
data-astro-prefetch
>
<div class="flex flex-row items-center shrink-0">
<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}
<ol class="flex items-center justify-start card-text-description text-sm whitespace-nowrap gap-2 sm:gap-0 overflow-hidden">
{post.category && (
<li class="inline-flex items-center">
{enableCategoryLink ? (
<a
class="inline-flex items-center hover:card-hover-text-description overflow-hidden"
href={`/categories/${post.category.slug}`}
data-astro-prefetch
>
<div class="flex flex-row items-center shrink-0">
<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>
</a>
<span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4">
/
</span>
</li>
{post.category.title}
</div>
</a>
) : (
<div class="inline-flex items-center overflow-hidden">
<div class="flex flex-row items-center shrink-0">
<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>
</div>
)}
<li class="inline-flex items-center">
<span class="shrink-0 text-secondary text-sm">
{formatShortDate(post.published_date)}
</span>
<span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4">
/
</span>
</li>
<li class="inline-flex items-center">
<span class="shrink-0 text-secondary text-sm">
{readingTime.minutes.toPrecision(1)} minutes
</span>
</li>
</ol>
</div>
</li>
)}
<li class="inline-flex items-center">
<span class="shrink-0 mx-2">
/
</span>
</li>
<li class="inline-flex items-center">
<span class="shrink-0 overflow-hidden">
{dateFormat === 'short' ? formatShortDate(post.published_date) : formatDate(post.published_date)}
</span>
</li>
<li class="inline-flex items-center">
<span class="shrink-0 mx-2">
/
</span>
</li>
<li class="inline-flex items-center">
<span class="shrink-0 overflow-hidden">
{readingTime.minutes.toPrecision(1)} minutes
</span>
</li>
</ol>