fix(website): only display relative dates on client

website/src/routes/+page.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
-	import type { PageData } from "./$types"
 	import { formatDistanceToNow } from "date-fns"
 
 	import Hero from "./Hero.svelte"
 
-	export let data: PageData
+	const { data } = $props()
+
+	let displayDates = $state(false)
+
+	$effect(() => {
+		displayDates = true
+	})
 </script>
 
 <Hero />
@@ -38,8 +43,12 @@
 				</div>
 				<p class="mb-3 line-clamp-2 h-[2lh] overflow-hidden text-sm">{pkg.description}</p>
 				<div class="text-sm font-semibold text-heading">
-					<time datetime={pkg.published_at}>
-						{formatDistanceToNow(new Date(pkg.published_at), { addSuffix: true })}
+					<time datetime={pkg.published_at} class:invisible={!displayDates}>
+						{#if displayDates}
+							{formatDistanceToNow(new Date(pkg.published_at), { addSuffix: true })}
+						{:else}
+							...
+						{/if}
 					</time>
 				</div>
 			</article>

website/src/routes/packages/[scope]/[name]/versions/+page.svelte

@@ -2,6 +2,11 @@
 	import { formatDistanceToNow } from "date-fns"
 
 	const { data } = $props()
+
+	let displayDates = $state(false)
+	$effect(() => {
+		displayDates = true
+	})
 </script>
 
 <div class="space-y-4 py-4">
@@ -24,8 +29,14 @@
 					{/if}
 				</a>
 			</h2>
-			<div class="text-sm font-semibold">
-				<time>{formatDistanceToNow(new Date(pkg.published_at), { addSuffix: true })}</time>
+			<div class="text-sm font-semibold" class:invisible={!displayDates}>
+				<time>
+					{#if displayDates}
+						{formatDistanceToNow(new Date(pkg.published_at), { addSuffix: true })}
+					{:else}
+						...
+					{/if}
+				</time>
 				·
 				{pkg.targets
 					.map((target) => {