valaxy-theme-yun 0.12.8 → 0.13.0-0

package/App.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useHead } from '@vueuse/head'
-import { useConfig } from 'valaxy'
+import { useSiteConfig } from 'valaxy'
+import { useThemeConfig } from './composables'
 
 useHead({
   link: [
@@ -11,12 +12,13 @@ useHead({
   ],
 })
 
-const config = useConfig()
+const siteConfig = useSiteConfig()
+const themeConfig = useThemeConfig()
 </script>
 
 <template>
   <slot name="bg">
-    <YunBg v-if="config.themeConfig.bg_image.enable" />
+    <YunBg v-if="themeConfig.bg_image.enable" />
   </slot>
-  <YunSearch v-if="config.search.enable" />
+  <YunSearchTrigger v-if="siteConfig.search.enable" />
 </template>

package/components/ValaxyMain.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { PageData, Post } from 'valaxy'
-import { useConfig, usePostTitle } from 'valaxy'
+import { usePostTitle, useRuntimeConfig, useSiteConfig } from 'valaxy'
 import { StyleValue, computed, defineAsyncComponent } from 'vue'
 import { usePostProperty } from '../composables'
 
@@ -8,7 +8,9 @@ const props = defineProps<{
   frontmatter: Post
   data?: PageData
 }>()
-const config = useConfig()
+
+const runtimeConfig = useRuntimeConfig()
+const siteConfig = useSiteConfig()
 
 const { styles, icon, color } = usePostProperty(props.frontmatter.type)
 const title = usePostTitle(computed(() => props.frontmatter))
@@ -16,14 +18,14 @@ const title = usePostTitle(computed(() => props.frontmatter))
 const aside = computed(() => props.frontmatter.aside !== false)
 
 // not import from 'valaxy-addon-waline' to judge
-const YunWaline = config.value.runtime.addons['valaxy-addon-waline']
+const YunWaline = runtimeConfig.value.addons['valaxy-addon-waline']
   ? defineAsyncComponent(() => import('./YunWaline.vue'))
   : () => null
 
 // todo: refactor
-// const YunTwikoo = useAddonWaline()
-//   ? defineAsyncComponent(() => import('./YunTwikoo.vue'))
-//   : () => null
+const YunTwikoo = runtimeConfig.value.addons['valaxy-addon-twikoo']
+  ? defineAsyncComponent(() => import('./YunTwikoo.vue'))
+  : () => null
 </script>
 
 <template>
@@ -57,10 +59,10 @@ const YunWaline = config.value.runtime.addons['valaxy-addon-waline']
 
           <slot name="main-nav-after" />
 
-          <slot v-if="config.comment.enable && frontmatter.comment !== false" name="comment">
+          <slot v-if="siteConfig.comment.enable && frontmatter.comment !== false" name="comment">
             <YunCard w="full" p="4" class="comment sm:p-6 lg:px-12 xl:px-16" :class="frontmatter.nav === false ? 'mt-4' : 0">
               <YunWaline />
-              <!-- <YunTwikoo /> -->
+              <YunTwikoo />
             </YunCard>
           </slot>
 

package/components/YunCloud.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="cloud">
+  <div class="yun-cloud">
     <svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
       <defs>
-        <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" fill="theme.banner.cloud.color" />
+        <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" fill="var(--yun-c-cloud)" />
       </defs>
       <g class="parallax">
-        <use xlink:href="#gentle-wave" x="48" y="0" opacity="0.7" />
-        <use xlink:href="#gentle-wave" x="48" y="3" opacity="0.5" />
-        <use xlink:href="#gentle-wave" x="48" y="5" opacity="0.3" />
+        <use xlink:href="#gentle-wave" x="48" y="0" />
+        <use xlink:href="#gentle-wave" x="48" y="3" />
+        <use xlink:href="#gentle-wave" x="48" y="5" />
         <use xlink:href="#gentle-wave" x="48" y="7" />
       </g>
     </svg>
@@ -17,7 +17,7 @@
 <style lang="scss">
 @use 'valaxy/client/styles/mixins' as *;
 
-.cloud {
+.yun-cloud {
   display: flex;
   width: 100%;
   position: absolute;
@@ -45,16 +45,19 @@
     }
 
     > use:nth-child(1) {
+      opacity: 0.7;
       animation-delay: -2s;
       animation-duration: 7s;
     }
 
     > use:nth-child(2) {
+      opacity: 0.5;
       animation-delay: -3s;
       animation-duration: 10s;
     }
 
     > use:nth-child(3) {
+      opacity: 0.3;
       animation-delay: -4s;
       animation-duration: 13s;
     }

package/components/YunFooter.vue

@@ -1,12 +1,13 @@
 <script lang="ts" setup>
 import { capitalize, computed } from 'vue'
-import { useConfig } from 'valaxy'
+import { useSiteConfig, useValaxyConfig } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 import pkg from 'valaxy/package.json'
 import { useThemeConfig } from '../composables'
 
 const { t } = useI18n()
-const config = useConfig()
+const config = useValaxyConfig()
+const siteConfig = useSiteConfig()
 const themeConfig = useThemeConfig()
 const year = new Date().getFullYear()
 
@@ -42,7 +43,7 @@ const footerIcon = computed(() => themeConfig.value.footer.icon || {
       <a v-if="themeConfig.footer.icon?.enable" class="inline-flex animate-pulse" :href="footerIcon.url" target="_blank" :title="footerIcon.title">
         <div :class="footerIcon.name" />
       </a>
-      <span>{{ config.author.name }}</span>
+      <span>{{ siteConfig.author.name }}</span>
     </div>
 
     <div v-if="themeConfig.footer.powered" class="powered" m="2">

package/components/YunFuseSearch.vue

@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
+import { useFuse } from '@vueuse/integrations/useFuse'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useBodyScrollLock } from 'valaxy'
+import { useRouter } from 'vue-router'
+
+export interface FuseDataItem {
+  title: string
+  excerpt: string
+  link: string
+}
+
+const props = defineProps<{
+  open: boolean
+}>()
+const emit = defineEmits(['close'])
+
+const searchContainer = ref<HTMLElement>()
+
+const { lockBodyScroll, unlockBodyScroll } = useBodyScrollLock(searchContainer)
+
+const { t } = useI18n()
+
+const fuseListData = ref<any[]>([])
+// const { data } = await useFetch('/fuse-list.json').get().json()
+// console.log(data)
+
+const keys = computed(() => {
+  const keys = ['title', 'excerpt']
+  return keys
+})
+
+const input = ref('')
+// todo export options
+const fuseOptions = computed<UseFuseOptions<FuseDataItem>>(() => ({
+  fuseOptions: {
+    keys: keys.value,
+  //   isCaseSensitive: isCaseSensitive.value,
+  //   threshold: exactMatch.value ? 0 : undefined,
+  },
+  // resultLimit: resultLimit.value,
+  // matchAllWhenSearchEmpty: matchAllWhenSearchEmpty.value,
+}))
+const { results } = useFuse(input, fuseListData, fuseOptions)
+
+const searchInputRef = ref<HTMLInputElement>()
+
+watch(() => props.open, async () => {
+  if (!props.open)
+    return
+
+  fetch('/fuse-list.json')
+    .then(res => res.json())
+    .then((data) => {
+      if (Array.isArray(data))
+        fuseListData.value = data as unknown as any[]
+
+      searchInputRef.value?.focus()
+    })
+})
+
+const router = useRouter()
+const jumpToLink = (link: string) => {
+  router.push(link)
+  emit('close')
+}
+</script>
+
+<template>
+  <transition
+    name="fade"
+    @enter="lockBodyScroll"
+    @after-leave="unlockBodyScroll"
+  >
+    <div
+      v-if="open" ref="searchContainer"
+      class="yun-popup yun-search-popup yun-fuse-search flex-center" flex="col"
+    >
+      <div class="yun-search-input-container flex-center" w="full">
+        <input ref="searchInputRef" v-model="input" class="yun-search-input" :placeholder="t('search.placeholder')">
+      </div>
+      <div v-if="input" class="flex-center" w="full" py="4">
+        {{ t('search.hits', results.length || 0) }}
+      </div>
+      <div overflow="auto" flex="~ 1" w="full">
+        <div class="yun-fuse-result-container" flex="~ col" w="full">
+          <template v-if="results.length > 0">
+            <div
+              v-for="result in results" :key="result.item.title"
+              :to="result.item.link"
+              class="yun-fuse-result-item text-$va-c-text hover:(text-$va-c-bg bg-$va-c-text-dark bg-opacity-100)"
+              flex="~ col" pb-2
+              @click="jumpToLink(result.item.link)"
+            >
+              <h3 font="serif black">
+                {{ result.item.title }}
+              </h3>
+              <span text="sm" opacity="80">
+                {{ result.item.excerpt }}
+              </span>
+              <span text-xs opacity-50 mt="1">
+                Score Index: {{ result.refIndex }}
+              </span>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style lang="scss">
+.yun-search-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  backdrop-filter: blur(30px);
+  -webkit-backdrop-filter: blur(30px);
+
+  text-align: center;
+  padding-top: 3.5rem;
+  margin: 0;
+  z-index: var(--yun-z-search-popup);
+  transition: 0.6s;
+
+  background-color: var(--va-c-bg-opacity);
+}
+
+.yun-search-input {
+  background: transparent;
+  color: var(--va-c-text);
+  font-size: 1.5rem;
+  border-radius: 3rem;
+  padding: 1rem 1.5rem;
+  border: 1px solid var(--va-c-gray);
+  box-sizing: border-box;
+  width: 90%;
+  max-width: 800px;
+  font-family: var(--va-font-serif);
+  font-weight: 900;
+  text-align: center;
+  transition: all 0.2s;
+
+  &:focus {
+    border-color: var(--va-c-text);
+  }
+}
+
+.yun-popup {
+  .search-icon, .close-icon {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    padding: 0.5rem;
+
+    .icon {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+}
+
+.yun-fuse-search {
+  .yun-fuse-result-item {
+    // padding: 0.5rem;
+    cursor: pointer;
+
+    border-top: 1px dashed #ccc;
+  }
+}
+</style>

package/components/YunOverview.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy'
+import { useSiteConfig } from 'valaxy'
 import { useRouter } from 'vue-router'
 
-const config = useConfig()
+const siteConfig = useSiteConfig()
 const router = useRouter()
 </script>
 
@@ -10,23 +10,23 @@ const router = useRouter()
   <div class="sidebar-panel">
     <div class="site-info" m="t-6">
       <router-link class="site-author-avatar" to="/about">
-        <img class="rounded-full" :src="config.author.avatar" alt="avatar">
-        <span class="site-author-status">{{ config.author.status.emoji }}</span>
+        <img class="rounded-full" :src="siteConfig.author.avatar" alt="avatar">
+        <span class="site-author-status">{{ siteConfig.author.status.emoji }}</span>
       </router-link>
       <div class="site-author-name">
         <router-link to="/about">
-          {{ config.author.name }}
+          {{ siteConfig.author.name }}
         </router-link>
       </div>
       <router-link v-if="router.hasRoute('about-site')" to="/about/site" class="site-name">
-        {{ config.title }}
+        {{ siteConfig.title }}
       </router-link>
-      <span v-else class="site-name">{{ config.title }}</span>
-      <h4 v-if="config.subtitle" class="site-subtitle block" text="xs">
-        {{ config.subtitle }}
+      <span v-else class="site-name">{{ siteConfig.title }}</span>
+      <h4 v-if="siteConfig.subtitle" class="site-subtitle block" text="xs">
+        {{ siteConfig.subtitle }}
       </h4>
-      <div v-if="config.description" class="site-description my-1">
-        {{ config.description }}
+      <div v-if="siteConfig.description" class="site-description my-1">
+        {{ siteConfig.description }}
       </div>
     </div>
 

package/components/YunSearchTrigger.vue

@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import { computed } from '@vue/reactivity'
+import { useSiteConfig } from 'valaxy'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useMagicKeys } from '@vueuse/core'
+
+const siteConfig = useSiteConfig()
+const { t } = useI18n()
+
+// to avoid loading the docsearch js upfront (which is more than 1/3 of the
+// payload), we delay initializing it until the user has actually clicked or
+// hit the hotkey to invoke it.
+const loaded = ref(false)
+
+function load() {
+  if (!loaded.value)
+    loaded.value = true
+}
+
+const isAlgolia = computed(() => siteConfig.value.search.type === 'algolia')
+
+onMounted(() => {
+  if (!isAlgolia.value)
+    return
+
+  const handleSearchHotKey = (e: KeyboardEvent) => {
+    if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault()
+      load()
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      remove()
+    }
+  }
+
+  const remove = () => {
+    window.removeEventListener('keydown', handleSearchHotKey)
+  }
+
+  window.addEventListener('keydown', handleSearchHotKey)
+
+  onUnmounted(remove)
+})
+
+const open = ref(false)
+
+const trigger = () => {
+  // todo, refactor shortcut
+  const e = new Event('keydown') as any
+
+  e.key = 'k'
+  e.metaKey = true
+}
+
+const togglePopup = () => {
+  open.value = !open.value
+
+  trigger()
+}
+
+const { Meta_K } = useMagicKeys()
+
+watch(Meta_K, (val) => {
+  if (val)
+    togglePopup()
+})
+</script>
+
+<template>
+  <button class="search-btn popup-trigger yun-icon-btn" :title="t('menu.search')" @click="togglePopup">
+    <div v-if="!open" i-ri-search-line />
+    <div v-else text="!2xl" i-ri-close-line />
+  </button>
+
+  <AlgoliaSearchBox v-if="isAlgolia && loaded" />
+  <YunFuseSearch v-else-if="siteConfig.search.type === 'fuse'" :open="open" @close="open = false" />
+</template>
+
+<style lang="scss">
+@use 'sass:map';
+@use 'valaxy/client/styles/vars' as *;
+
+.search-btn {
+  position: fixed;
+  top: 0.6rem;
+  right: 0.8rem;
+
+  color: var(--va-c-primary);
+  z-index: var(--yun-z-search-btn);
+}
+</style>

package/components/YunSocialLinks.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy'
+import { useSiteConfig } from 'valaxy'
 
-const config = useConfig()
+const siteConfig = useSiteConfig()
 </script>
 
 <template>
   <div class="links-of-author">
-    <a v-for="item, i in config.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}`">
+    <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>
   </div>

package/components/YunSponsor.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy'
+import { useSiteConfig } from 'valaxy'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n()
 
-const config = useConfig()
+const siteConfig = useSiteConfig()
 
 const showQr = ref(false)
 </script>
@@ -17,7 +17,7 @@ const showQr = ref(false)
 
     <div class="qrcode-container qrcode flex justify-around" m="y-4" :class="showQr && 'show'">
       <a
-        v-for="method, i in config.sponsor.methods" :key="i"
+        v-for="method, i in siteConfig.sponsor.methods" :key="i"
         class="flex flex-col justify-center items-center animate-iteration-1"
         :class="showQr && 'animate-fade-in'"
         :href="method.url" target="_blank"

package/components/YunTwikoo.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-// import { useConfig, useTwikoo } from 'valaxy'
+import { useTwikooWithOptions } from 'valaxy-addon-twikoo'
 
-// const config = useConfig()
-// useTwikoo(config.value.comment.twikoo)
+useTwikooWithOptions()
 </script>
 
 <template>

package/components/YunWalineMeta.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy'
+import { useRuntimeConfig } from 'valaxy'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { useI18n } from 'vue-i18n'
 
 const route = useRoute()
-const config = useConfig()
+const runtimeConfig = useRuntimeConfig()
 
-const addonWaline = computed(() => config.value.runtime.addons['valaxy-addon-waline'])
+const addonWaline = computed(() => runtimeConfig.value.addons['valaxy-addon-waline'])
 
 const { t } = useI18n()
 </script>

package/composables/config.ts

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { useConfig } from 'valaxy'
+import { useValaxyConfig } from 'valaxy'
 import type { YunTheme } from '../types'
 
 /**
@@ -7,6 +7,6 @@ import type { YunTheme } from '../types'
  * @returns
  */
 export function useThemeConfig<ThemeConfig = YunTheme.Config>() {
-  const config = useConfig<ThemeConfig>()
+  const config = useValaxyConfig<ThemeConfig>()
   return computed(() => config!.value.themeConfig)
 }

package/docs/zh-CN/README.md

@@ -1,40 +1,3 @@
 # valaxy-theme-yun 文档
 
-## 自定义友情链接
-
-新建 `pages/links/index.md` 文件。
-
-您可以在 `frontmatter` 编写链接信息。
-
-- `links`: 友情链接信息（可以是 YAML 数组形式，也可以是一个 JSON 文件链接）
-- `random`: 是否随机展示
-
-譬如：
-
-```md
----
-title: 我的小伙伴们
-keywords: 链接
-description: 云游的小伙伴们
-links:
-  - url: https://www.yunyoujun.cn
-    avatar: https://www.yunyoujun.cn/images/avatar.jpg
-    name: 云游君
-    blog: 云游君的小站
-    desc: 希望能成为一个有趣的人。
-    email: me@yunyoujun.cn
-    color: "#0078e7"
-  - url: https://valaxy.site
-    avatar: https://valaxy.site/favicon.svg
-    name: Valaxy Org
-    blog: Valaxy Site
-    desc: 下一代静态博客框架
-    email: i@valaxy.site
-    color: "#6058d9"
-# 也可以是一个 JSON 链接
-# links: https://friends.yunyoujun.cn/links.json
-random: true
----
-
-<YunLinks :links="frontmatter.links" :random="frontmatter.random" />
-```
+- [主题配置](./config.md)

package/docs/zh-CN/config.md

@@ -0,0 +1,81 @@
+---
+title: 主题配置
+---
+
+## 首页
+
+### 标语动画
+
+首页的垂直交错排列文字效果。默认开启。
+
+- `enable`: 是否开启
+- `title`: 设置文字内容
+- `cloud`: 在首页下方显示流动的云
+  - `enable`: 是否开启
+
+```ts
+import { defineConfig } from 'valaxy'
+import type { ThemeConfig } from 'valaxy-theme-yun'
+
+export default defineConfig<ThemeConfig>({
+  theme: 'yun',
+
+  themeConfig: {
+    banner: {
+      enable: true,
+      title: '云游君的小站',
+      cloud: {
+        enable: true
+      }
+    },
+  }
+})
+```
+
+> 如果您想要更改云的色彩，请更改 `var(--yun-c-cloud)` 的值
+
+```scss
+// 新建 styles/css-vars.scss
+:root {
+  --yun-c-cloud: red;
+}
+```
+
+## 自定义友情链接
+
+新建 `pages/links/index.md` 文件。
+
+您可以在 `frontmatter` 编写链接信息。
+
+- `links`: 友情链接信息（可以是 YAML 数组形式，也可以是一个 JSON 文件链接）
+- `random`: 是否随机展示
+
+譬如：
+
+```md
+---
+title: 我的小伙伴们
+keywords: 链接
+description: 云游的小伙伴们
+links:
+  - url: https://www.yunyoujun.cn
+    avatar: https://www.yunyoujun.cn/images/avatar.jpg
+    name: 云游君
+    blog: 云游君的小站
+    desc: 希望能成为一个有趣的人。
+    email: me@yunyoujun.cn
+    color: "#0078e7"
+  - url: https://valaxy.site
+    avatar: https://valaxy.site/favicon.svg
+    name: Valaxy Org
+    blog: Valaxy Site
+    desc: 下一代静态博客框架
+    email: i@valaxy.site
+    color: "#6058d9"
+# 也可以是一个 JSON 链接
+# links: https://friends.yunyoujun.cn/links.json
+random: true
+---
+
+<YunLinks :links="frontmatter.links" :random="frontmatter.random" />
+```

package/layouts/home.vue

@@ -17,6 +17,7 @@ const themeConfig = useThemeConfig()
 
     <YunBanner />
     <YunSay v-if="themeConfig.say.enable" w="full" />
+    <YunCloud v-if="themeConfig.banner.cloud.enable" />
     <YunNotice
       v-if="themeConfig.notice.enable"
       :content="themeConfig.notice.content" mt="4"

package/layouts/post.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useConfig, useFrontmatter, useFullUrl } from 'valaxy'
+import { useFrontmatter, useFullUrl, useSiteConfig } from 'valaxy'
 
-const config = useConfig()
+const siteConfig = useSiteConfig()
 const frontmatter = useFrontmatter()
 const url = useFullUrl()
 
@@ -10,7 +10,7 @@ const showSponsor = computed(() => {
   if (typeof frontmatter.value.sponsor === 'boolean')
     return frontmatter.value.sponsor
 
-  return config.value.sponsor.enable
+  return siteConfig.value.sponsor.enable
 })
 </script>
 
@@ -24,7 +24,7 @@ const showSponsor = computed(() => {
 
     <template #main-content-after>
       <YunSponsor v-if="showSponsor" m="t-6" />
-      <ValaxyCopyright v-if="frontmatter.copyright || config.license.enabled" :url="url" m="y-4" />
+      <ValaxyCopyright v-if="frontmatter.copyright || siteConfig.license.enabled" :url="url" m="y-4" />
     </template>
 
     <template #aside-custom>

package/layouts/tags.vue

@@ -46,6 +46,8 @@ const displayTag = (tag: string) => {
 }
 
 const title = usePostTitle(frontmatter)
+
+// use flex to fix `overflow-wrap: break-words;` not working in Safari
 </script>
 
 <template>
@@ -62,9 +64,15 @@ const title = usePostTitle(frontmatter)
         {{ t('counter.tags', Array.from(tags).length) }}
       </div>
 
-      <div text="center" class="break-words">
-        <span 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 }}<span text="xs">[{{ tag.count }}]</span>
+      <div class="justify-center items-end" flex="~ wrap" gap="1">
+        <span
+          v-for="[key, tag] in Array.from(tags).sort()"
+          :key="key"
+          inline-flex my="2"
+          class="post-tag cursor-pointer items-baseline leading-4" :style="getTagStyle(tag.count)" p="1" @click="displayTag(key.toString())"
+        >
+          <span inline-flex>#{{ key }}</span>
+          <span inline-flex text="xs">[{{ tag.count }}]</span>
         </span>
       </div>
 

package/node/config.ts

@@ -11,6 +11,9 @@ export const defaultThemeConfig: ThemeConfig = {
   banner: {
     enable: true,
     title: '云游君的小站',
+    cloud: {
+      enable: true,
+    },
   },
 
   bg_image: {

package/node/unocss.ts

@@ -1,12 +1,12 @@
 import type { ResolvedValaxyOptions } from 'valaxy'
-import type { ThemeUserConfig } from '../types'
+import type { UserThemeConfig } from '../types'
 
 /**
  * generateSafelist by config
  * @param themeConfig
  * @returns
  */
-export function generateSafelist(options: ResolvedValaxyOptions<ThemeUserConfig>) {
+export function generateSafelist(options: ResolvedValaxyOptions<UserThemeConfig>) {
   const themeConfig = options.config.themeConfig || {}
   const safelist = []
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.12.8",
+  "version": "0.13.0-0",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -22,6 +22,6 @@
     "valaxy-addon-waline": "0.0.8"
   },
   "devDependencies": {
-    "valaxy": "0.12.8"
+    "valaxy": "0.13.0-0"
   }
 }

package/styles/vars.scss

@@ -27,6 +27,7 @@ $common: () !default;
 $common: map.merge(
   (
     "post-card-max-width": 900px,
+    "c-cloud": "white"
   ),
   $common
 );
@@ -35,7 +36,7 @@ $z-index: () !default;
 $z-index: map.merge(
   (
     "toc-btn": 7,
-    "cloud": 8,
+    "cloud": 7,
     "go-down": 9,
     "backdrop": 9,
     "sidebar": 10,

package/types/index.d.ts

@@ -3,6 +3,22 @@ export * from '../composables'
 export namespace YunTheme {
   export type Config = ThemeConfig
   export type Sidebar = any
+
+  export type Banner = {
+    enable: boolean
+    /**
+     * 标题
+     */
+    title: string
+
+    /**
+     * 首页下方的动态云
+     * If you want change color of cloud, please change css var `--yun-c-cloud`
+     */
+    cloud: {
+      enable: boolean
+    }
+  }
 }
 
 /**
@@ -26,13 +42,7 @@ export interface ThemeConfig {
   /**
    * 首页标语
    */
-  banner: {
-    enable: boolean
-    /**
-     * 标题
-     */
-    title: string
-  }
+  banner: YunTheme.Banner
 
   bg_image: {
     enable: boolean
@@ -135,4 +145,4 @@ export interface ThemeConfig {
   }
 }
 
-export type ThemeUserConfig = Partial<ThemeConfig>
+export type UserThemeConfig = Partial<ThemeConfig>

package/valaxy.config.ts

@@ -36,6 +36,5 @@ export default defineTheme<ThemeConfig>((options) => {
     unocss: {
       safelist: generateSafelist(options),
     },
-    addons: ['valaxy-addon-waline'],
   }
 })

package/components/YunSearch.vue

@@ -1,131 +0,0 @@
-<script lang="ts" setup>
-import { computed } from '@vue/reactivity'
-import { useConfig } from 'valaxy'
-import { onMounted, onUnmounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const config = useConfig()
-const { t } = useI18n()
-
-// to avoid loading the docsearch js upfront (which is more than 1/3 of the
-// payload), we delay initializing it until the user has actually clicked or
-// hit the hotkey to invoke it.
-const loaded = ref(false)
-
-function load() {
-  if (!loaded.value)
-    loaded.value = true
-}
-
-const isAlgolia = computed(() => config.value.search.type === 'algolia')
-
-onMounted(() => {
-  if (!isAlgolia.value)
-    return
-
-  const handleSearchHotKey = (e: KeyboardEvent) => {
-    if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
-      e.preventDefault()
-      load()
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      remove()
-    }
-  }
-
-  const remove = () => {
-    window.removeEventListener('keydown', handleSearchHotKey)
-  }
-
-  window.addEventListener('keydown', handleSearchHotKey)
-
-  onUnmounted(remove)
-})
-
-const trigger = () => {
-  const e = new Event('keydown') as any
-
-  e.key = 'k'
-  e.metaKey = true
-
-  window.dispatchEvent(e)
-}
-</script>
-
-<template>
-  <div>
-    <button class="search-btn popup-trigger yun-icon-btn" :title="t('menu.search')" @click="trigger">
-      <div i-ri-search-line />
-      <!-- <div v-else text="!2xl" i-ri-close-line /> -->
-    </button>
-
-    <AlgoliaSearchBox v-if="isAlgolia && loaded" />
-  </div>
-</template>
-
-<style lang="scss">
-@use 'sass:map';
-@use 'valaxy/client/styles/vars' as *;
-
-.search-btn {
-  position: fixed;
-  top: 0.6rem;
-  right: 0.8rem;
-
-  color: var(--va-c-primary);
-  z-index: var(--yun-z-search-btn);
-}
-
-.search-popup {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  backdrop-filter: blur(30px);
-  -webkit-backdrop-filter: blur(30px);
-
-  text-align: center;
-  padding-top: 3.5rem;
-  margin: 0;
-  z-index: var(--yun-z-search-popup);
-  transition: 0.6s;
-}
-
-.search-header {
-  .close-icon {
-    position: fixed;
-    top: 0.6rem;
-    right: 0.8rem;
-  }
-}
-
-.search-input {
-  background: transparent;
-  color: var(--va-c-text);
-  font-size: 1.5rem;
-  border-radius: 3rem;
-  padding: 1rem 1.5rem;
-  border: 1px solid var(--va-c-gray);
-  box-sizing: border-box;
-  width: 90%;
-  max-width: 800px;
-  font-family: var(--va-font-serif);
-  font-weight: 900;
-  text-align: center;
-}
-
-.popup {
-  .search-icon, .close-icon {
-    display: inline-block;
-    width: 2rem;
-    height: 2rem;
-    padding: 0.5rem;
-
-    .icon {
-      width: 2rem;
-      height: 2rem;
-    }
-  }
-}
-</style>