valaxy-theme-press 0.0.4 → 0.1.0

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,8 +18,7 @@ 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="$"
@@ -41,10 +40,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

@@ -35,7 +35,7 @@ function getTitle(post: Post | any) {
     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 }}
+      {{ 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">

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/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/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,6 +8,8 @@ defineProps<{
 }>()
 
 const open = ref(false)
+
+const { t } = useI18n()
 </script>
 
 <template>
@@ -19,18 +22,18 @@ const open = ref(false)
   >
     <button
       type="button"
-      class="button flex items-center"
+      class="button flex items-center bg-transparent"
       @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>

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/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.0",
   "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,
+    "module": "ESNext",
     "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "noUnusedLocals": true,
-    "strictNullChecks": true,
-    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
     "types": [
       "vite/client",
       "vue/ref-macros",
       "vite-plugin-pages/client",
       "vite-plugin-vue-layouts/client"
-    ]
+    ],
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": 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[]
@@ -62,6 +61,8 @@ export namespace PressTheme {
      * Toggle dark label
      */
     darkModeSwitchLabel?: string
+
+    lastUpdatedText?: string
   }
 }
 
@@ -78,8 +79,6 @@ export interface NavItemGroup {
 
 export type NavItem = NavItemLink | NavItemGroup
 
-
-
 /**
  * Theme Config
  */

package/utils/index.ts

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

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)],
     },
   }