Compleet
40 lines
2.0 KiB
Plaintext
40 lines
2.0 KiB
Plaintext
---
|
|
import { getCollection } from 'astro:content';
|
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
|
import { formatDate, guidesByReview } from '../../lib/content';
|
|
|
|
const entries = guidesByReview(await getCollection('guides', ({ data }) => !data.draft));
|
|
---
|
|
|
|
<BaseLayout title="Field guides" description="Maintained explanations of systems that mediate identity, authority, and trust.">
|
|
<section class="shell archive-head">
|
|
<p class="eyebrow">Documentation written by journalists</p>
|
|
<h1 class="display">Field guides</h1>
|
|
<p>The page a smart newcomer needs after reading three contradictory accounts: what the system is, who must trust whom, what it knows, and what happens when access is lost.</p>
|
|
</section>
|
|
<section class="shell guide-list">
|
|
{entries.length > 0 ? entries.map((entry, index) => (
|
|
<article>
|
|
<span>0{index + 1}</span>
|
|
<div>
|
|
<h2><a href={`/guides/${entry.id}`}>{entry.data.title}</a></h2>
|
|
<p>{entry.data.description}</p>
|
|
</div>
|
|
<small>Last reviewed<br />{formatDate(entry.data.reviewed)}</small>
|
|
</article>
|
|
)) : <p class="empty-state">The first guides are in editorial review. Staleness will be visible once they publish.</p>}
|
|
</section>
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
.archive-head { padding: clamp(4rem, 9vw, 8rem) 0; }
|
|
.archive-head > p:last-child { max-width: 62ch; color: var(--muted); }
|
|
.guide-list article { display: grid; grid-template-columns: 5rem 1fr 10rem; gap: 2rem; padding: 2rem 0; border-top: 1px solid var(--rule); }
|
|
.guide-list > article > span { color: var(--amend); font-family: 'IBM Plex Mono', monospace; font-size: .72rem; }
|
|
h2 { margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; }
|
|
h2 a { text-decoration: none; }
|
|
p, small { color: var(--muted); }
|
|
small { font-family: 'IBM Plex Mono', monospace; font-size: .66rem; text-transform: uppercase; }
|
|
@media (max-width: 650px) { .guide-list article { grid-template-columns: 2rem 1fr; } small { grid-column: 2; } }
|
|
</style>
|