From: Theo Ephraim Date: Mon, 7 Feb 2022 21:46:11 +0000 (-0600) Subject: docs: fix dark mode flashing bug (#1032) X-Git-Tag: @pinia/testing@0.0.10~39 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=ec9cdc4be682979856bca0ea569f4101d71aac11;p=thirdparty%2Fvuejs%2Fpinia.git docs: fix dark mode flashing bug (#1032) Co-authored-by: Eduardo San Martin Morote --- diff --git a/packages/docs/.vitepress/components/HomeSponsors.vue b/packages/docs/.vitepress/components/HomeSponsors.vue index 10f1b90b..34ae1993 100644 --- a/packages/docs/.vitepress/components/HomeSponsors.vue +++ b/packages/docs/.vitepress/components/HomeSponsors.vue @@ -17,21 +17,6 @@ diff --git a/packages/docs/.vitepress/config.js b/packages/docs/.vitepress/config.js index fd7b00a3..ff8c4048 100644 --- a/packages/docs/.vitepress/config.js +++ b/packages/docs/.vitepress/config.js @@ -22,11 +22,6 @@ const productionHead = [ ], ] -const darkModeFix = require('fs').readFileSync( - require('path').resolve(__dirname, './darkModeFix.js'), - 'utf-8' -) - /** * @type {import('vitepress').UserConfig} */ @@ -124,7 +119,6 @@ module.exports = { }, ], - ['script', {}, darkModeFix], ...(isProduction ? productionHead : []), ], diff --git a/packages/docs/.vitepress/darkModeFix.js b/packages/docs/.vitepress/darkModeFix.js deleted file mode 100644 index 8dbbaf39..00000000 --- a/packages/docs/.vitepress/darkModeFix.js +++ /dev/null @@ -1,10 +0,0 @@ -;(() => { - const saved = localStorage.getItem('pinia-color-scheme') - if ( - saved === 'auto' - ? window.matchMedia(`(prefers-color-scheme: light)`).matches - : saved === 'light' - ) { - document.documentElement.classList.add('light') - } -})() diff --git a/packages/docs/.vitepress/theme/Layout.ts b/packages/docs/.vitepress/theme/Layout.ts index 5cb4cc42..2e0dd2f8 100644 --- a/packages/docs/.vitepress/theme/Layout.ts +++ b/packages/docs/.vitepress/theme/Layout.ts @@ -1,32 +1,60 @@ import Theme from 'vitepress/theme' -import { h, nextTick } from 'vue' -import type { FunctionalComponent } from 'vue' +import { h, defineComponent } from 'vue' import sponsors from '../components/sponsors.json' import './sponsors.css' import { darkStorageConfig } from '../theme/dark-theme' import { useDark } from '@vueuse/core' -export const Layout: FunctionalComponent = () => { - const isDark = useDark(darkStorageConfig) - return h( - Theme.Layout, - { - onVnodeMounted() { - // wait to ticks to fix the problem of SSR with no color scheme - nextTick(() => { - isDark.value = !isDark.value - return nextTick() - }).then(() => { - isDark.value = !isDark.value - }) - }, - }, - { - 'sidebar-top': () => - h('div', { class: 'sponsors sponsors-top' }, [ - h('span', 'Platinum Sponsors'), - ...(sponsors.platinum.length - ? sponsors.platinum.map(({ href, imgSrcDark, imgSrcLight, alt }) => +export const Layout = defineComponent({ + name: 'CustomLayout', + + setup() { + const isDark = useDark(darkStorageConfig) + + return () => + h( + Theme.Layout, + {}, + { + 'sidebar-top': () => + h('div', { class: 'sponsors sponsors-top' }, [ + h('span', 'Platinum Sponsors'), + ...(sponsors.platinum.length + ? sponsors.platinum.map( + ({ href, imgSrcDark, imgSrcLight, alt }) => + h( + 'a', + { + href, + target: '_blank', + rel: 'noopener', + }, + [ + h('img', { + src: isDark.value ? imgSrcDark : imgSrcLight, + alt, + }), + ] + ) + ) + : [ + h( + 'a', + { + class: 'become-sponsor', + href: 'https://github.com/sponsors/posva', + target: '_blank', + rel: 'noopener', + alt: 'Your logo here', + }, + 'Become a Sponsor!' + ), + ]), + ]), + 'sidebar-bottom': () => + h('div', { class: 'sponsors' }, [ + h('span', 'Sponsors'), + ...sponsors.gold.map(({ href, imgSrcDark, imgSrcLight, alt }) => h( 'a', { @@ -41,38 +69,9 @@ export const Layout: FunctionalComponent = () => { }), ] ) - ) - : [ - h( - 'a', - { - class: 'become-sponsor', - href: 'https://github.com/sponsors/posva', - target: '_blank', - rel: 'noopener', - alt: 'Your logo here', - }, - 'Become a Sponsor!' - ), - ]), - ]), - 'sidebar-bottom': () => - h('div', { class: 'sponsors' }, [ - h('span', 'Sponsors'), - ...sponsors.gold.map(({ href, imgSrcDark, imgSrcLight, alt }) => - h( - 'a', - { - href, - target: '_blank', - rel: 'noopener', - }, - [h('img', { src: isDark.value ? imgSrcDark : imgSrcLight, alt })] - ) - ), - ]), - } - ) -} - -Layout.displayName = 'CustomLayout' + ), + ]), + } + ) + }, +}) diff --git a/packages/docs/.vitepress/theme/index.js b/packages/docs/.vitepress/theme/index.js index 4a1d56ee..7de26389 100644 --- a/packages/docs/.vitepress/theme/index.js +++ b/packages/docs/.vitepress/theme/index.js @@ -2,7 +2,7 @@ import Theme from 'vitepress/theme' import { Layout } from './Layout' import './custom.css' import './code-theme.css' -// import { createPinia } from '../../../src' +// import { createPinia } from '../../../pinia' /** @type {import('vitepress').Theme} */ const config = { @@ -10,9 +10,9 @@ const config = { Layout, - enhanceApp({ app }) { - // app.use(createPinia()) - }, + // enhanceApp({ app }) { + // app.use(createPinia()) + // }, } export default config diff --git a/packages/docs/index.md b/packages/docs/index.md index 9a39a4fe..d4fdd1bf 100644 --- a/packages/docs/index.md +++ b/packages/docs/index.md @@ -23,13 +23,13 @@ features: footer: MIT Licensed | Copyright © 2019-present Eduardo San Martin Morote --- - + diff --git a/packages/docs/vite.config.ts b/packages/docs/vite.config.ts index a2ab4aa3..a084967b 100644 --- a/packages/docs/vite.config.ts +++ b/packages/docs/vite.config.ts @@ -32,10 +32,7 @@ function copyPiniaPlugin(): Plugin { return { name: 'copy-pinia', async generateBundle() { - const filePath = path.resolve( - __dirname, - '../pinia/dist/pinia.esm-bundler.js' - ) + const filePath = path.resolve(__dirname, '../pinia/dist/pinia.mjs') // throws if file doesn't exist await fs.access(filePath)