blob: d135beff06fbc7c9f3ed6951e6e6240d7786d9be (
plain) (
blame)
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
---
import MainHead from '../components/MainHead.astro';
import Nav from '../components/Nav.astro';
import PostPreview from '../components/PostPreview.astro';
import Pagination from '../components/Pagination.astro';
// page
let title = 'Don’s Blog';
let description = 'An example blog on Astro';
let canonicalURL = Astro.request.canonicalURL;
// collection
import authorData from '../data/authors.json';
export function createCollection() {
return {
route: `/posts/:page?`,
paginate: true,
async props({ paginate }) {
/** filter posts by author, sort by date */
const allPosts = Astro.fetchContent('./post/*.md');
const sortedPosts = allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
return {
posts: paginate(sortedPosts, {pageSize: 2}),
}
},
};
}
const { posts } = Astro.props;
---
<html lang="en">
<head>
<title>{title}</title>
<MainHead
title={title}
description={description}
image={posts.data[0].image}
canonicalURL={canonicalURL}
prev={posts.url.prev}
next={posts.url.next}
/>
<style lang="scss">
.title {
font-size: 3em;
letter-spacing: -0.04em;
margin-top: 2rem;
margin-bottom: 0;
text-align: center;
}
.count {
font-size: 1em;
display: block;
text-align: center;
}
</style>
</head>
<body>
<Nav title={title} />
<main class="wrapper">
<h2 class="title">All Posts</h2>
<small class="count">{posts.start + 1}–{posts.end + 1} of {posts.total}</small>
{posts.data.map((post) => <PostPreview post={post} author={authorData[post.author]} />)}
</main>
<footer>
<Pagination prevUrl={posts.url.prev} nextUrl={posts.url.next} />
</footer>
</body>
</html>
|
