Compleet
120 lines
3.1 KiB
Plaintext
120 lines
3.1 KiB
Plaintext
---
|
|
import { getCollection } from 'astro:content';
|
|
import FrontCard from '../components/FrontCard.astro';
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
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 = (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: `/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;
|
|
---
|
|
|
|
<BaseLayout>
|
|
<section class="front-grid shell" aria-labelledby="front-page-title">
|
|
<h1 class="visually-hidden" id="front-page-title">{site.title}</h1>
|
|
{frontPageItems.map((item, index) => (
|
|
<FrontCard
|
|
kind={item.kind}
|
|
title={item.title}
|
|
description={item.description}
|
|
href={item.href}
|
|
date={item.date}
|
|
meta={item.meta}
|
|
image={item.image}
|
|
imageAlt={item.imageAlt}
|
|
tone={item.tone}
|
|
size={index === 0 ? 'lead' : index === 1 ? 'side' : sizeCycle[(index - 2) % sizeCycle.length]}
|
|
/>
|
|
))}
|
|
</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>
|
|
.front-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
gap: 1px;
|
|
margin-top: clamp(1rem, 2.4vw, 2rem);
|
|
border: 1px solid var(--rule);
|
|
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);
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.front-grid {
|
|
margin-top: 0.85rem;
|
|
}
|
|
}
|
|
</style>
|