elk/composables/setups.ts

47 lines
1.5 KiB
TypeScript
Raw Normal View History

2022-11-30 00:22:35 +00:00
import { APP_NAME, STORAGE_KEY_LANG } from '~/constants'
2022-11-30 00:22:35 +00:00
export function setupPageHeader() {
const isDev = process.dev
const isPreview = useRuntimeConfig().public.env === 'staging'
2022-11-29 21:13:43 +00:00
const i18n = useI18n()
2022-11-30 00:22:35 +00:00
useHeadFixed({
2022-11-29 21:13:43 +00:00
htmlAttrs: {
lang: () => i18n.locale.value,
},
titleTemplate: title => `${title ? `${title} | ` : ''}${APP_NAME}${isDev ? ' (dev)' : isPreview ? ' (preview)' : ''}`,
bodyAttrs: {
class: 'overflow-x-hidden',
},
link: [
{ rel: 'icon', type: 'image/svg+png', href: isDev || isPreview ? '/favicon-dev.png' : '/favicon.png' },
],
})
// eslint-disable-next-line no-unused-expressions
isDark.value
}
2022-11-30 00:22:35 +00:00
export async function setupI18n() {
const { locale, setLocale, locales } = useI18n()
const isFirstVisit = !window.localStorage.getItem(STORAGE_KEY_LANG)
2022-11-30 00:22:35 +00:00
const localeStorage = useLocalStorage(STORAGE_KEY_LANG, locale.value)
if (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
localeStorage.value = lang || 'en-US'
}
2022-11-30 00:22:35 +00:00
if (localeStorage.value !== locale.value)
await setLocale(localeStorage.value)
watchEffect(() => {
localeStorage.value = locale.value
})
}