From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Mon, 17 May 2021 13:56:57 +0000 (+0200)
Subject: docs: proper useDark
X-Git-Tag: v2.0.0-alpha.18~4
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a9bd4100d4ae9987c34338f9da27c8f1d9007291;p=thirdparty%2Fvuejs%2Fpinia.git

docs: proper useDark
---

diff --git a/docs/.vitepress/components/HomeSponsorsGroup.vue b/docs/.vitepress/components/HomeSponsorsGroup.vue
index 753c96df..ab8724d9 100644
--- a/docs/.vitepress/components/HomeSponsorsGroup.vue
+++ b/docs/.vitepress/components/HomeSponsorsGroup.vue
@@ -13,7 +13,8 @@
       class="sponsor_wrapper"
     >
       <img
-        :src="sponsor.imgSrcLight"
+        :src="sponsor.imgSrc"
+        :class="sponsor.imgSrcLight === imgSrcDark && 'invert-colors'"
         :alt="sponsor.alt"
         :style="{ width: size + 'px' }"
       />
@@ -21,29 +22,29 @@
   </p>
 </template>
 
-<script>
+<script setup lang="ts">
 import sponsors from './sponsors.json'
+import { isDark } from '../theme/dark-theme'
+import { computed, defineProps } from 'vue'
+import type { PropType } from 'vue'
 
-export default {
-  name: 'HomeSponsorsGroup',
-
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-    size: {
-      type: [Number, String],
-      default: 140,
-    },
+const props = defineProps({
+  name: {
+    type: String as PropType<'gold' | 'platinum' | 'silver' | 'bronze'>,
+    required: true,
   },
-
-  computed: {
-    list() {
-      return sponsors[this.name.toLowerCase()]
-    },
+  size: {
+    type: [Number, String],
+    default: 140,
   },
-}
+})
+
+const list = computed(() =>
+  sponsors[props.name.toLowerCase()].map((sponsor) => ({
+    ...sponsor,
+    imgSrc: isDark.value ? sponsor.imgSrcDark : sponsor.imgSrcLight,
+  }))
+)
 </script>
 
 <style scoped>
@@ -73,7 +74,7 @@ img {
   opacity: 0.66;
 }
 
-html:not(.light) img {
+html:not(.light) img.invert-colors {
   filter: invert(1) grayscale(100%);
 }
 
diff --git a/docs/.vitepress/components/ThemeToggle.vue b/docs/.vitepress/components/ThemeToggle.vue
index a8e85466..434702a6 100644
--- a/docs/.vitepress/components/ThemeToggle.vue
+++ b/docs/.vitepress/components/ThemeToggle.vue
@@ -56,63 +56,13 @@
   </button>
 </template>
 
-<script setup lang="ts">
-import { computed, onMounted, ref, watchEffect } from 'vue'
-
-const isBrowser = typeof window !== 'undefined'
-
-const PREFERS_LIGHT = '(prefers-color-scheme: light)'
-
-function isDarkMode() {
-  if (!isBrowser) return true
-
-  const storedTheme = localStorage.getItem(storageKey)
-  if (storedTheme != null) return storedTheme !== 'light'
-
-  return !window.matchMedia(PREFERS_LIGHT).matches
-}
-
-const storageKey = 'pinia-color-scheme'
-
-const localIsDark = ref(isDarkMode())
-
-const isDark = computed<boolean>({
-  get() {
-    return localIsDark.value
-  },
-  set(isDark) {
-    localStorage.setItem(storageKey, isDark ? 'dark' : 'light')
-    localIsDark.value = isDark
-  },
-})
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { isDark } from '../theme/dark-theme'
 
 const label = computed(() =>
   isDark.value ? 'Switch to light mode' : 'Switch to dark mode'
 )
-
-onMounted(() => {
-  window.addEventListener('storage', () => {
-    const storedScheme = localStorage.getItem(storageKey)
-    localIsDark.value = storedScheme !== 'light'
-  })
-
-  const mediaQuery = window.matchMedia(PREFERS_LIGHT)
-
-  if ('addEventListener' in mediaQuery) {
-    mediaQuery.addEventListener('change', (event) => {
-      localIsDark.value = !event.matches
-    })
-  }
-
-  watchEffect(() => {
-    const htmlElement = document.body.parentElement!
-    if (isDark.value) {
-      htmlElement.classList.remove('light')
-    } else {
-      htmlElement.classList.add('light')
-    }
-  })
-})
 </script>
 
 <style scoped>
diff --git a/docs/.vitepress/components/sponsors.json b/docs/.vitepress/components/sponsors.json
index c4c83408..b780af4e 100644
--- a/docs/.vitepress/components/sponsors.json
+++ b/docs/.vitepress/components/sponsors.json
@@ -3,8 +3,8 @@
     {
       "href": "https://passionatepeople.io/",
       "alt": "Passionate People",
-      "imgSrcLight": "https://img2.storyblok.com/672x0/filters::format(webp)/f/86387/x/21aa32ed18/logo-normal.svg",
-      "imgSrcDark": "https://img2.storyblok.com/0x200/filters::format(webp)/f/86387/x/4cf6a70a8c/logo-white-text.svg"
+      "imgSrcLight": "/sponsors/passionate-people-light.png",
+      "imgSrcDark": "/sponsors/passionate-people-dark.png"
     },
     {
       "href": "https://vuejobs.com/?utm_source=vuerouter&utm_campaign=sponsor",
diff --git a/docs/.vitepress/theme/Layout.ts b/docs/.vitepress/theme/Layout.ts
new file mode 100644
index 00000000..0da48b33
--- /dev/null
+++ b/docs/.vitepress/theme/Layout.ts
@@ -0,0 +1,35 @@
+import Theme from 'vitepress/theme'
+import { h } from 'vue'
+import type { FunctionalComponent } from 'vue'
+import sponsors from '../components/sponsors.json'
+import './sponsors.css'
+import { isDark } from './dark-theme'
+
+export const Layout: FunctionalComponent = () =>
+  h(Theme.Layout, null, {
+    'sidebar-bottom': () =>
+      h('div', { class: 'sponsors' }, [
+        h(
+          'a',
+          {
+            href: 'https://github.com/sponsors/posva',
+            target: '_blank',
+            rel: 'noopener',
+          },
+          [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/docs/.vitepress/theme/dark-theme.ts b/docs/.vitepress/theme/dark-theme.ts
new file mode 100644
index 00000000..ddb8112b
--- /dev/null
+++ b/docs/.vitepress/theme/dark-theme.ts
@@ -0,0 +1,6 @@
+import { useDark } from '@vueuse/core'
+
+export const isDark = useDark({
+  storageKey: 'pinia-color-scheme',
+  valueLight: 'light',
+})
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index d7d54012..4a1d56ee 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -1,27 +1,15 @@
 import Theme from 'vitepress/theme'
+import { Layout } from './Layout'
 import './custom.css'
 import './code-theme.css'
 // import { createPinia } from '../../../src'
 
-const { Layout } = Theme
-
-const existingMounted = Layout.mounted || (() => {})
-
-Layout.mounted = function () {
-  existingMounted.call(this)
-
-  const storedTheme = localStorage.getItem('pinia-color-scheme')
-  const mediaQuery = window.matchMedia('(prefers-color-scheme: light)')
-
-  if (mediaQuery.matches || storedTheme === 'light') {
-    const htmlElement = document.body.parentElement
-    htmlElement.classList.add('light')
-  }
-}
-
 /** @type {import('vitepress').Theme} */
 const config = {
   ...Theme,
+
+  Layout,
+
   enhanceApp({ app }) {
     // app.use(createPinia())
   },
diff --git a/docs/.vitepress/theme/sponsors.css b/docs/.vitepress/theme/sponsors.css
new file mode 100644
index 00000000..b241002a
--- /dev/null
+++ b/docs/.vitepress/theme/sponsors.css
@@ -0,0 +1,31 @@
+.sponsors {
+  padding: 0 1.5rem 2rem;
+  font-size: 0.8rem;
+}
+
+.sponsors a {
+  color: #999;
+}
+
+.sponsors img {
+  max-width: 200px;
+  max-height: 40px;
+  display: block;
+  margin: 1.25rem 0;
+}
+
+.sponsors.frontpage {
+  text-align: center;
+}
+
+.sponsors.frontpage img {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 1rem 1.25rem 1rem;
+}
+
+.sponsors.frontpage h2 {
+  color: #999;
+  font-size: 1.2rem;
+  border: none;
+}
diff --git a/docs/public/sponsors/passionate-people-dark.png b/docs/public/sponsors/passionate-people-dark.png
new file mode 100644
index 00000000..028baf65
Binary files /dev/null and b/docs/public/sponsors/passionate-people-dark.png differ
diff --git a/docs/public/sponsors/passionate-people-light.png b/docs/public/sponsors/passionate-people-light.png
new file mode 100644
index 00000000..61ac71af
Binary files /dev/null and b/docs/public/sponsors/passionate-people-light.png differ
diff --git a/docs/vite.config.js b/docs/vite.config.js
index 54d5fe85..f23e4ec9 100644
--- a/docs/vite.config.js
+++ b/docs/vite.config.js
@@ -7,4 +7,7 @@ export default defineConfig({
     __DEV__: 'true',
     __BROWSER__: 'true',
   },
+  optimizeDeps: {
+    exclude: ['@vueuse/shared', '@vueuse/core'],
+  },
 })
diff --git a/package.json b/package.json
index 5e381b24..18aca84b 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "@types/node": "^15.3.0",
     "@vue/server-renderer": "^3.0.11",
     "@vue/test-utils": "^2.0.0-rc.6",
+    "@vueuse/core": "^4.11.0",
     "brotli": "^1.3.2",
     "codecov": "^3.8.2",
     "conventional-changelog-cli": "^2.1.1",
diff --git a/yarn.lock b/yarn.lock
index 44875370..86068cdd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1079,6 +1079,21 @@
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.0-rc.6.tgz#d0aac24d20450d379e183f70542c0822670b8783"
   integrity sha512-0cnQBVH589PwgqWpyv1fgCAz+9Ram/MsvN3ZEAEVXi1aPuhUa22EudGc0WezQ9PKwR+L40NrBmt3JBXE2tSRRQ==
 
+"@vueuse/core@^4.11.0":
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-4.11.0.tgz#2fbfdbeafe7d0a975a901cb56de76226fc4bdf10"
+  integrity sha512-a2/NHE3LjZ73LKGU1Ef2mz11ilIxs4pRIv1OUf98Sfvg6+GqA3R2VzIExswVlU3555GYIErmmJDywEHLsyii6w==
+  dependencies:
+    "@vueuse/shared" "4.11.0"
+    vue-demi "*"
+
+"@vueuse/shared@4.11.0":
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-4.11.0.tgz#d5c453ac1c15e513d625f8035ec22c7562fd8441"
+  integrity sha512-WKyOxTWuAiOLTp9Eg6RYabtZBSiJyt9EgFZEMD8fSlZ1FAckg0Ntya3HLfTDkPBjOqVe3pMdOsAbLwsU+7Fwyw==
+  dependencies:
+    vue-demi "*"
+
 JSONStream@^1.0.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
@@ -6277,6 +6292,11 @@ vitepress@^0.13.2:
     vite "^2.0.5"
     vue "^3.0.5"
 
+vue-demi@*:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.9.0.tgz#b30da61450079d60a132d7aaf9e86d1949e8445e"
+  integrity sha512-f8vVUpC726YXv99fF/3zHaw5CUYbP5H/DVWBN+pncXM8P2Uz88kkffwj9yD7MukuVzPICDHNrgS3VC2ursaP7g==
+
 vue@^3.0.11, vue@^3.0.5:
   version "3.0.11"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.11.tgz#c82f9594cbf4dcc869241d4c8dd3e08d9a8f4b5f"