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 { Image } from 'astro:assets';
import getReadingTime from 'reading-time';
import type { Post } from '@lib/directusTypes'; import type { Post } from '@lib/directusTypes';
import Logo from '@components/images/Logo.astro'; import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
import { formatShortDate } from '@support/time';
import { getDirectusImageURL } from '@/support/url'; import { getDirectusImageURL } from '@/support/url';
interface Props { interface Props {
@@ -13,8 +11,6 @@ interface Props {
} }
const { post } = Astro.props; const { post } = Astro.props;
const readingTime = getReadingTime(post.content || '');
--- ---
<div class="smooth-reveal-cards group flex flex-col"> <div class="smooth-reveal-cards group flex flex-col">
@@ -36,35 +32,15 @@ const readingTime = getReadingTime(post.content || '');
</div> </div>
<div class="flex flex-col flex-1 rounded-xl p-4 md:p-5 mx-1 mb-2"> <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"> <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} {post.title}
</h3> </h3>
</div> </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="mt-auto">
<div class="inline-flex items-center"> <PostMetadataSnippet
<div class="mr-2"> enableCategoryLink={false}
<Logo post={post}
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> </div>
</div> </div>
</a> </a>

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

@@ -1,12 +1,10 @@
--- ---
import { Image } from 'astro:assets'; import { Image } from 'astro:assets';
import getReadingTime from 'reading-time';
import type { Post } from '@lib/directusTypes'; import type { Post } from '@lib/directusTypes';
import ReadMoreButton from '@components/buttons/ReadMoreButton.astro'; import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
import Logo from '@components/images/Logo.astro'; import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
import { formatShortDate } from '@support/time';
import { getDirectusImageURL } from '@/support/url'; import { getDirectusImageURL } from '@/support/url';
interface Props { interface Props {
@@ -14,8 +12,6 @@ interface Props {
} }
const { post } = Astro.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"> <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> <div>
<Image <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)} src={getDirectusImageURL(post.image)}
alt={post.image_alt} alt={post.image_alt}
draggable="false" draggable="false"
loading="lazy" loading="lazy"
width="850"
height="420"
inferSize={true} inferSize={true}
/> />
</div> </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"> <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 mb-2"> <h2 class="card-text-header">
{post.title} {post.title}
</h2> </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} {post.description}
</p> </p>
<div class="card-text-title flex items-center justify-between w-full"> <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">
<ReadMoreButton/> <div class="hidden md:block shrink-0 mt-4">
<div class="flex shrink-0 items-center gap-x-2 card-text-description text-sm overflow-hidden"> <ReadMoreButton/>
<div class="inline-flex items-center"> </div>
<div class="mr-2"> <div class="mt-2 lg:mt-4">
<Logo <PostMetadataSnippet
srcLight={getDirectusImageURL(post.category.logoLight)} post={post}
srcDark={getDirectusImageURL(post.category.logoDark)} enableCategoryLink={false}
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> </div>
</div> </div>
</div>
</a> </a>
</div> </div>

56
src/components/cards/LargeBlogRightCard.astro
View File

@@ -1,12 +1,10 @@
--- ---
import { Image } from 'astro:assets'; import { Image } from 'astro:assets';
import getReadingTime from 'reading-time';
import type { Post } from '@lib/directusTypes'; import type { Post } from '@lib/directusTypes';
import ReadMoreButton from '@components/buttons/ReadMoreButton.astro'; import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
import Logo from '@components/images/Logo.astro'; import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
import { formatShortDate } from '@support/time';
import { getDirectusImageURL } from '@/support/url'; import { getDirectusImageURL } from '@/support/url';
interface Props { interface Props {
@@ -14,8 +12,6 @@ interface Props {
} }
const { post } = Astro.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"> <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}`} href={`/blog/${post.slug}`}
data-astro-prefetch 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"> <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 mb-2"> <h2 class="card-text-header">
{post.title} {post.title}
</h2> </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} {post.description}
</p> </p>
<div class="card-text-title flex items-center justify-between w-full"> <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">
<ReadMoreButton/> <div class="hidden md:block shrink-0 mt-4">
<div class="flex shrink-0 items-center gap-x-2 card-text-description text-sm overflow-hidden"> <ReadMoreButton/>
<div class="inline-flex items-center"> </div>
<div class="mr-2"> <div class="mt-2 lg:mt-4">
<Logo <PostMetadataSnippet
srcLight={getDirectusImageURL(post.category.logoLight)} post={post}
srcDark={getDirectusImageURL(post.category.logoDark)} enableCategoryLink={false}
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> </div>
</div> </div>
</div> </div>
@@ -69,8 +47,6 @@ const readingTime = getReadingTime(post.content || '');
alt={post.image_alt} alt={post.image_alt}
draggable="false" draggable="false"
loading="lazy" loading="lazy"
width="850"
height="420"
inferSize={true} inferSize={true}
/> />
</div> </div>
@@ -83,8 +59,6 @@ const readingTime = getReadingTime(post.content || '');
alt={post.image_alt} alt={post.image_alt}
draggable="false" draggable="false"
loading="lazy" loading="lazy"
width="850"
height="420"
inferSize={true} inferSize={true}
/> />
</div> </div>
@@ -95,8 +69,6 @@ const readingTime = getReadingTime(post.content || '');
alt={post.image_alt} alt={post.image_alt}
draggable="false" draggable="false"
loading="lazy" loading="lazy"
width="600"
height="310"
inferSize={true} inferSize={true}
/> />
<Image <Image
@@ -105,8 +77,6 @@ const readingTime = getReadingTime(post.content || '');
alt={post.image_second_alt} alt={post.image_second_alt}
draggable="false" draggable="false"
loading="lazy" loading="lazy"
width="600"
height="310"
inferSize={true} inferSize={true}
/> />
</div> </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 type { Post } from '@lib/directusTypes';
import Logo from '@components/images/Logo.astro'; import Logo from '@components/images/Logo.astro';
import { formatShortDate } from '@support/time'; import { formatShortDate, formatDate } from '@support/time';
import { getDirectusImageURL } from '@/support/url'; import { getDirectusImageURL } from '@/support/url';
interface Props { interface Props {
post: Post; post: Post;
enableCategoryLink?: boolean;
dateFormat?: 'short' | 'long';
} }
const { post } = Astro.props; const { post, enableCategoryLink = true, dateFormat = 'short' } = Astro.props;
const readingTime = getReadingTime(post.content || ''); const readingTime = getReadingTime(post.content || '');
--- ---
<div> <ol class="flex items-center justify-start card-text-description text-sm whitespace-nowrap gap-2 sm:gap-0 overflow-hidden">
<ol class="flex items-center justify-center sm:justify-start whitespace-nowrap gap-2 sm:gap-0 mt-6 sm:mt-4"> {post.category && (
{post.category && ( <li class="inline-flex items-center">
<li class="inline-flex items-center"> {enableCategoryLink ? (
<a <a
class="inline-flex items-center text-secondary hover:text-secondary-hover text-sm transition-all duration-300" class="inline-flex items-center hover:card-hover-text-description overflow-hidden"
href={`/categories/${post.category.slug}`} href={`/categories/${post.category.slug}`}
data-astro-prefetch data-astro-prefetch
> >
<div class="flex flex-row items-center shrink-0"> <div class="flex flex-row items-center shrink-0">
<div class="mr-2"> <div class="mr-2">
<Logo <Logo
srcLight={getDirectusImageURL(post.category.logoLight)} srcLight={getDirectusImageURL(post.category.logoLight)}
srcDark={getDirectusImageURL(post.category.logoDark)} srcDark={getDirectusImageURL(post.category.logoDark)}
alt={`Logo of ${post.category.title}`} alt={`Logo of ${post.category.title}`}
width = 18, width={18}
height = 18, height={18}
/> />
</div>
{post.category.title}
</div> </div>
</a> {post.category.title}
<span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4"> </div>
/ </a>
</span> ) : (
</li> <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"> </li>
<span class="shrink-0 text-secondary text-sm"> )}
{formatShortDate(post.published_date)} <li class="inline-flex items-center">
</span> <span class="shrink-0 mx-2">
<span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4"> /
/ </span>
</span> </li>
</li> <li class="inline-flex items-center">
<li class="inline-flex items-center"> <span class="shrink-0 overflow-hidden">
<span class="shrink-0 text-secondary text-sm"> {dateFormat === 'short' ? formatShortDate(post.published_date) : formatDate(post.published_date)}
{readingTime.minutes.toPrecision(1)} minutes </span>
</span> </li>
</li> <li class="inline-flex items-center">
</ol> <span class="shrink-0 mx-2">
</div> /
</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"> <h2 class="card-text-header block">
{post.title} {post.title}
</h2> </h2>
<PostMetadataSnippet post={post}/> <div class="mt-4 sm:mt-6">
<PostMetadataSnippet
post={post}
dateFormat='long'
/>
</div>
</div> </div>
<div class="border-t border-divider mt-10 mb-10"/> <div class="border-t border-divider mt-10 mb-10"/>

5
src/styles/utilities.css
View File

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