refactor: use head script instead of cookie

This commit is contained in:
Anthony Fu 2023-01-14 10:34:53 +01:00
parent dcf0dd7018
commit 55aff4778b
8 changed files with 62 additions and 45 deletions

View file

@ -3,6 +3,7 @@ setupPageHeader()
provideGlobalCommands() provideGlobalCommands()
const route = useRoute() const route = useRoute()
if (process.server && !route.path.startsWith('/settings')) { if (process.server && !route.path.startsWith('/settings')) {
useHead({ useHead({
meta: [ meta: [

View file

@ -6,6 +6,7 @@ import type { ElkMasto, UserLogin } from '~/types'
import { import {
DEFAULT_POST_CHARS_LIMIT, DEFAULT_POST_CHARS_LIMIT,
STORAGE_KEY_CURRENT_USER, STORAGE_KEY_CURRENT_USER,
STORAGE_KEY_CURRENT_USER_HANDLE,
STORAGE_KEY_NOTIFICATION, STORAGE_KEY_NOTIFICATION,
STORAGE_KEY_NOTIFICATION_POLICY, STORAGE_KEY_NOTIFICATION_POLICY,
STORAGE_KEY_SERVERS, STORAGE_KEY_SERVERS,
@ -89,12 +90,10 @@ if (process.client) {
window.addEventListener('visibilitychange', windowReload, { capture: true }) window.addEventListener('visibilitychange', windowReload, { capture: true })
} }
}, { immediate: true, flush: 'post' }) }, { immediate: true, flush: 'post' })
}
export const currentUserHandle = computed(() => currentUser.value?.account.id // for injected script to read
? `${currentUser.value.account.acct}@${currentInstance.value?.uri || currentServer.value}` useLocalStorage<string>(STORAGE_KEY_CURRENT_USER_HANDLE, computed(() => currentUser.value?.account.acct || ''))
: '[anonymous]', }
)
export const useUsers = () => users export const useUsers = () => users
export const useSelfAccount = (user: MaybeComputedRef<mastodon.v1.Account | undefined>) => export const useSelfAccount = (user: MaybeComputedRef<mastodon.v1.Account | undefined>) =>

View file

@ -8,6 +8,7 @@ export const STORAGE_KEY_DRAFTS = 'elk-drafts'
export const STORAGE_KEY_USERS = 'elk-users' export const STORAGE_KEY_USERS = 'elk-users'
export const STORAGE_KEY_SERVERS = 'elk-servers' export const STORAGE_KEY_SERVERS = 'elk-servers'
export const STORAGE_KEY_CURRENT_USER = 'elk-current-user' 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_NOTIFY_TAB = 'elk-notify-tab'
export const STORAGE_KEY_FIRST_VISIT = 'elk-first-visit' export const STORAGE_KEY_FIRST_VISIT = 'elk-first-visit'
export const STORAGE_KEY_SETTINGS = 'elk-settings' 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_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+)?$/ export const HANDLED_MASTO_URLS = /^(https?:\/\/)?([\w\d-]+\.)+\w+\/(@[@\w\d-\.]+)(\/objects)?(\/\d+)?$/

View file

@ -80,7 +80,9 @@ const isRootPath = computedEager(() => route.name === 'settings')
</MainContent> </MainContent>
</div> </div>
<div flex-1 :class="isRootPath ? 'hidden lg:block' : 'block'"> <div flex-1 :class="isRootPath ? 'hidden lg:block' : 'block'">
<NuxtPage /> <ClientOnly>
<NuxtPage />
</ClientOnly>
</div> </div>
</div> </div>
</div> </div>

View 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])
})
})

View file

@ -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 })
})

View 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, ';'),
},
],
})
})

View file

@ -1,18 +1,17 @@
import type { VueI18n } from 'vue-i18n' import type { VueI18n } from 'vue-i18n'
import type { LocaleObject } from 'vue-i18n-routing' 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) => { export default defineNuxtPlugin(async (nuxt) => {
const i18n = nuxt.vueApp.config.globalProperties.$i18n as VueI18n const i18n = nuxt.vueApp.config.globalProperties.$i18n as VueI18n
const { setLocale, locales } = i18n const { setLocale, locales } = i18n
const supportLanguages = (locales as LocaleObject[]).map(locale => locale.code) const supportLanguages = (locales as LocaleObject[]).map(locale => locale.code)
const cookieLocale = useCookie(COOKIE_KEY_LOCALE, { maxAge: COOKIE_MAX_AGE })
const userSettings = useUserSettings() const userSettings = useUserSettings()
if (process.server) { if (process.server) {
const headers = useRequestHeaders() const headers = useRequestHeaders()
let lang = cookieLocale.value let lang = userSettings.value.language
if (!lang || !supportLanguages.includes(lang)) { if (!lang || !supportLanguages.includes(lang)) {
// first visit // first visit
if (headers['accept-language']) { if (headers['accept-language']) {
@ -24,22 +23,18 @@ export default defineNuxtPlugin(async (nuxt) => {
lang = DEFAULT_LANGUAGE lang = DEFAULT_LANGUAGE
} }
} }
userSettings.value.language = cookieLocale.value = lang
if (lang !== i18n.locale) if (lang !== i18n.locale)
await setLocale(cookieLocale.value) await setLocale(userSettings.value.language)
return return
} }
// could be null if browser don't accept cookie // could be null if browser don't accept cookie
if (!cookieLocale.value || !supportLanguages.includes(cookieLocale.value)) if (!userSettings.value.language || !supportLanguages.includes(userSettings.value.language))
cookieLocale.value = DEFAULT_LANGUAGE userSettings.value.language = DEFAULT_LANGUAGE
userSettings.value.language = cookieLocale.value
watch(() => userSettings.value.language, (lang) => { watch(() => userSettings.value.language, (lang) => {
if (lang !== cookieLocale.value)
cookieLocale.value = lang
if (lang !== i18n.locale) if (lang !== i18n.locale)
setLocale(lang) setLocale(lang)
}, { immediate: true }) }, { immediate: true })