From 6b12e3ac81f31871741818ec6251323d83509171 Mon Sep 17 00:00:00 2001
From: LukaDev <47296785+lukadev-0@users.noreply.github.com>
Date: Sat, 24 Aug 2024 17:10:03 +0200
Subject: [PATCH] fix(website): only display relative dates on client

---
 website/src/routes/+page.svelte                 | 17 +++++++++++++----
 .../[scope]/[name]/versions/+page.svelte        | 15 +++++++++++++--
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte
index 7de5016..85eca30 100644
--- a/website/src/routes/+page.svelte
+++ b/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>
diff --git a/website/src/routes/packages/[scope]/[name]/versions/+page.svelte b/website/src/routes/packages/[scope]/[name]/versions/+page.svelte
index d30726c..72317e3 100644
--- a/website/src/routes/packages/[scope]/[name]/versions/+page.svelte
+++ b/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) => {