---
import Base from '../../layouts/Base.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.">
<main class="pt-16 pb-24">
<div class="max-w-2xl mx-auto px-6">
<header class="mb-16">
<a href="/" class="text-noir-600 text-sm hover:text-noir-400 transition-colors no-underline mb-6 block">← foxguard.dev</a>
<h1 class="font-heading text-2xl sm:text-3xl text-noir-50 tracking-tight mb-3">Blog</h1>
<p class="text-noir-500 text-sm leading-relaxed">Notes on security scanning, what we find in real codebases, 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-xs text-noir-600 font-mono">{displayDate}</time>
<h2 class="text-lg font-semibold 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 text-center text-[11px] text-noir-600 font-mono">
<div class="section-divider mb-8"></div>
<a href="/" class="text-noir-500 hover:text-fox transition-colors no-underline">foxguard.dev</a>
</footer>
</Base>