---
import Base from '../../layouts/Base.astro';
import SiteNav from '../../components/ui/SiteNav.astro';
import { getCollection } from 'astro:content';
const posts = (await getCollection('blog')).sort((a, b) =>
new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
);
---
<Base title="Blog — foxguard" description="Notes on security scanning, rule development, and what we find in real codebases.">
<div class="max-w-5xl mx-auto px-6">
<SiteNav backLabel="blog" />
</div>
<main class="pt-8 pb-24">
<div class="max-w-5xl mx-auto px-6">
<header class="mb-16">
<h1 class="font-heading text-3xl sm:text-4xl text-noir-50 tracking-tight mb-3">Blog</h1>
<p class="text-noir-500 text-base">Notes on security scanning and how the rules work.</p>
</header>
<ul class="space-y-10 list-none pl-0">
{posts.map((post) => {
const displayDate = new Date(post.data.date + 'T00:00:00').toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
});
return (
<li>
<a href={`/blog/${post.id}`} class="group block no-underline">
<time datetime={post.data.date} class="text-sm text-noir-600">{displayDate}</time>
<h2 class="text-lg font-medium text-noir-100 mt-1 mb-2 group-hover:text-fox transition-colors">{post.data.title}</h2>
<p class="text-sm text-noir-500 leading-relaxed">{post.data.description}</p>
</a>
</li>
);
})}
</ul>
</div>
</main>
<footer class="py-8">
<div class="max-w-5xl mx-auto px-6">
<div class="h-px bg-noir-800 mb-8"></div>
<a href="/" class="text-noir-600 hover:text-noir-100 transition-colors no-underline text-sm">foxguard.dev</a>
</div>
</footer>
</Base>