fix: font-size ssr

This commit is contained in:
Anthony Fu 2022-12-24 00:19:17 +01:00
parent 597617b7e6
commit b40832a7eb
6 changed files with 34 additions and 19 deletions

View file

@ -1,6 +1,8 @@
<script lang="ts" setup>
import { FontSize } from 'composables/fontSize'
const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
import type { FontSize } from '~/composables/fontSize'
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as FontSize[]
const fontSize = getFontSize()
</script>
<template>
@ -12,7 +14,7 @@ const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
v-for="size in sizes"
:key="size"
:checked="size === fontSize"
@click="setFontSize(size as FontSize)"
@click="fontSize = size"
>
{{ size }}
</CommonDropdownItem>

View file

@ -17,7 +17,9 @@ export function getDefaultFeatureFlags(): FeatureFlags {
}
}
export const currentUserFeatureFlags = process.server ? computed(getDefaultFeatureFlags) : useUserLocalStorage(STORAGE_KEY_FEATURE_FLAGS, getDefaultFeatureFlags)
export const currentUserFeatureFlags = process.server
? computed(getDefaultFeatureFlags)
: useUserLocalStorage(STORAGE_KEY_FEATURE_FLAGS, getDefaultFeatureFlags)
export function useFeatureFlags() {
const featureFlags = currentUserFeatureFlags.value

View file

@ -1,11 +1,15 @@
import type { InjectionKey, Ref } from 'vue'
import { STORAGE_KEY_FONT_SIZE } from '~/constants'
export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
export const fontSize = useLocalStorage<FontSize>(STORAGE_KEY_FONT_SIZE, 'md')
export const InjectionKeyFontSize = Symbol('fontSize') as InjectionKey<Ref<FontSize>>
export function setFontSize(size: FontSize) {
fontSize.value = size
inject(InjectionKeyFontSize)!.value = size
}
export function getFontSize() {
return inject(InjectionKeyFontSize)!
}
export const fontSizeMap = {
@ -16,6 +20,22 @@ export const fontSizeMap = {
xl: '17px',
}
export function setFontSizeCSSVar() {
document.documentElement.style.setProperty('--font-size', fontSizeMap[fontSize.value])
export async function setupFontSize() {
const fontSize = useCookie<FontSize>(STORAGE_KEY_FONT_SIZE, { default: () => 'md' })
getCurrentInstance()?.appContext.app.provide(InjectionKeyFontSize, fontSize)
if (!process.server) {
watchEffect(() => {
document.documentElement.style.setProperty('--font-size', fontSizeMap[fontSize.value || 'md'])
})
}
else {
useHead({
style: [
{
innerHTML: `:root { --font-size: ${fontSizeMap[fontSize.value || 'md']}; }`,
},
],
})
}
}

View file

@ -66,10 +66,3 @@ export async function setupI18n() {
})
})
}
export async function setupFontSize() {
if (!process.server) {
setFontSizeCSSVar()
watch(fontSize, setFontSizeCSSVar)
}
}

View file

@ -1,5 +1,5 @@
html {
font-size: var(--font-size);
font-size: var(--font-size, 15px);
}
@font-face {

View file

@ -1,6 +1,4 @@
:root {
--font-size: 15px;
--c-primary: #EA9E44;
--c-primary-active: #C16929;
--c-primary-light: #EA9E4466;