fix(theme-docs): prevent warning when global components missing (#542)

benjamincanac · pi0 · atinux · web-flow · commit 1c84288f02b1 · 2020-11-18T16:08:31.000+01:00
Co-authored-by: pooya parsa &lt;pyapar@gmail.com&gt;
Co-authored-by: S&eacute;bastien Chopin &lt;seb@nuxtjs.com&gt;
diff --git a/packages/theme-docs/src/components/app/AppFooter.vue b/packages/theme-docs/src/components/app/AppFooter.vue
@@ -7,9 +7,9 @@
           <BuiltWithNuxtDark class="h-4 dark-img" />
         </a>
       </div>
-      <div class="flex">
+      <div class="flex items-center space-x-4">
         <AppLangSwitcher />
-        <AppColorSwitcher class="ml-4" />
+        <AppColorSwitcher />
       </div>
     </div>
   </footer>
diff --git a/packages/theme-docs/src/components/app/AppNav.vue b/packages/theme-docs/src/components/app/AppNav.vue
@@ -38,17 +38,17 @@
             </li>
           </ul>
         </li>
-        <li class="lg:hidden">
+        <li class="lg:hidden space-x-2">
           <p class="mb-2 text-gray-500 uppercase tracking-wider font-bold text-sm lg:text-xs">More</p>
-          <div class="flex items-center ml-2">
+          <div class="flex items-center space-x-4">
             <a
               v-if="settings.twitter"
               :href="`https://twitter.com/${settings.twitter}`"
               target="_blank"
               rel="noopener noreferrer"
               title="Twitter"
               name="Twitter"
-              class="inline-flex text-gray-700 dark:text-gray-300 hover:text-primary-500 mr-4"
+              class="inline-flex text-gray-700 dark:text-gray-300 hover:text-primary-500"
             >
               <IconTwitter class="w-5 h-5" />
             </a>
@@ -59,12 +59,12 @@
               rel="noopener noreferrer"
               title="Github"
               name="Github"
-              class="inline-flex text-gray-700 dark:text-gray-300 hover:text-primary-500 mr-4"
+              class="inline-flex text-gray-700 dark:text-gray-300 hover:text-primary-500"
             >
               <IconGithub class="w-5 h-5" />
             </a>
 
-            <AppLangSwitcher class="mr-4" />
+            <AppLangSwitcher />
             <AppColorSwitcher />
           </div>
         </li>
diff --git a/packages/theme-docs/src/index.js b/packages/theme-docs/src/index.js
@@ -1,8 +1,11 @@
 import path from 'path'
 import defu from 'defu'
+import gracefulFs from 'graceful-fs'
 
 import tailwindConfig from './tailwind.config'
 
+const fs = gracefulFs.promises
+
 function themeModule () {
   // wait for nuxt options to be normalized
   const { nuxt } = this
@@ -13,11 +16,27 @@ function themeModule () {
   // Configure `static/ dir
   options.dir.static = path.resolve(options.rootDir, options.dir.static || 'static')
   // Configure `components/` dir
-  hook('components:dirs', (dirs) => {
-    dirs.push({
-      path: path.resolve(options.rootDir, 'components/global'),
-      global: true
-    })
+  hook('components:dirs', async (dirs) => {
+    const componentsDirPath = path.resolve(nuxt.options.rootDir, 'components')
+    const componentsDirStat = await fs.stat(componentsDirPath).catch(() => null)
+    if (componentsDirStat && componentsDirStat.isDirectory()) {
+      dirs.push({
+        path: componentsDirPath
+      })
+    } else {
+      nuxt.options.watch.push(componentsDirPath)
+    }
+
+    const globalComponentsDirPath = path.resolve(nuxt.options.rootDir, 'components/global')
+    const globalComponentsDirStat = await fs.stat(globalComponentsDirPath).catch(() => null)
+    if (globalComponentsDirStat && globalComponentsDirStat.isDirectory()) {
+      dirs.push({
+        path: globalComponentsDirPath,
+        global: true
+      })
+    } else {
+      nuxt.options.watch.push(globalComponentsDirPath)
+    }
   })
   // Configure content after each hook
   hook('content:file:beforeInsert', (document) => {
diff --git a/packages/theme-docs/src/pages/_.vue b/packages/theme-docs/src/pages/_.vue
@@ -20,11 +20,14 @@
         <div v-if="document.subtitle" class="-mt-4">
           <p class="text-gray-600 dark:text-gray-400">{{ document.subtitle }}</p>
         </div>
+
         <NuxtContent :document="document" />
       </article>
+
       <AppGithubLink :document="document" />
       <AppPrevNext :prev="prev" :next="next" />
     </div>
+
     <AppToc v-if="!document.fullscreen" :toc="document.toc" />
   </div>
 </template>
diff --git a/packages/theme-docs/src/pages/releases.vue b/packages/theme-docs/src/pages/releases.vue
@@ -26,6 +26,7 @@
         </div>
       </article>
     </div>
+
     <AppToc :toc="toc" />
   </div>
 </template>
diff --git a/packages/theme-docs/src/store/index.js b/packages/theme-docs/src/store/index.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import groupBy from 'lodash.groupby'
+import defu from 'defu'
 
 export const state = () => ({
   categories: {},
@@ -60,7 +61,7 @@ export const mutations = {
     state.settings.defaultBranch = branch
   },
   SET_SETTINGS (state, settings) {
-    state.settings = Object.assign({}, state.settings, settings, { filled: true })
+    state.settings = defu({ filled: true }, settings, state.settings)
     if (!state.settings.url) {
       console.warn('Please provide the `url` property in `content/setting.json`')
     }
@@ -143,7 +144,8 @@ export const actions = {
   },
   async fetchSettings ({ commit }) {
     try {
-      const settings = await this.$content('settings').fetch()
+      const { dir, extension, path, slug, to, createdAt, updatedAt, ...settings } = await this.$content('settings').fetch()
+
       commit('SET_SETTINGS', settings)
     } catch (e) {
       // eslint-disable-next-line no-console
diff --git a/packages/theme-docs/src/tailwind.config.js b/packages/theme-docs/src/tailwind.config.js
@@ -83,6 +83,9 @@ module.exports = ({ nuxt }) => ({
           },
           'pre code': {
             fontFamily: 'DM Mono'
+          },
+          'a code': {
+            color: theme('colors.primary.500')
           }
         }
       },
@@ -133,6 +136,9 @@ module.exports = ({ nuxt }) => ({
             backgroundColor: theme('colors.gray.800'),
             borderWidth: 0
           },
+          'a code': {
+            color: theme('colors.primary.500')
+          },
           thead: {
             color: theme('colors.gray.100'),
             borderBottomColor: theme('colors.gray.600')
