Adds Links page and fixes blog feed

website/public/css/feed.css

@@ -0,0 +1,10 @@
+.h-feed {
+	/* Assumes there is at most one level of subheading for sub-dividing entries */
+	:is(h2, h3, h4, h5, h6) {
+		margin-block-start: var(--spacing-block-md);
+	}
+	
+	.h-entry {
+		margin-block-start: var(--spacing-block-sm);
+	}
+}

website/src/components/BaseHead.astro

@@ -14,6 +14,7 @@ const { title, description, image = '/images/headshot.jpg' } = Astro.props;
 <link rel="stylesheet" href="/css/reset.css" />
 <link rel="stylesheet" href="/css/base.css" />
 <link rel="stylesheet" href="/css/hcard.css" />
+<link rel="stylesheet" href="/css/feed.css" />
 
 <!-- Global Metadata -->
 <meta charset="utf-8" />

website/src/components/BlogFeed.astro

@@ -38,6 +38,7 @@ function sortByPubDateDescending(post1: CollectionEntry<'blog'>, post2: Collecti
 }
 
 const headingElem = `h${headingLevel}`;
+const subHeadingElem = `h${headingLevel + 1}`
 
 const canonicalBlogUrl = new URL('blog', Astro.site)
 ---
@@ -45,12 +46,12 @@ const canonicalBlogUrl = new URL('blog', Astro.site)
 <section class="h-feed">
 	<Fragment set:html={`
 		<${headingElem} class="p-name">
-		My blog
+			My blog
 		</${headingElem}>
 	`} />
 
 	<aside>
-		<p class={hideAuthor ? 'hidden' : ''}>
+		<p hidden={hideAuthor}>
 			This blog is written by <a class="p-author h-card" href="/">Joe Carstairs</a>
 		</p>
 
@@ -60,7 +61,11 @@ const canonicalBlogUrl = new URL('blog', Astro.site)
 	</aside>
 
 	{ distinctYears.map(year => (
-		<h3>{year}</h3>
+		<Fragment set:html={`
+			<${subHeadingElem}>
+				${year}
+			</${subHeadingElem}>
+		`} />
 		<ul>
 			{ posts.filter(matchesYear(year)).sort(sortByPubDateDescending).map(post => (
 				<li class="h-entry">

website/src/components/LinksFeed.astro

@@ -0,0 +1,77 @@
+---
+import FormattedDate from '../components/FormattedDate.astro';
+import LINKS from '../data/links.ts';
+
+export interface Props {
+	headingLevel?: 1 | 2 | 3 | 4 | 5 | 6,
+	hideAuthor?: boolean,
+};
+
+const { headingLevel = 2, hideAuthor = false } = Astro.props;
+
+const headingElem = `h${headingLevel}`;
+const subHeadingElem = `h${headingLevel + 1}`
+
+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;
+}
+
+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));
+	const month2 = Number.parseInt(link2.isoDateAdded.slice(5, 7));
+	const day1 = Number.parseInt(link1.isoDateAdded.slice(8, 10));
+	const day2 = Number.parseInt(link2.isoDateAdded.slice(8, 10));
+
+	if (year1 !== year2) {
+		return year2 - year1;
+	} else if (month1 !== month2) {
+		return month2 - month1;
+	} else {
+		return day2 - day1;
+	}
+}
+
+const canonicalLinksUrl = new URL('links', Astro.site)
+---
+
+<section class="h-feed">
+	<Fragment set:html={`
+		<${headingElem} class="p-name">
+			My links
+		</${headingElem}>
+	`} />
+
+	<aside>
+		<p hidden={hideAuthor}>
+			These links are collected by <a class="p-author h-card" href="/">Joe Carstairs</a>
+		</p>
+
+		<p hidden>
+			<a class="u-url" href={canonicalLinksUrl}>Permalink</a>
+		</p>
+	</aside>
+
+	{ distinctYears.map(year => (
+		<Fragment set:html={`
+			<${subHeadingElem}>
+				${year}
+			</${subHeadingElem}>
+		`} />
+		<ul>
+			{ LINKS.filter(matchesYear(year)).sort(sortByDateAddedDescending).map(link => (
+				<li class="h-entry e-content">
+					<a class="u-url p-name" href={link.href}>{link.title}</a>.
+					{link.description}
+					Added: <FormattedDate date={link.isoDateAdded} />
+				</li>
+			)) }
+		</ul>
+	)) }
+</section>

website/src/components/Navbar.astro

@@ -9,5 +9,8 @@
 		<li>
 			<a href="/blog">Blog</a>
 		</li>
+		<li>
+			<a href="/links">Links</a>
+		</li>
 	</ul>
 </nav>

website/src/data/links.ts

@@ -7,7 +7,7 @@ type Link = {
   isoDateAdded: `20${Digit}${Digit}-${'0'|'1'}${Digit}-${'0'|'1'|'2'|'3'}${Digit}`,
 };
 
-const links: Link[] = [
+const LINKS: Link[] = [
   {
     href: 'https://dl.acm.org/doi/pdf/10.1145/3613904.3642596',
     title: 'Is Stack Overflow Obsolete? An Empirical Study of the Characteristics of ChatGPT Answers to Stack Overflow Questions',
@@ -28,4 +28,4 @@ const links: Link[] = [
   },
 ];
 
-export default links;
+export default LINKS;

website/src/pages/index.astro

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

website/src/pages/links.astro

@@ -0,0 +1,8 @@
+---
+import Page from '../layouts/Page.astro';
+import LinksFeed from '../components/LinksFeed.astro';
+---
+
+<Page title='Links | joeac' description='Assorted links I’m accumulating.'>
+	<LinksFeed headingLevel={1} hideAuthor={false} />
+</Page>