82 lines
2.3 KiB
Plaintext
82 lines
2.3 KiB
Plaintext
---
|
|
import getReadingTime from 'reading-time';
|
|
|
|
import type { Post } from '@lib/directusTypes';
|
|
|
|
import Logo from '@components/images/Logo.astro';
|
|
import { formatShortDate, formatDate } from '@support/time';
|
|
import { getDirectusImageURL } from '@/support/url';
|
|
|
|
interface Props {
|
|
post: Post;
|
|
enableCategoryLink?: boolean;
|
|
dateFormat?: 'short' | 'long';
|
|
}
|
|
|
|
const { post, enableCategoryLink = true, dateFormat = 'short' } = Astro.props;
|
|
|
|
const readingTime = getReadingTime(post.content || '');
|
|
---
|
|
|
|
<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>
|
|
{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>
|
|
)}
|
|
<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>
|