wh-leader
63 lines
2.1 KiB
Plaintext
63 lines
2.1 KiB
Plaintext
---
|
|
import { getCollection } from 'astro:content';
|
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
|
import Header from '../../components/layout/Header.astro';
|
|
import Footer from '../../components/layout/Footer.astro';
|
|
|
|
const allPosts = await getCollection('blog', ({ data }) => !data.draft);
|
|
const sortedPosts = allPosts.sort(
|
|
(a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf()
|
|
);
|
|
---
|
|
|
|
<BaseLayout
|
|
title="Blog"
|
|
description="Thoughts on building products, technical learnings, and the indie builder journey"
|
|
>
|
|
<Header />
|
|
<main class="flex-1 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<h1 class="text-4xl font-bold mb-8">Blog</h1>
|
|
|
|
<div class="space-y-8">
|
|
{sortedPosts.map((post) => (
|
|
<article class="bg-surface rounded-lg border border-text-tertiary/20 p-6 hover:border-primary/40 transition-colors">
|
|
<a href={`/blog/${post.slug}`} class="block">
|
|
<time class="text-sm text-text-tertiary block mb-2">
|
|
{post.data.publishDate.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})}
|
|
</time>
|
|
|
|
<h2 class="text-2xl font-semibold mb-3 text-text-primary hover:text-primary transition-colors">
|
|
{post.data.title}
|
|
</h2>
|
|
|
|
<p class="text-text-secondary mb-4">
|
|
{post.data.description}
|
|
</p>
|
|
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
{post.data.tags.map((tag) => (
|
|
<span class="inline-block px-3 py-1 rounded-full text-sm font-medium border bg-text-tertiary/10 text-text-secondary border-text-tertiary/20">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
<span class="text-primary font-medium">Read more →</span>
|
|
</a>
|
|
</article>
|
|
))}
|
|
</div>
|
|
|
|
{sortedPosts.length === 0 && (
|
|
<p class="text-text-secondary text-center py-12">
|
|
No posts yet. Check back soon!
|
|
</p>
|
|
)}
|
|
</main>
|
|
<Footer />
|
|
</BaseLayout>
|