valaxy-theme-hairy 0.2.2 → 1.0.0

package/pages/categories/{[...categories].vue → [...its].vue}

@@ -1,39 +1,37 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { useThemeConfig } from 'valaxy'
 import { ElTimeline, ElTimelineItem } from 'element-plus/es/components/timeline/index'
-import { useCurrentCategory } from '../../hooks/useCategory'
-import { useCategoryPost } from '../../hooks/useCategoryPost'
 
 import type { HairyTheme } from '../..'
 import 'element-plus/es/components/timeline/style/index'
 import 'element-plus/es/components/timeline-item/style/index'
-const props = defineProps<{
-  categories: string
-}>()
-const themeConfig = useThemeConfig<HairyTheme>()
-const categoriesLayout = computed(() => themeConfig.value.categories?.layout || 'post')
+import { useCategory, useCategoryPost } from '../../composables'
+
+const themeConfig = useThemeConfig<HairyTheme.Config>()
+const layout = computed(() => themeConfig.value.layout?.categories || 'post')
 
 const router = useRouter()
+const route = useRoute()
 
-const paths = computed(() => props.categories.split('/').filter(Boolean))
-const current = useCurrentCategory(paths)
+const categories = computed(() => route.params.its as string)
+const paths = computed(() => categories.value.split('/').filter(Boolean))
+const current = useCategory(paths)
 const posts = useCategoryPost(paths)
 
 const i18n = useI18n()
 
-const s = '/'
-
-const getBreadcrumbPath = (index: number) => {
-  const paths = props.categories.split('/').filter(Boolean)
+function getBreadcrumbPath(index: number) {
+  const paths = categories.value.split('/').filter(Boolean)
   if (paths[index] === paths[paths.length - 1])
     return ''
   return `/categories/${paths.slice(0, index + 1).join('/')}`
 }
-const displayCategory = (key: string) => {
-  router.push({ path: `/categories/${[key, ...paths.value].reverse().join('/')}` })
+
+function displayCategory(key: string) {
+  router.push({ path: `/categories/${[...paths.value, key].join('/')}` })
 }
 </script>
 
@@ -45,7 +43,7 @@ const displayCategory = (key: string) => {
     <HairyBreadcrumbItem :to="paths.length && '/categories/' || ''">
       全部
     </HairyBreadcrumbItem>
-    <HairyBreadcrumbItem v-for="(key, index) in categories.split(s)" :key="key" :to="getBreadcrumbPath(index)">
+    <HairyBreadcrumbItem v-for="(key, index) in categories.split('/')" :key="key" :to="getBreadcrumbPath(index)">
       {{ i18n.t(key) }}
     </HairyBreadcrumbItem>
   </HairyBreadcrumb>
@@ -53,44 +51,41 @@ const displayCategory = (key: string) => {
   <div class="grid__view dark:text-gray-3 flex-wrap">
     <template v-for="([key, item]) in current.children" :key="key">
       <div
-        class="relative flex items-center flex-col cursor-pointer hover:text-primary transition-color"
+        v-if="!key.startsWith('/post')"
+        class="relative flex items-center flex-col cursor-pointer hover:text-primary transition-colors"
         @click="displayCategory(key)"
       >
-        <div class="i-ri-folder-open-line text-22 lt-sm:text-15" />
+        <div class="i-material-symbols-folder-open-rounded text-22 lt-sm:text-15" />
         <div class="text-center leading-normal">
           {{ i18n.t(key) }}
         </div>
-        <div class="badge">
-          {{ item.total }}
+        <div class="badge text-12px right-20px top-12px">
+          {{ item.total }} dir
         </div>
       </div>
     </template>
   </div>
   <div class="border-t border-gray-200 dark:border-gray-500 mt-5" />
 
-  <el-timeline v-if="categoriesLayout === 'timeline'" class="pt-5 pl-10">
-    <el-timeline-item v-for="(item, index) in posts" :key="index" hollow size="large">
+  <ElTimeline v-if="layout === 'timeline'" class="pt-5 pl-10">
+    <ElTimelineItem v-for="(item, index) in posts" :key="index" hollow size="large">
       <HairyTimelinePostItem :post="item" />
-    </el-timeline-item>
-  </el-timeline>
+    </ElTimelineItem>
+  </ElTimeline>
   <template v-else>
-    <HairyPostList :posts="posts" />
+    <HairyPosts :posts="posts" />
   </template>
 </template>
 
 <style lang="scss" scoped>
 .badge {
   position: absolute;
-  right: 0.8rem;
-  top: 0.5rem;
-  padding-left: 6px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-right: 6px;
-
+  // padding-left: 6px;
+  // padding-top: 2px;
+  // padding-bottom: 2px;
+  // padding-right: 6px;
   line-height: normal;
   border-radius: 50%;
-  background-color: #f56c6c;
   color: #fff;
 }
 

package/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <HairyPostList :pagination="true" />
+  <HairyPosts pagination />
 </template>
 
 <route lang="yaml">

package/pages/page/[page].vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-defineProps<{ page: string }>()
+
 </script>
 
 <template>
-  <HairyPostList :pagination="true" :cur-page="parseInt(page)" />
+  <HairyPosts :pagination="true" :cur-page="parseInt(String($route.params.page))" />
 </template>
 
 <route lang="yaml">

package/pages/tags/{[tag].vue → [tag]/index.vue}

@@ -1,16 +1,16 @@
 <script lang="ts" setup>
-import { computed, defineProps } from 'vue'
+import { computed } from 'vue'
 import { usePostList } from 'valaxy'
 import { ElTimeline, ElTimelineItem } from 'element-plus/es/components/timeline/index'
 import 'element-plus/es/components/timeline/style/index'
 import 'element-plus/es/components/timeline-item/style/index'
-const props = defineProps<{
-  tag: string
-}>()
+import { useRoute } from 'vue-router'
 
-const posts = usePostList()
+const tag = computed(() => useRoute().params.tag)
 
-const tagPosts = computed<any[]>(() => posts.value.filter(post => post.tags?.includes(props.tag)))
+const posts = computed<any[]>(() =>
+  usePostList().value.filter(post => post.tags?.includes(tag.value as string)),
+)
 </script>
 
 <template>
@@ -22,16 +22,16 @@ const tagPosts = computed<any[]>(() => posts.value.filter(post => post.tags?.inc
       {{ tag }}
     </HairyBreadcrumbItem>
   </HairyBreadcrumb>
-  <el-timeline>
-    <el-timeline-item
-      v-for="(item, index) in tagPosts"
+  <ElTimeline>
+    <ElTimelineItem
+      v-for="(item, index) in posts"
       :key="index"
       hollow
       size="large"
     >
-      <HairyTimelinePostItem :post="item" />
-    </el-timeline-item>
-  </el-timeline>
+      <HairyTimelineContent :post="item" />
+    </ElTimelineItem>
+  </ElTimeline>
 </template>
 
 <route lang="yaml">

package/pages/tags/index.vue

@@ -1,24 +1,31 @@
 <script lang="ts" setup>
-import { useTags } from 'valaxy'
 import { useRouter } from 'vue-router'
+import { useHairyTags } from '../../composables'
+
 const router = useRouter()
 
-const { tags, getTagStyle } = useTags({
+const { getTagStyle, tags } = useHairyTags({
   primary: '#1bc9a6',
 })
 
-const displayTag = (tag: string) => {
+function displayTag(tag: string) {
   router.push(`/tags/${tag}`)
 }
 </script>
 
 <template>
-  <div class="inset-0 h-full flex-center flex-col">
+  <div class="min-h-59vh flex-center flex-col">
     <div text="center" class="text-size-2.5em pt-10 mb-5">
       目前共计 {{ Array.from(tags).length }} 个标签
     </div>
     <div text="center" class="max-w-7xl flex flex-wrap justify-center items-center gap-2">
-      <a v-for="[key, tag] in Array.from(tags).sort()" :key="key" class="post-tag cursor-pointer" :style="getTagStyle(tag.count)" p="1" @click="displayTag(key.toString())">
+      <a
+        v-for="[key, tag] in Array.from(tags).sort()"
+        :key="key" class="post-tag cursor-pointer"
+        :style="getTagStyle(tag.count)"
+        p="1"
+        @click="displayTag(key.toString())"
+      >
         {{ key }}
       </a>
     </div>

package/setup/main.ts

@@ -1,7 +1,7 @@
 import { defineAppSetup } from 'valaxy'
 
 // import { install as installScroll } from '../modules/scroll'
-import { install as installLoading } from '../modules/loading'
+import { install as installLoading } from '../library/loading'
 
 export default defineAppSetup((ctx) => {
   // installScroll(ctx)

package/store/index.ts

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

package/store/modules/global.ts

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useGlobalStore = defineStore('global', () => {
+  const headerRef = ref<HTMLDivElement>()
+  const showDrawer = ref(false)
+
+  return {
+    headerRef,
+    showDrawer,
+  }
+})

package/styles/components/index.scss

@@ -0,0 +1,4 @@
+@import "./aplayer.scss";
+@import "./scrollbar.scss";
+@import "./markdown.scss";
+@import "./nprogress.scss";

package/styles/{markdown.scss → components/markdown.scss}

@@ -1,4 +1,4 @@
-@use "valaxy/client/styles/mixins" as *;
+@forward 'valaxy/client/styles/mixins/index.scss';
 
 .markdown-body {
   --c-toc-link: var(--hy-c-text-light);
@@ -67,6 +67,7 @@ html.dark {
 .custom-block.tip {
   background-color: rgba(200, 200, 200, 0.1);
   border-color: var(--hy-c-primary);
+  padding: 0.5rem 1rem;
 }
 
 .markdown-body {

package/styles/components/nprogress.scss

@@ -0,0 +1,16 @@
+#nprogress {
+  pointer-events: none;
+
+  .bar {
+    top: 0;
+    // margin-top: -5px;
+    height: 5px;
+    opacity: 0.75;
+    background: var(--hy-c-primary);
+    position: fixed;
+    z-index: 1031;
+    left: 0;
+    width: 100%;
+    border-radius: 5px;
+  }
+}

package/styles/css-vars.scss

@@ -50,6 +50,8 @@
   --hy-c-indigo-lighter: #c9def1;
   --hy-c-indigo-dark: #1d2f3f;
   --hy-c-indigo-darker: #14212e;
+
+  --va-c-bg: #fafafa;
 }
 
 .dark {
@@ -61,8 +63,10 @@
   --hy-c-primary-dimm-1: rgba(143, 230, 213, 0.5);
   --hy-c-primary-dimm-2: rgba(143, 230, 213, 0.25);
   --hy-c-primary-dimm-3: rgba(143, 230, 213, 0.05);
+  --va-c-bg: #1b1b1f;
 }
 
+
 :root {
   --hy-c-waves-dimm: var(--va-c-bg);
   --hy-c-waves-dimm-1: rgba(255, 255, 255, 0.7);
@@ -151,6 +155,13 @@
   --hy-c-text-code: var(--hy-c-indigo-lighter);
 }
 
+:root {
+  --va-c-primary-light: var(--hy-c-primary-light);
+  --va-c-primary-lighter: var(--hy-c-primary-lighter);
+  --va-c-primary-dark: var(--hy-c-primary-dark);
+  --va-c-primary: var(--hy-c-primary);
+}
+
 /**
  * element-plus Theme
  * -------------------------------------------------------------------------- */

package/styles/element-plus/tabs.scss

@@ -14,7 +14,7 @@
   }
 
   .el-tabs__item {
-    @apply transition-colors;
+    // @apply transition-colors;
     padding: 0 10px;
   }
 

package/styles/element-plus/timeline.scss

@@ -1,7 +1,7 @@
 .el-timeline {
   .el-timeline-item__content {
     display: inline-block;
-    color: initial;
+    color: var(--va-c-text) !important;
     line-height: 1;
     font-size: 1.5rem;
 

package/styles/global.scss

@@ -0,0 +1,39 @@
+html {
+  color: var(--va-c-text);
+}
+
+body {
+  font-family: var(--hy-font-family-seto);
+  color: var(--va-c-text);
+  background-color: var(--va-c-bg);
+}
+
+html,
+body {
+  scroll-behavior: smooth;
+}
+
+a {
+  color: var(--hy-c-primary);
+  font-weight: 500;
+}
+
+
+@media (min-width: 1200px) {
+  .breakpoint {
+    width: 72.5rem
+  }
+}
+
+@media (max-width: 1200px) {
+  .breakpoint {
+    padding-left: .5rem;
+    padding-right: .5rem
+  }
+}
+
+@media (min-width: 1600px) {
+  .breakpoint {
+    width: 75vw
+  }
+}

package/styles/index.scss

@@ -1,73 +1,4 @@
-@import "./font-face.scss";
-@import "./markdown.scss";
-@import "./element-plus/index.scss";
-@import "./scrollbar.scss";
-@import "./aplayer.scss";
-@import "animate.css";
-
-body {
-  font-family: var(--hy-font-family-seto);
-  @apply transition-colors duration-200;
-  color: var(--va-c-text);
-}
-
-#app {
-  @apply transition-none;
-  min-height: 100vh;
-}
-
-a {
-  @apply transition-colors;
-  color: var(--hy-c-primary-light);
-
-  &:hover {
-    --un-text-opacity: 1;
-    color: var(--hy-c-primary-dark);
-  }
-}
-
-html,
-body {
-  scroll-behavior: smooth;
-}
-
-#nprogress {
-  pointer-events: none;
-
-  .bar {
-    top: 0;
-    // margin-top: -5px;
-    height: 5px;
-    opacity: 0.75;
-    background: var(--hy-c-primary);
-    position: fixed;
-    z-index: 1031;
-    left: 0;
-    width: 100%;
-    border-radius: 5px;
-  }
-}
-
-
-@media (min-width: 1200px) {
-  .breakpoint {
-    width: 72.5rem;
-  }
-}
-
-@media (max-width: 1200px) {
-  .breakpoint {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-}
-
-@media (min-width: 1600px) {
-  .breakpoint {
-    width: 75vw;
-  }
-}
-
-body {
-  // background-image: linear-gradient(to top, #f7f7f7 0, #fdfdfd 20%) no-repeat bottom;
-}
+@use './font-face' as *;
+@use './global' as *;
+@use './components' as *;
+@use './element-plus' as *;

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  // we need tsconfig.json to compile without
+  // error: This is likely not portable. A type annotation is necessary.
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": ["DOM", "ESNext"],
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": 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

@@ -0,0 +1,163 @@
+/* eslint-disable ts/no-use-before-define */
+export namespace HairyTheme {
+  export type Config = ThemeConfig
+  export type Sidebar = any
+  export type { Layout }
+}
+
+/**
+ * Theme Config
+ */
+export interface ThemeConfig {
+  /**
+   * default theme mode
+   *
+   * @default 'light'
+   */
+  theme?: 'dark' | 'light'
+
+  home?: Home
+
+  user?: User
+
+  post?: Post
+
+  /**
+   * colors
+   */
+  colors?: Colors
+
+  /**
+   * layout
+   */
+  layout?: Partial<Layout>
+
+  /**
+   * footer
+   */
+  footer?: Partial<Footer>
+
+  /**
+   * navbar
+   */
+  nav?: NavItem[]
+
+  /**
+   * meting
+   */
+  meting?: Partial<Meting>
+
+  /**
+   * Custom header levels of outline in the aside component.
+   *
+   * @default 2
+   */
+  outline?: number | [number, number] | 'deep' | false
+}
+
+export interface NavItem {
+  text: string
+  link: string
+  icon?: string
+}
+/**
+ * meting options
+ * @see https://github.com/metowolf/MetingJS#option
+ */
+export interface Meting {
+  id: string
+  server: string
+  type: string
+  auto: string
+  fixed: boolean
+  mini: boolean
+  autoplay: boolean
+  theme: string
+  loop: string
+  order: string
+  preload: string
+  volume: number
+  work: string
+  mutex: boolean
+  start: string
+  'lrc-type': number
+  'list-folded': boolean
+  'list-max-height': string
+  'storage-name': string
+  [key: string]: any
+}
+
+export interface Layout {
+  post:
+    | 'text'
+    | 'markdown'
+    | 'image'
+    | 'image:slice'
+    | 'image:slice:reverse'
+  categories: 'timeline' | 'post'
+}
+
+export interface Footer {
+  /**
+   * 建站于
+   */
+  since: number
+
+  /**
+   * Icon between year and copyright info.
+   */
+  icon: {
+    /**
+     * icon name, i-xxx
+     */
+    name: string
+    animated: boolean
+    color: string
+    url: string
+    title: string
+  }
+
+  /**
+   * Powered by valaxy & valaxy-theme-${name}, default is yun
+   */
+  powered: boolean
+
+  /**
+   * Chinese Users | 中国用户
+   * 备案 ICP
+   * 国内用户需要在网站页脚展示备案 ICP 号
+   * https://beian.miit.gov.cn/
+   */
+  beian: {
+    enable: boolean
+    /**
+     * 苏ICP备xxxxxxxx号
+     */
+    icp: string
+  }
+}
+
+export interface Colors {
+/**
+ * primary color
+ * @default '#0078E7'
+ */
+  primary: string
+}
+export interface Home {
+  headline: string
+  title: string
+  description: string
+  images: string[]
+}
+
+export interface Post {
+  images: string[]
+}
+
+export interface User {
+  name?: string
+  description?: string
+}
+
+export type ThemeUserConfig = Partial<ThemeConfig>

package/unocss.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'unocss'
+
 const safelist = [
-  'i-ri:home-2-fill',
+  'i-ri-home-2-fill',
   'i-ri-list-check-2',
   'i-ri-flow-chart',
   'i-ri-user-line',
@@ -11,6 +12,7 @@ const safelist = [
   'i-fluent-markdown-20-filled',
   'i-fluent-code-text-16-filled',
 ]
+
 export default defineConfig({
   theme: {
     breakpoints: {
@@ -28,6 +30,8 @@ export default defineConfig({
     ['font-christmas', { 'font-family': 'var(--hy-font-family-christmas)' }],
     ['font-frederick', { 'font-family': 'var(--hy-font-family-frederick)' }],
     ['text-primary', { color: 'var(--hy-c-primary)' }],
+    ['text-primary-dark', { color: 'var(--hy-c-primary-dark)' }],
+    ['text-primary-light', { color: 'var(--hy-c-primary-light)' }],
     ['border-primary', { 'border-color': 'var(--hy-c-primary)' }],
     ['bg-primary', { background: 'var(--hy-c-primary)' }],
   ],