CloudToys/elk
1
0
Fork 0
Code

refactor: use head script instead of cookie

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app.vue
View File

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

9
composables/users.ts
View File

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

4
constants/index.ts
View File

@ -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+)?$/

4
pages/settings.vue
View File

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

10
plugins/setup-font-size.client.ts Normal file
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])
})
})

26
plugins/setup-font-size.ts
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 })
})

38
plugins/setup-head-script.server.ts Normal file
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, ';'),
},
],
})
})

15
plugins/setup-i18n.ts
View File

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