feat(theme-press): top for doc & clean styles

docs/pages/guide/extend.md

@@ -1,5 +1,6 @@
 ---
-title: 自定义扩展
+title: Extend
+title_zh: 自定义扩展
 categories:
   - Guide
 end: false

docs/pages/guide/features.md

@@ -4,6 +4,7 @@ title_zh: 亮点
 categories:
   - Guide
 end: false
+top: 98
 ---
 
 首先，我们来介绍一下 Valaxy 有哪些便捷的特性。

docs/pages/guide/getting-started.md

@@ -4,6 +4,7 @@ title_zh: 开始
 categories:
   - Guide
 end: false
+top: 99
 ---
 
 > Example: [valaxy.yyj.moe](https://valaxy.yyj.moe)

docs/pages/guide/index.md

@@ -4,6 +4,7 @@ title_zh: 指南
 categories:
   - Guide
 end: false
+top: 97
 ---
 
 - [What is Valaxy?](/posts/hello-valaxy)

docs/pages/themes/index.md

@@ -1,9 +1,10 @@
 ---
-title: How to create a valaxy theme?
+title: How to create a theme?
 title_zh: 如何创建一个 Valaxy 主题
 categories:
   - Theme
 end: false
+top: 50
 ---
 
 ::: tip

packages/valaxy-theme-press/components/PressAside.vue

@@ -22,11 +22,11 @@ const app = useAppStore()
 
   <aside
     class="press-aside lt-xl:fixed press-card xl:(shadow-none hover:shadow-none) shadow hover:shadow-lg"
-    p="l-4" text="center"
+    p="l-0 xl:l-4" text="center"
     z="10"
     :class="app.isRightSidebarOpen && 'open'"
   >
-    <div class="aside-container" flex="~ col">
+    <div class="aside-container lt-xl:pt-0" flex="~ col">
       <PressToc v-if="frontmatter.toc !== false" :headers="data.headers || []" />
       <div class="flex-grow" />
       <div v-if="$slots.default" class="custom-container">
@@ -48,15 +48,15 @@ const app = useAppStore()
   position: relative;
   min-width: 272px;
   transform: translateX(100%);
+  top: 0;
+  bottom: 0;
   right: 0;
   z-index: 10;
 
-  transition: box-shadow var(--va-transition-duration),
-  background-color var(--va-transition-duration), opacity 0.25s,
+  transition: box-shadow var(--va-transition-duration), opacity 0.25s,
   transform var(--va-transition-duration) cubic-bezier(0.19, 1, 0.22, 1);
 
   &.open {
-    right: 0;
     display: block;
     transform: translateX(0);
   }
@@ -78,5 +78,6 @@ const app = useAppStore()
 
 .toc-btn {
   color: var(--va-c-primary);
+  background-color: var(--va-c-bg);
 }
 </style>

packages/valaxy-theme-press/components/PressCategories.vue

@@ -27,7 +27,7 @@ const collapsable = ref(props.collapsable)
 <style lang="scss">
 .post-list-item {
   a {
-    color: var(--va-c-text);
+    color: var(--va-c-text-light);
 
     &:hover {
       color: var(--va-c-primary);
@@ -41,10 +41,5 @@ const collapsable = ref(props.collapsable)
       color: var(--va-c-primary);
     }
   }
-  .category-name {
-    &:hover {
-      color: var(--va-c-primary);
-    }
-  }
 }
 </style>

packages/valaxy-theme-press/components/PressCategory.vue

@@ -29,7 +29,7 @@ const getTitle = (post: Post | any) => {
 </script>
 
 <template>
-  <li v-if="category.total" class="category-list-item inline-flex items-center cursor-pointer">
+  <li v-if="category.total" class="category-list-item inline-flex items-center">
     <span class="folder-action inline-flex" @click="collapsable = !collapsable">
       <div v-if="collapsable" i-ri-folder-add-line />
       <div v-else style="color:var(--va-c-primary)" i-ri-folder-reduce-line /></span>
@@ -43,7 +43,7 @@ const getTitle = (post: Post | any) => {
       <li v-for="post, i in category.posts" :key="i" class="post-list-item" m="l-4">
         <router-link v-if="post.title" :to="post.path || ''" class="inline-flex items-center">
           <div i-ri-file-text-line />
-          <span m="l-1" font="serif black">{{ getTitle(post) }}</span>
+          <span m="l-1">{{ getTitle(post) }}</span>
         </router-link>
       </li>
     </ul>

packages/valaxy-theme-press/components/PressLocalNav.vue

@@ -45,10 +45,10 @@ function scrollToTop() {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid var(--vp-c-divider-light);
+  border-bottom: 1px solid var(--pr-c-divider-light);
   width: 100%;
   background-color: var(--va-c-bg);
-  transition: border-color 0.5s, background-color 0.5s;
+  transition: border-color 0.5s;
 }
 
 @include media('md') {

packages/valaxy-theme-press/components/PressNav.vue

@@ -1,41 +1,20 @@
-<script lang="ts" setup>
-import { isDark, toggleDark, useConfig } from 'valaxy'
-import { useThemeConfig } from '../composables'
-
-const config = useConfig()
-const themeConfig = useThemeConfig()
-</script>
-
 <template>
-  <nav w="full" class="press-nav relative md:fixed flex justify-between items-center px-6 py-4 font-bold">
-    <a class="text-xl" href="/" :aria-label="config.title">
-      <span class="md:inline">{{ config.title }}</span>
-    </a>
-    <div class="flex justify-center  items-centertext-sm text-gray-500 leading-5">
-      <template v-for="(item, i) in themeConfig.nav" :key="i">
-        <a
-          class="hover:text-gray-700"
-          :href="item.link"
-          target="_blank"
-          rel="noopener"
-        >{{ item.text }}</a>
-
-        <span v-if="i !== themeConfig.nav.length - 1" class="mr-2 ml-2">·</span>
-      </template>
-
-      <button type="button" aria-label="Toggle Dark Mode" @click="toggleDark()">
-        <div v-if="!isDark" i-ri-sun-line />
-        <div v-else i-ri-moon-line />
-      </button>
-    </div>
+  <nav w="full" class="press-nav relative md:fixed md:z-99 font-bold">
+    <PressNavBar />
   </nav>
 </template>
 
 <style lang="scss">
+@use 'valaxy/client/styles/mixins' as *;
+
 .press-nav {
   z-index: var(--pr-z-index-nav);
+}
 
-  -webkit-backdrop-filter: saturate(50%) blur(8px);
-  backdrop-filter: saturate(50%) blur(8px);
+@include media('md') {
+  .press-nav {
+    -webkit-backdrop-filter: saturate(50%) blur(8px);
+    backdrop-filter: saturate(50%) blur(8px);
+  }
 }
 </style>

packages/valaxy-theme-press/components/PressNavbar.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { useSidebar } from 'valaxy'
+import { isDark, toggleDark, useConfig, useSidebar } from 'valaxy'
+import { useThemeConfig } from '../composables'
 
 defineProps<{
-  isScreenOpen: boolean
+  isScreenOpen?: boolean
 }>()
 
 defineEmits<{
@@ -10,11 +11,35 @@ defineEmits<{
 }>()
 
 const { hasSidebar } = useSidebar()
+
+const config = useConfig()
+const themeConfig = useThemeConfig()
 </script>
 
 <template>
-  <div class="press-navbar" :class="{ 'has-sidebar': hasSidebar }">
-    <div class="container" />
+  <div class="press-navbar flex justify-between items-center px-6 py-4" :class="{ 'has-sidebar': hasSidebar }">
+    <a class="text-xl" href="/" :aria-label="config.title">
+      <span class="md:inline">{{ config.title }}</span>
+    </a>
+    <div class="flex justify-center items-centertext-sm leading-5">
+      <template v-for="(item, i) in themeConfig.nav" :key="i">
+        <a
+          class="hover:text-gray-700"
+          :href="item.link"
+          target="_blank"
+          rel="noopener"
+        >{{ item.text }}</a>
+
+        <span v-if="i !== themeConfig.nav.length - 1" class="mr-2 ml-2">·</span>
+      </template>
+
+      <PressToggleLocale m="x-2" />
+
+      <button m="x-2" type="button" aria-label="Toggle Dark Mode" @click="toggleDark()">
+        <div v-if="!isDark" i-ri-sun-line />
+        <div v-else i-ri-moon-line />
+      </button>
+    </div>
   </div>
 </template>
 
@@ -25,7 +50,7 @@ const { hasSidebar } = useSidebar()
   position: relative;
   border-bottom: 1px solid var(--pr-c-divider-light);
   padding: 0 8px 0 24px;
-  height: var(--pr-nav-height-mobile);
+  height: var(--pr-nav-height);
   transition: border-color 0.5s, background-color 0.5s;
 }
 
@@ -36,11 +61,6 @@ const { hasSidebar } = useSidebar()
 }
 
 @include media('md') {
-  .press-navbar {
-    height: var(--pr-nav-height-desktop);
-    border-bottom: 0;
-  }
-
   .press-navbar.has-sidebar .content {
     margin-right: -32px;
     padding-right: 32px;

packages/valaxy-theme-press/components/PressSidebar.vue

@@ -56,7 +56,7 @@ const { hasSidebar } = useSidebar()
   .press-sidebar {
     z-index: 1;
     padding: 1.5rem 1rem;
-    padding-top: var(--pr-nav-height-desktop);
+    padding-top: var(--pr-nav-height);
     width: var(--va-sidebar-width);
     max-width: 100%;
     background-color: var(--va-c-bg-alt);

packages/valaxy-theme-press/components/PressToggleLocale.vue

@@ -7,7 +7,7 @@ const { toggleLocales } = useLocale()
 </script>
 
 <template>
-  <button class="press-icon-btn" :title="t('button.toggle_langs')" style="color:var(--va-c-text)" @click="toggleLocales">
+  <button :title="t('button.toggle_langs')" @click="toggleLocales">
     <div i-ri-translate class="transition transform" :class="locale === 'en' ? 'rotate-y-180' : ''" />
   </button>
 </template>

packages/valaxy-theme-press/components/ValaxyMain.vue

@@ -19,7 +19,7 @@ const isHome = useLayout('home')
       'has-sidebar': hasSidebar,
     }"
   >
-    <div w="full" flex="~" p="t-8 x-8">
+    <div w="full" flex="~" p="t-8 x-6 md:x-8">
       <slot name="main">
         <div class="content" m="auto y-0" flex="~ col grow" w="full" p="x-12 lt-md:0">
           <slot name="main-header" />

packages/valaxy-theme-press/setup/main.ts

@@ -69,7 +69,7 @@ function scrollTo(el: HTMLElement, hash: string, smooth = false) {
   }
 
   if (target) {
-    const targetPadding = -72
+    const targetPadding = -64
     const targetTop
       = window.scrollY
       + (target as HTMLElement).getBoundingClientRect().top

packages/valaxy-theme-press/styles/css-vars.scss

@@ -1,20 +1,21 @@
 :root {
-  --pr-z-index-backdrop: 9;
-  --pr-z-index-sidebar: 10;
-
   --pr-aside-text-1: #213547;
   --pr-aside-text-2: #3c3c3cb3;
 
   --pr-aside-divider: rgba(60, 60, 60, 0.122);
 
+  --pr-c-divider-light: rgba(60, 60, 60, 0.12);
+
   // nav
   --pr-nav-height: var(--pr-nav-height-mobile);
-  --pr-nav-height-mobile: 56px;
-  --pr-nav-height-desktop: 72px;
+  --pr-nav-height-mobile: 60px;
 
   // z-index
-  --pr-z-index-nav: 20;
-  --pr-z-index-local-nav: 10;
+  --va-z-overlay: var(--pr-z-index-backdrop);
+  --pr-z-index-nav: 8;
+  --pr-z-index-local-nav: 9;
+  --pr-z-index-backdrop: 10;
+  --pr-z-index-sidebar: 11;
 }
 
 .dark {

packages/valaxy-theme-press/styles/markdown.scss

@@ -1,4 +1,15 @@
+@use "valaxy/client/styles/mixins" as *;
+
 .prose {
   --un-prose-body: var(--va-c-text);
   --un-prose-hr: var(--va-c-text);
+  --un-prose-borders: var(--va-c-brand);
+}
+
+@include mobile {
+  .markdown-body {
+    div[class*="language-"] {
+      margin: 0 -1.5rem;
+    }
+  }
 }

packages/valaxy/client/components/ValaxyOverlay.vue

@@ -25,7 +25,7 @@ withDefaults(defineProps<{
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: calc(var(--yun-z-sidebar) - 1);
+  z-index: calc(var(--va-z-overlay) - 1);
   transition: opacity 0.4s;
 
   display: none;

packages/valaxy/client/composables/category.ts

@@ -99,6 +99,11 @@ export function useCategory(category?: string, posts: Post[] = []): ParentCatego
     }
   })
 
+  categoryMap.children.forEach((child) => {
+    if ('posts' in child)
+      child.posts.sort((a, b) => (b.top || 0) - (a.top || 0))
+  })
+
   // clear uncategorized
   if (uncategorized!.total === 0)
     categoryMap.children?.delete('Uncategorized')