Mirrors/tachiyomi-website
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/website.git synced 2024-12-21 07:31:58 +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"> <script setup lang="ts">
import { computed, toRefs } from "vue" import { computed, onMounted, ref, toRefs } from "vue"
import moment from "moment" import moment from "moment"
import { type AppRelease, data as release } from "../data/release.data" 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"), exact: moment(release[type.value].published_at).format("dddd, MMMM Do YYYY [at] HH:mm"),
iso: release[type.value].published_at ?? undefined, 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> </script>
<template> <template>
<time :datetime="momentInfo.iso" :title="momentInfo.exact"> <time v-if="show" :datetime="momentInfo.iso" :title="momentInfo.exact">
{{ momentInfo.relative }} {{ momentInfo.relative }}
</time> </time>
<time v-else :datetime="momentInfo.iso">
{{ momentInfo.exact }}
</time>
</template> </template>