fix: move theme style into Docus plugin (#101)

* fix: move theme style into docus plugin * inject styles on client * ensure style is array * fix: improvements Co-authored-by: Sébastien Chopin <[email protected]>
nuxt-themes · Feb 25, 2021 · 615da9c · 615da9c · vercel · Feb 25, 2021
1 parent 57af79d
commit 615da9c
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git a/theme/layouts/docs.vue b/theme/layouts/docs.vue
@@ -31,9 +31,6 @@ export default {
         class: [...this.bodyClass]
       },
       ...i18nSeo,
-      style: [
-        { hid: 'docus-theme', cssText: this.$docus.themeStyles, type: 'text/css' }
-      ],
       meta: (i18nSeo.meta || []).concat([
         // Open Graph
         { hid: 'og:site_name', property: 'og:site_name', content: this.settings.title },

diff --git a/theme/layouts/readme.vue b/theme/layouts/readme.vue
@@ -28,9 +28,6 @@ export default {
         class: [...this.bodyClass]
       },
       ...i18nSeo,
-      style: [
-        { hid: 'docus-theme', cssText: this.$docus.themeStyles, type: 'text/css' }
-      ],
       meta: (i18nSeo.meta || []).concat([
         // Open Graph
         { hid: 'og:site_name', property: 'og:site_name', content: this.settings.title },

diff --git a/theme/plugins/docus.js b/theme/plugins/docus.js
@@ -6,6 +6,11 @@ import { $fetch } from 'ohmyfetch/node'
 import { getColors } from 'theme-colors'
 import { compile } from '../utils/markdown'
 
+const DEFAULT_THEME_COLORS = {
+  primary: '#06B6D4',
+  code: '#8B5CF6'
+}
+
 export default async function ({ app, ssrContext, $content, $config, nuxtState = {}, beforeNuxtRender }, inject) {
   const $docus = new Vue({
     data () {
@@ -26,7 +31,13 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState =
         return this.releases && this.releases[0]
       },
       themeStyles () {
-        const colors = Object.entries(this.settings.colors).map(([key, color]) => [key, getColors(color)])
+        let colors
+        try {
+          colors = Object.entries(this.settings.colors).map(([key, color]) => [key, getColors(color)])
+        } catch (e) {
+          console.warn('Could not parse custom colors:', e.message)
+          colors = Object.entries(DEFAULT_THEME_COLORS).map(([key, color]) => [key, getColors(color)])
+        }
         const styles = colors.map(([color, map]) => {
           return Object.entries(map).map(([variant, value]) => {
             return `--${color}-${variant}: ${value};`
@@ -56,10 +67,7 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState =
             dir: '',
             releases: true
           },
-          colors: {
-            primary: '#06B6D4',
-            code: '#8B5CF6'
-          }
+          colors: DEFAULT_THEME_COLORS
         }
         const { path, extension, ...settings } = await $content('settings').only(['title', 'url', 'logo', 'layout', 'twitter', 'github', 'algolia', 'colors']).fetch().catch((e) => {
           // eslint-disable-next-line no-console
@@ -73,6 +81,10 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState =
           settings.layout = 'readme'
         }
         this.settings = defu(settings, defaults)
+        // Update injected styles on HMR
+        if (process.dev && process.client) {
+          this.addThemeStyles()
+        }
       },
       async fetchReleases () {
         if (!this.settings.github && !this.settings.github.repo) {
@@ -145,6 +157,19 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState =
           docs.push({ slug: 'releases', title: 'Releases', category: 'Community', to: '/releases' })
         }
         this.categories[app.i18n.locale] = groupBy(docs, 'category')
+      },
+
+      addThemeStyles () {
+        if (!Array.isArray(app.head.style)) {
+          app.head.style = []
+        }
+        // Avoid duplicates (seems vue-meta don't handle it for style)
+        app.head.style = app.head.style.filter(s => s.hid !== 'docus-theme')
+        app.head.style.push({
+          hid: 'docus-theme',
+          cssText: this.themeStyles,
+          type: 'text/css'
+        })
       }
     }
   })
@@ -166,5 +191,8 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState =
     })
   }
 
+  // Inject colors as css variables
+  $docus.addThemeStyles()
+
   inject('docus', $docus)
 }