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

38
src/components/cards/BlogCard.astro
View File

@@ -1,11 +1,9 @@
---
import { Image } from 'astro:assets';
import getReadingTime from 'reading-time';
import type { Post } from '@lib/directusTypes';
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 {
@@ -13,8 +11,6 @@ interface Props {
}
const { post } = Astro.props;
const readingTime = getReadingTime(post.content || '');
---
<div class="smooth-reveal-cards group flex flex-col">
@@ -36,35 +32,15 @@ const readingTime = getReadingTime(post.content || '');
</div>
<div class="flex flex-col flex-1 rounded-xl p-4 md:p-5 mx-1 mb-2">
<div class="flex flex-row items-center mb-8">
<h3 class="card-text-title card-hover-text-title text-xl md:text-2xl">
<h3 class="card-text-title card-hover-text-title text-2xl">
{post.title}
</h3>
</div>
<div class="flex shrink-0 items-center mt-auto gap-x-2 card-text-description text-sm overflow-hidden whitespace-nowrap max-w-full">
<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="mt-auto">
<PostMetadataSnippet
enableCategoryLink={false}
post={post}
/>
</div>
</div>
</a>

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>

56
src/components/cards/LargeBlogRightCard.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">
@@ -24,40 +20,22 @@ const readingTime = getReadingTime(post.content || '');
href={`/blog/${post.slug}`}
data-astro-prefetch
>
<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>
@@ -69,8 +47,6 @@ const readingTime = getReadingTime(post.content || '');
alt={post.image_alt}
draggable="false"
loading="lazy"
width="850"
height="420"
inferSize={true}
/>
</div>
@@ -83,8 +59,6 @@ const readingTime = getReadingTime(post.content || '');
alt={post.image_alt}
draggable="false"
loading="lazy"
width="850"
height="420"
inferSize={true}
/>
</div>
@@ -95,8 +69,6 @@ const readingTime = getReadingTime(post.content || '');
alt={post.image_alt}
draggable="false"
loading="lazy"
width="600"
height="310"
inferSize={true}
/>
<Image
@@ -105,8 +77,6 @@ const readingTime = getReadingTime(post.content || '');
alt={post.image_second_alt}
draggable="false"
loading="lazy"
width="600"
height="310"
inferSize={true}
/>
</div>

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>

7
src/pages/blog/[...slug].astro
View File

@@ -96,7 +96,12 @@ const content = marked.parse(post.content || '');
<h2 class="card-text-header block">
{post.title}
</h2>
<PostMetadataSnippet post={post}/>
<div class="mt-4 sm:mt-6">
<PostMetadataSnippet
post={post}
dateFormat='long'
/>
</div>
</div>
<div class="border-t border-divider mt-10 mb-10"/>

5
src/styles/utilities.css
View File

@@ -127,6 +127,11 @@
@apply text-secondary
}
@utility card-hover-text-description {
@apply transition-all duration-300
text-secondary-hover
}
/* Misc */
@utility nav-base {
@apply border border-neutral-100 dark:border-stone-500/20