Publish the first trust story collection

src/pages/index.astro

@@ -2,7 +2,6 @@
 import { getCollection } from 'astro:content';
 import FrontCard from '../components/FrontCard.astro';
 import BaseLayout from '../layouts/BaseLayout.astro';
-import { guidesByReview, newestFirst } from '../lib/content';
 import { site } from '../site.config';
 
 interface FrontPageItem {
@@ -17,99 +16,23 @@ interface FrontPageItem {
   tone: 'paper' | 'blue' | 'ink' | 'soft' | 'amend';
 }
 
-const stories = newestFirst(await getCollection('stories', ({ data }) => !data.draft));
-const briefings = newestFirst(await getCollection('briefings', ({ data }) => !data.draft));
-const guides = guidesByReview(await getCollection('guides', ({ data }) => !data.draft));
-const episodes = newestFirst(await getCollection('episodes', ({ data }) => !data.draft));
-
-const featured = stories.find(({ data }) => data.featured) ?? stories[0];
-const latestBriefing = briefings[0];
-
-const frontPageItems: FrontPageItem[] = [];
-
-if (featured) {
-  frontPageItems.push({
-    kind: 'Story',
-    title: featured.data.title,
-    description: featured.data.description,
-    href: `/stories/${featured.id}`,
-    date: featured.data.published,
-    meta: `By ${featured.data.author} · ${featured.data.status}`,
-    image: featured.data.image,
-    imageAlt: featured.data.imageAlt,
-    tone: featured.data.image ? 'paper' : 'blue',
-  });
-}
-
-if (latestBriefing) {
-  frontPageItems.push({
-    kind: `Briefing ${String(latestBriefing.data.issue).padStart(3, '0')}`,
-    title: latestBriefing.data.title,
-    description: latestBriefing.data.description,
-    href: `/briefing/${latestBriefing.id}`,
-    date: latestBriefing.data.published,
-    meta: 'This Week in Trust',
-    tone: 'paper',
-  });
-}
-
-const remainingItems: FrontPageItem[] = [
-  ...stories
-    .filter((entry) => entry.id !== featured?.id)
-    .map((entry, index): FrontPageItem => ({
-      kind: 'Story',
-      title: entry.data.title,
-      description: entry.data.description,
-      href: `/stories/${entry.id}`,
-      date: entry.data.published,
-      meta: `By ${entry.data.author} · ${entry.data.status}`,
-      image: entry.data.image,
-      imageAlt: entry.data.imageAlt,
-      tone: entry.data.image ? 'paper' : index % 2 === 0 ? 'soft' : 'paper',
-    })),
-  ...briefings.slice(1).map((entry): FrontPageItem => ({
-    kind: `Briefing ${String(entry.data.issue).padStart(3, '0')}`,
+const stories = (await getCollection('stories', ({ data }) => !data.draft))
+  .sort((a, b) => a.data.editorialOrder - b.data.editorialOrder);
+const toneCycle = ['blue', 'paper', 'ink', 'soft', 'amend', 'paper'] as const;
+const frontPageItems: FrontPageItem[] = stories
+  .filter(({ data }) => data.homepage)
+  .slice(0, 9)
+  .map((entry, index) => ({
+    kind: entry.data.section,
     title: entry.data.title,
     description: entry.data.description,
-    href: `/briefing/${entry.id}`,
-    date: entry.data.published,
-    meta: 'This Week in Trust',
-    tone: 'paper',
-  })),
-  ...episodes.map((entry): FrontPageItem => ({
-    kind: `Podcast ${String(entry.data.episode).padStart(2, '0')}`,
-    title: entry.data.title,
-    description: entry.data.description,
-    href: `/podcast/${entry.id}`,
-    date: entry.data.published,
-    meta: [entry.data.duration, ...entry.data.guests].filter(Boolean).join(' · '),
-    tone: 'ink',
-  })),
-  ...guides.map((entry): FrontPageItem => ({
-    kind: 'Field guide',
-    title: entry.data.title,
-    description: entry.data.description,
-    href: `/guides/${entry.id}`,
-    date: entry.data.reviewed,
-    meta: `Reviewed · ${entry.data.status}`,
-    tone: 'soft',
-  })),
-].sort((a, b) => (b.date?.valueOf() ?? 0) - (a.date?.valueOf() ?? 0));
-
-if (site.book.enabled) {
-  remainingItems.unshift({
-    kind: 'Book',
-    title: site.book.title,
-    description: site.book.description,
-    href: '/book',
-    meta: site.book.sampleUrl ? 'Sample available' : undefined,
-    image: site.book.cover || undefined,
-    imageAlt: site.book.cover ? `${site.book.title} cover` : undefined,
-    tone: site.book.cover ? 'paper' : 'amend',
-  });
-}
-
-frontPageItems.push(...remainingItems);
+    href: `/stories/${entry.id}`,
+    date: index === 0 ? entry.data.published : undefined,
+    meta: entry.data.tags.slice(0, 2).join(' · '),
+    image: entry.data.image,
+    imageAlt: entry.data.imageAlt,
+    tone: entry.data.frontTone ?? (entry.data.image ? 'paper' : toneCycle[index % toneCycle.length]),
+  }));
 
 const sizeCycle = ['wide', 'standard', 'compact', 'compact', 'compact'] as const;
 ---
@@ -117,7 +40,7 @@ const sizeCycle = ['wide', 'standard', 'compact', 'compact', 'compact'] as const
 <BaseLayout>
   <section class="front-grid shell" aria-labelledby="front-page-title">
     <h1 class="visually-hidden" id="front-page-title">{site.title}</h1>
-    {frontPageItems.slice(0, 12).map((item, index) => (
+    {frontPageItems.map((item, index) => (
       <FrontCard
         kind={item.kind}
         title={item.title}
@@ -132,6 +55,9 @@ const sizeCycle = ['wide', 'standard', 'compact', 'compact', 'compact'] as const
       />
     ))}
   </section>
+  <div class="more-stories shell">
+    <a href="/stories">Read more <span>{Math.max(0, stories.length - frontPageItems.length)} more stories</span></a>
+  </div>
 </BaseLayout>
 
 <style>
@@ -144,6 +70,43 @@ const sizeCycle = ['wide', 'standard', 'compact', 'compact', 'compact'] as const
     background: var(--rule);
   }
 
+  .more-stories {
+    display: flex;
+    justify-content: center;
+    padding: clamp(1.5rem, 4vw, 3rem) 0 0;
+  }
+
+  .more-stories a {
+    display: inline-flex;
+    min-width: min(100%, 320px);
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+    padding: 0.9rem 1rem;
+    border: 1px solid var(--ink);
+    font-size: 0.84rem;
+    font-weight: 650;
+    text-decoration: none;
+  }
+
+  .more-stories a:hover {
+    background: var(--ink);
+    color: var(--paper);
+  }
+
+  .more-stories span {
+    color: var(--muted);
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.62rem;
+    font-weight: 400;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .more-stories a:hover span {
+    color: inherit;
+  }
+
   :global(#main + footer) {
     margin-top: clamp(2.5rem, 6vw, 5rem);
   }

src/pages/rss.xml.ts

@@ -15,20 +15,25 @@ export async function GET(context: { site?: URL }) {
       description: entry.data.description,
       pubDate: entry.data.published,
       link: `/stories/${entry.id}`,
+      editorialOrder: entry.data.editorialOrder,
     })),
     ...briefings.map((entry) => ({
       title: entry.data.title,
       description: entry.data.description,
       pubDate: entry.data.published,
       link: `/briefing/${entry.id}`,
+      editorialOrder: 1_000,
     })),
     ...episodes.map((entry) => ({
       title: entry.data.title,
       description: entry.data.description,
       pubDate: entry.data.published,
       link: `/podcast/${entry.id}`,
+      editorialOrder: 1_000,
     })),
-  ].sort((a, b) => b.pubDate.valueOf() - a.pubDate.valueOf());
+  ]
+    .sort((a, b) => b.pubDate.valueOf() - a.pubDate.valueOf() || a.editorialOrder - b.editorialOrder)
+    .map(({ editorialOrder: _editorialOrder, ...item }) => item);
 
   return rss({
     title: `${site.title} ${site.qualifier}`,

src/pages/stories/[id].astro

@@ -15,7 +15,7 @@ const { Content } = await render(entry);
 <ArticleLayout
   title={entry.data.title}
   description={entry.data.description}
-  kind="Story"
+  kind={entry.data.section}
   author={entry.data.author}
   maintainers={entry.data.maintainers}
   published={entry.data.published}
@@ -23,6 +23,10 @@ const { Content } = await render(entry);
   status={entry.data.status}
   sourcePath={`src/content/stories/${entry.id}.md`}
   trustPattern={entry.data.trustPattern}
+  image={entry.data.image}
+  imageAlt={entry.data.imageAlt}
+  imageCredit={entry.data.imageCredit}
+  imageCreditUrl={entry.data.imageCreditUrl}
 >
   <Content />
 </ArticleLayout>

src/pages/stories/index.astro

@@ -2,24 +2,66 @@
 import { getCollection } from 'astro:content';
 import StoryCard from '../../components/StoryCard.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { newestFirst } from '../../lib/content';
 
-const stories = newestFirst(await getCollection('stories', ({ data }) => !data.draft));
+const stories = (await getCollection('stories', ({ data }) => !data.draft))
+  .sort((a, b) => a.data.editorialOrder - b.data.editorialOrder);
 ---
 
 <BaseLayout title="Stories" description="Reported and argued stories about trust, identity, and authority.">
   <section class="shell archive-head">
-    <p class="eyebrow">Original reporting and essays</p>
-    <h1 class="display">Stories</h1>
-    <p>People first. Machinery explained. Claims followed to the point where somebody must decide, recover, consent, or bear the loss.</p>
+    <h1>Stories</h1>
+    <p>{stories.length} reports, histories and essays <span>First collection</span></p>
   </section>
   <section class="shell archive-list">
-    {stories.length > 0 ? stories.map((entry) => <StoryCard entry={entry} />) : <p class="empty-state">The first story is being prepared.</p>}
+    {stories.length > 0 ? stories.map((entry, index) => <StoryCard entry={entry} index={index} />) : <p class="empty-state">The first story is being prepared.</p>}
   </section>
 </BaseLayout>
 
 <style>
-  .archive-head { padding: clamp(4rem, 9vw, 8rem) 0; }
-  .archive-head > p:last-child { max-width: 58ch; color: var(--muted); font-size: 1.05rem; }
-  .archive-list { display: grid; gap: 2rem; }
+  .archive-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 1.5rem;
+    padding: clamp(1.6rem, 4vw, 3.25rem) 0 1rem;
+    border-bottom: 1px solid var(--ink);
+  }
+
+  .archive-head h1 {
+    margin: 0;
+    font-family: 'Newsreader Variable', Georgia, serif;
+    font-size: clamp(2.4rem, 5vw, 4.5rem);
+    font-weight: 560;
+    letter-spacing: -0.045em;
+    line-height: 0.9;
+  }
+
+  .archive-head p {
+    margin: 0;
+    color: var(--muted);
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.65rem;
+    text-transform: uppercase;
+  }
+
+  .archive-head span { margin-left: 1rem; }
+
+  .archive-list {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1px;
+    margin-top: 1px;
+    border: 1px solid var(--rule);
+    background: var(--rule);
+  }
+
+  @media (max-width: 900px) {
+    .archive-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  }
+
+  @media (max-width: 620px) {
+    .archive-head { align-items: flex-start; flex-direction: column; gap: 0.65rem; }
+    .archive-head span { display: none; }
+    .archive-list { grid-template-columns: 1fr; }
+  }
 </style>