diff --git a/src/components/FrontCard.astro b/src/components/FrontCard.astro new file mode 100644 index 0000000..3655307 --- /dev/null +++ b/src/components/FrontCard.astro @@ -0,0 +1,279 @@ +--- +interface Props { + kind: string; + title: string; + description: string; + href: string; + date?: Date; + meta?: string; + image?: string; + imageAlt?: string; + size?: 'lead' | 'side' | 'wide' | 'standard' | 'compact'; + tone?: 'paper' | 'blue' | 'ink' | 'soft' | 'amend'; +} + +const { + kind, + title, + description, + href, + date, + meta, + image, + imageAlt = '', + size = 'standard', + tone = 'paper', +} = Astro.props; + +const formattedDate = date + ? new Intl.DateTimeFormat('en-GB', { + day: 'numeric', + month: 'short', + year: 'numeric', + }).format(date) + : ''; +--- + +
+ + {image && ( +
+ {imageAlt} +
+ )} +
+
+ {kind} + {date && } +
+
+

{title}

+

{description}

+
+ {meta && } +
+ +
+ + diff --git a/src/components/Header.astro b/src/components/Header.astro index 485fb4f..a624cd0 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,19 +1,33 @@ --- +import { getCollection } from 'astro:content'; import { navigation, site } from '../site.config'; + +const [stories, briefings, episodes, guides] = await Promise.all([ + getCollection('stories', ({ data }) => !data.draft), + getCollection('briefings', ({ data }) => !data.draft), + getCollection('episodes', ({ data }) => !data.draft), + getCollection('guides', ({ data }) => !data.draft), +]); + +const visibleNavigation = navigation.filter((item) => { + if (item.href === '/stories') return stories.length > 0; + if (item.href === '/briefing') return briefings.length > 0; + if (item.href === '/podcast') return episodes.length > 0; + if (item.href === '/guides') return guides.length > 0; + if (item.href === '/book') return site.book.enabled; + return true; +}); ---
- - {site.title} - {site.qualifier} - + {site.title}
@@ -79,26 +93,12 @@ import { navigation, site } from '../site.config'; bottom: -4px; } - .masthead-text { - display: flex; - align-items: baseline; - gap: 0.45rem; - } - .masthead strong { font-family: 'Newsreader Variable', Georgia, serif; - font-size: 1.55rem; + font-size: 1.7rem; letter-spacing: -0.03em; } - .masthead small { - color: var(--muted); - font-size: 0.68rem; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - } - nav { display: flex; align-items: center; @@ -149,8 +149,5 @@ import { navigation, site } from '../site.config'; font-size: 0.7rem; } - nav .rss { - display: none; - } } diff --git a/src/pages/index.astro b/src/pages/index.astro index 11eb38e..3854c96 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,11 +1,22 @@ --- import { getCollection } from 'astro:content'; -import RecentMaintenance from '../components/RecentMaintenance.astro'; -import StoryCard from '../components/StoryCard.astro'; +import FrontCard from '../components/FrontCard.astro'; import BaseLayout from '../layouts/BaseLayout.astro'; -import { formatDate, guidesByReview, newestFirst } from '../lib/content'; +import { guidesByReview, newestFirst } from '../lib/content'; import { site } from '../site.config'; +interface FrontPageItem { + kind: string; + title: string; + description: string; + href: string; + date?: Date; + meta?: string; + image?: string; + imageAlt?: string; + 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)); @@ -13,385 +24,133 @@ const episodes = newestFirst(await getCollection('episodes', ({ data }) => !data const featured = stories.find(({ data }) => data.featured) ?? stories[0]; const latestBriefing = briefings[0]; -const latestEpisode = episodes[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')}`, + 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); + +const sizeCycle = ['wide', 'standard', 'compact', 'compact', 'compact'] as const; --- -
-

{site.author.note}

-
-

{site.proposition}

-
-

{site.description}

-

- We follow claims of verification, safety, privacy, and autonomy to the - people who hold the keys—and to the people who live with the consequences. -

-
- {featured && Read the current story} - {latestEpisode ? ( - Listen to the podcast - ) : ( - How this publication works - )} -
-
-
+
+

{site.title}

+ {frontPageItems.slice(0, 12).map((item, index) => ( + + ))}
- -
-
-

Current issue

- All stories → -
-
-
- {featured ? :

The first story is being prepared.

} -
- -
-
- - {latestEpisode && ( -
-
-

Listen

- Podcast archive → -
-
- -
-

Episode {latestEpisode.data.episode}

-

{latestEpisode.data.title}

-

{latestEpisode.data.description}

-
-
-
- )} - - {guides.length > 0 && ( -
-
-

Field guides

- All guides → -
-
- {guides.slice(0, 3).map((guide) => ( -
- Reviewed {formatDate(guide.data.reviewed)} -

{guide.data.title}

-

{guide.data.description}

-
- ))} -
-
- )} - - {site.book.enabled && ( -
- -
-

The book

-

{site.book.title}

-

{site.book.description}

- Visit the book page -
-
- )} - -
- -

- Planned but not yet real: the podcast{site.book.enabled ? '' : ', the book'}, and more guides. - Nothing ships here before it exists — see the roadmap ↗ -

-