Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages 1 Activity

fix: i18n SSR

Browse source
This commit is contained in:
Anthony Fu 2022-12-28 02:28:17 +01:00
parent d09b4deb52
commit 970b6538e2
5 changed files with 24 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app.vue
View file

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

31
composables/setups.ts
View file

@ -1,7 +1,7 @@
import { pwaInfo } from 'virtual:pwa-info'
import type { Link } from '@unhead/schema'
import type { Directions } from 'vue-i18n-routing'
import { APP_NAME, STORAGE_KEY_LANG } from '~/constants'
import { APP_NAME, COOKIE_MAX_AGE, STORAGE_KEY_LANG } from '~/constants'
import type { LocaleObject } from '#i18n'
export function setupPageHeader() {
@ -49,27 +49,26 @@ export function setupPageHeader() {
export async function setupI18n() {
const { locale, setLocale, locales } = useI18n()
const nuxtApp = useNuxtApp()
nuxtApp.hook('app:suspense:resolve', async () => {
const isFirstVisit = process.server ? false : !window.localStorage.getItem(STORAGE_KEY_LANG)
const localeStorage = process.server ? ref('en-US') : useLocalStorage(STORAGE_KEY_LANG, locale.value)
const cookieLocale = useCookie(STORAGE_KEY_LANG, { maxAge: COOKIE_MAX_AGE })
const isFirstVisit = cookieLocale.value == null
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
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
localeStorage.value = lang || 'en-US'
}
cookieLocale.value = lang || 'en-US'
}
if (localeStorage.value !== locale.value)
await setLocale(localeStorage.value)
if (cookieLocale.value && cookieLocale.value !== locale.value)
await setLocale(cookieLocale.value)
if (process.client) {
watchEffect(() => {
localeStorage.value = locale.value
cookieLocale.value = locale.value
})
})
}
}
export async function setupEmojis() {

3
constants/index.ts
View file

@ -19,7 +19,10 @@ export const STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS = 'elk-hide-explore-tags-tips'
export const STORAGE_KEY_NOTIFICATION = 'elk-notification'
export const STORAGE_KEY_NOTIFICATION_POLICY = 'elk-notification-policy'
export const COOKIE_MAX_AGE = 10 * 365 * 24 * 60 * 60 * 1000
export const COOKIE_KEY_FONT_SIZE = 'elk-font-size'
export const COOKIE_KEY_COLOR_MODE = 'elk-color-mode'
export const COOKIE_KEY_LOCALE = 'elk-locale'
export const HANDLED_MASTO_URLS = /^(https?:\/\/)?([\w\d-]+\.)+\w+\/(@[@\w\d-\.]+)(\/objects)?(\/\d+)?$/

4
plugins/setup-color-mode.ts
View file

@ -1,9 +1,9 @@
import type { ColorMode } from '~/types'
import { InjectionKeyColorMode } from '~/constants/symbols'
import { COOKIE_KEY_COLOR_MODE } from '~/constants'
import { COOKIE_KEY_COLOR_MODE, COOKIE_MAX_AGE } from '~/constants'
export default defineNuxtPlugin((nuxt) => {
const cookieColorMode = useCookie<ColorMode | null>(COOKIE_KEY_COLOR_MODE, { default: () => null })
const cookieColorMode = useCookie<ColorMode | null>(COOKIE_KEY_COLOR_MODE, { maxAge: COOKIE_MAX_AGE })
const preferColorMode = process.server ? computed(() => 'light') : usePreferredColorScheme()
const colorMode = computed<ColorMode>({

4
plugins/setup-font-size.ts
View file

@ -1,11 +1,11 @@
import type { FontSize } from '~/types'
import { InjectionKeyFontSize } from '~/constants/symbols'
import { COOKIE_KEY_FONT_SIZE } from '~/constants'
import { COOKIE_KEY_FONT_SIZE, COOKIE_MAX_AGE } from '~/constants'
import { fontSizeMap } from '~/constants/options'
export default defineNuxtPlugin((nuxt) => {
const DEFAULT = 'md'
const cookieFontSize = useCookie<FontSize>(COOKIE_KEY_FONT_SIZE, { default: () => DEFAULT })
const cookieFontSize = useCookie<FontSize>(COOKIE_KEY_FONT_SIZE, { default: () => DEFAULT, maxAge: COOKIE_MAX_AGE })
nuxt.vueApp.provide(InjectionKeyFontSize, cookieFontSize)
if (!process.server) {