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

feat: refactor how blog cards layout, add metadata, better responsiveness

Browse Source
This commit is contained in:
Alex Lebens
2026-03-10 21:30:00 -05:00
parent cc8bade886
commit 265fd4f2cb
13 changed files with 153 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/buttons/ReadMoreButton.astro Normal file
View File

@@ -0,0 +1,15 @@
---
import { Icon } from 'astro-icon/components';
---
<div class="button-base button-bg-teal inline-flex shrink-0 rounded-lg gap-x-2">
<div class="button-text-title flex relative items-center text-center">
<span class="mr-2">
Read More
</span>
<Icon
name="mdi:keyboard-arrow-right"
class="button-hover-arrow"
/>
</div>
</div>

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

@@ -1,10 +1,11 @@
--- ---
import { Icon } from 'astro-icon/components';
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 { formatDate } from '@support/time'; import Logo from '@components/images/Logo.astro';
import { formatShortDate } from '@support/time';
import { getDirectusImageURL } from '@/support/url'; import { getDirectusImageURL } from '@/support/url';
interface Props { interface Props {
@@ -12,6 +13,8 @@ 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">
@@ -31,25 +34,37 @@ const { post } = Astro.props;
inferSize={true} inferSize={true}
/> />
</div> </div>
<div class="rounded-xl p-4 md:p-5 flex flex-col flex-1"> <div class="flex flex-col flex-1 rounded-xl p-4 md:p-5 mx-1 mb-2">
<h3 class="card-text-title text-xl"> <div class="flex flex-row items-center mb-8">
{post.title} <h3 class="card-text-title card-hover-text-title text-xl md:text-2xl">
</h3> {post.title}
<div class="ml-6 flex mt-auto"> </h3>
<div class="relative inline-block w-full"> </div>
<div class="card-text-title card-hover-text-title flex relative items-center mx-auto min-h-11 sm:mx-0 sm:mt-4"> <div class="flex shrink-0 items-center mt-auto gap-x-2 card-text-description text-sm overflow-hidden whitespace-nowrap max-w-full">
<span class="relative inline-block overflow-hidden ml-2"> <div class="inline-flex items-center">
Read more <div class="mr-2">
</span> <Logo
<Icon srcLight={getDirectusImageURL(post.category.logoLight)}
name="mdi:keyboard-arrow-right" srcDark={getDirectusImageURL(post.category.logoDark)}
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1" alt={`Logo of ${post.category.title}`}
width={18}
height={18}
/> />
<p class="card-text-description text-sm ml-auto">
{formatDate(post.published_date)}
</p>
</div> </div>
{post.category.title}
</div> </div>
<span>
/
</span>
<p>
{formatShortDate(post.published_date)}
</p>
<span>
/
</span>
<span>
{readingTime.minutes.toPrecision(1)} minutes
</span>
</div> </div>
</div> </div>
</a> </a>

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

@@ -1,33 +1,34 @@
--- ---
import { Icon } from 'astro-icon/components';
import { Image } from 'astro:assets'; import { Image } from 'astro:assets';
import getReadingTime from 'reading-time';
import { formatDate } from '@support/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 { getDirectusImageURL } from '@/support/url'; import { getDirectusImageURL } from '@/support/url';
interface Props { interface Props {
title: string; post: Post;
subTitle: string;
url: string;
pubDate: Date,
img: string;
imgAlt: string;
} }
const { title, subTitle, url, pubDate, img, imgAlt } = 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">
<a <a
class="md:card-base-hidden group items-center md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 gap-8 xl:gap-16 w-full md:px-8 md:py-8" class="md:card-base-hidden group items-center md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 gap-8 xl:gap-16 w-full md:px-8 md:py-8"
href={url} href={`/blog/${post.slug}`}
data-astro-prefetch data-astro-prefetch
> >
<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 sm:max-h-80 md:max-h-90 object-cover"
src={getDirectusImageURL(img)} src={getDirectusImageURL(post.image)}
alt={imgAlt} alt={post.image_alt}
draggable="false" draggable="false"
loading="lazy" loading="lazy"
width="850" width="850"
@@ -37,26 +38,39 @@ const { title, subTitle, url, pubDate, img, imgAlt } = Astro.props;
</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="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"> <h2 class="card-text-header mb-2">
{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 mb-8">
{subTitle} {post.description}
</p> </p>
<div class="card-text-title flex items-center justify-between w-full"> <div class="card-text-title flex items-center justify-between w-full">
<div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2"> <ReadMoreButton/>
<div class="button-text-title flex relative items-center text-center"> <div class="flex shrink-0 items-center gap-x-2 card-text-description text-sm overflow-hidden">
<span class="mr-2"> <div class="inline-flex items-center">
Read More <div class="mr-2">
</span> <Logo
<Icon srcLight={getDirectusImageURL(post.category.logoLight)}
name="mdi:keyboard-arrow-right" srcDark={getDirectusImageURL(post.category.logoDark)}
class="button-hover-arrow" alt={`Logo of ${post.category.title}`}
/> width={18}
height={18}
/>
</div>
{post.category.title}
</div> </div>
<span>
/
</span>
<p>
{formatShortDate(post.published_date)}
</p>
<span>
/
</span>
<span>
{readingTime.minutes.toPrecision(1)} minutes
</span>
</div> </div>
<span class="card-text-description text-sm ml-auto">
{formatDate(pubDate)}
</span>
</div> </div>
</a> </a>
</div> </div>

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

@@ -1,60 +1,72 @@
--- ---
import { Icon } from 'astro-icon/components';
import { Image } from 'astro:assets'; import { Image } from 'astro:assets';
import getReadingTime from 'reading-time';
import { formatDate } from '@support/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 { getDirectusImageURL } from '@/support/url'; import { getDirectusImageURL } from '@/support/url';
interface Props { interface Props {
title: string; post: Post;
subTitle: string;
url: string;
pubDate: Date;
imgOne: string;
imgOneAlt: string;
imgTwo?: string;
imgTwoAlt?: string;
} }
const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = 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">
<a <a
class="md:card-base-hidden group flex flex-col-reverse md:grid md:items-center md:grid-cols-2 lg:grid lg:grid-cols-2 md:gap-8 xl:gap-16 w-full md:px-8 md:py-8" class="md:card-base-hidden group flex flex-col-reverse md:grid md:items-center md:grid-cols-2 lg:grid lg:grid-cols-2 md:gap-8 xl:gap-16 w-full md:px-8 md:py-8"
href={url} 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="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"> <h2 class="card-text-header mb-2">
{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 mb-8">
{subTitle} {post.description}
</p> </p>
<div class="card-text-title flex items-center justify-between w-full"> <div class="card-text-title flex items-center justify-between w-full">
<div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2"> <ReadMoreButton/>
<div class="button-text-title flex relative items-center text-center"> <div class="flex shrink-0 items-center gap-x-2 card-text-description text-sm overflow-hidden">
<span class="mr-2"> <div class="inline-flex items-center">
Read More <div class="mr-2">
</span> <Logo
<Icon srcLight={getDirectusImageURL(post.category.logoLight)}
name="mdi:keyboard-arrow-right" srcDark={getDirectusImageURL(post.category.logoDark)}
class="button-hover-arrow" alt={`Logo of ${post.category.title}`}
/> width={18}
height={18}
/>
</div>
{post.category.title}
</div> </div>
<span>
/
</span>
<p>
{formatShortDate(post.published_date)}
</p>
<span>
/
</span>
<span>
{readingTime.minutes.toPrecision(1)} minutes
</span>
</div> </div>
<span class="card-text-description text-sm ml-auto">
{formatDate(pubDate)}
</span>
</div> </div>
</div> </div>
{!imgTwo ? ( {!post.image_second ? (
<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 sm:max-h-80 md:max-h-90 object-cover"
src={getDirectusImageURL(imgOne)} src={getDirectusImageURL(post.image)}
alt={imgOneAlt} alt={post.image_alt}
draggable="false" draggable="false"
loading="lazy" loading="lazy"
width="850" width="850"
@@ -67,8 +79,8 @@ const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } =
<div class="md:hidden"> <div class="md:hidden">
<Image <Image
class="rounded-2xl rounded-b-none shadow-2xl w-full h-full sm:max-h-80 object-cover" class="rounded-2xl rounded-b-none shadow-2xl w-full h-full sm:max-h-80 object-cover"
src={getDirectusImageURL(imgOne)} src={getDirectusImageURL(post.image)}
alt={imgOneAlt} alt={post.image_alt}
draggable="false" draggable="false"
loading="lazy" loading="lazy"
width="850" width="850"
@@ -79,8 +91,8 @@ const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } =
<div class="hidden md:flex md:items-start"> <div class="hidden md:flex md:items-start">
<Image <Image
class="rounded-xl z-10 shadow-2xl w-3/5 h-full object-cover" class="rounded-xl z-10 shadow-2xl w-3/5 h-full object-cover"
src={getDirectusImageURL(imgOne)} src={getDirectusImageURL(post.image)}
alt={imgOneAlt} alt={post.image_alt}
draggable="false" draggable="false"
loading="lazy" loading="lazy"
width="600" width="600"
@@ -89,8 +101,8 @@ const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } =
/> />
<Image <Image
class="rounded-xl shadow-2xl w-3/5 h-full -ml-16 mt-12 object-cover" class="rounded-xl shadow-2xl w-3/5 h-full -ml-16 mt-12 object-cover"
src={getDirectusImageURL(imgTwo)} src={getDirectusImageURL(post.image_second)}
alt={imgTwoAlt} alt={post.image_second_alt}
draggable="false" draggable="false"
loading="lazy" loading="lazy"
width="600" width="600"

15
src/components/cards/LargeLinkCard.astro
View File

@@ -1,6 +1,5 @@
--- ---
import { Icon } from 'astro-icon/components'; import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
import Logo from '@components/images/Logo.astro'; import Logo from '@components/images/Logo.astro';
import { getDirectusImageURL } from '@/support/url'; import { getDirectusImageURL } from '@/support/url';
@@ -39,17 +38,7 @@ const { title, subTitle, url, logoLight, logoDark} = Astro.props;
</div> </div>
</div> </div>
<div class="hidden md:block shrink-0 mr-4"> <div class="hidden md:block shrink-0 mr-4">
<div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2"> <ReadMoreButton/>
<div class="button-text-title flex relative items-center text-center">
<span class="mr-2">
Read More
</span>
<Icon
name="mdi:keyboard-arrow-right"
class="button-hover-arrow"
/>
</div>
</div>
</div> </div>
</a> </a>
</div> </div>

2
src/components/sections/CategorySection.astro
View File

@@ -10,7 +10,7 @@ import { timeago } from '@support/time';
const posts = await directus.request( const posts = await directus.request(
readItems('posts', { readItems('posts', {
filter: { published: { _eq: true } }, filter: { published: { _eq: true } },
fields: ['*', 'category.slug'], fields: ['*', { category: ['*'] }],
sort: ['-published_date'], sort: ['-published_date'],
}) })
); );

20
src/components/sections/SelectedPostsSection.astro
View File

@@ -13,24 +13,8 @@ const { posts } = Astro.props;
<section class="smooth-reveal flex flex-col gap-4 md:mb-20"> <section class="smooth-reveal flex flex-col gap-4 md:mb-20">
{posts.map((post, index) => index % 2 === 0 ? ( {posts.map((post, index) => index % 2 === 0 ? (
<LargeBlogLeftCard <LargeBlogLeftCard post={post}/>
title={post.title}
subTitle={post.description}
url={`/blog/${post.slug}`}
pubDate={post.published_date}
img={post.image}
imgAlt={post.image_alt}
/>
) : ( ) : (
<LargeBlogRightCard <LargeBlogRightCard post={post}/>
title={post.title}
subTitle={post.description}
url={`/blog/${post.slug}`}
pubDate={post.published_date}
imgOne={post.image}
imgOneAlt={post.image_alt}
imgTwo={post?.image_second}
imgTwoAlt={post?.image_second_alt}
/>
))} ))}
</section> </section>

2
src/pages/all.astro
View File

@@ -10,7 +10,7 @@ const global = await directus.request(readSingleton('site_global'));
const posts = await directus.request( const posts = await directus.request(
readItems('posts', { readItems('posts', {
filter: { published: { _eq: true } }, filter: { published: { _eq: true } },
fields: ['*'], fields: ['*', { category: ['*'] }],
sort: ['-published_date'], sort: ['-published_date'],
}) })
); );

2
src/pages/blog/index.astro
View File

@@ -14,7 +14,7 @@ const global = await directus.request(readSingleton('site_global'));
const posts = await directus.request( const posts = await directus.request(
readItems('posts', { readItems('posts', {
filter: { published: { _eq: true } }, filter: { published: { _eq: true } },
fields: ['*'], fields: ['*', { category: ['*'] }],
sort: ['-published_date'], sort: ['-published_date'],
}) })
); );

2
src/pages/categories/[...slug].astro
View File

@@ -22,7 +22,7 @@ const global = await directus.request(readSingleton('site_global'));
const posts = await directus.request( const posts = await directus.request(
readItems('posts', { readItems('posts', {
filter: { published: { _eq: true } }, filter: { published: { _eq: true } },
fields: ['*', 'category.slug'], fields: ['*', { category: ['*'] }],
sort: ['-published_date'], sort: ['-published_date'],
}) })
); );

2
src/pages/index.astro
View File

@@ -17,7 +17,7 @@ const weather = await directus.request(readSingleton('site_weather'));
const posts = await directus.request( const posts = await directus.request(
readItems('posts', { readItems('posts', {
filter: { published: { _eq: true } }, filter: { published: { _eq: true } },
fields: ['*'], fields: ['*', { category: ['*'] }],
sort: ['-published_date'], sort: ['-published_date'],
}) })
); );

9
src/support/time.ts
View File

@@ -39,4 +39,11 @@ function formatDate(date: Date): string {
}) })
} }
export { formatDate, timeago }; function formatShortDate(date: Date): string {
return new Date(date).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
})
}
export { formatDate, formatShortDate, timeago };

2
src/support/url.ts
View File

@@ -6,7 +6,7 @@ const getSiteURL = () => {
return 'https://www.alexlebens.dev'; return 'https://www.alexlebens.dev';
}; };
async function getDirectusImageURL(image: string) { function getDirectusImageURL(image: string) {
return `${getDirectusURL()}/assets/${image}`; return `${getDirectusURL()}/assets/${image}`;
} }