docs: wip with hydration errors

diff --git a/packages/docs/.vitepress/theme/Layout.ts b/packages/docs/.vitepress/theme/Layout.ts
index a92e620bd0e3c2c23f85743b9ac952a7a4976d1b..06b5fbed38dd8588e20c157e6c4f0c1f3a8427c1 100644 (file)
--- a/packages/docs/.vitepress/theme/Layout.ts
+++ b/packages/docs/.vitepress/theme/Layout.ts
@@ -1,5 +1,5 @@
 import Theme from 'vitepress/theme'
-import { h, nextTick } from 'vue'
+import { h, nextTick, ref } from 'vue'
 import type { FunctionalComponent } from 'vue'
 import sponsors from '../components/sponsors.json'
 import './sponsors.css'
@@ -7,19 +7,65 @@ import { darkStorageConfig } from '../theme/dark-theme'
 import { useDark } from '@vueuse/core'
 
 export const Layout: FunctionalComponent = () => {
-  const showWwAds =
-    typeof navigator !== 'undefined' &&
-    typeof navigator.language === 'string' &&
-    navigator.language.startsWith('zh')
+  const showAds = ref(false)
 
   const isDark = useDark(darkStorageConfig)
 
-  const slots = {
-    'sidebar-top': () =>
-      h('div', { class: 'sponsors sponsors-top' }, [
-        h('span', 'Platinum Sponsors'),
-        ...(sponsors.platinum.length
-          ? sponsors.platinum.map(({ href, imgSrcDark, imgSrcLight, alt }) =>
+  return h(
+    Theme.Layout,
+    {
+      onVnodeMounted() {
+        console.log('vnode mounted')
+        nextTick(() => {
+          console.log('showAds', showAds.value)
+          showAds.value =
+            typeof navigator !== 'undefined' &&
+            typeof navigator.language === 'string' &&
+            navigator.language.startsWith('zh')
+        })
+      },
+    },
+    Object.assign(
+      {
+        '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',
                 {
@@ -34,65 +80,24 @@ 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 })]
-          )
-        ),
-      ]),
-  }
-
-  if (showWwAds) {
-    slots['page-top-ads'] = () =>
-      h('div', { id: 'wwads-container' }, [
-        h('div', {
-          class: 'wwads-cn wwads-vertical',
-          'data-id': 144,
-          style: {
-            maxWidth: '150px',
-          },
-        }),
-      ])
-  }
-
-  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
-        })
+            ),
+          ]),
       },
-    },
-    slots
+      showAds.value
+        ? {
+            'page-top-ads': () =>
+              h('div', { id: 'wwads-container' }, [
+                h('div', {
+                  class: 'wwads-cn wwads-vertical',
+                  'data-id': 144,
+                  style: {
+                    maxWidth: '150px',
+                  },
+                }),
+              ]),
+          }
+        : {}
+    )
   )
 }
 

diff --git a/packages/docs/.vitepress/theme/custom.css b/packages/docs/.vitepress/theme/custom.css
index ed0a5c6a22916468df89b89e6d1f6348118dcf8e..2d34b50244155a0e557387306dcb2481531430db 100644 (file)
--- a/packages/docs/.vitepress/theme/custom.css
+++ b/packages/docs/.vitepress/theme/custom.css
@@ -213,10 +213,13 @@ code {
 }
 
 #wwads-container {
-  position: relative;
-  float: right;
   z-index: 9;
-  margin: 0 0 16px 16px;
+  margin: 0 auto;
+  padding: 8px;
+  max-width: 280px;
+  /* font-size: 0.75rem; */
+  background-color: var(--c-bg-accent);
+  min-height: 105.38px; /* avoid layout shift on mobile */
 }
 
 #wwads-container .wwads-text {
@@ -227,6 +230,18 @@ code {
   clear: none !important;
 }
 
+@media (min-width: 420px) {
+  #wwads-container {
+    position: relative;
+    margin: 0 0 16px 16px;
+    float: right;
+    margin: -8px -8px 24px 24px;
+    width: 146px;
+    max-width: 100%;
+    min-height: 200px;
+  }
+}
+
 @media (min-width: 1368px) {
   #wwads-container {
     position: fixed;

diff --git a/packages/docs/vite.config.ts b/packages/docs/vite.config.ts
index a2ab4aa33b83ee864c1f82828f0966cb24a33b78..33e996b7793913bdc61f8b382704c1e45555bc0e 100644 (file)
--- a/packages/docs/vite.config.ts
+++ b/packages/docs/vite.config.ts
@@ -32,19 +32,17 @@ function copyPiniaPlugin(): Plugin {
   return {
     name: 'copy-pinia',
     async generateBundle() {
-      const filePath = path.resolve(
-        __dirname,
-        '../pinia/dist/pinia.esm-bundler.js'
-      )
-
-      // throws if file doesn't exist
-      await fs.access(filePath)
-
-      this.emitFile({
-        type: 'asset',
-        fileName: 'pinia.mjs',
-        source: await fs.readFile(filePath, 'utf-8'),
-      })
+      // const filePath = path.resolve(
+      //   __dirname,
+      //   '../pinia/dist/pinia.esm-bundler.js'
+      // )
+      // // throws if file doesn't exist
+      // await fs.access(filePath)
+      // this.emitFile({
+      //   type: 'asset',
+      //   fileName: 'pinia.mjs',
+      //   source: await fs.readFile(filePath, 'utf-8'),
+      // })
     },
   }
 }