refactor: setup

This commit is contained in:
Anthony Fu 2022-12-28 04:50:29 +01:00
parent 970b6538e2
commit 3079867e2a
7 changed files with 38 additions and 42 deletions

View file

@ -1,10 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
setupPageHeader() setupPageHeader()
setupEmojis()
provideGlobalCommands() provideGlobalCommands()
await setupI18n()
// We want to trigger rerendering the page when account changes // We want to trigger rerendering the page when account changes
const key = computed(() => `${currentUser.value?.server ?? currentServer.value}:${currentUser.value?.account.id || ''}`) const key = computed(() => `${currentUser.value?.server ?? currentServer.value}:${currentUser.value?.account.id || ''}`)
</script> </script>

View file

@ -7,7 +7,7 @@ const fontSize = useFontSizeRef()
<template> <template>
<select v-model="fontSize"> <select v-model="fontSize">
<option v-for="size in sizes" :key="size" :value="size"> <option v-for="size in sizes" :key="size" :value="size" :selected="fontSize === size">
{{ size }} {{ size }}
</option> </option>
</select> </select>

View file

@ -8,7 +8,7 @@ const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
<template> <template>
<select :value="locale" @input="e => setLocale((e.target as any).value)"> <select :value="locale" @input="e => setLocale((e.target as any).value)">
<option v-for="item in locales" :key="item.code" :value="item.code"> <option v-for="item in locales" :key="item.code" :value="item.code" :selected="locale === item.code">
{{ item.name }} {{ item.name }}
</option> </option>
</select> </select>

View file

@ -1,7 +1,7 @@
import { pwaInfo } from 'virtual:pwa-info' import { pwaInfo } from 'virtual:pwa-info'
import type { Link } from '@unhead/schema' import type { Link } from '@unhead/schema'
import type { Directions } from 'vue-i18n-routing' import type { Directions } from 'vue-i18n-routing'
import { APP_NAME, COOKIE_MAX_AGE, STORAGE_KEY_LANG } from '~/constants' import { APP_NAME } from '~/constants'
import type { LocaleObject } from '#i18n' import type { LocaleObject } from '#i18n'
export function setupPageHeader() { export function setupPageHeader() {
@ -46,37 +46,3 @@ export function setupPageHeader() {
link, link,
}) })
} }
export async function setupI18n() {
const { locale, setLocale, locales } = useI18n()
const cookieLocale = useCookie(STORAGE_KEY_LANG, { maxAge: COOKIE_MAX_AGE })
const isFirstVisit = cookieLocale.value == null
if (process.client && isFirstVisit) {
const userLang = (navigator.language || 'en-US').toLowerCase()
// cause vue-i18n not explicit export LocaleObject type
const supportLocales = unref(locales) as { code: string }[]
const lang = supportLocales.find(locale => userLang.startsWith(locale.code.toLowerCase()))?.code
|| supportLocales.find(locale => userLang.startsWith(locale.code.split('-')[0]))?.code
cookieLocale.value = lang || 'en-US'
}
if (cookieLocale.value && cookieLocale.value !== locale.value)
await setLocale(cookieLocale.value)
if (process.client) {
watchEffect(() => {
cookieLocale.value = locale.value
})
}
}
export async function setupEmojis() {
if (process.client) {
const promise = import('@emoji-mart/data').then(r => r.default)
const { init } = await import('emoji-mart')
init({
data: () => promise,
})
}
}

View file

@ -6,8 +6,6 @@ const { error } = defineProps<{
error: Partial<NuxtError> error: Partial<NuxtError>
}>() }>()
setupPageHeader()
// add more custom status codes messages here // add more custom status codes messages here
const errorCodes: Record<number, string> = { const errorCodes: Record<number, string> = {
404: 'Page not found', 404: 'Page not found',

9
plugins/setup-emojis.ts Normal file
View file

@ -0,0 +1,9 @@
export default defineNuxtPlugin(() => {
if (process.server)
return
const promise = import('@emoji-mart/data').then(r => r.default)
import('emoji-mart').then(r => r.init({
data: () => promise,
}))
})

26
plugins/setup-i18n.ts Normal file
View file

@ -0,0 +1,26 @@
import { COOKIE_MAX_AGE, STORAGE_KEY_LANG } from '~/constants'
export default defineNuxtPlugin(async (nuxt) => {
const i18n = nuxt.vueApp.config.globalProperties.$i18n
const { setLocale, locales } = nuxt.vueApp.config.globalProperties.$i18n
const cookieLocale = useCookie(STORAGE_KEY_LANG, { maxAge: COOKIE_MAX_AGE })
const isFirstVisit = cookieLocale.value == null
if (process.client && isFirstVisit) {
const userLang = (navigator.language || 'en-US').toLowerCase()
// cause vue-i18n not explicit export LocaleObject type
const supportLocales = unref(locales) as { code: string }[]
const lang = supportLocales.find(locale => userLang.startsWith(locale.code.toLowerCase()))?.code
|| supportLocales.find(locale => userLang.startsWith(locale.code.split('-')[0]))?.code
cookieLocale.value = lang || 'en-US'
}
if (cookieLocale.value && cookieLocale.value !== i18n.locale)
await setLocale(cookieLocale.value)
if (process.client) {
watchEffect(() => {
cookieLocale.value = i18n.locale
})
}
})