refactor(blog): Move the calculation of days between posts to the client side

src/routes/blog/+page.server.ts

@@ -4,19 +4,14 @@ import { differenceInCalendarDays, getYear } from 'date-fns';
 
 export const prerender = true;
 
-export const load: Load = async ({ params, url }) => {
+export const load: Load = async ({}) => {
     const controller = await BlogController.singleton();
     const posts = await controller.getAllBlogPosts();
 
     const currentYear = getYear(new Date());
-    const mostRecentPost = posts[0];
-
-    const daysSinceLastPublish = differenceInCalendarDays(new Date(), new Date(mostRecentPost.date));
 
     const numberOfPosts = posts.length;
     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;
@@ -24,9 +19,6 @@ export const load: Load = async ({ params, url }) => {
     return {
         posts,
         firstPost,
-        averageDaysBetweenPosts,
-        daysSinceFirstPost,
-        daysSinceLastPublish,
         numberOfPosts,
         numberOfBlogPostsThisYear,
     };

src/routes/blog/+page.svelte

@@ -1,25 +1,26 @@
 <script lang="ts">
+  import { differenceInCalendarDays } from "date-fns";
   import type { PageData } from "./$types.js";
   import Navbar from "$lib/components/Navbar.svelte";
   import BlogHead from "./BlogHead.svelte";
   import BlogHeader from "./BlogHeader.svelte";
   import BlogPostListItem from "./BlogPostListItem.svelte";
-  import { BlogPost } from "$lib/blog/BlogPost.js";
 
   interface Props {
     data: PageData;
   }
 
-  let { data }: Props = $props();
+  const { data }: Props = $props();
 
-  let {
+  const { numberOfBlogPostsThisYear, numberOfPosts, posts } = data;
-    posts,
+
-    numberOfPosts,
+  const daysSinceFirstPost = $derived(
-    daysSinceLastPublish,
+    differenceInCalendarDays(new Date(), new Date(posts[posts.length - 1].date))
-    daysSinceFirstPost,
+  );
-    averageDaysBetweenPosts,
+
-    numberOfBlogPostsThisYear,
+  const daysSinceLastPublish = $derived(
-  } = $derived(data);
+    differenceInCalendarDays(new Date(), new Date(posts[0].date))
+  );
 </script>
 
 <BlogHead />
@@ -34,7 +35,7 @@
     {numberOfBlogPostsThisYear}
     {daysSinceFirstPost}
     {numberOfPosts}
-    averageDaysBetweenPosts={Number(averageDaysBetweenPosts)}
+    averageDaysBetweenPosts={Number(daysSinceFirstPost / posts.length)}
     {daysSinceLastPublish}
   />
   <section class="section">

src/routes/blog/BlogHeader.svelte

@@ -38,7 +38,7 @@
   <p class="heading__text">
     I have written {numberOfBlogPostsThisYear}
     {numberOfBlogPostsThisYear === 1 ? "piece" : "pieces"} so far this year. On average
-    I publish something every {averageDaysBetweenPosts} days ({numberOfPosts}
+    I publish something every {averageDaysBetweenPosts.toFixed(2)} days ({numberOfPosts}
     posts in {daysSinceFirstPost} days).
   </p>
 

src/routes/blog/tag/[tag]/+page.server.ts

@@ -16,14 +16,9 @@ export const load: Load = async ({ params, url }) => {
 
     const currentYear = getYear(new Date());
     console.log({ posts });
-    const mostRecentPost = posts[0];
-
-    const daysSinceLastPublish = differenceInCalendarDays(new Date(), new Date(mostRecentPost.date));
 
     const numberOfPosts = posts.length;
     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;
@@ -32,9 +27,6 @@ export const load: Load = async ({ params, url }) => {
         tag,
         posts,
         firstPost,
-        averageDaysBetweenPosts,
-        daysSinceFirstPost,
-        daysSinceLastPublish,
         numberOfPosts,
         numberOfBlogPostsThisYear,
     };

src/routes/blog/tag/[tag]/+page.svelte

@@ -4,6 +4,7 @@
   import Navbar from "$lib/components/Navbar.svelte";
   import BlogHeader from "../../BlogHeader.svelte";
   import BlogPostListItem from "../../BlogPostListItem.svelte";
+  import { differenceInCalendarDays } from "date-fns";
 
   interface Props {
     data: PageData;
@@ -11,15 +12,15 @@
 
   let { data }: Props = $props();
 
-  let {
+  const { posts, tag, numberOfPosts, numberOfBlogPostsThisYear } = data;
-    posts,
+
-    tag,
+  const daysSinceFirstPost = $derived(
-    numberOfPosts,
+    differenceInCalendarDays(new Date(), new Date(posts[posts.length - 1].date))
-    daysSinceLastPublish,
+  );
-    daysSinceFirstPost,
+
-    averageDaysBetweenPosts,
+  const daysSinceLastPublish = $derived(
-    numberOfBlogPostsThisYear,
+    differenceInCalendarDays(new Date(), new Date(posts[0].date))
-  } = $derived(data);
+  );
 </script>
 
 <BlogHead />
@@ -32,7 +33,7 @@
     {numberOfBlogPostsThisYear}
     {daysSinceFirstPost}
     {numberOfPosts}
-    averageDaysBetweenPosts={Number(averageDaysBetweenPosts)}
+    averageDaysBetweenPosts={(posts.length, daysSinceFirstPost)}
     {daysSinceLastPublish}
   />