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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
---
import type { CollectionEntry } from 'astro:content';
import { getCollection } from 'astro:content';
import FormattedDate from './FormattedDate.astro';
export interface Props {
headingLevel?: 1 | 2 | 3 | 4 | 5 | 6,
hideAuthor?: boolean,
hideSubheadings?: boolean,
maxEntries?: number,
};
const { headingLevel = 2, hideSubheadings = false, hideAuthor = false, maxEntries } = Astro.props;
const allPosts = (await getCollection('blog')).filter((post) => !post.data.hidden);
const posts = maxEntries === undefined
? allPosts
: allPosts.sort(sortByPubDateDescending).slice(0, maxEntries);
const distinctYears: number[] = posts
.map(post => pubDate(post).getFullYear())
.reduce<number[]>((acc, curr) => acc.includes(curr) ? acc : [...acc, curr], [])
.sort((a, b) => b - a);
function matchesYear(year: number) {
return (post: CollectionEntry<'blog'>) => pubDate(post).getFullYear() === year;
}
function sortByPubDateDescending(post1: CollectionEntry<'blog'>, post2: CollectionEntry<'blog'>) {
const date1 = pubDate(post1).getTime();
const date2 = pubDate(post2).getTime();
return date2 - date1;
}
function pubDate(post: CollectionEntry<'blog'>): Date {
if (post.data.pubDate) {
return post.data.pubDate;
}
const date = new Date(post.id);
if (isNaN(date.valueOf())) {
throw new Error(`Post ${post.id} does not have a valid publication date.`);
}
return date;
}
const HeadingElem = `h${headingLevel} class="p-name"`;
const SubHeadingElem = `h${headingLevel + 1}`;
const SubSubHeadingElem = `h${headingLevel + 2}`;
const AuthorElem = `p${hideAuthor ? " hidden" : ""}`;
const canonicalBlogUrl = new URL('blog', Astro.site)
---
<section class="h-feed">
<HeadingElem>
My blog
</HeadingElem>
<aside>
<AuthorElem>
This blog is written by <a class="p-author h-card" href="/">Joe Carstairs</a>
</AuthorElem>
<p hidden>
<a class="u-url" href={canonicalBlogUrl}>Permalink</a>
</p>
</aside>
<slot />
{ hideSubheadings
? <ul>
{ posts.sort(sortByPubDateDescending).map(post => (
<li class="h-entry">
<SubSubHeadingElem>
<a class="u-url p-name" href={`/blog/${post.id}`}>{post.data.title}</a>
</SubSubHeadingElem>
<p class="p-summary" set:html={post.data.description} />
<FormattedDate className="dt-published" date={pubDate(post)} />
</li>
)) }
</ul>
: distinctYears.map(year => (
<SubHeadingElem>{year}</SubHeadingElem>
<ul>
{ posts.filter(matchesYear(year)).sort(sortByPubDateDescending).map(post => (
<li class="h-entry">
<SubSubHeadingElem>
<a class="u-url p-name" href={`/blog/${post.id}`}>{post.data.title}</a>
</SubSubHeadingElem>
<p class="p-summary" set:html={post.data.description} />
<FormattedDate className="dt-published" date={pubDate(post)} />
</li>
)) }
</ul>
)) }
{ (maxEntries !== undefined && maxEntries < allPosts.length)
? <p class="full-feed-link"><a href="/blog">All blog posts</a></p>
: <></>
}
</section>
|
