valaxy-theme-press 0.0.2 → 0.0.4

package/client/index.ts

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

package/components/PressAlgoliaSearch.vue

@@ -0,0 +1,208 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import { useAddonAlgolia } from 'valaxy-addon-algolia'
+
+const { t } = useI18n()
+
+const { loaded, load, metaKey } = useAddonAlgolia()
+</script>
+
+<template>
+  <div>
+    <AlgoliaSearchBox v-if="loaded" />
+
+    <div v-else id="docsearch" @click="load">
+      <button
+        class="DocSearch DocSearch-Button"
+        aria-label="Search"
+      >
+        <span class="DocSearch-Button-Container">
+          <svg
+            class="DocSearch-Search-Icon"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+          >
+            <path
+              d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+              stroke="currentColor"
+              fill="none"
+              fill-rule="evenodd"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <span class="DocSearch-Button-Placeholder">{{ t('search.placeholder') }}</span>
+        </span>
+        <span class="DocSearch-Button-Keys">
+          <kbd class="DocSearch-Button-Key" />
+          <kbd class="DocSearch-Button-Key">K</kbd>
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style>
+.DocSearch-Button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  width: 32px;
+  height: 55px;
+  background: transparent;
+  transition: border-color 0.25s;
+}
+
+.DocSearch-Button:hover {
+  background: transparent;
+}
+
+.DocSearch-Button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.DocSearch-Button:focus:not(:focus-visible) {
+  outline: none !important;
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button {
+    justify-content: flex-start;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    padding: 0 10px 0 12px;
+    width: 100%;
+    height: 40px;
+    background-color: var(--va-c-bg-alt);
+  }
+
+  .DocSearch-Button:hover {
+    border-color: var(--va-c-brand);
+    background: var(--va-c-bg-alt);
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Container {
+  display: flex;
+  align-items: center;
+}
+
+.DocSearch-Button .DocSearch-Search-Icon {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  color: var(--va-c-text-1);
+  fill: currentColor;
+  transition: color 0.5s;
+}
+
+.DocSearch-Button:hover .DocSearch-Search-Icon {
+  color: var(--va-c-text-1);
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button .DocSearch-Search-Icon {
+    top: 1px;
+    margin-right: 8px;
+    width: 14px;
+    height: 14px;
+    color: var(--va-c-text-2);
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Placeholder {
+  display: none;
+  margin-top: 2px;
+  padding: 0 16px 0 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--va-c-text-2);
+  transition: color 0.5s;
+}
+
+.DocSearch-Button:hover .DocSearch-Button-Placeholder {
+  color: var(--va-c-text-1);
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button .DocSearch-Button-Placeholder {
+    display: inline-block;
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Keys {
+  /*rtl:ignore*/
+  direction: ltr;
+  display: none;
+  min-width: auto;
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button .DocSearch-Button-Keys {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Key {
+  display: block;
+  margin: 2px 0 0 0;
+  border: 1px solid var(--va-c-divider);
+  /*rtl:begin:ignore*/
+  border-right: none;
+  border-radius: 4px 0 0 4px;
+  padding-left: 6px;
+  /*rtl:end:ignore*/
+  min-width: 0;
+  width: auto;
+  height: 22px;
+  font-family: var(--va-font-sans);
+  font-size: 12px;
+  font-weight: 500;
+  transition: color 0.5s, border-color 0.5s;
+}
+
+.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
+  /*rtl:begin:ignore*/
+  border-right: 1px solid var(--va-c-divider);
+  border-left: none;
+  border-radius: 0 4px 4px 0;
+  padding-left: 2px;
+  padding-right: 6px;
+  /*rtl:end:ignore*/
+}
+
+.DocSearch-Button .DocSearch-Button-Key:first-child {
+  font-size: 1px;
+  letter-spacing: -12px;
+  color: transparent;
+}
+
+.DocSearch-Button .DocSearch-Button-Key:first-child:after {
+  content: v-bind(metaKey);
+  font-size: 12px;
+  letter-spacing: normal;
+  color: var(--docsearch-muted-color);
+}
+
+.DocSearch-Button .DocSearch-Button-Key:first-child > * {
+  display: none;
+}
+
+.dark .DocSearch-Footer {
+  border-top: 1px solid var(--va-c-divider);
+}
+
+.DocSearch-Form {
+  border: 1px solid var(--va-c-brand);
+  background-color: var(--va-c-white);
+}
+
+.dark .DocSearch-Form {
+  background-color: var(--va-c-bg-soft-mute);
+}
+</style>

package/components/PressArticle.vue

@@ -2,36 +2,41 @@
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 
-import { useFrontmatter, usePostList } from 'valaxy'
+import { useFrontmatter, useSiteStore } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+import { getLocaleTitle } from '../utils'
+
 const frontmatter = useFrontmatter()
 
 const route = useRoute()
-const posts = usePostList()
+const site = useSiteStore()
 
 function findCurrentIndex() {
-  return posts.value.findIndex(p => p.href === route.path)
+  return site.postList.findIndex(p => p.href === route.path)
 }
 
-const nextPost = computed(() => posts.value[findCurrentIndex() - 1])
-const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
+const nextPost = computed(() => site.postList[findCurrentIndex() - 1])
+const prevPost = computed(() => site.postList[findCurrentIndex() + 1])
+
+const { locale } = useI18n()
+const localeTitle = computed(() => getLocaleTitle(locale.value, frontmatter.value))
 </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
         "
       >
-        {{ frontmatter.title }}
+        {{ localeTitle }}
       </h1>
     </header>
 
@@ -40,14 +45,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 +62,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 +70,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,15 @@
 <script lang="ts" setup>
-// import { useI18n } from 'vue-i18n'
-import { useData, useFrontmatter } from 'valaxy'
-import { useAppStore } from 'valaxy/client/stores/app'
+import { useAppStore, useFrontmatter } from 'valaxy'
+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,43 +18,48 @@ 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"
+    flex="~ col grow"
+    p="l-0 xl:l-8" text="center"
+    z="$"
     :class="app.isRightSidebarOpen && 'open'"
   >
+    <div class="aside-curtain" />
     <div class="aside-container lt-xl:fixed" flex="~ col">
-      <PressToc v-if="frontmatter.toc !== false" :headers="data.headers || []" />
-      <div class="flex-grow" />
-      <div v-if="$slots.default" class="custom-container">
-        <slot />
+      <div class="aside-content overflow-auto" flex="~ col">
+        <PressOutline v-if="frontmatter.toc !== false" />
+        <div class="flex-grow" />
+        <div v-if="$slots.default" class="custom-container">
+          <slot />
+        </div>
       </div>
     </div>
   </aside>
 </template>
 
 <style lang="scss">
-@use 'valaxy/client/styles/mixins' as *;
+@use 'valaxy/client/styles/mixins/index.scss' 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-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,13 +67,22 @@ 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);
+  top: 0;
+  margin-top: calc(var(--pr-nav-height) * -1 - 20px);
+  padding-top: calc(var(--pr-nav-height) + 20px);
   height: 100vh;
 }
 
-@include media('xl') {
+.aside-curtain {
+  position: fixed;
+  bottom: 0;
+  z-index: 10;
+  width: 220px;
+  height: 32px;
+  background: linear-gradient(transparent,var(--va-c-bg) 70%);
+}
+
+@include screen('xl') {
   .aside-container {
     top: 0;
   }
@@ -82,7 +93,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/PressBackdrop.vue

@@ -17,7 +17,7 @@ defineProps<{
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: var(--pr-z-index-backdrop);
+  z-index: var(--pr-z-backdrop);
   background: rgba(0, 0, 0, .6);
   transition: opacity 0.5s;
 

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.find(c => c.name === item)"
+      :category="categories.find(c => c.name === 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

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import type { Category, Post } from 'valaxy'
-import { isParentCategory } from 'valaxy'
+import { isCategoryList } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
 const props = withDefaults(defineProps<{
-  name: string
   // to eliminate the warning
   category: Category
   level?: number
@@ -22,30 +21,40 @@ const props = withDefaults(defineProps<{
 const collapsable = ref(props.collapsable)
 const { t, locale } = useI18n()
 
-const getTitle = (post: Post | any) => {
-  const lang = locale.value === 'zh-CN' ? 'zh' : locale.value
+function getTitle(post: Post | any) {
+  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(category.name) : null">
+      {{ category.name === 'Uncategorized' ? t('category.uncategorized') : category.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">
-        <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>
+    <ul>
+      <li v-for="categoryItem, i in category.children" :key="i" class="post-list-item">
+        <template v-if="!isCategoryList(categoryItem)">
+          <router-link v-if="categoryItem.title" :to="categoryItem.path || ''" class="inline-flex items-center" active-class="active">
+            <span m="l-1" text="sm">{{ getTitle(categoryItem) }}</span>
+          </router-link>
+        </template>
+
+        <PressCategory v-else :category="categoryItem" :display-category="displayCategory" :collapsable="collapsable" />
       </li>
     </ul>
-    <PressCategories v-else :categories="category.children" :display-category="displayCategory" :collapsable="collapsable" />
   </template>
 </template>

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>