Nicholai
6625112e2c
- Introduced PostNavigation, ReadingProgress, RelatedPosts, and TableOfContents components to improve user navigation and engagement within blog posts. - Updated BlogPost layout to incorporate new components, providing a cohesive reading experience with navigation links to previous and next posts, a reading progress bar, and related articles. - Enhanced global CSS styles for better typography and layout consistency across blog components.
49 lines
1.1 KiB
Plaintext
49 lines
1.1 KiB
Plaintext
---
|
|
import BlogCard from './BlogCard.astro';
|
|
import type { ImageMetadata } from 'astro';
|
|
|
|
interface RelatedPost {
|
|
title: string;
|
|
description: string;
|
|
pubDate: Date;
|
|
heroImage?: ImageMetadata;
|
|
category?: string;
|
|
tags?: string[];
|
|
href: string;
|
|
}
|
|
|
|
interface Props {
|
|
posts: RelatedPost[];
|
|
class?: string;
|
|
}
|
|
|
|
const { posts, class: className = '' } = Astro.props;
|
|
---
|
|
|
|
{posts.length > 0 && (
|
|
<section class:list={['related-posts mt-20 pt-12 border-t border-white/10', className]}>
|
|
<div class="flex items-center gap-4 mb-8">
|
|
<span class="text-[10px] font-mono text-slate-500 uppercase tracking-widest font-bold">
|
|
/// RELATED ARTICLES
|
|
</span>
|
|
<span class="h-px flex-grow bg-white/10"></span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{posts.slice(0, 3).map((post) => (
|
|
<BlogCard
|
|
title={post.title}
|
|
description={post.description}
|
|
pubDate={post.pubDate}
|
|
heroImage={post.heroImage}
|
|
category={post.category}
|
|
tags={post.tags}
|
|
href={post.href}
|
|
variant="compact"
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|