From e57a37e9cc59026a3463a6f4fb88ff13cb9bb271 Mon Sep 17 00:00:00 2001
From: Alessandro Jean <14254807+alessandrojean@users.noreply.github.com>
Date: Fri, 8 Sep 2023 19:49:21 -0300
Subject: [PATCH] Fix the hydration issue on release date (#31)

* Fix the hydration issue on release date.

* Show the exact date while rendering instead.
---
 .../.vitepress/theme/components/ReleaseDate.vue    | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/website/src/.vitepress/theme/components/ReleaseDate.vue b/website/src/.vitepress/theme/components/ReleaseDate.vue
index 34185fde..c81fbd4f 100644
--- a/website/src/.vitepress/theme/components/ReleaseDate.vue
+++ b/website/src/.vitepress/theme/components/ReleaseDate.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, toRefs } from "vue"
+import { computed, onMounted, ref, toRefs } from "vue"
 import moment from "moment"
 import { type AppRelease, data as release } from "../data/release.data"
 
@@ -11,10 +11,20 @@ const momentInfo = computed(() => ({
 	exact: moment(release[type.value].published_at).format("dddd, MMMM Do YYYY [at] HH:mm"),
 	iso: release[type.value].published_at ?? undefined,
 }))
+
+// Mimic the <ClientOnly /> behavior to show custom text while rendering.
+const show = ref(false)
+
+onMounted(() => {
+	show.value = true
+})
 </script>
 
 <template>
-	<time :datetime="momentInfo.iso" :title="momentInfo.exact">
+	<time v-if="show" :datetime="momentInfo.iso" :title="momentInfo.exact">
 		{{ momentInfo.relative }}
 	</time>
+	<time v-else :datetime="momentInfo.iso">
+		{{ momentInfo.exact }}
+	</time>
 </template>