Establish the publication foundation

2026-07-14 11:54:31 +01:00
commit 006955bfc8
46 changed files with 7704 additions and 0 deletions
@@ -0,0 +1,39 @@
+---
+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>