diff --git a/CHANGELOG.md b/CHANGELOG.md index d2864dc..2138cdb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Possibility to set a default account - Dark mode +- Use the browser's preferred language if available ### Changed - The style has been entirely reworked using Bootstrap instead of Bulma diff --git a/src/locales_utils.js b/src/locales_utils.js new file mode 100644 index 0000000..eead437 --- /dev/null +++ b/src/locales_utils.js @@ -0,0 +1,19 @@ +import { allowedLocales } from './const'; + +const fallBackValue = 'en'; + +const getShortLanguageCode = (language) => { + language = language.split('-')[0]; + language = language.split('_')[0]; + return language; +}; + +export const getDefaultLocale = () => { + for (const lang of navigator.languages) { + const lang_short = getShortLanguageCode(lang); + if (allowedLocales.includes(lang_short)) { + return lang_short; + } + } + return fallBackValue; +}; diff --git a/src/main.js b/src/main.js index 77afc05..489809b 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,7 @@ import './assets/main.sass'; import { allowedColorModes, allowedLocales } from './const'; +import { getDefaultLocale } from './locales_utils'; import { createApp } from 'vue'; import { createI18n } from 'vue-i18n'; import { useStorage } from '@vueuse/core'; @@ -22,7 +23,7 @@ const setGlobalAttribute = (attrName, storageName, defaultValue, allowedValues) 'defaultValue': defaultValue, }; }; -const locale = setGlobalAttribute('lang', 'sake-locale', 'en', allowedLocales); +const locale = setGlobalAttribute('lang', 'sake-locale', getDefaultLocale(), allowedLocales); const colorMode = setGlobalAttribute('data-bs-theme', 'sake-color-mode', 'light', allowedColorModes); const i18n = createI18n({