fix(docs): fix theme switch on SSG (#3435)

* fix(docs): fix theme switch on SSg * chore: update CI commands * chore: remove gradient from loading docs * chore: remove build:analysis script from start:ci * chore: fix jumping header banner * fix(docs): missing page urls, added 404 page --------- Co-authored-by: Yauheni Prakopchyk <[email protected]>
epicmaxco · May 25, 2023 · 6a77ad1 · 6a77ad1
1 parent 6c6350c
commit 6a77ad1
Show file tree

Hide file tree

Showing 18 changed files with 89 additions and 74 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
  "scripts": {
  "serve": "yarn workspace vuestic-ui serve",
  "serve:book": "yarn workspace vuestic-ui serve",
+ "start:docs:ci": "yarn workspace docs start:ci",
  "serve:production": "yarn workspace vuestic-ui serve:production",
  "lint": "yarn workspace vuestic-ui lint",
  "build": "yarn workspace vuestic-ui build",

diff --git a/...s/docs/components/HeaderBanner.client.vue → packages/docs/components/HeaderBanner.vue b/...s/docs/components/HeaderBanner.client.vue → packages/docs/components/HeaderBanner.vue
@@ -101,6 +101,8 @@ import { ref } from 'vue'
 
 import { useElementTextColor } from 'vuestic-ui'
 
+const officialPartnerCookie = useCookie('banner')
+
 const props = defineProps({
  closeable: {
  type: Boolean,
@@ -115,11 +117,11 @@ const props = defineProps({
 const textColor = useElementTextColor('primary')
 
 const closeable = ref(props.closeable)
-const isHidden = ref(closeable.value && localStorage.getItem('banner') === 'official-partner')
+const isHidden = ref(closeable.value && officialPartnerCookie.value === 'official-partner')
 
 const hide = () => {
  if (closeable.value) {
- localStorage.setItem('banner', 'official-partner')
+ officialPartnerCookie.value = 'official-partner'
  isHidden.value = true
  }
 }

diff --git a/packages/docs/composables/useDocsScroll.ts b/packages/docs/composables/useDocsScroll.ts
@@ -2,6 +2,7 @@ export const useDocsScroll = () => {
  const route = useRoute()
 
  const scrollTop = () => {
+ if (typeof document === 'undefined') { return }
  const pageContent = document.querySelector('.docs-layout__main-content')
 
  if (pageContent) {
@@ -11,6 +12,7 @@ export const useDocsScroll = () => {
 
  const scrollToElement = () => {
  if (route.hash) {
+ if (typeof document === 'undefined') { return }
  const el = document.querySelector(route.hash)
 
  el?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })

diff --git a/packages/docs/layouts/default.vue b/packages/docs/layouts/default.vue
@@ -1,5 +1,6 @@
 <template>
- <div class="docs-layout">
+ <div class="docs-layout" :key="currentPresetName + isMounted">
+ <div v-if="!isMounted" class="docs-layout__loader" />
  <div
  ref="header"
  class="docs-layout__header"
@@ -31,16 +32,14 @@
 <script setup lang="ts">
 import { useColors } from 'vuestic-ui'
 import { useDocsScroll } from '../composables/useDocsScroll';
+import { useIsMounted } from 'vuestic-ui/src/composables/useIsMounted'
 
-const cookie = useCookie('vuestic-theme')
-const { applyPreset } = useColors()
+const { currentPresetName } = useColors()
 const breakpoints = useBreakpoint()
 
 const isSidebarVisible = ref(!breakpoints.smDown)
 const isOptionsVisible = ref(false)
 
-applyPreset(cookie.value || 'light')
-
 watch(() => breakpoints.smDown, (newValue, oldValue) => {
  if (newValue && !oldValue) {
  isSidebarVisible.value = false
@@ -75,6 +74,8 @@ useHead({
  { src: 'https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js', type: 'module' },
  ],
 })
+
+const isMounted = useIsMounted()
 </script>
 
 <style lang="scss">
@@ -97,6 +98,16 @@ html {
  overflow: hidden;
  font-family: var(--va-font-family);
 
+ &__loader {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 9999999;
+ background: var(--va-background-primary);
+ }
+
  &__header {
  width: 100%;
  background: var(--va-white);

diff --git a/packages/docs/layouts/landing.vue b/packages/docs/layouts/landing.vue
@@ -7,9 +7,6 @@
 </template>
 
 <script lang="ts" setup>
-import { useColors } from 'vuestic-ui'
-
-
 useHead({
  title: 'Vuestic UI — Vue 3 UI framework',
  link: [
@@ -19,9 +16,6 @@ useHead({
 </script>
 
 <style lang="scss" scoped>
-// Need to import tailwind in layout, because otherwise Vuestic component's css will has a higher priority
-// @import '~/assets/css/tailwind.css';
-
 .landing {
  background: var(--va-background-secondary);
  color: var(--va-on-background-secondary)

diff --git a/packages/docs/modules/page-config/runtime/usePageConfig.ts b/packages/docs/modules/page-config/runtime/usePageConfig.ts
@@ -38,23 +38,19 @@ const getConfig = async (name: string) => {
 export const usePageConfigs = () => files
 
 export const usePageConfig = async (name: Ref<string>) => {
- try {
- const config = ref<PageConfigOptions | null>(await getConfig(unref(name))) as Ref<PageConfigOptions | null>
-
- watch(name, async () => {
- try {
- config.value = null
- config.value = await getConfig(unref(name))
- }
- catch (e) {
- console.error(e)
- }
- })
-
- return config
- }
- catch (e) {
- console.log(e)
- return ref(null)
- }
+ const isLoading = ref(false)
+ const config = ref<PageConfigOptions | null>(await getConfig(unref(name))) as Ref<PageConfigOptions | null>
+
+ watch(name, async () => {
+ try {
+ isLoading.value = true
+ config.value = await getConfig(unref(name))
+ isLoading.value = false
+ }
+ catch (e) {
+ console.error(e)
+ }
+ })
+
+ return { config, isLoading }
 }
diff --git a/packages/docs/nuxt.config.ts b/packages/docs/nuxt.config.ts
@@ -1,17 +1,9 @@
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
- // TEST Config
- routeRules: {
- '/': {static: true},
- '/en/**': {static: true},
- '/ru/**': {static: true},
- '/_nuxt/**': { headers: { 'cache-control': 's-maxage=0' } },
- },
  app: {
  head: {
  link: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
- { rel: 'icon', type: 'image/png', href: '/favicon.png' },
  ],
 
  meta: [

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -3,8 +3,9 @@
  "name": "docs",
  "version": "0.0.1",
  "scripts": {
- "build": "yarn build:analysis && nuxt build --max_old_space_size=4096",
- "build:ci": "yarn build:analysis && nuxt build --max_old_space_size=4096",
+ "build": "yarn build:analysis && nuxt generate --max_old_space_size=4096",
+ "build:ci": "yarn build:analysis && nuxt generate",
+ "start:ci": "yarn preview",
  "build:analysis": "yarn workspace sandbox build:analysis ../docs/page-config/getting-started/tree-shaking",
  "serve": "yarn build:analysis --use-cache && nuxt dev",
  "generate": "yarn build:analysis && nuxt generate --max_old_space_size=4096",

diff --git a/packages/docs/page-config/extensions/unocss/translation/en.json b/packages/docs/page-config/extensions/unocss/translation/en.json
@@ -3,7 +3,7 @@
  "text": "Here is guide how to integrate Vuestic UI colors and breakpoints into UnoCSS configuration.",
  "preparation": {
  "title": "Preparations",
- "text0": "Before we start with integration, please ensure you have both UnoCSS and Vuestic UI installed. If that's not the case - here are installation guide for the [Vuestic UI](/getting-started/installation) and for the [UnoCSS]((https://github.com/unocss/unocss#installation))[[target=_blank]].",
+ "text0": "Before we start with integration, please ensure you have both UnoCSS and Vuestic UI installed. If that's not the case - here are installation guide for the [Vuestic UI](/getting-started/installation) and for the [UnoCSS](https://github.com/unocss/unocss#installation)[[target=_blank]].",
  "text1": "Also you need to install `unocss-preset-theme` preset."
  },
  "setup": {

diff --git a/packages/docs/page-config/extensions/unocss/translation/ru.json b/packages/docs/page-config/extensions/unocss/translation/ru.json
@@ -3,7 +3,7 @@
  "text": "На этой странице представлено описание интеграции цветов и брейкпоинтов Vuestic UI в файл конфигурации UnoCSS.",
  "preparation": {
  "title": "Подготовка",
- "text0": "Прежде чем начать интеграцию, пожалуйста, убедитесь что вы установили и UnoCSS, и Vuestic UI. Если же нет, то вот инструкция по установке для [Vuestic UI](/getting-started/installation) и [UnoCSS]((https://github.com/unocss/unocss#installation))[[target=_blank]].",
+ "text0": "Прежде чем начать интеграцию, пожалуйста, убедитесь что вы установили и UnoCSS, и Vuestic UI. Если же нет, то вот инструкция по установке для [Vuestic UI](/getting-started/installation) и [UnoCSS](https://github.com/unocss/unocss#installation)[[target=_blank]].",
  "text1": "Также вам нужно установить пресет `unocss-preset-theme`."
  },
  "setup": {

diff --git a/packages/docs/page-config/getting-started/ssr-guide/index.ts b/packages/docs/page-config/getting-started/ssr-guide/index.ts
@@ -17,7 +17,7 @@ export default definePageConfig({
  block.subtitle("ssrGuide.solutions.title"),
  block.paragraph("ssrGuide.solutions.description"),
 
- block.link("ssrGuide.solutions.nuxt", "/en/getting-started/nuxt"),
+ block.link("ssrGuide.solutions.nuxt", "/getting-started/nuxt"),
 
  block.headline("ssrGuide.solutions.viteSsrPlugin.title"),
  block.paragraph("ssrGuide.solutions.viteSsrPlugin.description"),

diff --git a/packages/docs/pages/404.vue b/packages/docs/pages/404.vue
@@ -0,0 +1,14 @@
+<template>
+ <div>
+ <h1 class="text-center pa-4 py-8">Page not found</h1>
+
+ <div class="text-center gap-2 flex justify-center">
+ <va-button
+ color="#1f2328"
+ to="https://github.com/epicmaxco/vuestic-ui/issues/new?assignees=&labels=docs&projects=&template=docs-template.md"
+ >
+ Make a Github Issue
+ </va-button>
+ </div>
+ </div>
+</template>
diff --git a/packages/docs/pages/[page-config-category]/[page].vue b/packages/docs/pages/[page-config-category]/[page].vue
@@ -1,7 +1,7 @@
 <template>
  <div class="page-config">
  <PageConfig
- v-if="config"
+ v-if="!isLoading && config"
  :page-config="config"
  />
  <PageConfigSkeleton v-else />
@@ -38,9 +38,16 @@ const pageConfigName = computed(() => {
  return path.slice(1)
 })
 
-const config = await usePageConfig(pageConfigName);
+const { config, isLoading } = await usePageConfig(pageConfigName);
 const tabTitlePrefix = 'Vuestic UI'
 
+const router = useRouter()
+watch(config, () => {
+ if (!config.value) {
+ router.push('/404')
+ }
+}, { immediate: true })
+
 const compileTranslations = (translations: Record<string, any>): any => {
  if (Array.isArray(translations)) {
  return translations.map((translation) => compileTranslations(translation))

diff --git a/packages/nuxt/src/runtime/plugin.ts b/packages/nuxt/src/runtime/plugin.ts
@@ -31,7 +31,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
  const configWithColors: PartialGlobalConfig = {
  ...userConfig,
  colors: {
- currentPresetName: themeCookie.value || userConfig.colors?.currentPresetName,
+ currentPresetName: themeCookie.value || userConfig.colors?.currentPresetName || 'light',
  ...userConfig.colors,
  }
  }

diff --git a/packages/ui/src/composables/useColors.ts b/packages/ui/src/composables/useColors.ts
@@ -47,12 +47,12 @@ export const useColors = () => {
  const { setGlobalConfig, globalConfig } = gc
 
  const colors = useReactiveComputed<ColorVariables>({
- get: () => globalConfig.value.colors!.variables,
+ get: () => globalConfig.value.colors!.presets[globalConfig.value.colors!.currentPresetName],
  set: (v: ColorVariables) => { setColors(v) },
  })
 
  const setColors = (colors: Partial<ColorVariables>): void => {
- globalConfig.value.colors!.variables = {
+ globalConfig.value.colors!.presets[globalConfig.value.colors!.currentPresetName] = {
  ...globalConfig.value.colors.variables,
  ...colors,
  } as ColorVariables
@@ -157,7 +157,6 @@ export const useColors = () => {
  if (!globalConfig.value.colors!.presets[presetName]) {
  return warn(`Preset ${presetName} does not exist`)
  }
- globalConfig.value.colors!.variables = { ...globalConfig.value.colors!.presets[presetName] }
  }
 
  return {

diff --git a/packages/ui/src/services/color/plugin/create-color-config-plugin.ts b/packages/ui/src/services/color/plugin/create-color-config-plugin.ts
@@ -42,10 +42,6 @@ export const createColorConfigPlugin = (app: App, config?: PartialGlobalConfig)
  updateColors(newValue)
  }, { immediate: true, deep: true })
 
- if (config?.colors?.currentPresetName) {
- applyPreset(config.colors.currentPresetName)
- }
-
  return {
  renderCSSVariables,
  updateColors,

diff --git a/packages/ui/src/services/global-config/global-config.ts b/packages/ui/src/services/global-config/global-config.ts
@@ -13,21 +13,23 @@ import { getColorsClassesDefaultConfig } from '../colors-classes/config/default'
 
 export const GLOBAL_CONFIG = Symbol('GLOBAL_CONFIG')
 
-export const createGlobalConfig = () => {
- const globalConfig = ref<GlobalConfig>({
- colors: getColorDefaultConfig(),
- icons: getIconDefaultConfig(),
- components: getComponentsDefaultConfig(),
- breakpoint: getBreakpointDefaultConfig(),
- i18n: getI18nConfigDefaults(),
- colorsClasses: getColorsClassesDefaultConfig(),
- /**
- * global config variable to pass nuxt-link component to vuestic-ui via @vuestic/nuxt
- * TODO: give a try to integrate inertia js router components via this option
- * TODO: if this try won't be success, may be remake to provide/inject
- */
- routerComponent: undefined,
- }) as Ref<GlobalConfig>
+const getDefaultConfig = () => ({
+ colors: getColorDefaultConfig(),
+ icons: getIconDefaultConfig(),
+ components: getComponentsDefaultConfig(),
+ breakpoint: getBreakpointDefaultConfig(),
+ i18n: getI18nConfigDefaults(),
+ colorsClasses: getColorsClassesDefaultConfig(),
+ /**
+ * global config variable to pass nuxt-link component to vuestic-ui via @vuestic/nuxt
+ * TODO: give a try to integrate inertia js router components via this option
+ * TODO: if this try won't be success, may be remake to provide/inject
+ */
+ routerComponent: undefined,
+})
+
+export const createGlobalConfig = (defaultConfig: PartialGlobalConfig = {}) => {
+ const globalConfig = ref<GlobalConfig>(mergeDeep(getDefaultConfig(), defaultConfig)) as Ref<GlobalConfig>
 
  const getGlobalConfig = (): GlobalConfig => globalConfig.value
  const setGlobalConfig = (updater: GlobalConfig | GlobalConfigUpdater<GlobalConfig>) => {

diff --git a/packages/ui/src/services/global-config/plugin/index.ts b/packages/ui/src/services/global-config/plugin/index.ts
@@ -4,11 +4,9 @@ import { PartialGlobalConfig } from '../types'
 import { defineGlobalProperty, defineVuesticPlugin } from '../../vue-plugin/utils'
 
 /** Provides global configuration to Vuestic components */
-export const GlobalConfigPlugin = defineVuesticPlugin((config: PartialGlobalConfig | undefined) => ({
+export const GlobalConfigPlugin = defineVuesticPlugin((config: PartialGlobalConfig | undefined = {}) => ({
  install (app: App) {
- const globalConfig = createGlobalConfig()
-
- if (config) { globalConfig.mergeGlobalConfig(config) }
+ const globalConfig = createGlobalConfig(config)
 
  // @ts-ignore
  if (config?.componentsAll) {