Mirrors/tachiyomi-website
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/website.git synced 2024-10-31 23:15:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix the hydration issue on release date (#31)

Browse Source 
* Fix the hydration issue on release date.

* Show the exact date while rendering instead.
This commit is contained in:
Alessandro Jean 2023-09-08 19:49:21 -03:00 committed by GitHub
parent 3dca7e2dca
commit e57a37e9cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
website/src/.vitepress/theme/components/ReleaseDate.vue
View File

@ -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>