docs: adjust post layout and fix #81

README.md

@@ -66,7 +66,7 @@ For a example, you can see [demo/yun](./demo/yun/) folder.
 
 ## Dev
 
-Want to get involved in the development? Look [here](https://valaxy.yyj.moe/docs/dev).
+Want to get involved in the development? Look [here](https://valaxy.site/dev).
 
 Want to create your theme? Check [valaxy-theme-starter](https://github.com/YunYouJun/valaxy-theme-starter).
 

docs/pages/posts/i18n.md

@@ -1,5 +1,5 @@
 ---
-title: i18n
+title: How to realize CSS i18n?
 date: 2022-04-09
 categories: Valaxy 开发笔记
 tags:
@@ -7,7 +7,6 @@ tags:
   - i18n
   - 笔记
 end: true
-layout: default
 ---
 
 ::: tip

packages/valaxy-theme-press/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-6xl m-auto">
+    <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,12 +39,13 @@ 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-5 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">
         <router-view />
       </div>
@@ -67,7 +67,7 @@ const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
             <a :href="nextPost.href">{{ nextPost.title }}</a>
           </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>
@@ -76,7 +76,7 @@ const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
           </div>
         </div>
         <div class="pt-8">
-          <a class="link" href="/">← Back to the blog</a>
+          <a class="link" href="/">← Back to Home</a>
         </div>
       </footer>
     </div>

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

@@ -47,4 +47,8 @@ const collapsable = ref(props.collapsable)
     }
   }
 }
+
+.category-list+.category-list {
+  margin-top: 1rem;
+}
 </style>

packages/valaxy-theme-press/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>

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

@@ -20,7 +20,11 @@ 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:px-8': hasSidebar,
+      }" p="t-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" />
@@ -29,7 +33,7 @@ const isHome = useLayout('home')
           <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">
+                <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>

packages/valaxy-theme-press/config/index.ts

@@ -12,7 +12,6 @@ export const defaultThemeConfig: ThemeConfig = {
     primary: '#0078E7',
   },
 
+  sidebar: ['Guide', 'Dev', 'Theme', 'Addon'],
   nav: [],
 }
-
-export default defaultThemeConfig

packages/valaxy-theme-press/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" />
 

packages/valaxy-theme-press/types/index.d.ts

@@ -24,6 +24,8 @@ export interface ThemeConfig {
     primary: string
   }
 
+  sidebar: string[]
+
   nav: {
     link: string
     text: string

packages/valaxy-theme-press/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)],
     },

packages/valaxy/client/composables/layout.ts

@@ -1,7 +1,10 @@
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 
-export function useLayout(layout: string) {
+export function useLayout(layout?: string) {
   const route = useRoute()
-  return computed(() => route.meta.layout === layout)
+  if (layout)
+    return computed(() => route.meta.layout === layout)
+  else
+    return computed(() => route.meta.layout)
 }

packages/valaxy/client/composables/sidebar.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { useFrontmatter } from '..'
+import { useFrontmatter, useLayout } from '..'
 
 export function useActiveSidebarLinks(container: Ref<HTMLElement>, marker: Ref<HTMLElement>) {
   const onScroll = throttleAndDebounce(setActiveLink, 200)
@@ -119,10 +119,12 @@ function throttleAndDebounce(fn: () => void, delay: number): () => void {
 export function useSidebar() {
   const isOpen = ref(false)
   const fm = useFrontmatter()
+  const layout = useLayout()
   const hasSidebar = computed(() => {
     return (
       fm.value.sidebar !== false
-      && fm.value.layout !== 'home'
+      && layout.value !== 'home'
+      && layout.value !== 'post'
     )
   })