valaxy-theme-yun 0.20.0 → 0.20.2

package/components/YunClassifyPopover.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { useMotion } from '@vueuse/motion'
 import Popover from 'primevue/popover'
+import type { ComponentInstance } from 'vue'
 import { onMounted, ref } from 'vue'
 
-const op = ref<typeof Popover>()
+const op = ref<ComponentInstance<typeof Popover>>()
 
 const pContentRef = ref<HTMLElement>()
 const motion = useMotion(pContentRef, {

package/components/YunConfig.vue

@@ -1,11 +1,14 @@
 <script lang="ts" setup>
+import { useAppStore } from 'valaxy'
+
 // sidebar config
+const app = useAppStore()
 </script>
 
 <template>
   <div>
     <YunToggleDark />
 
-    <YunToggleLocale />
+    <YunToggleLocale v-if="app.showToggleLocale" />
   </div>
 </template>

package/components/YunFullscreenMenu.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useAppStore } from 'valaxy'
 import { useYunAppStore } from '../stores'
 
 const yunApp = useYunAppStore()
 const fullscreenMenuRef = ref<HTMLElement>()
+
+const app = useAppStore()
 </script>
 
 <template>
@@ -16,7 +19,7 @@ const fullscreenMenuRef = ref<HTMLElement>()
     >
       <div class="flex-center gap-2">
         <YunToggleDark transition />
-        <YunToggleLocale />
+        <YunToggleLocale v-if="app.showToggleLocale" />
       </div>
 
       <YunFullscreenMenuList>

package/components/YunLinkItem.vue

@@ -42,16 +42,20 @@ useMotion(itemRef, {
     }"
   >
     <a
-      class="yun-link-url" p="x-4 y-2" :href="link.url" :title="link.name"
+      class="yun-link-url" p="x-4 y-2"
+      :href="link.url" :title="link.name"
       alt="portrait" rel="friend" target="_blank"
     >
       <div class="yun-link-left">
-        <img
-          class="yun-link-avatar" width="64" height="64" w="16" h="16"
-          loading="lazy"
-          :src="link.avatar" :alt="link.name"
-          @error="onError"
-        >
+        <div class="yun-link-avatar size-16 overflow-hidden flex-center">
+          <img
+            class="size-16 object-center object-cover m-0!"
+            width="64" height="64"
+            loading="lazy"
+            :src="link.avatar" :alt="link.name"
+            @error="onError"
+          >
+        </div>
       </div>
       <div class="yun-link-info" m="l-2">
         <div class="yun-link-blog" font="serif black">{{ link.blog }}</div>

package/components/YunLinks.vue

@@ -58,7 +58,6 @@ const { data } = useRandomData(props.links, props.random)
       &-avatar {
         margin: 0;
         display: inline-flex;
-        max-width: 100%;
         border-radius: 50%;
         background-color: #fff;
         border: 1px solid var(--primary-color, gray);

package/components/YunNavMenu.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
-import { useSiteConfig } from 'valaxy'
+import { useAppStore, useSiteConfig } from 'valaxy'
 import { useRoute } from 'vue-router'
 import { useYunAppStore } from '../stores'
 // import { useThemeConfig } from '../composables'
@@ -30,6 +30,8 @@ watch(() => yunApp.scrollY, () => {
   else
     playAnimation.value = false
 })
+
+const app = useAppStore()
 </script>
 
 <template>
@@ -76,7 +78,11 @@ watch(() => yunApp.scrollY, () => {
           </template>
         </template> -->
 
-        <YunToggleDark class="rounded-none!" />
+        <YunToggleLocale
+          v-if="yunApp.size.isSm && app.showToggleLocale"
+          class="rounded-none!"
+        />
+        <YunToggleDark class="rounded-none!" transition />
         <YunSearchTrigger v-if="siteConfig.search.enable" />
       </div>
     </div>

package/components/YunSidebarCard.vue

@@ -3,8 +3,9 @@
 </script>
 
 <template>
-  <YunCard class="p-4 min-h-sm">
+  <YunCard class="p-4 min-h-sm" flex="~ col gap-1">
     <YunSiteInfo class="text-center" />
     <YunPostsInfo />
+    <YunSocialLinks />
   </YunCard>
 </template>

package/components/YunSocialLinkItem.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useAppStore } from 'valaxy'
+import type { SocialLink } from 'valaxy/types'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  social: SocialLink
+}>()
+
+const appStore = useAppStore()
+const color = computed(() => {
+  return (appStore.isDark && props.social.color === 'black') ? 'white' : props.social.color
+})
+</script>
+
+<template>
+  <a
+    class="links-of-author-item yun-icon-btn"
+    rel="noopener" :href="social.link" :title="social.name"
+    target="_blank"
+    :style="`color:${color}`"
+  >
+    <div class="icon" :class="social.icon" />
+  </a>
+</template>

package/components/YunSocialLinks.vue

@@ -6,9 +6,10 @@ const siteConfig = useSiteConfig()
 
 <template>
   <div class="links-of-author">
-    <a v-for="item, i in siteConfig.social" :key="i" class="links-of-author-item yun-icon-btn" rel="noopener" :href="item.link" :title="item.name" target="_blank" :style="`color:${item.color}`">
-      <div class="icon" :class="item.icon" />
-    </a>
+    <YunSocialLinkItem
+      v-for="item, i in siteConfig.social" :key="i"
+      :social="item"
+    />
   </div>
 </template>
 

package/components/config/YunToggleDark.vue

@@ -29,7 +29,8 @@ function toggle(e: MouseEvent) {
   <button
     class="yun-icon-btn"
     :title="themeTitle"
-    :style="styles" @mousedown.prevent="() => { console.log('yes') }"
+    :style="styles"
+    @mousedown.prevent="() => {}"
     @click="toggle"
   >
     <div i="ri-sun-line dark:ri-moon-line" />

package/layouts/home.vue

@@ -41,7 +41,6 @@ const showNotice = computed(() => {
     <slot>
       <RouterView />
     </slot>
-
-    <YunFooter />
   </YunLayoutWrapper>
+  <YunFooter />
 </template>

package/node/config.ts

@@ -4,6 +4,8 @@ import type { ThemeConfig, UserThemeConfig } from '../types'
  * Default Config
  */
 export const defaultThemeConfig: ThemeConfig = {
+  type: 'nimbo',
+
   valaxyDarkOptions: {
     circleTransition: true,
   },
@@ -92,7 +94,7 @@ export const defaultThemeConfig: ThemeConfig = {
       icon: 'i-simple-icons-notion',
     },
     'twitter': {
-      color: '#1da1f2',
+      color: 'black',
       icon: 'i-ri-twitter-x-fill',
     },
     'wechat': {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy-theme-yun",
   "type": "module",
-  "version": "0.20.0",
+  "version": "0.20.2",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -24,17 +24,17 @@
     "@ctrl/tinycolor": "^4.1.0",
     "@explosions/fireworks": "^0.1.0",
     "@iconify-json/ant-design": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.7",
-    "@vueuse/motion": "^2.2.5",
+    "@iconify-json/simple-icons": "^1.2.11",
+    "@vueuse/motion": "^2.2.6",
     "animejs": "^3.2.2",
     "gsap": "^3.12.5",
-    "primevue": "^4.1.0",
-    "radix-vue": "^1.9.7"
+    "primevue": "^4.2.1",
+    "radix-vue": "^1.9.8"
   },
   "devDependencies": {
     "@types/animejs": "^3.1.12",
-    "valaxy-addon-waline": "0.2.0",
-    "valaxy": "0.20.0"
+    "valaxy": "0.20.2",
+    "valaxy-addon-waline": "0.2.0"
   },
   "scripts": {
     "release": "bumpp && npm publish"

package/styles/vars.scss

@@ -14,7 +14,7 @@ $dark: () !default;
 $dark: map.merge(
   (
     "bg": red,
-    "bg-img": none,
+    "bg-img": radial-gradient(circle, #171424, #000),
     "sidebar-bg-img": none,
   ),
   $dark

package/types/index.d.ts

@@ -50,6 +50,17 @@ export interface PageProps {
  * Theme Config
  */
 export interface ThemeConfig extends DefaultTheme.Config {
+  /**
+   * Theme Type
+   * - v1 strato 层云 Legacy
+   * - v2 nimbo 雨云
+   * - cirro 卷云 (未来)
+   * - cumulo 积云 (未来)
+   * - alto 高云 (未来)
+   * @default 'nimbo'
+   */
+  type: 'strato' | 'nimbo'
+
   /**
    * toc title
    * @default 'On this page'

package/valaxy.config.ts

@@ -20,7 +20,7 @@ function ThemeVitePlugin(options: ResolvedValaxyOptions<ThemeConfig>): Plugin {
         },
 
         optimizeDeps: {
-          include: ['gsap/dist/ScrollToPlugin'],
+          include: ['@ctrl/tinycolor', 'gsap/dist/ScrollToPlugin'],
           exclude: ['@docsearch/js'],
         },
       }