valaxy-theme-press 0.0.4 → 0.1.1

package/README.md

@@ -2,6 +2,13 @@
 
 This is a theme for valaxy docs.
 
+Inspired by [vitepress](https://vitepress.dev).
+
+我开发此主题以编写 Valaxy 的初期文档，同时以便发现 valaxy 编写主题中的痛点。
+<!-- 它增加了 VitePress 一些所没有的功能，而随着 VitePress 的完善，该主题将不再被维护，文档也将在未来迁移至 VitePress。 -->
+
+- [预览](https://press.valaxy.site)
+
 ## Reference
 
 - [vitepress](https://vitepress.vuejs.org/)

package/components/PressAside.vue

@@ -18,12 +18,12 @@ const app = useAppStore()
   <ValaxyOverlay :show="app.isRightSidebarOpen" @click="app.toggleRightSidebar()" />
 
   <aside
-    class="press-aside lt-xl:fixed shadow
-    press-card xl:(shadow-none hover:shadow-none) hover:shadow-lg"
+    class="press-aside lt-xl:fixed shadow 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'"
+    bg="$va-c-bg"
   >
     <div class="aside-curtain" />
     <div class="aside-container lt-xl:fixed" flex="~ col">
@@ -41,10 +41,6 @@ const app = useAppStore()
 <style lang="scss">
 @use 'valaxy/client/styles/mixins/index.scss' as *;
 
-.press-card{
-  background-color: var(--va-c-bg);
-}
-
 .press-aside {
   top: 0;
   bottom: 0;

package/components/PressButton.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
+import { useI18n } from 'vue-i18n'
+
 const props = defineProps<{
   theme: 'brand' | 'alt'
   link: string
@@ -16,6 +18,8 @@ const classes = computed(() => {
 
   return arr
 })
+
+const { t } = useI18n()
 </script>
 
 <template>
@@ -26,6 +30,6 @@ const classes = computed(() => {
     class="sese-btn btn rounded-full hover:shadow-lg" bg="gradient-to-r"
     p="x-6"
   >
-    {{ text }}
+    {{ t(text) }}
   </AppLink>
 </template>

package/components/PressCategories.vue

@@ -2,6 +2,7 @@
 import { useThemeConfig } from 'valaxy'
 import type { Categories } from 'valaxy'
 import { computed, ref } from 'vue'
+import type { PressTheme } from '../types'
 
 const props = withDefaults(defineProps<{
   categories: Categories
@@ -18,15 +19,19 @@ const props = withDefaults(defineProps<{
 
 const collapsable = ref(props.collapsable)
 
-const themeConfig = useThemeConfig()
+const themeConfig = useThemeConfig<PressTheme.Config>()
 const sidebar = computed(() => themeConfig.value.sidebar)
+
+function getCategoryByName(name: string) {
+  return props.categories.find(c => c.name === name)
+}
 </script>
 
 <template>
   <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)"
+      v-if="getCategoryByName(item)"
+      :category="getCategoryByName(item)"
       :level="level + 1"
       :display-category="displayCategory"
       :collapsable="collapsable"

package/components/PressCategory.vue

@@ -33,28 +33,30 @@ function getTitle(post: Post | any) {
     p="t-2"
     w="full" border="t t-$pr-c-divider-light"
     class="category-list-item inline-flex items-center justify-between"
+    tabindex="0"
   >
     <span class="category-name" font="bold" m="l-1" @click="displayCategory ? displayCategory(category.name) : null">
-      {{ category.name === 'Uncategorized' ? t('category.uncategorized') : category.name }}
+      {{ category.name === 'Uncategorized' ? t('category.uncategorized') : t(`category.${category.name}`) }}
       <!-- <sup font="normal">[{{ category.total }}]</sup> -->
     </span>
-    <span class="folder-action inline-flex cursor-pointer" opacity="50" @click="collapsable = !collapsable">
+    <button
+      tabindex="0" role="button" aria-label="toggle section"
+      class="folder-action inline-flex cursor-pointer" opacity="50" @click="collapsable = !collapsable"
+    >
       <div v-if="collapsable" i-ri-folder-add-line />
       <div v-else i-ri-folder-reduce-line />
-    </span>
+    </button>
   </li>
 
-  <template v-if="!collapsable">
-    <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>
+  <ul v-if="!collapsable">
+    <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>
-  </template>
+      <PressCategory v-else :category="categoryItem" :display-category="displayCategory" :collapsable="collapsable" />
+    </li>
+  </ul>
 </template>

package/components/PressDocFooterLastUpdated.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watchEffect } from 'vue'
 import { useData, useThemeConfig } from 'valaxy'
+import type { PressTheme } from '../types'
 
 const data = useData()
-const themeConfig = useThemeConfig()
+const themeConfig = useThemeConfig<PressTheme.Config>()
 
 const date = computed(() => new Date(data.lastUpdated!))
 const isoDatetime = computed(() => date.value.toISOString())

package/components/PressFeature.vue

@@ -1,21 +1,29 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import type { Feature } from '../types'
 
 defineProps<{
   feature: Feature
 }>()
+
+const { t } = useI18n()
 </script>
 
 <template>
   <article class="press-feature">
     <div v-if="feature.icon" class="icon">
-      {{ feature.icon }}
+      <template v-if="feature.icon.startsWith('i-')">
+        <div :class="feature.icon" />
+      </template>
+      <template v-else>
+        {{ feature.icon }}
+      </template>
     </div>
     <h2 class="title">
-      {{ feature.title }}
+      {{ t(feature.title) }}
     </h2>
     <p class="details">
-      {{ feature.details }}
+      {{ t(feature.details) }}
     </p>
   </article>
 </template>
@@ -35,10 +43,11 @@ defineProps<{
   align-items: center;
   margin-bottom: 20px;
   border-radius: 6px;
-  background-color: var(--va-c-gray-light-4);
+  background-color: var(--vp-c-default-soft);
   width: 48px;
   height: 48px;
   font-size: 24px;
+  transition: background-color 0.25s;
 }
 
 .dark .icon {

package/components/PressHomeHero.vue

@@ -1,8 +1,11 @@
 <script lang="ts" setup>
 import { useFrontmatter } from 'valaxy'
+import { useI18n } from 'vue-i18n'
 import PressButton from './PressButton.vue'
 
 const fm = useFrontmatter()
+
+const { t } = useI18n()
 </script>
 
 <template>
@@ -14,9 +17,9 @@ const fm = useFrontmatter()
   </div>
 
   <h2 m="b-10" text="center 6xl" font="black" leading="tight">
-    Next Generation
+    {{ t('banner.next-generation') }}
     <br>
-    Static <span class="gradient-text from-blue-500 to-purple-700" bg="gradient-to-r">Blog</span> Framework
+    {{ t('banner.static') }} <span class="gradient-text from-blue-500 to-purple-700" bg="gradient-to-r">{{ t('banner.blog') }}</span> {{ t('banner.framework') }}
   </h2>
 
   <div p="2" text="center">

package/components/PressLocalNav.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { useSidebar } from 'valaxy'
 
+import { useI18n } from 'vue-i18n'
+
 defineProps<{
   open: boolean
 }>()
@@ -14,6 +16,8 @@ const { hasSidebar } = useSidebar()
 function scrollToTop() {
   window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
 }
+
+const { t } = useI18n()
 </script>
 
 <template>
@@ -25,11 +29,13 @@ function scrollToTop() {
       @click="$emit('openMenu')"
     >
       <div i-ri-align-left class="menu-icon" />
-      <span class="menu-text">Menu</span>
+      <span class="menu-text">
+        {{ t('menu.title') }}
+      </span>
     </button>
 
     <a class="top-link" href="#" @click="scrollToTop">
-      Return to top
+      {{ t('sidebar.return_top') }}
     </a>
   </div>
 </template>

package/components/PressNavBarMenu.vue

@@ -5,7 +5,7 @@ const themeConfig = useThemeConfig()
 </script>
 
 <template>
-  <div class="flex lt-md:hidden">
+  <div class="flex lt-md:hidden" h="full">
     <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" />

package/components/PressNavBarSearch.vue

@@ -8,7 +8,7 @@ const isAlgolia = computed(() => siteConfig.value.search.type === 'algolia')
 
 const PressAlgoliaSearch = isAlgolia.value
   ? defineAsyncComponent(() => import('./PressAlgoliaSearch.vue'))
-  : null
+  : () => null
 </script>
 
 <template>

package/components/PressNavItemGroup.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { NavItemGroup } from '../types'
 
 defineProps<{
@@ -7,11 +8,14 @@ defineProps<{
 }>()
 
 const open = ref(false)
+
+const { t } = useI18n()
 </script>
 
 <template>
   <div
-    class="flex self-stretch relative group"
+    class="flex relative group"
+    h="full"
     :aria-expanded="open"
     aria-haspopup="true"
     @mouseenter="open = true"
@@ -19,18 +23,19 @@ const open = ref(false)
   >
     <button
       type="button"
-      class="button flex items-center"
+      class="button flex items-center bg-transparent"
+      h="full"
       @click="open = !open"
     >
       <span class="text">
-        {{ item.text }}
+        {{ t(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 }}
+        {{ t(itemLink.text) }}
       </AppLink>
     </div>
   </div>
@@ -54,6 +59,7 @@ const open = ref(false)
 
 .menu {
   position: absolute;
+  top: 20px;
   left: 50%;
 
   min-width: 128px;

package/components/PressNavItemLink.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import type { NavItemLink } from '../types'
 
 defineProps<{
@@ -7,6 +8,8 @@ defineProps<{
 }>()
 
 const route = useRoute()
+
+const { t } = useI18n()
 </script>
 
 <template>
@@ -19,7 +22,7 @@ const route = useRoute()
     rel="noopener"
     show-external-icon
   >
-    {{ item.text }}
+    {{ t(item.text) }}
   </AppLink>
 </template>
 

package/components/PressNavScreenAppearance.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { useThemeConfig } from '../composables/config'
+import { useI18n } from 'vue-i18n'
 
-const themeConfig = useThemeConfig()
+const { t } = useI18n()
 </script>
 
 <template>
   <div class="pr-nav-screen-appearance" flex="~ 1">
     <p class="text">
-      {{ themeConfig.darkModeSwitchLabel || 'Appearance' }}
+      {{ t('button.appearance') }}
     </p>
     <PressSwitchAppearance />
   </div>

package/components/PressNavScreenMenuGroup.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 
+import { useI18n } from 'vue-i18n'
+
 const props = defineProps<{
   text: string
   items: any[]
@@ -12,6 +14,8 @@ const groupId = computed(() =>
   `NavScreenGroup-${props.text.replace(' ', '-').toLowerCase()}`,
 )
 
+const { t } = useI18n()
+
 function toggle() {
   isOpen.value = !isOpen.value
 }
@@ -25,7 +29,7 @@ function toggle() {
       :aria-expanded="isOpen"
       @click="toggle"
     >
-      <span class="button-text">{{ text }}</span>
+      <span class="button-text">{{ t(text) }}</span>
       <div i-ri-add-line class="button-icon" />
     </button>
 

package/components/PressNavScreenMenuGroupLink.vue

@@ -1,17 +1,21 @@
 <script lang="ts" setup>
 import { inject } from 'vue'
 
+import { useI18n } from 'vue-i18n'
+
 defineProps<{
   text: string
   link: string
 }>()
 
 const closeScreen = inject('close-screen') as () => void
+
+const { t } = useI18n()
 </script>
 
 <template>
   <AppLink class="pr-nav-screen-menu-group-link" :to="link" @click="closeScreen">
-    {{ text }}
+    {{ t(text) }}
   </AppLink>
 </template>
 

package/components/PressOutline.vue

@@ -5,10 +5,8 @@ import {
   useOutline,
 } from 'valaxy'
 import { useI18n } from 'vue-i18n'
-import { useThemeConfig } from '../composables'
 
 const { t } = useI18n()
-const themeConfig = useThemeConfig()
 
 const container = ref()
 const marker = ref()
@@ -22,7 +20,7 @@ const { headers, handleClick } = useOutline()
   <div v-show="headers.length" ref="container">
     <div class="content">
       <div class="outline-title">
-        {{ themeConfig.outlineTitle || t('sidebar.toc') }}
+        {{ t('theme.outlineTitle') }}
       </div>
 
       <div ref="marker" class="outline-marker" />
@@ -33,7 +31,7 @@ const { headers, handleClick } = useOutline()
         </span>
 
         <PressOutlineItem
-          class="va-toc relative z-1"
+          class="va-toc relative z-1 css-i18n-toc"
           :headers="headers"
           :on-click="handleClick"
           root

package/components/PressPostList.vue

@@ -17,10 +17,10 @@ const posts = computed(() => props.posts || site.postList)
 
 <template>
   <ul class="divide-y divide-gray-200">
-    <Transition v-for="post, i in posts" :key="i" name="fade">
-      <li class="py-12">
+    <TransitionGroup name="fade">
+      <li v-for="post, i in posts" :key="i" class="py-12">
         <PressArticleCard :post="post" />
       </li>
-    </Transition>
+    </TransitionGroup>
   </ul>
 </template>

package/components/ValaxyMain.vue

@@ -36,7 +36,7 @@ const localeTitle = computed(() => getLocaleTitle(locale.value, frontmatter.valu
     >
       <div class="container" flex="~ grow" justify="between">
         <slot name="main">
-          <div class="content" w="full" :class="{ 'm-auto': !hasSidebar }" flex="~ col grow" p="lt-md:0">
+          <div class="vp-doc content" w="full" :class="{ 'm-auto': !hasSidebar }" flex="~ col grow" p="lt-md:0">
             <slot name="main-header" />
             <slot name="main-header-after" />
 
@@ -45,7 +45,7 @@ const localeTitle = computed(() => getLocaleTitle(locale.value, frontmatter.valu
                 <ValaxyMd class="prose mx-auto w-full max-w-4xl" :frontmatter="frontmatter">
                   <h1 v-if="hasSidebar && !isHome && frontmatter.title" :id="frontmatter.title" tabindex="-1">
                     {{ localeTitle }}
-                    <a class="header-anchor" :href="`#${frontmatter.title}`" aria-hidden="true">#</a>
+                    <a class="header-anchor" :href="`#${frontmatter.title}`" aria-hidden="true" />
                   </h1>
                   <slot name="main-content-md" />
                   <slot />

package/composables/config.ts

@@ -4,7 +4,6 @@ import type { ThemeConfig } from '../types'
 
 /**
  * getThemeConfig
- * @returns
  */
 export function useThemeConfig<T = ThemeConfig>() {
   const config = useConfig<T>()

package/config/index.ts

@@ -1,7 +1,5 @@
 import type { ThemeConfig } from '../types'
 
-export const anonymousImage = 'https://cdn.yunyoujun.cn/img/avatar/none.jpg'
-
 /**
  * Default Config
  */

package/layouts/layout.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useLayout, useSidebar } from 'valaxy'
+import { asAny, useLayout, useSidebar } from 'valaxy'
 
 const { isOpen: isSidebarOpen, open: openSidebar, close: closeSidebar } = useSidebar()
 const layout = useLayout()
@@ -16,7 +16,7 @@ const layout = useLayout()
 
     <slot>
       <router-view v-slot="{ Component }">
-        <component :is="Component">
+        <component :is="asAny(Component)">
           <template #main-header>
             <slot name="main-header" />
           </template>

package/layouts/post.vue

@@ -1,3 +1,13 @@
+<script setup lang="ts">
+import { defineArticle, useSchemaOrg } from '@unhead/schema-org'
+
+useSchemaOrg([
+  defineArticle({
+    '@type': 'Article',
+  }),
+])
+</script>
+
 <template>
   <Layout>
     <PressArticle />

package/locales/en.yml

@@ -0,0 +1,4 @@
+valaxy_theme_press: Valaxy Theme Press
+
+theme:
+  outlineTitle: On this page

package/locales/zh-CN.yml

@@ -0,0 +1,4 @@
+valaxy_theme_press: Valaxy 主题 Press
+
+theme:
+  outlineTitle: 本页

package/package.json

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

package/setup/main.ts

@@ -1,6 +1,17 @@
 import { defineAppSetup } from 'valaxy'
 import { nextTick } from 'vue'
 
+import 'vitepress/dist/client/theme-default/styles/vars.css'
+
+// import 'vitepress/dist/client/theme-default/styles/base.css'
+// import 'vitepress/dist/client/theme-default/styles/utils.css'
+// import 'vitepress/dist/client/theme-default/styles/components/vp-code.css'
+import 'vitepress/dist/client/theme-default/styles/components/vp-code-group.css'
+import 'vitepress/dist/client/theme-default/styles/components/vp-doc.css'
+import 'vitepress/dist/client/theme-default/styles/components/custom-block.css'
+
+// import 'vitepress/dist/client/theme-default/styles/components/vp-sponsor.css'
+
 export default defineAppSetup((ctx) => {
   const { router, isClient } = ctx
   if (!isClient)

package/styles/markdown.scss

@@ -21,10 +21,6 @@
     text-decoration: none;
     border-bottom: 1px solid transparent;
     transition: all 0.4s;
-
-    &:hover {
-      // border-bottom-color: var(--va-c-brand);
-    }
   }
 
   code:not(pre > code) {

package/tsconfig.json

@@ -2,26 +2,26 @@
   // we need tsconfig.json to compile without
   // error: This is likely not portable. A type annotation is necessary.
   "compilerOptions": {
-    "allowJs": true,
-    "baseUrl": ".",
-    "module": "ESNext",
     "target": "ESNext",
-    "lib": ["DOM", "ESNext"],
-    "strict": true,
-    "esModuleInterop": true,
     "jsx": "preserve",
-    "skipLibCheck": true,
+    "lib": ["DOM", "ESNext"],
+    "baseUrl": ".",
+    "module": "ESNext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "noUnusedLocals": true,
-    "strictNullChecks": true,
-    "forceConsistentCasingInFileNames": true,
     "types": [
       "vite/client",
       "vue/ref-macros",
       "vite-plugin-pages/client",
       "vite-plugin-vue-layouts/client"
-    ]
+    ],
+    "allowJs": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true
   },
   "exclude": ["**/dist/**", "node_modules"]
 }

package/types/index.d.ts

@@ -5,8 +5,8 @@ export namespace PressTheme {
   export type Sidebar = any
 
   export interface Footer {
-    message?: string;
-    copyright?: string;
+    message?: string
+    copyright?: string
   }
 
   export interface SocialLink {
@@ -46,7 +46,6 @@ export namespace PressTheme {
        */
       primary: string
     }
-    
 
     nav: Array<NavItem>
     sidebar: string[]
@@ -57,11 +56,7 @@ export namespace PressTheme {
 
     socialLinks: SocialLink[]
 
-    // label
-    /**
-     * Toggle dark label
-     */
-    darkModeSwitchLabel?: string
+    lastUpdatedText?: string
   }
 }
 
@@ -78,8 +73,6 @@ export interface NavItemGroup {
 
 export type NavItem = NavItemLink | NavItemGroup
 
-
-
 /**
  * Theme Config
  */

package/utils/index.ts

@@ -2,8 +2,7 @@
  * get locale title
  * @param locale
  * @param frontmatter
- * @returns
  */
 export function getLocaleTitle(locale: string, frontmatter: any) {
-  return frontmatter[`title${locale === 'en' ? '' : `_${locale}`}`]
+  return frontmatter[`title${locale === 'en' ? '' : `_${locale}`}`] || frontmatter.title
 }

package/valaxy.config.ts

@@ -32,11 +32,6 @@ export default defineTheme<ThemeConfig>((options) => {
   return {
     themeConfig: defaultThemeConfig,
     vite: {
-      build: {
-        rollupOptions: {
-          external: ['valaxy-addon-algolia'],
-        },
-      },
       plugins: [ThemeVitePlugin(options)],
     },
   }