Use the browser's preferred language if available

This commit is contained in:
Rodolphe Bréard 2023-09-26 10:58:29 +02:00
parent 36bd59ef02
commit dd3b797ec2
3 changed files with 22 additions and 1 deletions

View file

@ -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

19
src/locales_utils.js Normal file
View file

@ -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;
};

View file

@ -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({