From eaf7a6aa744f8aaa336db29b9fc415cb993dda1d Mon Sep 17 00:00:00 2001
From: Ewan Croft <git@ewancroft.uk>
Date: Thu, 24 Jul 2025 20:26:12 +0100
Subject: [PATCH] feat: add number formatting utility and apply to word counts

Implement a new number formatter utility to standardize number display across the application. Replace direct number displays with formatted versions in PostHeader, StatsDisplay, and ArchiveCard components for better readability and consistency.
---
 src/lib/components/archive/ArchiveCard.svelte  |  3 ++-
 src/lib/components/archive/StatsDisplay.svelte |  8 +++++---
 src/lib/components/post/PostHeader.svelte      |  3 ++-
 src/lib/utils/numberFormatter.ts               | 18 ++++++++++++++++++
 4 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/utils/numberFormatter.ts

diff --git a/src/lib/components/archive/ArchiveCard.svelte b/src/lib/components/archive/ArchiveCard.svelte
index 2413804..31bc03c 100644
--- a/src/lib/components/archive/ArchiveCard.svelte
+++ b/src/lib/components/archive/ArchiveCard.svelte
@@ -2,6 +2,7 @@
   import { fly, fade } from "svelte/transition";
   import { quintOut } from "svelte/easing";
   import { formatDate } from "$utils/dateFormatter";
+  import { formatNumber } from "$utils/numberFormatter";
   import DocumentIcon from "$components/icons/utility/DocumentIcon.svelte";
   import LinkExternalIcon from "$components/icons/utility/LinkExternalIcon.svelte";
   import CoffeeIcon from "$components/icons/utility/CoffeeIcon.svelte";
@@ -89,7 +90,7 @@
           <!-- Reading stats with visual emphasis -->
           <div class="reading-stats">
             <div class="stat-item words">
-              <span class="stat-number">{post.wordCount?.toLocaleString() || '0'}</span>
+              <span class="stat-number">{formatNumber(post.wordCount) || '0'}</span>
               <span class="stat-label">words</span>
             </div>
             <div class="stat-divider">•</div>
diff --git a/src/lib/components/archive/StatsDisplay.svelte b/src/lib/components/archive/StatsDisplay.svelte
index 016a52b..b9b245f 100644
--- a/src/lib/components/archive/StatsDisplay.svelte
+++ b/src/lib/components/archive/StatsDisplay.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { formatNumber } from "$utils/numberFormatter";
+
   export let totalReadTime: string;
   export let totalWordCount: number;
   export let postCount: number | undefined = undefined;
@@ -10,13 +12,13 @@
 
 {#if postCount !== undefined}
   <p class="text-sm opacity-50 mb-4 ml-2">
-    {totalReadTime} read time • {totalWordCount}
-    {wordLabel} • {postCount}
+    {totalReadTime} read time • {formatNumber(totalWordCount)}
+    {wordLabel} • {formatNumber(postCount)}
     {postLabel}
   </p>
 {:else}
   <div class="mb-6 ml-4 text-sm opacity-70">
     <p>Total Read Time: {totalReadTime}</p>
-    <p>Total Word Count: {totalWordCount} {wordLabel}</p>
+    <p>Total Word Count: {formatNumber(totalWordCount)} {wordLabel}</p>
   </div>
 {/if}
\ No newline at end of file
diff --git a/src/lib/components/post/PostHeader.svelte b/src/lib/components/post/PostHeader.svelte
index 727d8c4..2ca674e 100644
--- a/src/lib/components/post/PostHeader.svelte
+++ b/src/lib/components/post/PostHeader.svelte
@@ -2,6 +2,7 @@
   import { fade } from "svelte/transition";
   import { formatRelativeTime, formatDate } from "$utils/dateFormatter";
   import { ShareIcons } from "$components/icons";
+  import { formatNumber } from "$utils/numberFormatter";
   import type { Post } from "$components/shared";
   import { onMount } from 'svelte';
 
@@ -87,7 +88,7 @@
   <!-- Reading time with subtle emphasis -->
   <div class="px-2 py-1 inline-block">
     <p class="text-sm opacity-70">
-      {Math.ceil(post.wordCount / 200)} min read • {post.wordCount}
+      {Math.ceil(post.wordCount / 200)} min read • {formatNumber(post.wordCount)}
       {wordLabel}
     </p>
   </div>
diff --git a/src/lib/utils/numberFormatter.ts b/src/lib/utils/numberFormatter.ts
new file mode 100644
index 0000000..f98a0f1
--- /dev/null
+++ b/src/lib/utils/numberFormatter.ts
@@ -0,0 +1,18 @@
+/**
+ * Formats a number according to the specified locale and options.
+ * @param value The number to format.
+ * @param locale The locale to use for formatting (e.g., 'en-GB', 'en-US'). Defaults to 'en-GB'.
+ * @param options Options for number formatting, conforming to Intl.NumberFormatOptions.
+ * @returns The formatted number string.
+ */
+export function formatNumber(value: number, locale: string = 'en-GB', options?: Intl.NumberFormatOptions): string {
+  if (typeof value !== 'number') {
+    return String(value); // Return as string if not a number
+  }
+  try {
+    return new Intl.NumberFormat(locale, options).format(value);
+  } catch (error) {
+    console.error(`Error formatting number for locale ${locale}:`, error);
+    return value.toLocaleString(locale); // Fallback to basic toLocaleString on error
+  }
+}
\ No newline at end of file
-- 
2.51.2