diff --git a/src/client/theme-default/components/VPDocFooterLastUpdated.vue b/src/client/theme-default/components/VPDocFooterLastUpdated.vue index 5ec3cfeb13ec..619520a048d0 100644 --- a/src/client/theme-default/components/VPDocFooterLastUpdated.vue +++ b/src/client/theme-default/components/VPDocFooterLastUpdated.vue @@ -9,13 +9,42 @@ const date = computed( ) const isoDatetime = computed(() => date.value.toISOString()) const datetime = ref('') +const timeRef = ref() // set time on mounted hook to avoid hydration mismatch due to // potential differences in timezones of the server and clients onMounted(() => { + const defaultLocale = Intl.DateTimeFormat().resolvedOptions().locale + function findBestLocaleMatch(pageLocale: string) { + const lang = navigator.languages.find((userLang) => { + if (pageLocale === userLang) + return true + + // Edge browser: case for ca-valencia + if (pageLocale === 'ca-valencia' && userLang === 'ca-Es-VALENCIA') + return true + + // add iso-639 support for Latin America + if (userLang.startsWith('es-') && userLang !== 'es-ES' && pageLocale === 'es-419') + return true + + return userLang.startsWith(pageLocale) + }) ?? defaultLocale + + if (lang !== pageLocale) { + timeRef.value?.setAttribute('lang', lang) + } + else { + timeRef.value?.removeAttribute('lang') + } + + return lang + } watchEffect(() => { datetime.value = new Intl.DateTimeFormat( - theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : undefined, + theme.value.lastUpdated?.formatOptions?.forceLocale + ? lang.value + : findBestLocaleMatch(lang.value), theme.value.lastUpdated?.formatOptions ?? { dateStyle: 'short', timeStyle: 'short' @@ -28,7 +57,7 @@ onMounted(() => {