112 lines
No EOL
2.5 KiB
Text
112 lines
No EOL
2.5 KiB
Text
---
|
|
import Layout from "../../layouts/Layout.astro";
|
|
import Header from "../../components/Header.astro";
|
|
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(),
|
|
);
|
|
---
|
|
|
|
<Layout
|
|
title="Blog — Semyon"
|
|
description="Technical notes, experiments and things worth documenting."
|
|
>
|
|
<Header />
|
|
|
|
<main>
|
|
|
|
<section>
|
|
<div class="mx-auto max-w-7xl px-6 py-28 lg:px-8 lg:py-36">
|
|
|
|
<div class="font-mono text-[10px] tracking-widest text-[var(--muted)]">
|
|
04 / BLOG
|
|
</div>
|
|
|
|
<div class="mt-4 flex flex-col justify-between gap-6 md:flex-row md:items-end">
|
|
|
|
<h1 class="text-5xl font-bold tracking-tight sm:text-6xl">
|
|
Technical notes.
|
|
</h1>
|
|
|
|
<p class="max-w-md text-sm leading-relaxed text-[var(--muted)]">
|
|
Things I learned, broke, investigated or decided
|
|
were worth writing down.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section class="border-t border-[var(--border)]">
|
|
|
|
<div class="mx-auto max-w-7xl px-6 py-16 lg:px-8">
|
|
|
|
<div class="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-6 lg:grid-cols-[160px_1fr_auto] lg:items-start">
|
|
|
|
<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>
|
|
|
|
<h2 class="text-xl font-semibold tracking-tight transition-colors group-hover:text-[var(--accent)]">
|
|
{post.data.title}
|
|
</h2>
|
|
|
|
<p class="mt-3 max-w-2xl text-sm leading-relaxed text-[var(--muted)]">
|
|
{post.data.description}
|
|
</p>
|
|
|
|
<div class="mt-5 flex flex-wrap gap-2">
|
|
|
|
{post.data.tags.map((tag) => (
|
|
<span class="font-mono text-[9px] text-[var(--muted)]">
|
|
#{tag}
|
|
</span>
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="font-mono text-[10px] text-[var(--muted)] transition-colors group-hover:text-[var(--text)]">
|
|
READ →
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</main>
|
|
</Layout> |