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,
-      and sometimes other things.
-    </p>
-    <p>
-      It's been <span
+      It has been 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,21 +1,23 @@
-import type { LoadEvent, Load, Page } from '@sveltejs/kit';
-import { differenceInCalendarDays, intlFormat } from 'date-fns';
+import type { LoadEvent } from '@sveltejs/kit';
+import { differenceInCalendarDays, getYear } from 'date-fns';
 export const prerender = true;
 
-type BlogPost = {
-	filename: string;
-	preview: string[];
+interface BlogPostListItem {
     title: string;
+    author: string;
+    book_review: boolean;
+    content: string;
+    date: string;
+    preview: string;
     slug: string;
-	date: Date;
-	book_review?: boolean;
-};
+}
 
 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.posts);
 
+    const currentYear = getYear(new Date());
     const mostRecentPost = posts[0];
 
     const daysSinceLastPublish = differenceInCalendarDays(new Date(), new Date(mostRecentPost.date));
@@ -24,6 +26,9 @@ export async function load({ fetch }: LoadEvent) {
     const firstPost = posts[numberOfPosts - 1];
     const daysSinceFirstPost = differenceInCalendarDays(new Date(), new Date(firstPost.date));
     const averageDaysBetweenPosts = Number(daysSinceFirstPost / numberOfPosts).toFixed(2);
+    const numberOfBlogPostsThisYear: number = posts.filter(
+        (post) => getYear(new Date(post.date)) === currentYear
+    ).length;
 
     return {
         posts,
@@ -31,6 +36,7 @@ export async function load({ fetch }: LoadEvent) {
         averageDaysBetweenPosts,
         daysSinceFirstPost,
         daysSinceLastPublish,
-		numberOfPosts
+        numberOfPosts,
+        numberOfBlogPostsThisYear,
     };
 }