chore: add time lang attribute logic

userquin/feat-use-best-lang-match-for-last-update
userquin 2 weeks ago
parent aa24dcdb2d
commit 3df33a5527

@ -9,12 +9,14 @@ const date = computed(
) )
const isoDatetime = computed(() => date.value.toISOString()) const isoDatetime = computed(() => date.value.toISOString())
const datetime = ref('') const datetime = ref('')
const timeRef = ref<HTMLTimeElement>()
// set time on mounted hook to avoid hydration mismatch due to // set time on mounted hook to avoid hydration mismatch due to
// potential differences in timezones of the server and clients // potential differences in timezones of the server and clients
onMounted(() => { onMounted(() => {
const defaultLocale = Intl.DateTimeFormat().resolvedOptions().locale
function findBestLocaleMatch(pageLocale: string) { function findBestLocaleMatch(pageLocale: string) {
return navigator.languages.find((userLang) => { const lang = navigator.languages.find((userLang) => {
if (pageLocale === userLang) if (pageLocale === userLang)
return true return true
@ -27,7 +29,16 @@ onMounted(() => {
return true return true
return userLang.startsWith(pageLocale) return userLang.startsWith(pageLocale)
}) }) ?? defaultLocale
if (lang !== pageLocale) {
timeRef.value?.setAttribute('lang', lang)
}
else {
timeRef.value?.removeAttribute('lang')
}
return lang
} }
watchEffect(() => { watchEffect(() => {
datetime.value = new Intl.DateTimeFormat( datetime.value = new Intl.DateTimeFormat(
@ -46,7 +57,7 @@ onMounted(() => {
<template> <template>
<p class="VPLastUpdated"> <p class="VPLastUpdated">
{{ theme.lastUpdated?.text || theme.lastUpdatedText || 'Last updated' }}: {{ theme.lastUpdated?.text || theme.lastUpdatedText || 'Last updated' }}:
<time :datetime="isoDatetime">{{ datetime }}</time> <time ref="timeRef" :datetime="isoDatetime">{{ datetime }}</time>
</p> </p>
</template> </template>

Loading…
Cancel
Save