From 83a1980273f59f7df7db83e9a1d360a6de13c553 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sun, 15 Jan 2023 20:23:47 +0800
Subject: [PATCH] fix: default language (#1171)

---
 composables/settings/definition.ts | 12 +++++++++---
 composables/settings/storage.ts    |  7 ++++++-
 constants/index.ts                 |  1 -
 plugins/setup-i18n.ts              | 27 +++++----------------------
 utils/language.ts                  |  2 +-
 5 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/composables/settings/definition.ts b/composables/settings/definition.ts
index 4f66e9a7..131bf986 100644
--- a/composables/settings/definition.ts
+++ b/composables/settings/definition.ts
@@ -1,4 +1,4 @@
-import { DEFAULT_FONT_SIZE, DEFAULT_LANGUAGE } from '~/constants'
+import { DEFAULT_FONT_SIZE } from '~/constants'
 
 export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 export type ColorMode = 'light' | 'dark' | 'system'
@@ -24,9 +24,15 @@ export interface UserSettings {
   zenMode: boolean
 }
 
-export function getDefaultUserSettings(): UserSettings {
+export function getDefaultLanguage(languages: string[]) {
+  if (process.server)
+    return 'en-US'
+  return matchLanguages(languages, navigator.languages) || 'en-US'
+}
+
+export function getDefaultUserSettings(locales: string[]): UserSettings {
   return {
-    language: DEFAULT_LANGUAGE,
+    language: getDefaultLanguage(locales),
     fontSize: DEFAULT_FONT_SIZE,
     zenMode: false,
     featureFlags: {},
diff --git a/composables/settings/storage.ts b/composables/settings/storage.ts
index 6c0395c5..ae0ad0ed 100644
--- a/composables/settings/storage.ts
+++ b/composables/settings/storage.ts
@@ -1,9 +1,14 @@
 import type { Ref } from 'vue'
+import type { VueI18n } from 'vue-i18n'
+import type { LocaleObject } from 'vue-i18n-routing'
 import type { FeatureFlags, UserSettings, WellnessSettings } from './definition'
 import { STORAGE_KEY_SETTINGS } from '~/constants'
 
 export function useUserSettings() {
-  return useUserLocalStorage<UserSettings>(STORAGE_KEY_SETTINGS, getDefaultUserSettings)
+  const i18n = useNuxtApp().vueApp.config.globalProperties.$i18n as VueI18n
+  const { locales } = i18n
+  const supportLanguages = (locales as LocaleObject[]).map(locale => locale.code)
+  return useUserLocalStorage<UserSettings>(STORAGE_KEY_SETTINGS, () => getDefaultUserSettings(supportLanguages))
 }
 
 // TODO: refactor & simplify this
diff --git a/constants/index.ts b/constants/index.ts
index f3552c65..e1d3f8ab 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -2,7 +2,6 @@ export const APP_NAME = 'Elk'
 
 export const DEFAULT_POST_CHARS_LIMIT = 500
 export const DEFAULT_FONT_SIZE = 'md'
-export const DEFAULT_LANGUAGE = 'en-US'
 
 export const STORAGE_KEY_DRAFTS = 'elk-drafts'
 export const STORAGE_KEY_USERS = 'elk-users'
diff --git a/plugins/setup-i18n.ts b/plugins/setup-i18n.ts
index cdd4b647..3ea23f27 100644
--- a/plugins/setup-i18n.ts
+++ b/plugins/setup-i18n.ts
@@ -1,39 +1,22 @@
 import type { VueI18n } from 'vue-i18n'
 import type { LocaleObject } from 'vue-i18n-routing'
-import { DEFAULT_LANGUAGE } from '~/constants'
 
 export default defineNuxtPlugin(async (nuxt) => {
   const i18n = nuxt.vueApp.config.globalProperties.$i18n as VueI18n
   const { setLocale, locales } = i18n
   const supportLanguages = (locales as LocaleObject[]).map(locale => locale.code)
   const userSettings = useUserSettings()
+  const lang = userSettings.value.language
+
+  if (process.client && !supportLanguages.includes(lang))
+    userSettings.value.language = getDefaultLanguage(locales as string[])
 
   if (process.server) {
-    const headers = useRequestHeaders()
-
-    let lang = userSettings.value.language
-    if (!lang || !supportLanguages.includes(lang)) {
-      // first visit
-      if (headers['accept-language']) {
-        // detect language from header
-        const userLanguages = headers['accept-language'].split(',').map(lang => lang.split(';')[0].toLowerCase())
-        lang = matchLanguages(supportLanguages, userLanguages) || DEFAULT_LANGUAGE
-      }
-      else {
-        lang = DEFAULT_LANGUAGE
-      }
-    }
-
     if (lang !== i18n.locale)
-      await setLocale(userSettings.value.language)
-
+      await setLocale(lang)
     return
   }
 
-  // could be null if browser don't accept cookie
-  if (!userSettings.value.language || !supportLanguages.includes(userSettings.value.language))
-    userSettings.value.language = DEFAULT_LANGUAGE
-
   watch(() => userSettings.value.language, (lang) => {
     if (lang !== i18n.locale)
       setLocale(lang)
diff --git a/utils/language.ts b/utils/language.ts
index ab53882a..1b41d715 100644
--- a/utils/language.ts
+++ b/utils/language.ts
@@ -1,4 +1,4 @@
-export function matchLanguages(languages: string[], acceptLanguages: string[]): string | null {
+export function matchLanguages(languages: string[], acceptLanguages: readonly string[]): string | null {
   {
     const lang = acceptLanguages.map(userLang => languages.find(lang => lang.startsWith(userLang))).filter(v => !!v)[0]
     if (lang)