Internationalize language names and sorting

src/App.vue

@@ -134,11 +134,10 @@
 </style>
 
 <script>
-import { cloneDeep as _cloneDeep } from 'lodash-es'
 import { mdiBrightness6, mdiMagnify, mdiClose } from '@mdi/js'
 
 import SearchMenu from '@/routes/SearchMenu'
-import { changeLocale, LANGUAGE_OPTIONS } from '@/plugins/i18n'
+import { changeLocale, SUPPORTED_LANGUAGES } from '@/plugins/i18n'
 import AuthenticationModal from '@/components/AuthenticationModal'
 
 export default {
@@ -156,7 +155,6 @@ export default {
 	},
 
 	data: () => ({
-		languageOptions: _cloneDeep(LANGUAGE_OPTIONS),
 		drawer: false,
 		// Only used on phones
 		searchMenuOpened: false,
@@ -206,6 +204,15 @@ export default {
 			}
 
 			return links
+		},
+
+		languageOptions () {
+			return SUPPORTED_LANGUAGES.map(code => {
+				return {
+					text: this.$store.getters['i18n/fmtLanguage'](code),
+					value: code
+				}
+			}).sort((a, b) => this.$store.getters['i18n/compare'](a.text, b.text))
 		}
 	},
 

src/plugins/i18n.js

@@ -11,98 +11,29 @@ const messages = {
 	en: ENTranslations
 }
 
-export const LANGUAGE_OPTIONS = [
-	{
-		value: 'az',
-		text: 'Azerbaijani'
-	},
-	{
-		value: 'en',
-		text: 'English'
-	},
-	{
-		value: 'fr',
-		text: 'French'
-	},
-	{
-		value: 'de',
-		text: 'German'
-	},
-	{
-		value: 'el',
-		text: 'Greek'
-	},
-	{
-		value: 'es',
-		text: 'Spanish'
-	},
-	{
-		value: 'id',
-		text: 'Indonesian'
-	},
-	{
-		value: 'zh-Hans',
-		text: 'Chinese (Simplified, only loads the font)'
-	},
-	{
-		value: 'zh-Hant',
-		text: 'Chinese (Traditional)'
-	},
-	{
-		value: 'cs',
-		text: 'Czech'
-	},
-	{
-		value: 'ja',
-		text: 'Japanese (only loads fonts)'
-	},
-	{
-		value: 'ko',
-		text: 'Korean (only loads fonts)'
-	},
-	{
-		value: 'ru',
-		text: 'Russian'
-	},
-	{
-		value: 'lt',
-		text: 'Lithuanian'
-	},
-	{
-		value: 'ml',
-		text: 'Malayalam'
-	},
-	{
-		value: 'nb-NO',
-		text: 'Norwegian Bokmål'
-	},
-	{
-		value: 'tr',
-		text: 'Turkish'
-	},
-	{
-		value: 'pt-BR',
-		text: 'Portuguese (Brazil)'
-	},
-	{
-		value: 'bn-Beng',
-		text: 'Bengali (বাংলা)'
-	},
-	{
-		value: 'ar',
-		text: 'Arabic'
-	},
-	{
-		value: 'ckb',
-		text: 'Sorani Kurdish'
-	}
-	// Incomplete, DO NOT USE
-	/* { value: 'bn_latn', text: 'Bengali (Latin)' }, */
-].sort((a, b) => {
-	return a.text.localeCompare(b.text)
-})
-
-export const SUPPORTED_LANGUAGES = LANGUAGE_OPTIONS.map(l => l.value)
+export const SUPPORTED_LANGUAGES = [
+	'az',
+	'en',
+	'fr',
+	'de',
+	'el',
+	'es',
+	'id',
+	'zh-Hans',
+	'zh-Hant',
+	'cs',
+	'ja',
+	'ko',
+	'ru',
+	'lt',
+	'ml',
+	'nb-NO',
+	'tr',
+	'pt-BR',
+	'bn-Beng',
+	'ar',
+	'ckb'
+]
 
 export const i18n = new VueI18n({
 	locale: 'en', // set default locale

src/store/i18n-store.js

@@ -5,6 +5,8 @@ export const i18nStore = {
 		dateFormatter: null,
 		NF: null,
 		timeAgo: null,
+		languageFormatter: null,
+		collator: null,
 		rtl: false
 	}),
 
@@ -18,6 +20,10 @@ export const i18nStore = {
 				dateStyle: 'long'
 			})
 			state.NF = new Intl.NumberFormat(window.localStorage.getItem('NF_OVERRIDE') || intlLocale)
+			state.languageFormatter = new Intl.DisplayNames([intlLocale, 'en-US'], {
+				type: 'language'
+			})
+			state.collator = new Intl.Collator(intlLocale)
 			state.timeAgo = timeAgo
 
 			switch (intlLocale) {
@@ -47,6 +53,14 @@ export const i18nStore = {
 
 		fmtDateTime: state => dt => {
 			return state.fullFormatter.format(dt)
+		},
+
+		fmtLanguage: state => code => {
+			return state.languageFormatter.of(code)
+		},
+
+		compare: state => {
+			return state.collator.compare
 		}
 	}
 }