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) {