From 246afa924f9ed8e520b00e86d306896fcde1ffe2 Mon Sep 17 00:00:00 2001
From: Thomas <thomas@thomaswilson.xyz>
Date: Wed, 2 Apr 2025 20:28:05 +0100
Subject: [PATCH] refactor(blog): Move the calculation of days between posts to
 the client side

---
 src/routes/blog/+page.server.ts           | 10 +---------
 src/routes/blog/+page.svelte              | 23 ++++++++++++-----------
 src/routes/blog/BlogHeader.svelte         |  2 +-
 src/routes/blog/tag/[tag]/+page.server.ts |  8 --------
 src/routes/blog/tag/[tag]/+page.svelte    | 21 +++++++++++----------
 5 files changed, 25 insertions(+), 39 deletions(-)

diff --git a/src/routes/blog/+page.server.ts b/src/routes/blog/+page.server.ts
index 3c13f2f..347aa76 100644
--- a/src/routes/blog/+page.server.ts
+++ b/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,
     };
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 60408d3..f1d6afc 100644
--- a/src/routes/blog/+page.svelte
+++ b/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 {
-    posts,
-    numberOfPosts,
-    daysSinceLastPublish,
-    daysSinceFirstPost,
-    averageDaysBetweenPosts,
-    numberOfBlogPostsThisYear,
-  } = $derived(data);
+  const { numberOfBlogPostsThisYear, numberOfPosts, posts } = data;
+
+  const daysSinceFirstPost = $derived(
+    differenceInCalendarDays(new Date(), new Date(posts[posts.length - 1].date))
+  );
+
+  const daysSinceLastPublish = $derived(
+    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">
diff --git a/src/routes/blog/BlogHeader.svelte b/src/routes/blog/BlogHeader.svelte
index d2102fe..7fa2845 100644
--- a/src/routes/blog/BlogHeader.svelte
+++ b/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>
 
diff --git a/src/routes/blog/tag/[tag]/+page.server.ts b/src/routes/blog/tag/[tag]/+page.server.ts
index f86b170..ec7690d 100644
--- a/src/routes/blog/tag/[tag]/+page.server.ts
+++ b/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,
     };
diff --git a/src/routes/blog/tag/[tag]/+page.svelte b/src/routes/blog/tag/[tag]/+page.svelte
index b10360d..1d6372f 100644
--- a/src/routes/blog/tag/[tag]/+page.svelte
+++ b/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 {
-    posts,
-    tag,
-    numberOfPosts,
-    daysSinceLastPublish,
-    daysSinceFirstPost,
-    averageDaysBetweenPosts,
-    numberOfBlogPostsThisYear,
-  } = $derived(data);
+  const { posts, tag, numberOfPosts, numberOfBlogPostsThisYear } = data;
+
+  const daysSinceFirstPost = $derived(
+    differenceInCalendarDays(new Date(), new Date(posts[posts.length - 1].date))
+  );
+
+  const daysSinceLastPublish = $derived(
+    differenceInCalendarDays(new Date(), new Date(posts[0].date))
+  );
 </script>
 
 <BlogHead />
@@ -32,7 +33,7 @@
     {numberOfBlogPostsThisYear}
     {daysSinceFirstPost}
     {numberOfPosts}
-    averageDaysBetweenPosts={Number(averageDaysBetweenPosts)}
+    averageDaysBetweenPosts={(posts.length, daysSinceFirstPost)}
     {daysSinceLastPublish}
   />