feat: color settings (#92)

* feat: color settings * fix: node 12 optional chaining * read docus settings * update docs * Update docs/content/2.usage/1.configuration.md Co-authored-by: Sébastien Chopin <[email protected]>
nuxt-themes · Feb 24, 2021 · 57af79d · 57af79d · vercel · Feb 24, 2021
1 parent d0ff5c9
commit 57af79d
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 31 deletions.
diff --git a/docs/content/2.usage/1.configuration.md b/docs/content/2.usage/1.configuration.md
@@ -8,6 +8,8 @@ category: Usage
 
 You can create a `content/settings.json` file to configure the theme.
 
+The theme design is based on a `primary` color to make it easy to override, you can specify it using `colors.primary` in your `content/settings.json`, the color palette (50 to 900) is generated using [theme-colors](https://github.com/nuxt-contrib/theme-colors). Also the codeblocks color can be overriden in the same way with `colors.code`.
+
 ### Properties
 
 <table-container>
@@ -26,6 +28,8 @@ You can create a `content/settings.json` file to configure the theme.
 | `github.branch` | `String` | The default branch for the GitHub repository of your project, used in the `Edit this page on GitHub link` on each page (defaults to `main` if it cannot be detected). |
 | `github.dir` | `String` | The default dir of your project, used in the `Edit this page on GitHub link` on each page (defaults to `''`). Change it if docus is not at the root of your repository. |
 | `algolia` | `Object` | This option allows you to use [Algolia DocSearch](https://docsearch.algolia.com). In order to enable it, you need to provide at least the `apiKey` and the `indexName`, see example below. |
+| `colors.primary` | `String` | Primary color for the theme. |
+| `colors.code` | `String` | The color of codeblocks in the theme. |
 
 </table-container>
 
@@ -62,24 +66,16 @@ Take a look at the [@nuxt/content](https://github.com/algolia/docsearch-configs/
 
 ## Nuxt
 
-`docus` exports a function to setup the `nuxt.config.js` and allows you to add / override the [Nuxt config](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build).
+`docus` exports default configurations to setup the `nuxt.config.js` and allows you to add / override the [Nuxt config](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build).
 
 You can checkout the [default nuxt.config.js](https://github.com/nuxt/docus/blob/main/theme/nuxt.config.js) from docus. We use [defu.arrayFn](https://github.com/nuxt-contrib/defu#array-function-merger) to merge the default configuration with the one provided.
 
-The theme design is based on a `primary` color to make it easy to override, you can specify it using `docus.colors.primary` in your `nuxt.config.js`, the color palette (50 to 900) is generated using [theme-colors](https://github.com/nuxt-contrib/theme-colors). Also the codeblocks color can be overriden in the same way with `docus.colors.code`.
-
 Example with custom configuration:
 
 ```ts [nuxt.config.js]
 import withDocus from 'docus'
 
 export default withDocus({
-  docus: {
-    colors: {
-      primary: '#E24F55',
-      code: '#8B5CF6'
-    }
-  },
   i18n: {
     locales: () => [{
       code: 'fr',

diff --git a/theme/index.js b/theme/index.js
@@ -1,19 +1,10 @@
 import defu from 'defu'
 import nuxtConfig from './nuxt.config'
 
-const defaultConfig = docusOptions => nuxtConfig(docusOptions)
-
 export function withDocus (userConfig) {
-  userConfig.docus = defu(userConfig.docus, {
-    colors: {
-      primary: '#06B6D4',
-      code: '#8B5CF6'
-    }
-  })
-
   const config = defu.arrayFn(
     userConfig,
-    defaultConfig(userConfig.docus)
+    nuxtConfig
   )
 
   if (userConfig.env && userConfig.env.GITHUB_TOKEN) {

diff --git a/theme/layouts/docs.vue b/theme/layouts/docs.vue
@@ -31,6 +31,9 @@ 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,6 +28,9 @@ 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/module.js b/theme/module.js
@@ -13,6 +13,16 @@ export default function docusModule () {
   const { nuxt, addLayout } = this
   const { options, hook } = this.nuxt
 
+  // read docus settings
+  const settingsPath = resolve(options.srcDir, 'content/settings.json')
+  try {
+    const docusSettings = require(settingsPath)
+
+    if (docusSettings.colors && docusSettings.colors.primary) {
+      options.meta.theme_color = docusSettings.colors.primary
+    }
+  } catch (err) { /* settings not found */ }
+
   // Inject content dir in private runtime config
   options.publicRuntimeConfig.contentDir = options.content.dir || 'content'
 

diff --git a/theme/nuxt.config.js b/theme/nuxt.config.js
@@ -3,7 +3,7 @@ import themeModule from './module'
 
 const r = path => resolve(__dirname, path)
 
-export default docusOptions => ({
+export default {
   target: 'static',
   ssr: true,
   privateRuntimeConfig: {
@@ -45,10 +45,14 @@ export default docusOptions => ({
   ],
   components: true,
   loading: {
-    color: docusOptions.colors.primary
+    color: 'var(--primary-500)'
   },
   meta: {
-    theme_color: docusOptions.colors.primary
+    /**
+     * Default theme color
+     * Will override by docus primary color
+     */
+    theme_color: '#06B6D4'
   },
   content: {
     markdown: {
@@ -70,7 +74,7 @@ export default docusOptions => ({
     classSuffix: ''
   },
   i18n: {
-    baseUrl: ({ $docus }) => $docus?.settings?.url || '',
+    baseUrl: ({ $docus }) => ($docus && $docus.settings && $docus.settings.url) || '',
     locales: [{
       code: 'en',
       iso: 'en-US',
@@ -112,4 +116,4 @@ export default docusOptions => ({
   server: {
     port: 4000
   }
-})
+}
diff --git a/theme/plugins/docus.js b/theme/plugins/docus.js
@@ -3,6 +3,7 @@ import defu from 'defu'
 import groupBy from 'lodash.groupby'
 import { joinURL, withoutTrailingSlash } from 'ufo'
 import { $fetch } from 'ohmyfetch/node'
+import { getColors } from 'theme-colors'
 import { compile } from '../utils/markdown'
 
 export default async function ({ app, ssrContext, $content, $config, nuxtState = {}, beforeNuxtRender }, inject) {
@@ -23,6 +24,15 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState =
       },
       lastRelease () {
         return this.releases && this.releases[0]
+      },
+      themeStyles () {
+        const colors = Object.entries(this.settings.colors).map(([key, color]) => [key, getColors(color)])
+        const styles = colors.map(([color, map]) => {
+          return Object.entries(map).map(([variant, value]) => {
+            return `--${color}-${variant}: ${value};`
+          }).join('')
+        }).join('')
+        return `:root {${styles}}`
       }
     },
     methods: {
@@ -45,9 +55,13 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState =
             apiUrl: 'https://api.github.com',
             dir: '',
             releases: true
+          },
+          colors: {
+            primary: '#06B6D4',
+            code: '#8B5CF6'
           }
         }
-        const { path, extension, ...settings } = await $content('settings').only(['title', 'url', 'logo', 'layout', 'twitter', 'github', 'algolia']).fetch().catch((e) => {
+        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
           console.warn('Please add a `settings.json` file inside the `content/` folder to customize this theme.')
         })

diff --git a/theme/tailwind.config.js b/theme/tailwind.config.js
@@ -7,7 +7,6 @@
 const path = require('path')
 const defaultTheme = require('tailwindcss/defaultTheme')
 const colors = require('tailwindcss/colors')
-const { getColors } = require('theme-colors')
 
 module.exports = ({ nuxt }) => {
   return {
@@ -30,8 +29,30 @@ module.exports = ({ nuxt }) => {
           sans: ['Inter var', ...defaultTheme.fontFamily.sans]
         },
         colors: {
-          primary: getColors(nuxt.options.docus.colors.primary),
-          code: getColors(nuxt.options.docus.colors.code)
+          primary: {
+            50: 'var(--primary-50)',
+            100: 'var(--primary-100)',
+            200: 'var(--primary-200)',
+            300: 'var(--primary-300)',
+            400: 'var(--primary-400)',
+            500: 'var(--primary-500)',
+            600: 'var(--primary-600)',
+            700: 'var(--primary-700)',
+            800: 'var(--primary-800)',
+            900: 'var(--primary-900)'
+          },
+          code: {
+            50: 'var(--code-50)',
+            100: 'var(--code-100)',
+            200: 'var(--code-200)',
+            300: 'var(--code-300)',
+            400: 'var(--code-400)',
+            500: 'var(--code-500)',
+            600: 'var(--code-600)',
+            700: 'var(--code-700)',
+            800: 'var(--code-800)',
+            900: 'var(--code-900)'
+          }
         },
         spacing: {
           18: '4.5rem'
@@ -86,12 +107,12 @@ module.exports = ({ nuxt }) => {
                 }
               },
               a: {
-                color: theme('colors.primary.500'),
+                color: 'var(--primary-500)',
                 fontWeight: theme('fontWeight.medium'),
                 textDecoration: 'none',
                 '&:hover': {
                   borderBottomWidth: 2,
-                  borderBottomColor: theme('colors.primary.500'),
+                  borderBottomColor: 'var(--primary-500)',
                   paddingBottom: '1px'
                 }
               },
@@ -154,7 +175,7 @@ module.exports = ({ nuxt }) => {
                 color: theme('colors.gray.100')
               },
               a: {
-                color: theme('colors.primary.400')
+                color: 'var(--primary-400)'
               },
               'ol > li::before': {
                 color: theme('colors.gray.400')