90 lines
No EOL
1.8 KiB
Text
90 lines
No EOL
1.8 KiB
Text
---
|
|
import { getCollection } from "astro:content";
|
|
|
|
const posts = (await getCollection("blog"))
|
|
.filter((post) => !post.data.draft)
|
|
.sort(
|
|
(a, b) =>
|
|
b.data.pubDate.valueOf() -
|
|
a.data.pubDate.valueOf(),
|
|
)
|
|
.slice(0, 3);
|
|
---
|
|
|
|
<section class="border-t border-[var(--border)]">
|
|
|
|
<div class="mx-auto max-w-7xl px-6 py-28 lg:px-8 lg:py-36">
|
|
|
|
<div class="flex flex-col justify-between gap-6 md:flex-row md:items-end">
|
|
|
|
<div>
|
|
|
|
<div class="font-mono text-[10px] tracking-widest text-[var(--muted)]">
|
|
04 / NOTES
|
|
</div>
|
|
|
|
<h2 class="mt-4 text-4xl font-bold tracking-tight sm:text-5xl">
|
|
Latest notes
|
|
</h2>
|
|
|
|
</div>
|
|
|
|
<a
|
|
href="/blog"
|
|
class="font-mono text-[10px] text-[var(--muted)] transition-colors hover:text-[var(--text)]"
|
|
>
|
|
VIEW ALL NOTES →
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div class="mt-16 space-y-px border border-[var(--border)] bg-[var(--border)]">
|
|
|
|
{posts.map((post) => (
|
|
<a
|
|
href={`/blog/${post.id}/`}
|
|
class="group block bg-[var(--surface)] p-6 transition-colors hover:bg-[var(--surface-hover)] lg:p-8"
|
|
>
|
|
|
|
<div class="grid gap-5 md:grid-cols-[150px_1fr_auto] md:items-center">
|
|
|
|
<time
|
|
datetime={post.data.pubDate.toISOString()}
|
|
class="font-mono text-[10px] text-[var(--muted)]"
|
|
>
|
|
{post.data.pubDate.toLocaleDateString(
|
|
"en-US",
|
|
{
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
},
|
|
)}
|
|
</time>
|
|
|
|
<div>
|
|
|
|
<h3 class="text-lg font-semibold transition-colors group-hover:text-[var(--accent)]">
|
|
{post.data.title}
|
|
</h3>
|
|
|
|
<p class="mt-2 text-sm text-[var(--muted)]">
|
|
{post.data.description}
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="font-mono text-[10px] text-[var(--muted)]">
|
|
READ →
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section> |