mirror of
https://github.com/elk-zone/elk.git
synced 2024-11-21 17:05:22 +03:00
refactor: use head script instead of cookie
This commit is contained in:
parent
dcf0dd7018
commit
55aff4778b
8 changed files with 62 additions and 45 deletions
1
app.vue
1
app.vue
|
@ -3,6 +3,7 @@ setupPageHeader()
|
|||
provideGlobalCommands()
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
if (process.server && !route.path.startsWith('/settings')) {
|
||||
useHead({
|
||||
meta: [
|
||||
|
|
|
@ -6,6 +6,7 @@ import type { ElkMasto, UserLogin } from '~/types'
|
|||
import {
|
||||
DEFAULT_POST_CHARS_LIMIT,
|
||||
STORAGE_KEY_CURRENT_USER,
|
||||
STORAGE_KEY_CURRENT_USER_HANDLE,
|
||||
STORAGE_KEY_NOTIFICATION,
|
||||
STORAGE_KEY_NOTIFICATION_POLICY,
|
||||
STORAGE_KEY_SERVERS,
|
||||
|
@ -89,12 +90,10 @@ if (process.client) {
|
|||
window.addEventListener('visibilitychange', windowReload, { capture: true })
|
||||
}
|
||||
}, { immediate: true, flush: 'post' })
|
||||
}
|
||||
|
||||
export const currentUserHandle = computed(() => currentUser.value?.account.id
|
||||
? `${currentUser.value.account.acct}@${currentInstance.value?.uri || currentServer.value}`
|
||||
: '[anonymous]',
|
||||
)
|
||||
// for injected script to read
|
||||
useLocalStorage<string>(STORAGE_KEY_CURRENT_USER_HANDLE, computed(() => currentUser.value?.account.acct || ''))
|
||||
}
|
||||
|
||||
export const useUsers = () => users
|
||||
export const useSelfAccount = (user: MaybeComputedRef<mastodon.v1.Account | undefined>) =>
|
||||
|
|
|
@ -8,6 +8,7 @@ export const STORAGE_KEY_DRAFTS = 'elk-drafts'
|
|||
export const STORAGE_KEY_USERS = 'elk-users'
|
||||
export const STORAGE_KEY_SERVERS = 'elk-servers'
|
||||
export const STORAGE_KEY_CURRENT_USER = 'elk-current-user'
|
||||
export const STORAGE_KEY_CURRENT_USER_HANDLE = 'elk-current-user-handle'
|
||||
export const STORAGE_KEY_NOTIFY_TAB = 'elk-notify-tab'
|
||||
export const STORAGE_KEY_FIRST_VISIT = 'elk-first-visit'
|
||||
export const STORAGE_KEY_SETTINGS = 'elk-settings'
|
||||
|
@ -20,7 +21,4 @@ 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_LOCALE = 'elk-lang'
|
||||
|
||||
export const HANDLED_MASTO_URLS = /^(https?:\/\/)?([\w\d-]+\.)+\w+\/(@[@\w\d-\.]+)(\/objects)?(\/\d+)?$/
|
||||
|
|
|
@ -80,7 +80,9 @@ const isRootPath = computedEager(() => route.name === 'settings')
|
|||
</MainContent>
|
||||
</div>
|
||||
<div flex-1 :class="isRootPath ? 'hidden lg:block' : 'block'">
|
||||
<ClientOnly>
|
||||
<NuxtPage />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
10
plugins/setup-font-size.client.ts
Normal file
10
plugins/setup-font-size.client.ts
Normal file
|
@ -0,0 +1,10 @@
|
|||
import { fontSizeMap } from '~/constants/options'
|
||||
import { DEFAULT_FONT_SIZE } from '~/constants'
|
||||
|
||||
export default defineNuxtPlugin(() => {
|
||||
const userSettings = useUserSettings()
|
||||
const html = document.querySelector('html')!
|
||||
watchEffect(() => {
|
||||
html.style.setProperty('--font-size', fontSizeMap[userSettings.value.fontSize || DEFAULT_FONT_SIZE])
|
||||
})
|
||||
})
|
|
@ -1,26 +0,0 @@
|
|||
import type { FontSize } from '~/composables/settings'
|
||||
import { COOKIE_KEY_FONT_SIZE, COOKIE_MAX_AGE, DEFAULT_FONT_SIZE } from '~/constants'
|
||||
import { fontSizeMap } from '~/constants/options'
|
||||
|
||||
export default defineNuxtPlugin(() => {
|
||||
const userSettings = useUserSettings()
|
||||
const cookieFontSize = useCookie<FontSize>(COOKIE_KEY_FONT_SIZE, { default: () => DEFAULT_FONT_SIZE, maxAge: COOKIE_MAX_AGE })
|
||||
if (!cookieFontSize.value || !fontSizeMap[cookieFontSize.value])
|
||||
cookieFontSize.value = DEFAULT_FONT_SIZE
|
||||
|
||||
if (process.server) {
|
||||
userSettings.value.fontSize = cookieFontSize.value
|
||||
useHead({
|
||||
style: [
|
||||
{ innerHTML: `:root { --font-size: ${fontSizeMap[cookieFontSize.value]}; }` },
|
||||
],
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
userSettings.value.fontSize = cookieFontSize.value
|
||||
watch(() => userSettings.value.fontSize, (size) => {
|
||||
document.documentElement.style.setProperty('--font-size', fontSizeMap[size])
|
||||
cookieFontSize.value = size
|
||||
}, { immediate: true })
|
||||
})
|
38
plugins/setup-head-script.server.ts
Normal file
38
plugins/setup-head-script.server.ts
Normal file
|
@ -0,0 +1,38 @@
|
|||
import { STORAGE_KEY_CURRENT_USER_HANDLE, STORAGE_KEY_SETTINGS } from '~/constants'
|
||||
import { fontSizeMap } from '~/constants/options'
|
||||
|
||||
/**
|
||||
* Injecting scripts before renders
|
||||
*/
|
||||
export default defineNuxtPlugin(() => {
|
||||
useHead({
|
||||
script: [
|
||||
{
|
||||
innerHTML: `
|
||||
;(function() {
|
||||
const handle = localStorage.getItem('${STORAGE_KEY_CURRENT_USER_HANDLE}')
|
||||
if (!handle)
|
||||
return
|
||||
const allSettings = JSON.parse(localStorage.getItem('${STORAGE_KEY_SETTINGS}') || '{}')
|
||||
const settings = allSettings[handle]
|
||||
if (!settings)
|
||||
return
|
||||
|
||||
const html = document.querySelector('html')
|
||||
${process.dev ? 'console.log(\'settings\', settings)' : ''}
|
||||
|
||||
const { fontSize, language } = settings || {}
|
||||
|
||||
if (fontSize) {
|
||||
const fontSizeMap = ${JSON.stringify(fontSizeMap)}
|
||||
html.style.setProperty('--font-size', fontSizeMap[fontSize])
|
||||
}
|
||||
|
||||
if (language) {
|
||||
html.setAttribute('lang', language)
|
||||
}
|
||||
})()`.trim().replace(/\s*\n+\s*/g, ';'),
|
||||
},
|
||||
],
|
||||
})
|
||||
})
|
|
@ -1,18 +1,17 @@
|
|||
import type { VueI18n } from 'vue-i18n'
|
||||
import type { LocaleObject } from 'vue-i18n-routing'
|
||||
import { COOKIE_KEY_LOCALE, COOKIE_MAX_AGE, DEFAULT_LANGUAGE } from '~/constants'
|
||||
import { DEFAULT_LANGUAGE } from '~/constants'
|
||||
|
||||
export default defineNuxtPlugin(async (nuxt) => {
|
||||
const i18n = nuxt.vueApp.config.globalProperties.$i18n as VueI18n
|
||||
const { setLocale, locales } = i18n
|
||||
const supportLanguages = (locales as LocaleObject[]).map(locale => locale.code)
|
||||
const cookieLocale = useCookie(COOKIE_KEY_LOCALE, { maxAge: COOKIE_MAX_AGE })
|
||||
const userSettings = useUserSettings()
|
||||
|
||||
if (process.server) {
|
||||
const headers = useRequestHeaders()
|
||||
|
||||
let lang = cookieLocale.value
|
||||
let lang = userSettings.value.language
|
||||
if (!lang || !supportLanguages.includes(lang)) {
|
||||
// first visit
|
||||
if (headers['accept-language']) {
|
||||
|
@ -24,22 +23,18 @@ export default defineNuxtPlugin(async (nuxt) => {
|
|||
lang = DEFAULT_LANGUAGE
|
||||
}
|
||||
}
|
||||
userSettings.value.language = cookieLocale.value = lang
|
||||
|
||||
if (lang !== i18n.locale)
|
||||
await setLocale(cookieLocale.value)
|
||||
await setLocale(userSettings.value.language)
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
// could be null if browser don't accept cookie
|
||||
if (!cookieLocale.value || !supportLanguages.includes(cookieLocale.value))
|
||||
cookieLocale.value = DEFAULT_LANGUAGE
|
||||
userSettings.value.language = cookieLocale.value
|
||||
if (!userSettings.value.language || !supportLanguages.includes(userSettings.value.language))
|
||||
userSettings.value.language = DEFAULT_LANGUAGE
|
||||
|
||||
watch(() => userSettings.value.language, (lang) => {
|
||||
if (lang !== cookieLocale.value)
|
||||
cookieLocale.value = lang
|
||||
if (lang !== i18n.locale)
|
||||
setLocale(lang)
|
||||
}, { immediate: true })
|
||||
|
|
Loading…
Reference in a new issue