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> <script lang="ts" setup>
import { FontSize } from 'composables/fontSize' import type { FontSize } from '~/composables/fontSize'
const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as FontSize[]
const fontSize = getFontSize()
</script> </script>
<template> <template>
@ -12,7 +14,7 @@ const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
v-for="size in sizes" v-for="size in sizes"
:key="size" :key="size"
:checked="size === fontSize" :checked="size === fontSize"
@click="setFontSize(size as FontSize)" @click="fontSize = size"
> >
{{ size }} {{ size }}
</CommonDropdownItem> </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() { export function useFeatureFlags() {
const featureFlags = currentUserFeatureFlags.value const featureFlags = currentUserFeatureFlags.value

View file

@ -1,11 +1,15 @@
import type { InjectionKey, Ref } from 'vue'
import { STORAGE_KEY_FONT_SIZE } from '~/constants' import { STORAGE_KEY_FONT_SIZE } from '~/constants'
export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
export const InjectionKeyFontSize = Symbol('fontSize') as InjectionKey<Ref<FontSize>>
export const fontSize = useLocalStorage<FontSize>(STORAGE_KEY_FONT_SIZE, 'md')
export function setFontSize(size: FontSize) { export function setFontSize(size: FontSize) {
fontSize.value = size inject(InjectionKeyFontSize)!.value = size
}
export function getFontSize() {
return inject(InjectionKeyFontSize)!
} }
export const fontSizeMap = { export const fontSizeMap = {
@ -16,6 +20,22 @@ export const fontSizeMap = {
xl: '17px', xl: '17px',
} }
export function setFontSizeCSSVar() { export async function setupFontSize() {
document.documentElement.style.setProperty('--font-size', fontSizeMap[fontSize.value]) 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 { html {
font-size: var(--font-size); font-size: var(--font-size, 15px);
} }
@font-face { @font-face {

View file

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