From 8d9b59a3bd9f06bde565402f7c720fe17d321c52 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Tue, 12 Nov 2024 14:57:21 +0100
Subject: [PATCH 1/3] feat(theme): find best locale match to format last update

---
 .../components/VPDocFooterLastUpdated.vue     | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/client/theme-default/components/VPDocFooterLastUpdated.vue b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
index 5ec3cfeb13ec..a4e6da6182e8 100644
--- a/src/client/theme-default/components/VPDocFooterLastUpdated.vue
+++ b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
@@ -13,9 +13,27 @@ const datetime = ref('')
 // set time on mounted hook to avoid hydration mismatch due to
 // potential differences in timezones of the server and clients
 onMounted(() => {
+  function findBestLocaleMatch(pageLocale: string): string | undefined {
+    return navigator.languages.find((userLang) => {
+      if (pageLocale === userLang)
+        return pageLocale
+
+      // Edge browser: case for ca-valencia
+      if (pageLocale === 'ca-valencia' && userLang === 'ca-Es-VALENCIA')
+        return pageLocale
+
+      // add iso-639 support for Latin America
+      if (userLang.startsWith('es-') && userLang !== 'es-ES' && pageLocale === 'es-419')
+        return pageLocale
+
+      return userLang.startsWith(pageLocale) ? pageLocale : undefined
+    })
+  }
   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'

From aa24dcdb2d1fbd28ce1fc9079e3f2fd4eebbb942 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Tue, 12 Nov 2024 15:22:01 +0100
Subject: [PATCH 2/3] chore: return boolean

---
 .../components/VPDocFooterLastUpdated.vue              | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/client/theme-default/components/VPDocFooterLastUpdated.vue b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
index a4e6da6182e8..f2e922e272a6 100644
--- a/src/client/theme-default/components/VPDocFooterLastUpdated.vue
+++ b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
@@ -13,20 +13,20 @@ const datetime = ref('')
 // set time on mounted hook to avoid hydration mismatch due to
 // potential differences in timezones of the server and clients
 onMounted(() => {
-  function findBestLocaleMatch(pageLocale: string): string | undefined {
+  function findBestLocaleMatch(pageLocale: string) {
     return navigator.languages.find((userLang) => {
       if (pageLocale === userLang)
-        return pageLocale
+        return true
 
       // Edge browser: case for ca-valencia
       if (pageLocale === 'ca-valencia' && userLang === 'ca-Es-VALENCIA')
-        return pageLocale
+        return true
 
       // add iso-639 support for Latin America
       if (userLang.startsWith('es-') && userLang !== 'es-ES' && pageLocale === 'es-419')
-        return pageLocale
+        return true
 
-      return userLang.startsWith(pageLocale) ? pageLocale : undefined
+      return userLang.startsWith(pageLocale)
     })
   }
   watchEffect(() => {

From 3df33a5527d79ac13f3f5d5841c5053860c30ec9 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Tue, 12 Nov 2024 16:40:51 +0100
Subject: [PATCH 3/3] chore: add time lang attribute logic

---
 .../components/VPDocFooterLastUpdated.vue       | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/client/theme-default/components/VPDocFooterLastUpdated.vue b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
index f2e922e272a6..619520a048d0 100644
--- a/src/client/theme-default/components/VPDocFooterLastUpdated.vue
+++ b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
@@ -9,12 +9,14 @@ const date = computed(
 )
 const isoDatetime = computed(() => date.value.toISOString())
 const datetime = ref('')
+const timeRef = ref<HTMLTimeElement>()
 
 // 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) {
-    return navigator.languages.find((userLang) => {
+    const lang = navigator.languages.find((userLang) => {
       if (pageLocale === userLang)
         return true
 
@@ -27,7 +29,16 @@ onMounted(() => {
         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(
@@ -46,7 +57,7 @@ onMounted(() => {
 <template>
   <p class="VPLastUpdated">
     {{ theme.lastUpdated?.text || theme.lastUpdatedText || 'Last updated' }}:
-    <time :datetime="isoDatetime">{{ datetime }}</time>
+    <time ref="timeRef" :datetime="isoDatetime">{{ datetime }}</time>
   </p>
 </template>