Archived
121 lines
4.4 KiB
TypeScript
121 lines
4.4 KiB
TypeScript
import { getPublishedArticles, getTagList } from '@/lib/queries';
|
|
import ArticleCard from '@/components/ArticleCard';
|
|
import { resolveCoverImage } from '@/lib/cover';
|
|
import { InFeedAd, SidebarAd } from '@/components/ads/placements';
|
|
import Link from 'next/link';
|
|
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
export default async function HomePage({
|
|
searchParams,
|
|
}: {
|
|
searchParams: { page?: string };
|
|
}) {
|
|
const page = Math.max(1, parseInt(searchParams.page ?? '1', 10) || 1);
|
|
const PER = 21;
|
|
const [articles, tags] = await Promise.all([
|
|
getPublishedArticles('top-stories', PER, (page - 1) * PER),
|
|
getTagList(12),
|
|
]);
|
|
|
|
const hero = articles[0];
|
|
const rest = articles.slice(1);
|
|
|
|
return (
|
|
<>
|
|
<div className="mx-auto max-w-6xl px-4 py-6 sm:px-6">
|
|
<div className="grid gap-8 lg:grid-cols-3">
|
|
{/* Main column */}
|
|
<div className="lg:col-span-2">
|
|
{hero ? (
|
|
<Link
|
|
href={`/article/${hero.slug}`}
|
|
className="group mb-8 block overflow-hidden rounded-2xl border border-ink-200 bg-white shadow-sm"
|
|
>
|
|
<div className="relative aspect-[16/8] overflow-hidden bg-ink-100">
|
|
{/* cover.ts falls back to a per-category brand cover when no photo was captured */}
|
|
<img
|
|
src={resolveCoverImage(hero.image, hero.category)}
|
|
alt=""
|
|
className="h-full w-full object-cover transition duration-500 group-hover:scale-[1.02]"
|
|
/>
|
|
<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-ink-950/95 via-ink-950/70 to-transparent px-4 pb-4 pt-10 sm:px-5 sm:pb-5 sm:pt-16">
|
|
<span className="mb-2 inline-block rounded bg-maple-600 px-2 py-0.5 text-[11px] font-bold uppercase tracking-wider text-white">
|
|
Lead briefing
|
|
</span>
|
|
<h1 className="line-clamp-2 font-display text-lg font-bold leading-tight text-white sm:line-clamp-3 sm:text-3xl">
|
|
{hero.headline ?? hero.title}
|
|
</h1>
|
|
<p className="mt-2 line-clamp-1 text-sm text-ink-200 sm:line-clamp-2">{hero.excerpt}</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
) : (
|
|
<EmptyState />
|
|
)}
|
|
|
|
{rest.length > 0 && (
|
|
<div className="grid gap-5 sm:grid-cols-2">
|
|
{interleaveInFeedAds(rest, 3).map((node) => node)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<aside className="space-y-8" aria-label="Sidebar">
|
|
<SidebarAd tall />
|
|
{tags.length > 0 && (
|
|
<section className="rounded-xl border border-ink-200 bg-white p-5">
|
|
<h2 className="text-xs font-semibold uppercase tracking-wider text-ink-500">
|
|
Trending topics
|
|
</h2>
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
{tags.map((t) => (
|
|
<Link
|
|
key={t}
|
|
href={`/tag/${t}`}
|
|
className="rounded-full bg-ink-100 px-3 py-1 text-sm text-ink-700 hover:bg-maple-100 hover:text-maple-800"
|
|
>
|
|
#{t}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
import type { ReactNode } from 'react';
|
|
|
|
/** Interleave an InFeedAd after every `every`th card. */
|
|
function interleaveInFeedAds(
|
|
cards: Awaited<ReturnType<typeof getPublishedArticles>>,
|
|
every: number,
|
|
): ReactNode[] {
|
|
const out: ReactNode[] = [];
|
|
cards.forEach((card, i) => {
|
|
out.push(<ArticleCard key={card.id} card={card} />);
|
|
if ((i + 1) % every === 0) out.push(<InFeedAd key={`ad-${i + 1}`} index={i + 1} />);
|
|
});
|
|
return out;
|
|
}
|
|
|
|
function EmptyState() {
|
|
return (
|
|
<div className="rounded-2xl border border-dashed border-ink-300 bg-white p-12 text-center">
|
|
<p className="font-display text-xl font-bold text-ink-800">
|
|
No briefings yet
|
|
</p>
|
|
<p className="mx-auto mt-2 max-w-md text-sm text-ink-500">
|
|
The ingestion worker has not published anything yet. Trigger your first
|
|
run (see the README “First run” section) and this page will fill with
|
|
fresh briefings.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|