valaxy-theme-press 0.0.2 → 0.0.3

package/client/index.ts

@@ -0,0 +1 @@
+export * from '../composables'

package/components/DocsBoard.vue

@@ -10,9 +10,9 @@ const { t } = useI18n()
 
     <ul>
       <li>
-        <a href="/docs" :title="t('docs.view_docs')">
+        <router-link to="/docs" :title="t('docs.view_docs')">
           {{ t('docs.view_docs') }}
-        </a>
+        </router-link>
       </li>
       <li>
         <router-link class="flex justify-center" to="/examples">

package/components/PressArticle.vue

@@ -17,15 +17,14 @@ const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
 </script>
 
 <template>
-  <article class="xl:divide-y xl:divide-gray-200">
-    <header class="pt-6 xl:pb-10 space-y-1 text-center">
+  <article class="xl:divide-y xl:divide-gray-200 max-w-7xl m-auto" p="x-6" w="full">
+    <header class="pt-20 xl:pb-10 space-y-1 text-center">
       <PressDate :date="frontmatter.date" />
       <h1
         class="
           text-3xl
           leading-9
           font-extrabold
-          text-gray-900
           tracking-tight
           sm:text-4xl sm:leading-10
           md:text-5xl md:leading-14
@@ -40,14 +39,14 @@ const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
         divide-y
         xl:divide-y-0
         divide-gray-200
-        xl:grid xl:grid-cols-4 xl:gap-x-10
+        xl:grid xl:grid-cols-12 xl:gap-x-6
         pb-16
         xl:pb-20
       "
       style="grid-template-rows: auto 1fr"
     >
       <PressAuthor v-if="frontmatter.author" :frontmatter="frontmatter" />
-      <div class="divide-y divide-gray-200 xl:pb-0 xl:col-span-3 xl:row-span-2">
+      <div class="divide-y divide-gray-200 xl:pb-0 xl:col-span-8 xl:row-span-2">
         <router-view />
       </div>
 
@@ -57,7 +56,7 @@ const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
           font-medium
           leading-5
           divide-y divide-gray-200
-          xl:col-start-1 xl:row-start-2
+          xl:col-start-1 xl:row-start-2 xl:col-span-2
         "
       >
         <div v-if="nextPost" class="py-8">
@@ -65,19 +64,25 @@ const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
             Next Article
           </h2>
           <div class="link">
-            <a :href="nextPost.href">{{ nextPost.title }}</a>
+            <router-link :to="nextPost.href">
+              {{ nextPost.title }}
+            </router-link>
           </div>
         </div>
-        <div v-if="prevPost" class="py-8">
+        <div v-if="prevPost && prevPost.href" class="py-8">
           <h2 class="text-xs tracking-wide uppercase text-gray-500">
             Previous Article
           </h2>
           <div class="link">
-            <a :href="prevPost.href">{{ prevPost.title }}</a>
+            <router-link :to="prevPost.href">
+              {{ prevPost.title }}
+            </router-link>
           </div>
         </div>
         <div class="pt-8">
-          <a class="link" href="/">← Back to the blog</a>
+          <router-link class="link" to="/">
+            ← Back to Home
+          </router-link>
         </div>
       </footer>
     </div>

package/components/PressArticleCard.vue

@@ -12,7 +12,9 @@ defineProps<{
     <div class="space-y-5 xl:col-span-3">
       <div class="space-y-6">
         <h2 class="text-2xl leading-8 font-bold tracking-tight">
-          <a class="text-gray-900" :href="post.path">{{ post.title }}</a>
+          <router-link class="text-gray-900" :to="post.path || ''">
+            {{ post.title }}
+          </router-link>
         </h2>
         <div
           v-if="post.excerpt"
@@ -21,7 +23,9 @@ defineProps<{
         />
       </div>
       <div class="text-base leading-6 font-medium">
-        <a class="link" aria-label="read more" :href="post.path">Read more →</a>
+        <router-link class="link" aria-label="read more" :to="post.path || ''">
+          Read more →
+        </router-link>
       </div>
     </div>
   </article>

package/components/PressAside.vue

@@ -1,18 +1,16 @@
 <script lang="ts" setup>
-// import { useI18n } from 'vue-i18n'
-import { useData, useFrontmatter } from 'valaxy'
+import { useFrontmatter } from 'valaxy'
 import { useAppStore } from 'valaxy/client/stores/app'
+import PressOutline from './PressOutline.vue'
 
 const frontmatter = useFrontmatter()
-const data = useData()
-// const { t } = useI18n()
 const app = useAppStore()
 </script>
 
 <template>
   <button
-    class="xl:hidden toc-btn shadow fixed press-icon-btn z-350"
-    opacity="75" right="2" bottom="19"
+    class="toc-btn shadow-lg fixed press-icon-btn z-99 xl:hidden!"
+    right="5" bottom="8"
     @click="app.toggleRightSidebar()"
   >
     <div i-ri-file-list-line />
@@ -21,14 +19,14 @@ const app = useAppStore()
   <ValaxyOverlay :show="app.isRightSidebarOpen" @click="app.toggleRightSidebar()" />
 
   <aside
-    class="press-aside lt-xl:fixed
-    press-card xl:(shadow-none hover:shadow-none) shadow hover:shadow-lg"
-    p="l-0 xl:l-4" text="center"
-    z="10"
+    class="press-aside lt-xl:fixed shadow
+    press-card xl:(shadow-none hover:shadow-none) hover:shadow-lg"
+    p="l-0 xl:l-8" text="center"
+    z="5"
     :class="app.isRightSidebarOpen && 'open'"
   >
     <div class="aside-container lt-xl:fixed" flex="~ col">
-      <PressToc v-if="frontmatter.toc !== false" :headers="data.headers || []" />
+      <PressOutline v-if="frontmatter.toc !== false" />
       <div class="flex-grow" />
       <div v-if="$slots.default" class="custom-container">
         <slot />
@@ -41,23 +39,24 @@ const app = useAppStore()
 @use 'valaxy/client/styles/mixins' as *;
 
 .press-card{
-  box-shadow: none;
   background-color: var(--va-c-bg);
 }
 
 .press-aside {
-  position: relative;
-  min-width: 272px;
-  transform: translateX(100%);
   top: 0;
   bottom: 0;
   right: 0;
-  z-index: 10;
+  z-index: var(--pr-z-index-aside);
+  width: var(--va-aside-width);
+
+  transform: translateX(100%);
 
   transition: box-shadow var(--va-transition-duration), opacity 0.25s,
   transform var(--va-transition-duration) cubic-bezier(0.19, 1, 0.22, 1);
 
   &.open {
+    position: fixed;
+    right: 0;
     display: block;
     transform: translateX(0);
   }
@@ -65,10 +64,10 @@ const app = useAppStore()
 
 .aside-container {
   position: sticky;
-  top: calc(var(--pr-nav-height) + 32px);
-  margin-top: calc(var(--pr-nav-height) * -1 - 32px);
-  padding-top: calc(var(--pr-nav-height) + 32px);
-  height: 100vh;
+  top: 0;
+  margin-top: calc(var(--pr-nav-height) * -1 - 20px);
+  padding-top: calc(var(--pr-nav-height) + 20px);
+  height: calc(100vh - var(--pr-nav-height) - 32px);
 }
 
 @include media('xl') {
@@ -82,7 +81,7 @@ const app = useAppStore()
 }
 
 .toc-btn {
-  color: var(--va-c-primary);
-  background-color: var(--va-c-bg);
+  color: var(--va-c-bg);
+  background-color: var(--va-c-primary);
 }
 </style>

package/components/PressButton.vue

@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useRouter } from 'vue-router'
-import { EXTERNAL_URL_RE } from 'valaxy'
 
 const props = defineProps<{
   theme: 'brand' | 'alt'
@@ -9,9 +7,6 @@ const props = defineProps<{
   text: string
 }>()
 
-const isUrl = computed(() => EXTERNAL_URL_RE.test(props.link))
-const router = useRouter()
-
 const classes = computed(() => {
   const arr = []
   if (props.theme === 'brand')
@@ -24,15 +19,13 @@ const classes = computed(() => {
 </script>
 
 <template>
-  <component
-    :is="isUrl ? 'a' : 'button'"
+  <AppLink
+    :to="link"
     m="2"
     :class="classes"
-    class="sese-btn btn" bg="gradient-to-r"
-    :href="isUrl ? link : undefined"
-    :target="isUrl ? '_blank' : undefined"
-    @click="!isUrl && router.push(link)"
+    class="sese-btn btn rounded-full hover:shadow-lg" bg="gradient-to-r"
+    p="x-6"
   >
     {{ text }}
-  </component>
+  </AppLink>
 </template>

package/components/PressCategories.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
+import { useThemeConfig } from 'valaxy'
 import type { Categories } from 'valaxy'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 const props = withDefaults(defineProps<{
   categories: Categories
@@ -16,15 +17,31 @@ const props = withDefaults(defineProps<{
 })
 
 const collapsable = ref(props.collapsable)
+
+const themeConfig = useThemeConfig()
+const sidebar = computed(() => themeConfig.value.sidebar)
 </script>
 
 <template>
-  <ul v-for="category, key in Object.fromEntries(categories)" :key="key" class="category-list" m="l-4">
-    <PressCategory :name="key.toString()" :category="category" :level="level + 1" :display-category="displayCategory" :collapsable="collapsable" />
+  <ul v-for="item in sidebar" :key="item" class="category-list">
+    <PressCategory
+      v-if="categories.get(item)"
+      :name="item" :category="categories.get(item)"
+      :level="level + 1"
+      :display-category="displayCategory"
+      :collapsable="collapsable"
+    />
   </ul>
 </template>
 
 <style lang="scss">
+.category-list {
+  &:first-child {
+    .category-list-item {
+      border-top: 0px;
+    }
+  }
+}
 .post-list-item {
   a {
     color: var(--va-c-text-light);
@@ -47,4 +64,8 @@ const collapsable = ref(props.collapsable)
     }
   }
 }
+
+.category-list+.category-list {
+  margin-top: 1rem;
+}
 </style>

package/components/PressCategory.vue

@@ -23,24 +23,31 @@ const collapsable = ref(props.collapsable)
 const { t, locale } = useI18n()
 
 const getTitle = (post: Post | any) => {
-  const lang = locale.value === 'zh-CN' ? 'zh' : locale.value
+  const lang = locale.value
   return post[`title_${lang}`] ? post[`title_${lang}`] : post.title
 }
 </script>
 
 <template>
-  <li v-if="category.total" class="category-list-item inline-flex items-center">
-    <span class="folder-action inline-flex cursor-pointer" @click="collapsable = !collapsable">
+  <li
+    v-if="category.total"
+    p="t-2"
+    w="full" border="t t-$pr-c-divider-light"
+    class="category-list-item inline-flex items-center justify-between"
+  >
+    <span class="category-name" font="bold" m="l-1" @click="displayCategory ? displayCategory(name) : null">
+      {{ name === 'Uncategorized' ? t('category.uncategorized') : name }}
+      <!-- <sup font="normal">[{{ category.total }}]</sup> -->
+    </span>
+    <span class="folder-action inline-flex cursor-pointer" opacity="50" @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>
-    <span class="category-name" m="l-1" @click="displayCategory ? displayCategory(name) : null">
-      {{ name === 'Uncategorized' ? t('category.uncategorized') : name }} [{{ category.total }}]
+      <div v-else i-ri-folder-reduce-line />
     </span>
   </li>
 
   <template v-if="!collapsable">
     <ul v-if="!isParentCategory(category)">
-      <li v-for="post, i in category.posts" :key="i" class="post-list-item" m="l-4">
+      <li v-for="post, i in category.posts" :key="i" class="post-list-item">
         <router-link v-if="post.title" :to="post.path || ''" class="inline-flex items-center" active-class="active">
           <span m="l-1" text="sm">{{ getTitle(post) }}</span>
         </router-link>

package/components/PressDocFooter.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { useEditLink } from '../composables'
+
+const editLink = useEditLink()
+</script>
+
+<template>
+  <div flex justify="between" text="sm">
+    <a flex items="center" :href="editLink.url" target="_blank">
+      <div i-ri-external-link-line />
+      <span ml-1>{{ editLink.text }}</span>
+    </a>
+    <PressDocFooterLastUpdated />
+  </div>
+</template>

package/components/PressDocFooterLastUpdated.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watchEffect } from 'vue'
+import { useData, useThemeConfig } from 'valaxy'
+
+const data = useData()
+const themeConfig = useThemeConfig()
+
+const date = computed(() => new Date(data.lastUpdated!))
+const isoDatetime = computed(() => date.value.toISOString())
+const datetime = ref('')
+
+// set time on mounted hook because the locale string might be different
+// based on end user and will lead to potential hydration mismatch if
+// calculated at build time
+onMounted(() => {
+  watchEffect(() => {
+    datetime.value = date.value.toLocaleString(window.navigator.language)
+  })
+})
+</script>
+
+<template>
+  <p class="press-lastUpdated">
+    {{ themeConfig.lastUpdatedText ?? 'Last updated' }}:
+    <time :datetime="isoDatetime">{{ datetime }}</time>
+  </p>
+</template>
+
+<style scoped>
+.press-lastUpdated {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--va-c-text-light);
+}
+
+@media (min-width: 640px) {
+  .press-lastUpdated {
+    line-height: 32px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+</style>

package/components/PressFeature.vue

@@ -56,6 +56,6 @@ defineProps<{
   line-height: 24px;
   font-size: 14px;
   font-weight: 500;
-  color: var(--va-c-text-light);
+  color: var(--va-c-text-lighter);
 }
 </style>

package/components/PressFooter.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useSidebar } from 'valaxy'
+import { useThemeConfig } from '../composables'
+
+const themeConfig = useThemeConfig()
+const { hasSidebar } = useSidebar()
+</script>
+
+<template>
+  <footer v-if="themeConfig.footer" class="press-footer" :class="{ 'has-sidebar': hasSidebar }">
+    <div flex="~ col" class="container">
+      <p v-if="themeConfig.footer.message" class="message" v-html="themeConfig.footer.message" />
+      <p v-if="themeConfig.footer.copyright" class="copyright" v-html="themeConfig.footer.copyright" />
+    </div>
+  </footer>
+</template>
+
+<style lang="scss" scoped>
+.press-footer {
+  position: relative;
+  z-index: var(--pr-z-index-footer);
+  border-top: 1px solid var(--pr-c-divider-light);
+  padding: 32px 24px;
+  background-color: var(--va-c-bg);
+
+  &.has-sidebar {
+    display: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .VPFooter {
+    padding: 32px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: var(--pr-layout-max-width);
+  text-align: center;
+}
+
+.message,
+.copyright {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--va-c-text-lighter);
+}
+
+.message   { order: 2; }
+.copyright { order: 1; }
+</style>

package/components/PressHome.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="press-home">
+  <div class="press-home" p="x-6">
     <slot name="home-hero-before" />
     <PressHomeHero />
     <slot name="home-hero-after" />
@@ -11,11 +11,5 @@
     <slot>
       <router-view />
     </slot>
-
-    <p align="center">
-      <a href="https://sponsors.yunyoujun.cn">
-        <img src="https://sponsors.yunyoujun.cn/sponsors.svg">
-      </a>
-    </p>
   </div>
 </template>

package/components/{PressToc.vue → PressOutline.vue}

@@ -1,38 +1,25 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import type { Header } from 'valaxy'
+import { ref } from 'vue'
 import {
-  resolveHeaders,
   useActiveAnchor,
-  useFrontmatter,
+  useOutline,
 } from 'valaxy'
+import { useI18n } from 'vue-i18n'
 import { useThemeConfig } from '../composables'
 
-const props = defineProps<{ headers: Header[] }>()
-
-const frontmatter = useFrontmatter()
+const { t } = useI18n()
 const themeConfig = useThemeConfig()
 
-const { locale, t } = useI18n()
 const container = ref()
 const marker = ref()
 
 useActiveAnchor(container, marker)
 
-const resolvedHeaders = computed(() => {
-  return resolveHeaders(props.headers || [])
-})
-
-function handleClick({ target: el }: Event) {
-  const id = `#${(el as HTMLAnchorElement).href!.split('#')[1]}`
-  const heading = document.querySelector(decodeURIComponent(id)) as HTMLAnchorElement
-  heading?.focus()
-}
+const { headers, handleClick } = useOutline()
 </script>
 
 <template>
-  <div v-show="headers.length" ref="container" p="t-6">
+  <div v-show="headers.length" ref="container">
     <div class="content">
       <div class="outline-title">
         {{ themeConfig.outlineTitle || t('sidebar.toc') }}
@@ -45,26 +32,12 @@ function handleClick({ target: el }: Event) {
           Table of Contents for current page
         </span>
 
-        <ul class="va-toc relative z-1">
-          <li
-            v-for="{ text, link, children, hidden, lang } in resolvedHeaders"
-            v-show="!hidden"
-            :key="link"
-            class="va-toc-item"
-            :lang="lang || locale"
-          >
-            <a class="outline-link" :href="link" @click="handleClick">
-              {{ text }}
-            </a>
-            <ul v-if="children && frontmatter.outline === 'deep'">
-              <li v-for="item in children" v-show="!item.hidden" :key="item.link" :lang="lang || locale">
-                <a class="outline-link" p="l-3" :href="link" @click="handleClick">
-                  {{ item.text }}
-                </a>
-              </li>
-            </ul>
-          </li>
-        </ul>
+        <PressOutlineItem
+          class="va-toc relative z-1"
+          :headers="headers"
+          :on-click="handleClick"
+          root
+        />
       </nav>
     </div>
   </div>
@@ -106,6 +79,7 @@ function handleClick({ target: el }: Event) {
   line-height: 28px;
   font-size: 14px;
   font-weight: 600;
+  color: var(--pr-c-text-1);
 }
 
 .outline-link {

package/components/PressOutlineItem.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { MenuItem } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  headers: MenuItem[]
+  onClick: (e: MouseEvent) => void
+  root?: boolean
+}>()
+
+const { locale } = useI18n()
+</script>
+
+<template>
+  <ul :class="root ? 'root' : 'nested'">
+    <li v-for="{ children, link, title, lang } in headers" :key="link" class="va-toc-item" :lang="lang || locale">
+      <a class="outline-link" :href="link" @click="onClick">{{ title }}</a>
+      <template v-if="children?.length">
+        <PressOutlineItem :headers="children" :on-click="onClick" />
+      </template>
+    </li>
+  </ul>
+</template>
+
+<style lang="scss" scoped>
+.va-toc {
+  .va-toc-item {
+    .outline-link {
+      color: var(--va-c-text-light);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition: color 0.5s;
+
+      &:hover,
+      &.active {
+        color: var(--va-c-brand);
+        transition: color 0.25s;
+      }
+
+    }
+
+    .nested {
+      padding-left: 0.8rem;
+    }
+  }
+}
+</style>

package/components/PressSidebar.vue

@@ -1,13 +1,28 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
 import { useCategory, usePageList, useSidebar } from 'valaxy'
+import { useThemeConfig } from '../composables'
 
 defineProps<{
   open: boolean
 }>()
 
 const pages = usePageList()
-const categories = useCategory('', pages.value)
-categories.children.delete('Uncategorized')
+const themeConfig = useThemeConfig()
+
+const categories = computed(() => {
+  const cs = useCategory('', pages.value)
+  cs.children.delete('Uncategorized')
+
+  const sidebar = themeConfig.value.sidebar
+  if (sidebar) {
+    cs.children.forEach((_, key) => {
+      if (!themeConfig.value.sidebar.includes(key))
+        cs.children.delete(key)
+    })
+  }
+  return cs
+})
 
 const { hasSidebar } = useSidebar()
 </script>
@@ -32,8 +47,8 @@ const { hasSidebar } = useSidebar()
   top: 0;
   bottom: 0;
   left: 0;
-  padding: 1.5rem 1rem;
-  padding-top: var(--pr-nav-height);
+  padding: 1rem;
+  top: var(--pr-nav-height);
   z-index: var(--pr-z-index-sidebar);
   width: calc(100vw - 64px);
   max-width: 320px;
@@ -41,6 +56,7 @@ const { hasSidebar } = useSidebar()
   opacity: 0;
   overflow-x: hidden;
   overflow-y: auto;
+  overflow-y: overlay;
   transform: translateX(-100%);
   transition: opacity 0.5s, transform 0.25s ease;
 
@@ -55,8 +71,6 @@ const { hasSidebar } = useSidebar()
 @include media('md') {
   .press-sidebar {
     z-index: 1;
-    padding: 1.5rem 1rem;
-    padding-top: var(--pr-nav-height);
     width: var(--va-sidebar-width);
     max-width: 100%;
     background-color: var(--va-c-bg-alt);
@@ -65,4 +79,10 @@ const { hasSidebar } = useSidebar()
     transform: translateX(0);
   }
 }
+
+@include mobile {
+  .press-sidebar {
+    top: 0;
+  }
+}
 </style>

package/components/ValaxyMain.vue

@@ -20,23 +20,28 @@ const isHome = useLayout('home')
       'has-sidebar': hasSidebar,
     }"
   >
-    <div w="full" flex="~" p="t-8 x-6 md:x-8">
+    <div
+      w="full" flex="~" :class="{
+        'px-6 md:pl-12': hasSidebar,
+      }" p="t-4"
+    >
       <slot name="main">
-        <div class="content" m="auto y-0" flex="~ col grow" w="full" p="x-12 lt-md:0">
+        <div class="content" w="full" :class="{ 'm-auto': !hasSidebar }" flex="~ col grow" p="lt-md:0">
           <slot name="main-header" />
           <slot name="main-header-after" />
 
           <slot name="main-content">
-            <div class="markdown-body prose max-w-none pb-8">
-              <ValaxyMd :frontmatter="frontmatter">
-                <h1 v-if="!isHome && frontmatter.title" :id="frontmatter.title" tabindex="-1">
-                  {{ frontmatter.title }}
-                  <a class="header-anchor" :href="`#${frontmatter.title}`" aria-hidden="true">#</a>
-                </h1>
-                <slot name="main-content-md" />
-                <slot />
-              </ValaxyMd>
-            </div>
+            <ValaxyMd class="prose mx-auto w-full max-w-4xl" :frontmatter="frontmatter">
+              <h1 v-if="hasSidebar && !isHome && frontmatter.title" :id="frontmatter.title" tabindex="-1">
+                {{ frontmatter.title }}
+                <a class="header-anchor" :href="`#${frontmatter.title}`" aria-hidden="true">#</a>
+              </h1>
+              <slot name="main-content-md" />
+              <slot />
+            </ValaxyMd>
+
+            <PressDocFooter v-if="!isHome" class="pb-8 max-w-4xl" w="full" m="auto" />
+
             <slot name="main-content-after" />
           </slot>
         </div>

package/components/nav/PressNavBar.vue

@@ -2,6 +2,8 @@
 import { useConfig, useSidebar } from 'valaxy'
 import { useThemeConfig } from '../../composables'
 import PressSwitchAppearance from './PressSwitchAppearance.vue'
+import PressNavItemLink from './PressNavItemLink.vue'
+import PressNavItemGroup from './PressNavItemGroup.vue'
 
 defineProps<{
   isScreenOpen?: boolean
@@ -19,36 +21,38 @@ const themeConfig = useThemeConfig()
 
 <template>
   <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">
+    <router-link class="text-xl" to="/" :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>
+    </router-link>
+    <div class="self-stretch flex justify-center items-center text-sm leading-5">
+      <template v-for="item in themeConfig.nav" :key="item.text">
+        <PressNavItemLink v-if="'link' in item" class="px-2" :item="item" />
+        <PressNavItemGroup v-else class="px-2" :item="item" />
       </template>
-
-      <PressToggleLocale m="x-2" />
+      <PressToggleLocale p="x-2" />
       <PressSwitchAppearance m="l-2" />
     </div>
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use 'valaxy/client/styles/mixins' as *;
 
+:root {
+  --pr-navbar-c-bg: rgba(255, 255, 255, 0.8);
+}
+
+.dark {
+  --pr-navbar-c-bg: rgba(24, 24, 24, 0.8);
+}
+
 .press-navbar {
   position: relative;
   border-bottom: 1px solid var(--pr-c-divider-light);
   padding: 0 8px 0 24px;
   height: var(--pr-nav-height);
-  transition: border-color 0.5s, background-color 0.5s;
+  transition: border-color 0.5s;
+  background-color: var(--pr-navbar-c-bg);
 }
 
 @include media('md') {
@@ -63,11 +67,6 @@ const themeConfig = useThemeConfig()
     padding-right: 32px;
     -webkit-backdrop-filter: saturate(50%) blur(8px);
     backdrop-filter: saturate(50%) blur(8px);
-    background: rgba(255, 255, 255, 0.7);
-  }
-
-  .dark .press-navbar.has-sidebar .content {
-    background: rgba(36, 36, 36, 0.7);
   }
 
   @supports not (backdrop-filter: saturate(50%) blur(8px)) {
@@ -88,13 +87,6 @@ const themeConfig = useThemeConfig()
   max-width: calc(var(--pr-layout-max-width) - 64px);
 }
 
-.content {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  flex-grow: 1;
-}
-
 .menu + .translations::before,
 .menu + .appearance::before,
 .menu + .social-links::before,
@@ -116,8 +108,4 @@ const themeConfig = useThemeConfig()
 .appearance + .social-links::before {
   margin-left: 16px;
 }
-
-.social-links {
-  margin-right: -8px;
-}
 </style>

package/components/nav/PressNavItemGroup.vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { NavItemGroup } from '../../types'
+defineProps<{
+  item: NavItemGroup
+}>()
+
+const open = ref(false)
+</script>
+
+<template>
+  <div
+    ref="el"
+    class="flex self-stretch relative group"
+    :aria-expanded="open"
+    aria-haspopup="true"
+    @mouseenter="open = true"
+    @mouseleave="open = false"
+  >
+    <button
+      type="button"
+      class="button flex items-center"
+      @click="open = !open"
+    >
+      <span class="text">
+        {{ item.text }}
+      </span>
+      <div i-ri-arrow-drop-down-line />
+    </button>
+
+    <div class="menu grow" flex="~ col" items="start">
+      <AppLink v-for="itemLink in item.items" :key="itemLink.text" class="menu-item" p="x-3" :to="itemLink.link">
+        {{ itemLink.text }}
+      </AppLink>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.group .button{
+  color: var(--pr-nav-text);
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.group[aria-expanded="true"] .button{
+  color: rgba(60, 60, 60, 0.70);
+  transition: color 0.25s;
+
+  .dark &{
+    color: rgba(235, 235, 235, 0.6)
+  }
+}
+
+.menu {
+  position: absolute;
+  left: 50%;
+
+  min-width: 128px;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
+  transform: translateX(-50%) translateY(calc(var(--pr-nav-height) / 2));
+
+  border-radius: 12px;
+  padding: 12px;
+  border: 1px solid rgba(60, 60, 60, 0.12);
+  background-color: #ffffff;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
+  .dark &{
+    background-color: #242424;
+  }
+
+  &-item{
+    display: flex;
+    width: 100%;
+    border-radius: 6px;
+    color: var(--pr-nav-text);
+    line-height: 32px;
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+    transition: background-color .25s,color .25s;
+
+    &:hover{
+      background-color: #f1f1f1;
+      color: var(--va-c-brand);
+
+      .dark &{
+        background-color: #2f2f2f;
+      }
+    }
+
+  }
+}
+
+.group[aria-expanded="true"] > .menu {
+  opacity: 1;
+  visibility: visible;
+}
+</style>

package/components/nav/PressNavItemLink.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { useRoute } from 'vue-router'
+import type { NavItemLink } from '../../types'
+defineProps<{
+  item: NavItemLink
+}>()
+
+const route = useRoute()
+</script>
+
+<template>
+  <AppLink
+    class="press-nav-item-link"
+    :class="{
+      active: route.path === item.link,
+    }"
+    :to="item.link"
+    rel="noopener"
+    show-external-icon
+  >
+    {{ item.text }}
+  </AppLink>
+</template>
+
+<style lang="scss" scoped>
+.press-nav-item-link{
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--pr-nav-text);
+  transition: color 0.25s;
+
+  &:hover{
+    color: var(--va-c-brand);
+  }
+}
+.active{
+  color: var(--va-c-brand);
+}
+</style>

package/composables/edit-link.ts

@@ -0,0 +1,14 @@
+import { useData } from 'valaxy'
+import { computed } from 'vue'
+import { useThemeConfig } from '.'
+
+export function useEditLink() {
+  const themeConfig = useThemeConfig()
+  return computed(() => {
+    const { text = 'Edit this page', pattern } = themeConfig.value.editLink || {}
+    const { relativePath } = useData()
+    const url = pattern.replace(/:path/g, relativePath)
+
+    return { url, text }
+  })
+}

package/composables/index.ts

@@ -1 +1,2 @@
 export * from './config'
+export * from './edit-link'

package/config/index.ts

@@ -12,7 +12,13 @@ export const defaultThemeConfig: ThemeConfig = {
     primary: '#0078E7',
   },
 
+  sidebar: [],
   nav: [],
-}
 
-export default defaultThemeConfig
+  editLink: {
+    pattern: 'https://github.com/YunYouJun/valaxy/edit/main/docs/:path',
+    text: 'Edit this page on GitHub',
+  },
+
+  footer: {},
+}

package/layouts/layout.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { useSidebar } from 'valaxy/client'
+import { useLayout, useSidebar } from 'valaxy'
 
 const { isOpen: isSidebarOpen, open: openSidebar, close: closeSidebar } = useSidebar()
+const layout = useLayout()
 </script>
 
 <template>
@@ -9,7 +10,7 @@ const { isOpen: isSidebarOpen, open: openSidebar, close: closeSidebar } = useSid
     <PressNav />
     <PressLocalNav :open="isSidebarOpen" @open-menu="openSidebar()" />
     <slot name="sidebar">
-      <PressSidebar :open="isSidebarOpen" />
+      <PressSidebar v-if="layout !== 'post'" :open="isSidebarOpen" />
     </slot>
     <PressBackdrop :show="isSidebarOpen" @click="closeSidebar" />
 
@@ -50,6 +51,8 @@ const { isOpen: isSidebarOpen, open: openSidebar, close: closeSidebar } = useSid
         </component>
       </router-view>
     </slot>
+
+    <PressFooter />
   </div>
 </template>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-press",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Docs Theme for Valaxy",
   "author": {
     "email": "me@yunyoujun.cn",
@@ -19,10 +19,20 @@
   "main": "node/index.ts",
   "types": "types/index.d.ts",
   "dependencies": {
-    "@docsearch/css": "^3.1.1",
-    "@docsearch/js": "^3.1.1"
+    "@docsearch/css": "^3.3.0",
+    "@docsearch/js": "^3.3.0"
   },
   "devDependencies": {
-    "valaxy": "0.10.0"
+    "valaxy": "workspace:*"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "@algolia/client-search",
+        "@types/react",
+        "react",
+        "react-dom"
+      ]
+    }
   }
-}
+}

package/setup/main.ts

@@ -58,11 +58,10 @@ export default defineAppSetup((ctx) => {
 
 function scrollTo(el: HTMLElement, hash: string, smooth = false) {
   let target: Element | null = null
-
   try {
     target = el.classList.contains('header-anchor')
       ? el
-      : document.querySelector(decodeURIComponent(hash))
+      : (decodeURIComponent(hash) && document.querySelector(decodeURIComponent(hash))) || null
   }
   catch (e) {
     console.warn(e)

package/styles/css-vars.scss

@@ -4,10 +4,11 @@
 
 :root {
   --pr-c-text-code: #374562;
+  --pr-c-text-1: #213547;
 
   // aside
-  --pr-aside-text-1: #213547;
-  --pr-aside-text-2: #3c3c3cb3;
+  --pr-aside-text-1: var(--pr-c-text-1);
+  --pr-aside-text-2: rgba(60, 60, 60, 0.702);
 
   --pr-aside-divider: rgba(60, 60, 60, 0.122);
 
@@ -16,13 +17,15 @@
   // nav
   --pr-nav-height: var(--pr-nav-height-mobile);
   --pr-nav-height-mobile: 60px;
+  --pr-nav-text: var(--pr-c-text-1);
 
   // z-index
   --va-z-overlay: var(--pr-z-index-backdrop);
-  --pr-z-index-nav: 8;
-  --pr-z-index-local-nav: 9;
+  --pr-z-index-local-nav: 8;
+  --pr-z-index-nav: 9;
   --pr-z-index-backdrop: 10;
-  --pr-z-index-sidebar: 11;
+  --pr-z-index-aside: 11;
+  --pr-z-index-sidebar: 12;
 
   // switch
   --pr-switch-divider: rgba(60, 60, 60, 0.29);
@@ -31,9 +34,9 @@
 
 .dark {
   --pr-c-text-code: var(--pr-c-indigo-lighter);
+  --pr-c-text-1: #ffffffde;
 
   // aside
-  --pr-aside-text-1: #ffffffde;
   --pr-aside-text-2: #ebebeb99;
   --pr-aside-divider: rgba(84, 84, 84, 0.48);
 

package/styles/helper.scss

@@ -28,17 +28,7 @@
 
   border-radius: 50%;
 
-  transition: background-color var(--va-transition-duration);
-
   div {
     font-size: 1.2rem;
   }
-
-  &:hover {
-    background-color: rgba(var(--va-c-primary-rgb), 0.08);
-  }
-
-  &:active {
-    background-color: rgba(var(--va-c-primary-rgb), 0.16);
-  }
 }

package/styles/markdown.scss

@@ -13,6 +13,7 @@
   }
 
   a {
+    display: inline-block;
     text-decoration: none;
     border-bottom: 1px solid transparent;
     transition: all 0.4s;
@@ -28,6 +29,14 @@
     padding: 3px 6px;
     border-radius: 4px;
     font-weight: 500;
+
+    &::before {
+      content: none;
+    }
+
+    &::after {
+      content: none;
+    }
   }
 }
 
@@ -37,4 +46,4 @@
       margin: 0 -1.5rem;
     }
   }
-}
+}

package/types/index.d.ts

@@ -1,33 +1,71 @@
 export * from '../composables'
 export * from './home.d'
 
-export namespace DocsTheme {
-  export type Config = ThemeConfig
+export namespace PressTheme {
   export type Sidebar = any
-}
 
-/**
- * Theme Config
- */
-export interface ThemeConfig {
-  /**
-   * toc title
-   * @default 'On this page'
-   */
-  outlineTitle: string
-
-  colors: {
+  export interface Footer {
+    message?: string;
+    copyright?: string;
+  }
+
+  export interface EditLink {
+    /**
+     * Pattern for edit link.
+     *
+     * @example 'https://github.com/YunYouJun/valaxy/edit/main/docs/:path'
+     */
+    pattern: string
+
+    /**
+     * Custom text for edit link.
+     *
+     * @default 'Edit this page'
+     */
+    text?: string
+  }
+
+  export interface Config {
     /**
-     * primary color
-     * @default '#0078E7'
+     * toc title
+     * @default 'On this page'
      */
-    primary: string
+    outlineTitle: string
+
+    colors: {
+      /**
+       * primary color
+       * @default '#0078E7'
+       */
+      primary: string
+    }
+
+    nav: Array<NavItem>
+    sidebar: string[]
+
+    editLink: EditLink
+
+    footer: Footer
   }
+}
+
+export interface NavItemLink {
+  link: string
+  text: string
+  active?: string
+}
 
-  nav: {
-    link: string
-    text: string
-  }[]
+export interface NavItemGroup {
+  text: string
+  items: NavItemLink[]
 }
 
+export type NavItem = NavItemLink | NavItemGroup
+
+
+
+/**
+ * Theme Config
+ */
+export type ThemeConfig = PressTheme.Config
 export type ThemeUserConfig = Partial<ThemeConfig>

package/valaxy.config.ts

@@ -1,6 +1,7 @@
 import type { ResolvedValaxyOptions } from 'valaxy'
 import { defineTheme } from 'valaxy'
 import type { Plugin } from 'vite'
+import { defaultThemeConfig } from './config'
 import type { ThemeConfig } from './types'
 
 function ThemeVitePlugin(options: ResolvedValaxyOptions<ThemeConfig>): Plugin {
@@ -29,6 +30,7 @@ function ThemeVitePlugin(options: ResolvedValaxyOptions<ThemeConfig>): Plugin {
 
 export default defineTheme<ThemeConfig>((options) => {
   return {
+    themeConfig: defaultThemeConfig,
     vite: {
       plugins: [ThemeVitePlugin(options)],
     },

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 云游君 YunYouJun <me@yunyoujun.cn>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.