BlogEngine: Rewrite stapline for the blog

src/routes/blog/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { PageData } from "./$types";
+  import type { PageData } from "./$types.js";
   import Navbar from "$lib/components/Navbar.svelte";
   import { intlFormat } from "date-fns";
 
@@ -11,7 +11,8 @@
     numberOfPosts,
     daysSinceLastPublish,
     daysSinceFirstPost,
-    averageDaysBetweenPosts
+    averageDaysBetweenPosts,
+    numberOfBlogPostsThisYear
   } = data);
 </script>
 
@@ -46,18 +47,23 @@
   <section class="thomaswilson-strapline section">
     <h1>Blog</h1>
     <p>
-      I write about software and I how I should have built it, books I've read,
+      It has been been
-      and sometimes other things.
+      <span
-    </p>
-    <p>
-      It's been <span
         class="days-since"
         class:days-since-success={daysSinceLastPublish === 0}
       >
         {daysSinceLastPublish}
       </span>
       {daysSinceLastPublish === 1 ? "day" : "days"} since I last published something.
-      On average I publish something every {averageDaysBetweenPosts} days ({numberOfPosts}
+    </p>
+    <p>
+      I write about fun software I've built alone, Real Software™ I built in
+      teams, books I read, things I am sewing, and other things.
+    </p>
+    <p>
+      I have written {numberOfBlogPostsThisYear}
+      {numberOfBlogPostsThisYear === 1 ? "piece" : "pieces"} so far this year. On
+      average I publish something every {averageDaysBetweenPosts} days ({numberOfPosts}
       posts in {daysSinceFirstPost} days).
     </p>
   </section>

src/routes/blog/+page.ts

@@ -1,36 +1,42 @@
-import type { LoadEvent, Load, Page } from '@sveltejs/kit';
+import type { LoadEvent } from '@sveltejs/kit';
-import { differenceInCalendarDays, intlFormat } from 'date-fns';
+import { differenceInCalendarDays, getYear } from 'date-fns';
 export const prerender = true;
 
-type BlogPost = {
+interface BlogPostListItem {
-	filename: string;
+    title: string;
-	preview: string[];
+    author: string;
-	title: string;
+    book_review: boolean;
-	slug: string;
+    content: string;
-	date: Date;
+    date: string;
-	book_review?: boolean;
+    preview: string;
-};
+    slug: string;
+}
 
 export async function load({ fetch }: LoadEvent) {
-	const posts = await fetch('/api/blog.json')
+    const posts: BlogPostListItem[] = await fetch('/api/blog.json')
-		.then((res) => res.json())
+        .then((res) => res.json())
-		.then((res) => res.posts);
+        .then((res) => res.posts);
 
-	const mostRecentPost = posts[0];
+    const currentYear = getYear(new Date());
+    const mostRecentPost = posts[0];
 
-	const daysSinceLastPublish = differenceInCalendarDays(new Date(), new Date(mostRecentPost.date));
+    const daysSinceLastPublish = differenceInCalendarDays(new Date(), new Date(mostRecentPost.date));
 
-	const numberOfPosts = posts.length;
+    const numberOfPosts = posts.length;
-	const firstPost = posts[numberOfPosts - 1];
+    const firstPost = posts[numberOfPosts - 1];
-	const daysSinceFirstPost = differenceInCalendarDays(new Date(), new Date(firstPost.date));
+    const daysSinceFirstPost = differenceInCalendarDays(new Date(), new Date(firstPost.date));
-	const averageDaysBetweenPosts = Number(daysSinceFirstPost / numberOfPosts).toFixed(2);
+    const averageDaysBetweenPosts = Number(daysSinceFirstPost / numberOfPosts).toFixed(2);
+    const numberOfBlogPostsThisYear: number = posts.filter(
+        (post) => getYear(new Date(post.date)) === currentYear
+    ).length;
 
-	return {
+    return {
-		posts,
+        posts,
-		firstPost,
+        firstPost,
-		averageDaysBetweenPosts,
+        averageDaysBetweenPosts,
-		daysSinceFirstPost,
+        daysSinceFirstPost,
-		daysSinceLastPublish,
+        daysSinceLastPublish,
-		numberOfPosts
+        numberOfPosts,
-	};
+        numberOfBlogPostsThisYear,
+    };
 }