-
Notifications
You must be signed in to change notification settings - Fork 0
/
santm.astro
45 lines (44 loc) · 1.98 KB
/
santm.astro
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
---
import Container from "../../../components/Container.astro";
import BaseLayout from '../../../layouts/BaseLayout.astro';
//const pageTitle = 'Posts of' {yearName};
import { getCollection } from "astro:content";
import PostPreviewList from '../../../components/BlogListing.astro';
import Paginator from "../../../components/Paginator.astro";
export async function getStaticPaths({ paginate }: any) {
const allPosts = await getCollection('blog');
const sortedPosts = allPosts.sort((a, b) => new Date(b.data.pubDate) - new Date(a.data.pubDate));
const allYears = [...new Set(allPosts.flatMap((post) => post.data.pubDate.getFullYear()).flat())];
return allYears.flatMap((year) => {
const yearPosts = sortedPosts.filter((post) => post.data.pubDate.getFullYear() === year);
return paginate(yearPosts, {
params: { year },
props: {
yearName: year,
posts: yearPosts,
},
pageSize: 10,
});
});
}
//const pageTitle = `Posts of ${yearName}`;
const { page } = Astro.props;
const { posts, yearName } = Astro.props;
---
<BaseLayout pageTitle={pageTitle}>
<main class="space-y-40 mb-40" data-pagefind-ignore>
<div class="relative" id="years">
<div aria-hidden="true" class="absolute inset-0 grid grid-cols-2 -space-x-52 opacity-40 dark:opacity-20">
<div class="blur-[106px] h-56 bg-gradient-to-br from-primary to-purple-400 dark:from-blue-700"></div>
<div class="blur-[106px] h-32 bg-gradient-to-r from-cyan-400 to-sky-300 dark:to-indigo-600"></div>
</div>
<Container>
<div class="relative pt-36 ml-auto">
<h1 class="pb-4 text-4xl md:text-6xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">{pageTitle}</h1>
<PostPreviewList posts={page.data} />
<Paginator page={page} />
</div>
</Container>
</div>
</main>
</BaseLayout>