Feeds use max entries, and blog feed uses descriptions

website/public/css/feed.css

@@ -6,3 +6,11 @@
 .h-feed .h-entry {
 	margin-block-start: var(--spacing-block-xs);
 }
+
+.h-feed .full-feed-link {
+	text-align: end;
+}
+
+.h-feed :is(a.full-feed-link, .full-feed-link a)::after {
+	content: ' >'
+}

website/src/components/BlogFeed.astro

@@ -1,15 +1,21 @@
 ---
 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,
+	maxEntries?: number,
 };
 
-const { headingLevel = 2, hideAuthor = false } = Astro.props;
+const { headingLevel = 2, hideAuthor = false, maxEntries } = Astro.props;
 
-const posts = (await getCollection('blog')).filter((post) => !post.data.hidden);
+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 => post.data.pubDate.getFullYear())
@@ -58,9 +64,16 @@ const canonicalBlogUrl = new URL('blog', Astro.site)
 		<ul>
 			{ posts.filter(matchesYear(year)).sort(sortByPubDateDescending).map(post => (
 				<li class="h-entry">
-					<a class="u-url p-name" href={`/blog/${post.slug}`}>{post.data.title}</a>
+					<a class="u-url p-name" href={`/blog/${post.slug}`}>{post.data.title}</a>.
+					<Fragment set:html={post.data.description} />
+					Added: <FormattedDate date={post.data.pubDate} />
 				</li>
 			)) }
 		</ul>
 	)) }
+
+	{ (maxEntries !== undefined && maxEntries < allPosts.length)
+		? <p class="full-feed-link"><a href="/blog">All blog posts</a></p>
+		: <></>
+	}
 </section>

website/src/components/LinksFeed.astro

@@ -1,27 +1,34 @@
 ---
 import FormattedDate from '../components/FormattedDate.astro';
-import LINKS from '../data/links.ts';
+import allLinks from '../data/links.ts';
+
+type Link = (typeof allLinks)[number];
 
 export interface Props {
 	headingLevel?: 1 | 2 | 3 | 4 | 5 | 6,
 	hideAuthor?: boolean,
+	maxEntries?: number,
 };
 
-const { headingLevel = 2, hideAuthor = false } = Astro.props;
+const { headingLevel = 2, hideAuthor = false, maxEntries } = Astro.props;
 
 const headingElem = `h${headingLevel}`;
 const subHeadingElem = `h${headingLevel + 1}`
 
-const distinctYears: string[] = LINKS
+const links: Link[] = maxEntries === undefined
+	? allLinks
+	: allLinks.sort(sortByDateAddedDescending).slice(0, maxEntries);
+
+const distinctYears: string[] = links
 	.map(link => link.isoDateAdded.slice(0,4))
 	.reduce<string[]>((acc, curr) => acc.includes(curr) ? acc : [...acc, curr], [])
 	.sort((a, b) => Number.parseInt(b) - Number.parseInt(a));
 
 function matchesYear(year: string) {
-	return (link: (typeof LINKS)[number]) => link.isoDateAdded.slice(0,4) === year;
+	return (link: (typeof links)[number]) => link.isoDateAdded.slice(0,4) === year;
 }
 
-function sortByDateAddedDescending(link1: (typeof LINKS)[number], link2: (typeof LINKS)[number]) {
+function sortByDateAddedDescending(link1: (typeof links)[number], link2: (typeof links)[number]) {
 	const year1 = Number.parseInt(link1.isoDateAdded.slice(0, 4));
 	const year2 = Number.parseInt(link2.isoDateAdded.slice(0, 4));
 	const month1 = Number.parseInt(link1.isoDateAdded.slice(5, 7));
@@ -65,7 +72,7 @@ const canonicalLinksUrl = new URL('links', Astro.site)
 			</${subHeadingElem}>
 		`} />
 		<ul>
-			{ LINKS.filter(matchesYear(year)).sort(sortByDateAddedDescending).map(link => (
+			{ links.filter(matchesYear(year)).sort(sortByDateAddedDescending).map(link => (
 				<li class="h-entry e-content">
 					<a class="u-url p-name" href={link.href} set:html={link.title} />.
 					<Fragment set:html={link.description} />
@@ -74,4 +81,9 @@ const canonicalLinksUrl = new URL('links', Astro.site)
 			)) }
 		</ul>
 	)) }
+
+	{ (maxEntries !== undefined && maxEntries < allLinks.length)
+		? <p class="full-feed-link"><a href="/links">All links</a></p>
+		: <></>
+	}
 </section>

website/src/pages/index.astro

@@ -8,6 +8,6 @@ import Page from '../layouts/Page.astro';
 
 <Page title={SITE_TITLE} description={SITE_DESCRIPTION}>
 	<Me />
-	<BlogFeed hideAuthor />
-	<LinksFeed hideAuthor />
+	<BlogFeed hideAuthor maxEntries={3} />
+	<LinksFeed hideAuthor maxEntries={5} />
 </Page>