From 00aa35c9cd95ef3836bd9d74ac6374a8d6ce7eea Mon Sep 17 00:00:00 2001 From: Farnabaz Date: Thu, 25 Feb 2021 14:47:00 +0330 Subject: [PATCH 1/4] fix: move theme style into docus plugin --- theme/layouts/docs.vue | 3 --- theme/layouts/readme.vue | 3 --- theme/plugins/docus.js | 5 +++++ 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/theme/layouts/docs.vue b/theme/layouts/docs.vue index c73e18045..51896223a 100644 --- 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 index ec811bf35..5a26515da 100644 --- 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 index 76d902e12..73b2bdaff 100644 --- a/theme/plugins/docus.js +++ b/theme/plugins/docus.js @@ -38,6 +38,7 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState = methods: { async fetch () { await this.fetchSettings() + this.addThemeStyles() await Promise.all([ this.fetchReleases(), this.fetchCategories() @@ -145,6 +146,10 @@ 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 () { + app.head.style.push({ hid: 'docus-theme', cssText: this.themeStyles, type: 'text/css' }) } } }) From 8a5fc7c7c8c54e509802b733f6036ddc961a3efe Mon Sep 17 00:00:00 2001 From: Farnabaz Date: Thu, 25 Feb 2021 16:15:36 +0330 Subject: [PATCH 2/4] inject styles on client --- theme/plugins/docus.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/theme/plugins/docus.js b/theme/plugins/docus.js index 73b2bdaff..4a65f0198 100644 --- a/theme/plugins/docus.js +++ b/theme/plugins/docus.js @@ -38,6 +38,7 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState = methods: { async fetch () { await this.fetchSettings() + // Server side and HMR this.addThemeStyles() await Promise.all([ this.fetchReleases(), @@ -171,5 +172,9 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState = }) } + if (process.client) { + $docus.addThemeStyles() + } + inject('docus', $docus) } From bcb69b64c807c43719b6fefe7f136657e9c43cd9 Mon Sep 17 00:00:00 2001 From: Farnabaz Date: Thu, 25 Feb 2021 16:21:01 +0330 Subject: [PATCH 3/4] ensure style is array --- theme/plugins/docus.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/theme/plugins/docus.js b/theme/plugins/docus.js index 4a65f0198..e79883fa5 100644 --- a/theme/plugins/docus.js +++ b/theme/plugins/docus.js @@ -150,6 +150,9 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState = }, addThemeStyles () { + if (!Array.isArray(app.head.style)) { + app.head.style = [] + } app.head.style.push({ hid: 'docus-theme', cssText: this.themeStyles, type: 'text/css' }) } } From 0627fd40a07f48068b792ed1f94216ed59cb880f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Thu, 25 Feb 2021 15:40:42 +0100 Subject: [PATCH 4/4] fix: improvements --- theme/plugins/docus.js | 37 ++++++++++++++++++++++++++----------- 1 file changed, 26 insertions(+), 11 deletions(-) diff --git a/theme/plugins/docus.js b/theme/plugins/docus.js index e79883fa5..bef7e5c5c 100644 --- 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};` @@ -38,8 +49,6 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState = methods: { async fetch () { await this.fetchSettings() - // Server side and HMR - this.addThemeStyles() await Promise.all([ this.fetchReleases(), this.fetchCategories() @@ -58,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 @@ -75,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) { @@ -153,7 +163,13 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState = if (!Array.isArray(app.head.style)) { app.head.style = [] } - app.head.style.push({ hid: 'docus-theme', cssText: this.themeStyles, type: 'text/css' }) + // 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' + }) } } }) @@ -175,9 +191,8 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState = }) } - if (process.client) { - $docus.addThemeStyles() - } + // Inject colors as css variables + $docus.addThemeStyles() inject('docus', $docus) }