style changes

website/src/components/BlogFeed.astro

@@ -6,10 +6,11 @@ import FormattedDate from './FormattedDate.astro';
 export interface Props {
 	headingLevel?: 1 | 2 | 3 | 4 | 5 | 6,
 	hideAuthor?: boolean,
+	hideSubheadings?: boolean,
 	maxEntries?: number,
 };
 
-const { headingLevel = 2, hideAuthor = false, maxEntries } = Astro.props;
+const { headingLevel = 2, hideSubheadings = false, hideAuthor = false, maxEntries } = Astro.props;
 
 const allPosts = (await getCollection('blog')).filter((post) => !post.data.hidden);
 
@@ -32,41 +33,46 @@ function sortByPubDateDescending(post1: CollectionEntry<'blog'>, post2: Collecti
 	return date2 - date1;
 }
 
-const headingElem = `h${headingLevel}`;
-const subHeadingElem = `h${headingLevel + 1}`
+const HeadingElem = `h${headingLevel} class="p-name"`;
+const SubHeadingElem = `h${headingLevel + 1}`;
+const AuthorElem = `p${hideAuthor ? " hidden" : ""}`;
 
 const canonicalBlogUrl = new URL('blog', Astro.site)
 ---
 
 <section class="h-feed">
-	<Fragment set:html={`
-		<${headingElem} class="p-name">
-			My blog
-		</${headingElem}>
-	`} />
+	<HeadingElem>
+		My blog
+	</HeadingElem>
 
 	<aside>
-		<p hidden={hideAuthor}>
+		<AuthorElem>
 			This blog is written by <a class="p-author h-card" href="/">Joe Carstairs</a>
-		</p>
+		</AuthorElem>
 
 		<p hidden>
 			<a class="u-url" href={canonicalBlogUrl}>Permalink</a>
 		</p>
 	</aside>
 
-	{ distinctYears.map(year => (
-		<Fragment set:html={`
-			<${subHeadingElem}>
-				${year}
-			</${subHeadingElem}>
-		`} />
+	{ hideSubheadings
+	  ? <ul>
+			{ posts.sort(sortByPubDateDescending).map(post => (
+				<li class="h-entry">
+					<a class="u-url p-name" href={`/blog/${post.id}`}>{post.data.title}</a>
+					<p class="p-summary" set:html={post.data.description} />
+					<FormattedDate className="dt-published" date={post.data.pubDate} />
+				</li>
+			)) }
+			</ul>
+	  : distinctYears.map(year => (
+		<SubHeadingElem>{year}</SubHeadingElem>
 		<ul>
 			{ posts.filter(matchesYear(year)).sort(sortByPubDateDescending).map(post => (
 				<li class="h-entry">
-					<a class="u-url p-name" href={`/blog/${post.id}`}>{post.data.title}</a>.
-					<Fragment set:html={post.data.description} />
-					Added: <FormattedDate date={post.data.pubDate} />
+					<a class="u-url p-name" href={`/blog/${post.id}`}>{post.data.title}</a>
+					<p class="p-summary" set:html={post.data.description} />
+					<FormattedDate className="dt-published" date={post.data.pubDate} />
 				</li>
 			)) }
 		</ul>

website/src/components/LinksFeed.astro

@@ -63,9 +63,9 @@ const canonicalLinksUrl = new URL('links', Astro.site)
 		<ul>
 			{ 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} />
-					Added: <FormattedDate date={link.isoDateAdded} />
+  				<FormattedDate className="dt-published" date={link.isoDateAdded} />
+					<a class="u-url p-name" href={link.href} set:html={link.title} />
+					<p class="p-description" set:html={link.description} />
 				</li>
 			)) }
 		</ul>

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 maxEntries={3} />
-	<LinksFeed hideAuthor maxEntries={5} />
+	<BlogFeed hideAuthor hideSubheadings maxEntries={1} />
+	<LinksFeed hideAuthor maxEntries={1} />
 </Page>