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 getReadingTime from 'reading-time';
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';
interface Props {
@@ -12,6 +13,8 @@ interface Props {
}
const { post } = Astro.props;
const readingTime = getReadingTime(post.content || '');
---
<div class="smooth-reveal-cards group flex flex-col">
@@ -31,25 +34,37 @@ const { post } = Astro.props;
inferSize={true}
/>
</div>
<div class="rounded-xl p-4 md:p-5 flex flex-col flex-1">
<h3 class="card-text-title text-xl">
{post.title}
</h3>
<div class="ml-6 flex mt-auto">
<div class="relative inline-block w-full">
<div class="card-text-title card-hover-text-title flex relative items-center mx-auto min-h-11 sm:mx-0 sm:mt-4">
<span class="relative inline-block overflow-hidden ml-2">
Read more
</span>
<Icon
name="mdi:keyboard-arrow-right"
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
<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">
{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}
/>
<p class="card-text-description text-sm ml-auto">
{formatDate(post.published_date)}
</p>
</div>
{post.category.title}
</div>
<span>
/
</span>
<p>
{formatShortDate(post.published_date)}
</p>
<span>
/
</span>
<span>
{readingTime.minutes.toPrecision(1)} minutes
</span>
</div>
</div>
</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 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';
interface Props {
title: string;
subTitle: string;
url: string;
pubDate: Date,
img: string;
imgAlt: string;
post: Post;
}
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">
<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"
href={url}
href={`/blog/${post.slug}`}
data-astro-prefetch
>
<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"
src={getDirectusImageURL(img)}
alt={imgAlt}
src={getDirectusImageURL(post.image)}
alt={post.image_alt}
draggable="false"
loading="lazy"
width="850"
@@ -37,26 +38,39 @@ const { title, subTitle, url, pubDate, img, imgAlt } = Astro.props;
</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">
{title}
{post.title}
</h2>
<p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
{subTitle}
{post.description}
</p>
<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">
<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"
/>
<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>
<span class="card-text-description text-sm ml-auto">
{formatDate(pubDate)}
</span>
</div>
</a>
</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 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';
interface Props {
title: string;
subTitle: string;
url: string;
pubDate: Date;
imgOne: string;
imgOneAlt: string;
imgTwo?: string;
imgTwoAlt?: string;
post: Post;
}
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">
<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"
href={url}
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">
{title}
{post.title}
</h2>
<p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
{subTitle}
{post.description}
</p>
<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">
<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"
/>
<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>
<span class="card-text-description text-sm ml-auto">
{formatDate(pubDate)}
</span>
</div>
</div>
{!imgTwo ? (
{!post.image_second ? (
<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"
src={getDirectusImageURL(imgOne)}
alt={imgOneAlt}
src={getDirectusImageURL(post.image)}
alt={post.image_alt}
draggable="false"
loading="lazy"
width="850"
@@ -67,8 +79,8 @@ const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } =
<div class="md:hidden">
<Image
class="rounded-2xl rounded-b-none shadow-2xl w-full h-full sm:max-h-80 object-cover"
src={getDirectusImageURL(imgOne)}
alt={imgOneAlt}
src={getDirectusImageURL(post.image)}
alt={post.image_alt}
draggable="false"
loading="lazy"
width="850"
@@ -79,8 +91,8 @@ const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } =
<div class="hidden md:flex md:items-start">
<Image
class="rounded-xl z-10 shadow-2xl w-3/5 h-full object-cover"
src={getDirectusImageURL(imgOne)}
alt={imgOneAlt}
src={getDirectusImageURL(post.image)}
alt={post.image_alt}
draggable="false"
loading="lazy"
width="600"
@@ -89,8 +101,8 @@ const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } =
/>
<Image
class="rounded-xl shadow-2xl w-3/5 h-full -ml-16 mt-12 object-cover"
src={getDirectusImageURL(imgTwo)}
alt={imgTwoAlt}
src={getDirectusImageURL(post.image_second)}
alt={post.image_second_alt}
draggable="false"
loading="lazy"
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 { getDirectusImageURL } from '@/support/url';
@@ -39,17 +38,7 @@ const { title, subTitle, url, logoLight, logoDark} = Astro.props;
</div>
</div>
<div class="hidden md:block shrink-0 mr-4">
<div class="button-base button-bg-teal inline-flex 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>
<ReadMoreButton/>
</div>
</a>
</div>

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

@@ -10,7 +10,7 @@ import { timeago } from '@support/time';
const posts = await directus.request(
readItems('posts', {
filter: { published: { _eq: true } },
fields: ['*', 'category.slug'],
fields: ['*', { category: ['*'] }],
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">
{posts.map((post, index) => index % 2 === 0 ? (
<LargeBlogLeftCard
title={post.title}
subTitle={post.description}
url={`/blog/${post.slug}`}
pubDate={post.published_date}
img={post.image}
imgAlt={post.image_alt}
/>
<LargeBlogLeftCard post={post}/>
) : (
<LargeBlogRightCard
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}
/>
<LargeBlogRightCard post={post}/>
))}
</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(
readItems('posts', {
filter: { published: { _eq: true } },
fields: ['*'],
fields: ['*', { category: ['*'] }],
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(
readItems('posts', {
filter: { published: { _eq: true } },
fields: ['*'],
fields: ['*', { category: ['*'] }],
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(
readItems('posts', {
filter: { published: { _eq: true } },
fields: ['*', 'category.slug'],
fields: ['*', { category: ['*'] }],
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(
readItems('posts', {
filter: { published: { _eq: true } },
fields: ['*'],
fields: ['*', { category: ['*'] }],
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';
};
async function getDirectusImageURL(image: string) {
function getDirectusImageURL(image: string) {
return `${getDirectusURL()}/assets/${image}`;
}