1
0

feat(i18n): use same languages names in display and translations sections

This commit is contained in:
userquin 2024-04-14 15:55:46 +02:00
parent c1f8e3efb5
commit d141985ea3
5 changed files with 41 additions and 3 deletions

View File

@ -1,7 +1,6 @@
<script lang="ts" setup>
import ISO6391 from 'iso-639-1'
import { getDisplayName, supportedTranslationLanguages } from 'virtual:iso-639-1'
const supportedTranslationLanguages = ISO6391.getLanguages([...supportedTranslationCodes])
const userSettings = useUserSettings()
const language = ref<string | null>(null)
@ -37,7 +36,7 @@ function removeDisabledTranslation(code: string) {
<div class="ms-4">
<ul>
<li v-for="langCode in userSettings.disabledTranslationLanguages" :key="langCode" class="flex items-center">
<div>{{ ISO6391.getNativeName(langCode) }}</div>
<div>{{ getDisplayName(langCode) }}</div>
<button class="btn-text" type="button" :title="$t('settings.language.translations.remove')" @click.prevent="removeDisabledTranslation(langCode)">
<span class="block i-ri:close-line" aria-hidden="true" />
</button>

8
iso-639-1.d.ts vendored Normal file
View File

@ -0,0 +1,8 @@
declare module 'virtual:iso-639-1' {
export interface AvailableLanguages {
code: string
nativeName: string
}
export const supportedTranslationLanguages: AvailableLanguages[]
export function getDisplayName(code: string): string
}

30
modules/iso-639-1.ts Normal file
View File

@ -0,0 +1,30 @@
import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
import { currentLocales } from '../config/i18n'
const virtualName = 'virtual:iso-639-1'
const resolvedVirtualName = `\0${virtualName}`
export default defineNuxtModule({
setup() {
addVitePlugin({
name: 'elk:iso-639-1',
enforce: 'pre',
resolveId(id) {
return id === virtualName ? resolvedVirtualName : null
},
async load(id) {
if (id === resolvedVirtualName) {
return `const languagesNames = ${JSON.stringify(currentLocales.reduce((acc, l) => {
acc[l.code] = l.name as string
return acc
}, {} as Record<string, string>))};
export const supportedTranslationLanguages = Object.entries(languagesNames).map(([code, nativeName]) => ({ code, nativeName }));
export function getDisplayName(code) {
return languagesNames[code] ?? new Intl.DisplayNames([code], { type: 'language' }).of(code);
}
`
}
},
})
},
})

View File

@ -27,6 +27,7 @@ export default defineNuxtConfig({
'@nuxt/test-utils/module',
...(isDevelopment || isWindows) ? [] : ['nuxt-security'],
'~/modules/emoji-mart-translation',
'~/modules/iso-639-1',
'~/modules/purge-comments',
'~/modules/build-env',
'~/modules/tauri/index',