77 lines
2.5 KiB
Plaintext
77 lines
2.5 KiB
Plaintext
---
|
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
|
import ArticleCard from '../../components/article/ArticleCard.astro';
|
|
import SectionHead from '../../components/ui/SectionHead.astro';
|
|
import { getArticles, getPopular } from '../../lib/payload';
|
|
|
|
const page = Number(Astro.url.searchParams.get('page') || 1);
|
|
const [{ docs, hasPrevPage, hasNextPage }, popular] = await Promise.all([
|
|
getArticles({ limit: 12, page }),
|
|
getPopular(3),
|
|
]);
|
|
---
|
|
|
|
<BaseLayout
|
|
seo={{ title: 'Articles', description: 'All articles published on SoftVowels.' }}
|
|
current="articles"
|
|
>
|
|
<div
|
|
class="mx-auto grid max-w-[1440px] grid-cols-1 gap-12 px-4 pb-24 pt-12 md:px-10 lg:grid-cols-12"
|
|
>
|
|
<div class="lg:col-span-8">
|
|
<SectionHead eyebrow="All articles" level={2} />
|
|
<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
|
|
{docs.map((a) => <ArticleCard article={a} />)}
|
|
</div>
|
|
<nav class="mt-12 flex items-center justify-between" aria-label="Pagination">
|
|
{
|
|
hasPrevPage ? (
|
|
<a
|
|
href={`/articles?page=${page - 1}`}
|
|
class="border-border-subtle text-label-md hover:border-primary inline-flex h-10 items-center rounded-md border px-5 transition-colors"
|
|
>
|
|
← Newer
|
|
</a>
|
|
) : (
|
|
<span />
|
|
)
|
|
}
|
|
{
|
|
hasNextPage ? (
|
|
<a
|
|
href={`/articles?page=${page + 1}`}
|
|
class="border-border-subtle text-label-md hover:border-primary inline-flex h-10 items-center rounded-md border px-5 transition-colors"
|
|
>
|
|
Older →
|
|
</a>
|
|
) : (
|
|
<span />
|
|
)
|
|
}
|
|
</nav>
|
|
</div>
|
|
<aside class="space-y-8 lg:col-span-4">
|
|
<h3 class="font-label-md text-label-md text-text-tertiary m-0 uppercase tracking-widest">
|
|
Popular this week
|
|
</h3>
|
|
<div class="space-y-4">
|
|
{
|
|
popular.map((a, i) => (
|
|
<a
|
|
href={`/articles/${a.slug}`}
|
|
class="bg-surface-raised border-border-subtle hover:border-primary group block rounded-lg border p-5 transition-colors"
|
|
>
|
|
<span class="text-primary mb-2 block font-mono text-[10px]">
|
|
{String(i + 1).padStart(2, '0')}
|
|
</span>
|
|
<h4 class="font-display group-hover:text-primary m-0 text-balance text-[18px] leading-snug transition-colors">
|
|
{a.title}
|
|
</h4>
|
|
</a>
|
|
))
|
|
}
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</BaseLayout>
|