summaryrefslogtreecommitdiff
path: root/website/src/components/MicrologFeed.astro
blob: b4941b106eb7fecb6c876eb2525a9ad93b82ba8b (plain)
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
---
import type { CollectionEntry } from 'astro:content';
import { getCollection } from 'astro:content';
import FormattedDate from './FormattedDate.astro';
import { renderGemtextToHtml } from '../renderGemtextToHtml';

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('microlog');

const posts = maxEntries === undefined
	? allPosts
	: allPosts.sort(sortByIdDescending).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<'microlog'>) => pubDate(post).getFullYear() === year;
}

function sortByIdDescending(post1: CollectionEntry<'microlog'>, post2: CollectionEntry<'microlog'>) {
	return post2.id.localeCompare(post1.id);
}

function pubDate(post: CollectionEntry<'microlog'>): Date {
  console.warn(post.id);
  const date = new Date(post.id.replace(/\.[0-9]+$/g, ''));
  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 canonicalMicrologUrl = new URL('microlog', Astro.site)
---

<section class="h-feed">
	<HeadingElem>
		My microlog
	</HeadingElem>

	<aside>
		<AuthorElem>
			This microlog is written by <a class="p-author h-card" href="/">Joe Carstairs</a>
		</AuthorElem>

		<p hidden>
			<a class="u-url" href={canonicalMicrologUrl}>Permalink</a>
		</p>
	</aside>

	<slot />

	{ hideSubheadings
	  ? <ul>
			{ posts.sort(sortByIdDescending).map(post => (
				<li class="h-entry">
  				<SubSubHeadingElem>
    				<a class="u-url p-name" href={`/microlog/${post.id}`}>{post.id}</a>
  				</SubSubHeadingElem>
					<section class="e-content" set:html={post.body} />
					<FormattedDate hidden={true} className="dt-published" date={pubDate(post)} />
				</li>
			)) }
			</ul>
	  : distinctYears.map(year => (
		<SubHeadingElem>{year}</SubHeadingElem>
		<ul>
			{ posts.filter(matchesYear(year)).sort(sortByIdDescending).map(post => (
				<li class="h-entry">
  				<SubSubHeadingElem>
    				<a class="u-url p-name" href={`/microlog/${post.id}`}>{post.id}</a>
  				</SubSubHeadingElem>
					<section class="e-content" set:html={renderGemtextToHtml(post.body ?? '')} />
					<FormattedDate hidden={true} className="dt-published" date={pubDate(post)} />
				</li>
			)) }
		</ul>
	)) }

	{ (maxEntries !== undefined && maxEntries < allPosts.length)
		? <p class="full-feed-link"><a href="/microlog">All microlog posts</a></p>
		: <></>
	}
</section>