valaxy-theme-yun 0.19.13 → 0.20.0-beta.1

package/setup/main.ts

@@ -1,21 +1,63 @@
-import { defineAppSetup, useAppStore } from 'valaxy'
-import { nextTick } from 'vue'
+import { defineAppSetup } from 'valaxy'
+import '../styles/global.scss'
+import { MotionPlugin } from '@vueuse/motion'
+
+import PrimeVue from 'primevue/config'
+import AnimateOnScroll from 'primevue/animateonscroll'
+import StyleClass from 'primevue/styleclass'
+import ToastService from 'primevue/toastservice'
+
+import primeStyles from '../styles/primevue'
+import '../styles/primevue/tooltip.scss'
 import { useYunAppStore } from '../stores'
 
 export default defineAppSetup((ctx) => {
   // can do for setup
 
-  const { router } = ctx
+  const { router, app } = ctx
+  // https://motion.vueuse.org/
+  app.use(MotionPlugin)
+  // primevue
+  app.use(PrimeVue, {
+    unstyled: true,
+    // ripple: true,
+
+    pt: {
+      // tooltip: {
+      //   arrow: {
+      //     style: {
+      //       borderBottomColor: 'var(--p-primary-color)',
+      //     },
+      //   },
+      //   text: '!bg-primary !text-primary-contrast !font-medium',
+      // },
+      ...primeStyles,
+
+      dock: {
+        root: 'yun-dock',
+        list: 'yun-dock-list',
+        listContainer: 'yun-dock-list-container',
+        item: 'yun-dock-item',
+        itemLink: 'yun-dock-item-link',
+      },
+    },
+  })
+  app.directive('animateonscroll', AnimateOnScroll)
+  app.directive('styleclass', StyleClass)
+
+  // use floating-vue
+  // app.directive('tooltip', Tooltip)
+  app.use(ToastService)
+
+  // app.$primevue.config.ripple = true
+
   router.afterEach(() => {
     /**
      * router import order
      * @see https://pinia.vuejs.org/zh/core-concepts/outside-component-usage.html#single-page-applications
      */
-    const appStore = useAppStore()
-    const yunAppStore = useYunAppStore()
-    nextTick(() => {
-      if (appStore.isMobile)
-        yunAppStore.leftSidebar.close()
-    })
+    const app = useYunAppStore()
+    if (app.fullscreenMenu.isOpen)
+      app.fullscreenMenu.toggle()
   })
 })

package/stores/app.ts

@@ -1,11 +1,33 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { useDynamicLeftSidebar } from 'valaxy'
+import { isClient, useScroll, useToggle } from '@vueuse/core'
+import { useScreenSize } from 'valaxy'
 
 export const useYunAppStore = defineStore('yun-app', () => {
-  const leftSidebar = useDynamicLeftSidebar()
+  // 左侧边栏
+  const [isLeftSidebarOpen, toggleLeftSidebar] = useToggle()
+  // 右侧边栏
+  const [isRightSidebarOpen, toggleRightSidebar] = useToggle()
+  // 全屏菜单
+  const [isFullscreenMenuOpen, toggleFullscreenMenu] = useToggle()
+
+  // init once
+  const size = useScreenSize()
 
   return {
-    leftSidebar,
+    size,
+    leftSidebar: {
+      isOpen: isLeftSidebarOpen,
+      toggle: toggleLeftSidebar,
+    },
+    rightSidebar: {
+      isOpen: isRightSidebarOpen,
+      toggle: toggleRightSidebar,
+    },
+    fullscreenMenu: {
+      isOpen: isFullscreenMenuOpen,
+      toggle: toggleFullscreenMenu,
+    },
+    scrollY: isClient ? useScroll(window).y : 0,
   }
 })
 

package/styles/animations/index.scss

@@ -0,0 +1,36 @@
+// cubic-bezier(0.18, 0.66, 0.05, 0.96)
+// cubic-bezier(0.77, 0, 0.17, 1.02)
+
+@use 'sass:map';
+@use '../vars.scss' as *;
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity .2s map.get($cubic-bezier, 'ease-in');
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  opacity: 1;
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/styles/common/markdown.scss

@@ -15,6 +15,10 @@
 .markdown-body {
   word-wrap: break-word;
 
+  a {
+    color: var(--va-c-link);
+  }
+
   h1,
   h2,
   h3,

package/styles/css-vars.scss

@@ -14,6 +14,24 @@
   @include set-css-var-from-map($light);
 }
 
-.dark {
+html.dark {
   @include set-css-var-from-map($dark);
+
+  // bg
+  // gradient
+  --va-c-bg: #1a1a1d;
+  --va-c-bg-soft: #121215;
+}
+
+// animation
+@media screen and (width <= 768px) {
+  :root {
+    --rect-margin: 20px;
+  }
+}
+
+@media screen and (width > 768px) {
+  :root {
+    --rect-margin: 48px;
+  }
 }

package/styles/global.scss

@@ -0,0 +1,8 @@
+// global css
+
+/**
+ * bg transition
+ */
+html {
+  transition: background-color 0.6s;
+}

package/styles/index.scss

@@ -13,3 +13,4 @@ $c-primary: #0078e7 !default;
 @use 'valaxy/client/styles/components/code.scss' as *;
 @use 'valaxy/client/styles/components/code-group.scss' as *;
 @use 'valaxy/client/styles/components/custom-block.scss' as *;
+@use "./animations/index.scss" as *;

package/styles/layout/index.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
 @use "valaxy/client/styles/mixins/index.scss" as *;
 @use "./post" as *;
 
@@ -7,4 +9,5 @@ html {
 
 .yun-main {
   transition: padding-left var(--va-transition-duration);
+  transition-timing-function: map.get($cubic-bezier, 'ease-in-out');
 }

package/styles/modules/prologue.scss

@@ -0,0 +1 @@
+// bg-transition

package/styles/primevue/index.ts

@@ -0,0 +1,7 @@
+import tooltip from './tooltip'
+
+export default {
+  directives: {
+    tooltip,
+  },
+}

package/styles/primevue/tooltip.scss

@@ -0,0 +1,55 @@
+// deprecated
+// use floating-vue
+@use 'sass:map';
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
+
+:root {
+  --p-overlay-popover-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1),0px 2px 4px -2px rgb(0 0 0 / 0.1);
+  --p-overlay-popover-border-radius: 4px;
+
+  // Tooltip
+  --p-tooltip-max-width: 12.5rem;
+  --p-tooltip-gutter: 0.25rem;
+  --p-tooltip-shadow: var(--p-overlay-popover-shadow);
+  --p-tooltip-padding: 0.25rem 0.75rem;
+  --p-tooltip-border-radius: var(--p-overlay-popover-border-radius);
+  --p-tooltip-background: var(--va-c-bg);
+  --p-tooltip-color: var(--va-c-text);
+}
+
+.yun-tooltip {
+  position: absolute;
+  display: none;
+  max-width: var(--p-tooltip-max-width);
+  transform: translateY(-5px);
+
+  &-top {
+    padding: var(--p-tooltip-gutter) 0;
+
+    .yun-tooltip-arrow {
+      margin-left: calc(-1 * var(--p-tooltip-gutter));
+      border-width: var(--p-tooltip-gutter) var(--p-tooltip-gutter) 0 var(--p-tooltip-gutter);
+      border-top-color: var(--p-tooltip-background);
+      border-bottom-color: var(--p-tooltip-background);
+    }
+  }
+
+  &-text {
+    white-space: pre-line;
+    word-break: break-word;
+    background: var(--p-tooltip-background);
+    color: var(--p-tooltip-color);
+    padding: var(--p-tooltip-padding);
+    box-shadow: var(--p-tooltip-shadow);
+    border-radius: var(--p-tooltip-border-radius);
+  }
+
+  &-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    scale: 2;
+  }
+}

package/styles/primevue/tooltip.ts

@@ -0,0 +1,14 @@
+export default {
+  root: {
+    class: [
+      'yun-tooltip',
+      'yun-tooltip-top',
+    ],
+  },
+  arrow: {
+    class: 'yun-tooltip-arrow',
+  },
+  text: {
+    class: 'yun-tooltip-text',
+  },
+}

package/styles/vars.scss

@@ -13,6 +13,7 @@ $light: map.merge(
 $dark: () !default;
 $dark: map.merge(
   (
+    "bg": red,
     "bg-img": none,
     "sidebar-bg-img": none,
   ),
@@ -31,16 +32,36 @@ $common: map.merge(
 $z-index: () !default;
 $z-index: map.merge(
   (
-    "toc-btn": 7,
+    "select": 6,
     "cloud": 7,
     "go-down": 9,
     "backdrop": 9,
     "sidebar": 10,
     "fireworks": 11,
-    "menu-btn": 20,
+    "toc-btn": 11,
     "go-up-btn": 20,
+    "fullscreen-menu": 21,
+    "nav-menu": 22,
+    "menu-btn": 22,
     "search-popup": 30,
     "search-btn": 31,
+    "overlay": 32,
+    "aside": 33,
+    "page-gradient": 34,
+    "dock": 999999,
   ),
   $z-index
 );
+
+// cubic-bezier
+$cubic-bezier: () !default;
+$cubic-bezier: map.merge(
+  (
+    // 慢速开始，然后加速
+    "ease-in": cubic-bezier(0.18, 0.66, 0.05, 0.96),
+    // 慢速开始和结束
+    "ease-in-out": cubic-bezier(0.77, 0, 0.17, 1.02),
+  ),
+  $cubic-bezier
+);
+

package/styles/widgets/banner.scss

@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use '../vars.scss' as *;
+
 $banner-animation-duration: 1s;
 $char-animation-duration: 0.4s;
 
@@ -11,7 +14,7 @@ $char-animation-duration: 0.4s;
   justify-content: center;
   align-items: center;
   width: 100%;
-  height: var(--banner-container-height, 100vh);
+  height: var(--banner-container-height, calc(100 * var(--vh)));
 }
 
 .banner-char-container {
@@ -40,22 +43,39 @@ $char-animation-duration: 0.4s;
     background-color: var(--banner-line-color);
     width: 1px;
     height: 0;
+  }
+
+  &-bottom {
+    flex-direction: column-reverse;
+  }
+
+
+
+
+}
+
+.banner-line {
+  &.enter {
     animation-name: extend-line;
     animation-duration: var(--line-animation-duration);
     animation-fill-mode: forwards;
-    animation-timing-function: ease-in;
+    animation-timing-function: map.get($cubic-bezier, "ease-in");
     animation-iteration-count: 1;
   }
 
-  &-bottom {
-    flex-direction: column-reverse;
+  &.active {
+    height: var(--banner-line-height);
   }
 
-  &.active {
+  // Exit
+  &.exit {
     animation-name: extend-line;
     animation-duration: var(--line-animation-duration);
     animation-fill-mode: forwards;
-    animation-timing-function: ease-in;
+
+    // reverse
+    animation-direction: reverse;
+    animation-timing-function: map.get($cubic-bezier, "ease-in-out");
     animation-iteration-count: 1;
   }
 }

package/types/index.d.ts

@@ -1,7 +1,5 @@
 import type { DefaultTheme } from 'valaxy/types'
 
-export * from '../composables'
-
 export namespace YunTheme {
   export type Config = ThemeConfig
   export type Sidebar = any
@@ -27,7 +25,7 @@ export namespace YunTheme {
   }
 }
 
-export interface Page {
+export interface PageProps {
   name: string
   /**
    * @description:en-US Page URL
@@ -43,8 +41,9 @@ export interface Page {
   /**
    * @description:en-US Color of icon
    * @description:zh-CN 图标颜色
+   * @default 'var(--va-c-text)'
    */
-  color: string
+  color?: string
 }
 
 /**
@@ -108,6 +107,9 @@ export interface ThemeConfig extends DefaultTheme.Config {
    * ["Hello, World!", "Bye, World!"]
    */
   say: {
+    /**
+     * @default false
+     */
     enable: boolean
     api: string
     hitokoto: {
@@ -130,6 +132,7 @@ export interface ThemeConfig extends DefaultTheme.Config {
   }
 
   /**
+   * [@explosions/fireworks](https://www.npmjs.com/package/@explosions/fireworks)
    * @en - Fireworks when click
    * @zh - 点击时的烟花效果
    */
@@ -143,11 +146,16 @@ export interface ThemeConfig extends DefaultTheme.Config {
     colors?: string[]
   }
 
+  /**
+   * nav items
+   * @zh 导航栏 位于页面右上角
+   */
+  nav?: NavItem[]
   /**
    * @en - Pages
    * @zh - 页面，显示在社交导航栏下方
    */
-  pages: Page[]
+  pages: PageProps[]
 
   sidebar: YunTheme.Sidebar
 
@@ -221,3 +229,43 @@ export interface ThemeConfig extends DefaultTheme.Config {
 }
 
 export type UserThemeConfig = Partial<ThemeConfig>
+
+/**
+ * For user links
+ */
+export interface LinkType {
+  avatar: string
+  name: string
+  url: string
+  color: string
+  blog: string
+  desc: string
+}
+
+export interface NavItemLink {
+  icon?: string
+  link: string
+  text: string
+  active?: string
+}
+
+export interface NavItemGroup {
+  text: string
+  items: NavItemLink[]
+}
+
+export type NavItem = NavItemLink | NavItemGroup
+
+/**
+ * girl
+ */
+export interface GirlType {
+  name: string
+  url: string
+  avatar: string
+  from?: string
+  reason?: string
+}
+
+export * from '../composables'
+export * from './projects'

package/types/projects.ts

@@ -0,0 +1,48 @@
+export interface ProjectItem {
+  emoji?: string
+  /**
+   * 项目名称
+   */
+  name?: string
+  /**
+   * 项目描述
+   */
+  desc?: string
+  /**
+   * 代表色
+   */
+  color?: string
+  /**
+   * 渐变色
+   */
+  gradient?: boolean
+  /**
+   * 强制覆盖文本色
+   */
+  textColor?: string
+
+  /**
+   * 文档链接
+   */
+  docs?: string
+  /**
+   * 站点链接
+   */
+  url?: string
+  /**
+   * GitHub 仓库
+   */
+  github?: string
+  /**
+   * NPM 包
+   */
+  npm?: string
+}
+
+export interface ProjectDataType {
+  [key: string]: {
+    title: string
+    emoji: string
+    collection: ProjectItem[]
+  }
+}

package/unocss.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'unocss'
 export default defineConfig({
   shortcuts: [
     ['yun-main', 'lt-md:pl-0'],
-    ['yun-card', 'm-auto transition yun-transition shadow hover:shadow-lg'],
+    ['yun-card', 'transition yun-transition shadow hover:shadow-lg'],
   ],
   rules: [
     [

package/utils/animation.ts

@@ -0,0 +1,33 @@
+import { gsap } from 'gsap'
+import ScrollToPlugin from 'gsap/dist/ScrollToPlugin'
+
+gsap.registerPlugin(ScrollToPlugin)
+
+export function goDown() {
+  const banner = document.getElementById('yun-banner')
+  if (banner) {
+    // nav menu height
+    const offset = 50
+
+    gsap.to(window, {
+      duration: 1,
+      scrollTo: {
+        y: banner.clientHeight - offset,
+      },
+      ease: 'power3.inOut',
+    })
+  }
+}
+
+/**
+ * back to top
+ */
+export function backToTop() {
+  gsap.to(window, {
+    duration: 1,
+    scrollTo: {
+      y: 0,
+    },
+    ease: 'power3.inOut',
+  })
+}

package/utils/index.ts

@@ -1,6 +1,8 @@
 import { formatDate } from 'valaxy'
 import noneImg from '../assets/images/none.jpg'
 
+export * from './animation'
+
 /**
  * set default img
  * @param e