fix: page switching display

WRXinYue · Jul 21, 2024 · a3c196d · a3c196d
1 parent 6fa7c71
commit a3c196d
Show file tree

Hide file tree

Showing 24 changed files with 1,112 additions and 1,469 deletions.
diff --git a/demo/layouts/post.vue b/demo/layouts/post.vue
@@ -1,13 +1,11 @@
 <template>
-  <Layout>
-    <PostThemeSakura>
-      <template #right>
-        <SakuraAsideLayout>
-          Interactive graph
-          <SakuraNetworkGraph :height="300" :width="300" />
-          <SakuraToc />
-        </SakuraAsideLayout>
-      </template>
-    </PostThemeSakura>
-  </Layout>
+  <PostThemeSakura>
+    <template #right>
+      <SakuraAsideLayout>
+        Interactive graph
+        <SakuraNetworkGraph :height="300" :width="300" />
+        <SakuraToc />
+      </SakuraAsideLayout>
+    </template>
+  </PostThemeSakura>
 </template>
diff --git a/demo/layouts/tags.vue b/demo/layouts/tags.vue
@@ -1,5 +1,3 @@
 <template>
-  <Layout>
-    <TagsThemeFlaribbit />
-  </Layout>
+  <TagsThemeFlaribbit />
 </template>
diff --git a/demo/package.json b/demo/package.json
@@ -17,6 +17,6 @@
   },
   "devDependencies": {
     "nodemon": "^3.1.4",
-    "valaxy": "^0.19.2"
+    "valaxy": "^0.19.4"
   }
 }
diff --git a/docs/package.json b/docs/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "monaco-editor": "^0.47.0",
-    "valaxy": "^0.19.2",
+    "valaxy": "^0.19.4",
     "valaxy-addon-git-log": "workspace:*",
     "valaxy-addon-twikoo": "^0.0.3",
     "valaxy-theme-sakura": "workspace:*",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/theme/App.vue b/theme/App.vue
diff --git a/theme/components/SakuraSidebar.vue b/theme/components/SakuraSidebar.vue
@@ -15,7 +15,7 @@ const themeConfig = useThemeConfig()
 const marker = ref()
 const position = ref(props.position ?? themeConfig.value.sidebarOptions?.position)
 
-watch(() => route.path, () => nextTick(updateMarker))
+watch(() => route.path, () => nextTick(() => updateMarker()))
 
 function updateMarker() {
   const routeActive = document.querySelector('.sakura-sidebar .site-link .router-link-active') as HTMLElement
@@ -26,7 +26,7 @@ function updateMarker() {
 }
 
 onMounted(() => {
-  updateMarker()
+  nextTick(() => updateMarker())
   marker.value = document.querySelector('.sakura-sidebar #marker')
 })
 </script>

diff --git a/theme/components/core/ValaxyApp.vue b/theme/components/core/ValaxyApp.vue
@@ -0,0 +1,5 @@
+<template>
+  <ValaxyThemeApp />
+  <ValaxyAddons />
+  <ValaxyUserApp />
+</template>
diff --git a/theme/components/core/ValaxyThemeApp.vue b/theme/components/core/ValaxyThemeApp.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { useHead } from '@unhead/vue'
+import { useAppStore } from 'valaxy'
+
+const appStore = useAppStore()
+
+useHead({
+  link: [
+    {
+      rel: 'preconnect',
+      href: 'https://cdn.jsdelivr.net',
+    },
+    {
+      rel: 'stylesheet',
+      href: 'https://cdn.jsdelivr.net/gh/moezx/[email protected]/fonts/Moe-Mashiro/stylesheet.css',
+    },
+  ],
+
+  meta: [
+    {
+      name: 'theme-color',
+      content: appStore.themeColor,
+    },
+    {
+      name: 'msapplication-TileColor',
+      content: appStore.themeColor,
+    },
+  ],
+})
+</script>
+
+<template>
+  <SakuraSidebarCustom class="sakura-app-sidebar" />
+  <Layout>
+    <RouterView />
+  </Layout>
+</template>
diff --git a/theme/components/core/layout.vue b/theme/components/core/layout.vue
@@ -1,6 +1,6 @@
-<script setup lang="ts">
-import { useThemeConfig } from '../../composables'
+<script lang="ts" setup>
 import { useSakuraAppStore } from '../../stores'
+import { useThemeConfig } from '../../composables'
 
 const sakuraAppStore = useSakuraAppStore()
 const themeConfig = useThemeConfig()
@@ -9,11 +9,17 @@ const themeConfig = useThemeConfig()
 <template>
   <div
     class="app-container custom-background antialiased"
-    :style="themeConfig.sidebarOptions?.offset && sakuraAppStore.sidebar.isOpen ? '--sakura-private-sidebar-offset: var(--st-c-sidebar-offset)' : ''"
+    :style="sakuraAppStore.sidebar.isOpen ? (
+      themeConfig.sidebarOptions?.position === 'left'
+        ? '--sakura-private-sidebar-offset: var(--st-c-sidebar-offset)'
+        : '--sakura-private-sidebar-offset: calc(var(--st-c-sidebar-offset) * -1)'
+    ) : ''"
   >
-    <slot name="nav-bar" />
+    <slot name="nav-bar">
+      <SakuraNavbarCustom class="sakura-sidebar-offset" />
+    </slot>
 
-    <main class="sakura-main">
+    <main class="sakura-sidebar-offset sakura-main">
       <slot>
         <RouterView v-slot="{ Component }">
           <component :is="Component">
@@ -51,7 +57,7 @@ const themeConfig = useThemeConfig()
     </main>
 
     <slot name="footer">
-      <SakuraFooterCustom />
+      <SakuraFooterCustom class="sakura-sidebar-offset" />
     </slot>
   </div>
 </template>
diff --git a/theme/components/themes/LinksThemeYun.vue b/theme/components/themes/LinksThemeYun.vue
@@ -17,21 +17,27 @@ const { data } = useLinkData(props.links, props.random)
 </script>
 
 <template>
-  <div class="links">
-    <ul class="link-items">
-      <li v-for="link, i in data" :key="i" class="link-item" :style="`--primary-color: ${link.color}`">
-        <a class="link-url" p="x-4 y-2" :href="link.url" :title="link.name" alt="portrait" rel="friend" target="_blank">
-          <div class="link-left">
-            <SakuraImageCard class="link-avatar" width="64" height="64" w="16" h="16" :src="link.avatar || themeConfig.notFoundImage" :alt="link.name" :error-img="props.errorImg" />
-          </div>
-          <div class="link-info" m="l-2">
-            <div class="link-blog" font="serif black">{{ link.blog }}</div>
-            <div class="link-desc">{{ link.desc }}</div>
-          </div>
-        </a>
-      </li>
-    </ul>
-  </div>
+  <RouterView v-slot="{ Component }">
+    <component :is="Component">
+      <template #main-content>
+        <div class="links">
+          <ul class="link-items">
+            <li v-for="link, i in data" :key="i" class="link-item" :style="`--primary-color: ${link.color}`">
+              <a class="link-url" p="x-4 y-2" :href="link.url" :title="link.name" alt="portrait" rel="friend" target="_blank">
+                <div class="link-left">
+                  <SakuraImageCard class="link-avatar" width="64" height="64" w="16" h="16" :src="link.avatar || themeConfig.notFoundImage" :alt="link.name" :error-img="props.errorImg" />
+                </div>
+                <div class="link-info" m="l-2">
+                  <div class="link-blog" font="serif black">{{ link.blog }}</div>
+                  <div class="link-desc">{{ link.desc }}</div>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </template>
+    </component>
+  </RouterView>
 </template>
 
 <style lang="scss" scoped>

diff --git a/theme/layouts/archives.vue b/theme/layouts/archives.vue
@@ -9,7 +9,5 @@ useSchemaOrg([
 </script>
 
 <template>
-  <Layout>
-    <ArchivesThemeSakura />
-  </Layout>
+  <ArchivesThemeSakura />
 </template>
diff --git a/theme/layouts/categories.vue b/theme/layouts/categories.vue
@@ -9,7 +9,5 @@ useSchemaOrg([
 </script>
 
 <template>
-  <Layout>
-    <CategoriesThemeSakura />
-  </Layout>
+  <CategoriesThemeSakura />
 </template>
diff --git a/theme/layouts/home.vue b/theme/layouts/home.vue
@@ -18,7 +18,5 @@ watch(() => pageIndex.value, async (value) => {
 </script>
 
 <template>
-  <Layout>
-    <SakuraHomeLayout />
-  </Layout>
+  <SakuraHomeLayout />
 </template>
diff --git a/theme/layouts/links.vue b/theme/layouts/links.vue
@@ -5,9 +5,7 @@ const frontmatter = useFrontmatter()
 </script>
 
 <template>
-  <Layout>
-    <SakuraMultiColumnsLayout class="mt-$st-c-navbar-height">
-      <LinksThemeYun :links="frontmatter.links" :random="frontmatter.random" :error-img="frontmatter.errorImg" />
-    </SakuraMultiColumnsLayout>
-  </Layout>
+  <SakuraMultiColumnsLayout class="mt-$st-c-navbar-height">
+    <LinksThemeYun :links="frontmatter.links" :random="frontmatter.random" :error-img="frontmatter.errorImg" />
+  </SakuraMultiColumnsLayout>
 </template>
diff --git a/theme/layouts/post.vue b/theme/layouts/post.vue
@@ -1,5 +1,3 @@
 <template>
-  <Layout>
-    <PostThemeSakura />
-  </Layout>
+  <PostThemeSakura />
 </template>
diff --git a/theme/layouts/tags.vue b/theme/layouts/tags.vue
@@ -1,5 +1,3 @@
 <template>
-  <Layout>
-    <TagsThemeSakura />
-  </Layout>
+  <TagsThemeSakura />
 </template>
diff --git a/theme/node/index.ts b/theme/node/index.ts
@@ -1,4 +1,4 @@
-import type { Plugin } from 'vite'
+import type { PluginOption } from 'vite'
 import type { ResolvedValaxyOptions } from 'valaxy'
 import type { ThemeConfig } from '../types'
 
@@ -52,9 +52,7 @@ export const defaultThemeConfig: ThemeConfig = {
 
 // write a vite plugin
 // https://vitejs.dev/guide/api-plugin.html
-export function themePlugin(
-  options: ResolvedValaxyOptions<ThemeConfig>,
-): Plugin {
+export function themePlugin(options: ResolvedValaxyOptions<ThemeConfig>): PluginOption {
   const themeConfig = options.config.themeConfig || {}
 
   return {

diff --git a/theme/package.json b/theme/package.json
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@types/d3": "^7.4.3",
     "@types/d3-force": "^3.0.9",
-    "valaxy": "^0.19.2",
+    "valaxy": "^0.19.4",
     "valaxy-addon-hitokoto": "^0.0.1",
     "valaxy-addon-vercount": "^0.0.5",
     "valaxy-addon-waline": "^0.1.5"

diff --git a/theme/setup/main.ts b/theme/setup/main.ts
@@ -1,6 +1,5 @@
 // import { defineAppSetup, useAppStore } from 'valaxy'
 import { defineAppSetup } from 'valaxy'
-import { nextTick } from 'vue'
 // import { useSakuraAppStore } from '../stores'
 import { useThemeConfig } from '../composables'
 import { defineSakuraSetup } from './sakuraSetup'
@@ -16,16 +15,21 @@ export default defineAppSetup(async (ctx) => {
   // const sakuraAppStore = useSakuraAppStore()
   // const appStore = useAppStore()
 
-  router.afterEach(() => {
-    /**
-     * router import order
-     * @see https://pinia.vuejs.org/zh/core-concepts/outside-component-usage.html#single-page-applications
-     */
-    nextTick(() => {
-      // if (sakuraAppStore.sidebar.isOpen)
-      //   sakuraAppStore.sidebar.close()
-    })
-  })
+  // router.afterEach((to, from, next) => {
+  //   /**
+  //    * router import order
+  //    * @see https://pinia.vuejs.org/zh/core-concepts/outside-component-usage.html#single-page-applications
+  //    */
+  //   nextTick(() => {
+  //     // to.meta.hideRouterView
+  //     // if (sakuraAppStore.sidebar.isOpen)
+  //     //   sakuraAppStore.sidebar.close()
+  //   })
+  // })
+
+  // router.beforeEach((to, from, next) => {
+  //   next(false)
+  // })
 
   // prevent blocking
   router.isReady().then(() => defineSakuraSetup(themeConfig))

diff --git a/theme/styles/common/background.scss b/theme/styles/common/background.scss
@@ -8,7 +8,7 @@
   width: 100%;
 }
 
-.custom-background {
+.sakura-main {
   @include background-style(var(--st-c-custom-bg-img));
 }
 

diff --git a/theme/styles/layouts/layout.scss b/theme/styles/layouts/layout.scss
@@ -13,3 +13,7 @@ a {
 .st-text {
   color: var(--st-c-text);
 }
+
+// .app-container {
+//   min-height: 100vh;
+// }
diff --git a/theme/styles/widgets/sidebar.scss b/theme/styles/widgets/sidebar.scss
@@ -16,8 +16,7 @@
 }
 
 // translation navbar
-.sakura-app-navbar,
-.app-container {
+.sakura-sidebar-offset {
   transform: translateX(var(--sakura-private-sidebar-offset));
   transition: transform var(--va-transition-duration)
     cubic-bezier(0.19, 1, 0.22, 1) !important;

diff --git a/theme/valaxy.config.ts b/theme/valaxy.config.ts
@@ -8,9 +8,7 @@ export default defineTheme<ThemeConfig>((options) => {
   return {
     themeConfig: defaultThemeConfig,
     vite: {
-      plugins: [
-        themePlugin(options),
-      ],
+      plugins: [themePlugin(options)],
     },
     unocss: {
       safelist: generateSafelist(options.config.themeConfig as ThemeConfig),