feat(theme): find best locale match to format last update

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<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) {
+    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(() => {
 <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>