valaxy-theme-yun 0.1.1 → 0.2.1

package/components/YunSidebar.vue

@@ -1,111 +1,39 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy'
-import { useRouter } from 'vue-router'
-
-const config = useConfig()
-const router = useRouter()
+import { ref } from 'vue'
+const showOverview = ref(false)
 </script>
 
 <template>
-  <div class="sidebar-panel">
-    <div class="site-info" m="t-6">
-      <a class="site-author-avatar" href="/about">
-        <img class="rounded-full" :src="config.author.avatar" alt="avatar">
-        <span class="site-author-status">{{ config.author.status.emoji }}</span>
-      </a>
-      <div class="site-author-name">
-        <a href="/about">
-          {{ config.author.name }}
-        </a>
-      </div>
-      <router-link v-if="router.hasRoute('about-site')" to="/about/site" class="site-name">
-        {{ config.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 }}
-      </h4>
-      <div v-if="config.description" class="site-description my-1">
-        {{ config.description }}
-      </div>
-    </div>
+  <div v-if="$slots.default" class="sidebar-nav" m="t-6">
+    <button m="x-4" class="sidebar-nav-item yun-icon-btn" :class="showOverview && 'active'" @click="showOverview = true">
+      <div i-ri-passport-line />
+    </button>
+    <button m="x-4" class="sidebar-nav-item yun-icon-btn" :class="!showOverview && 'active'" @click="showOverview = false">
+      <div i-ri-list-ordered />
+    </button>
+  </div>
+
+  <div v-if="showOverview || !$slots.default" :class="$slots.default && '-mt-4'">
+    <YunOverview />
+  </div>
 
-    <YunSidebarNav />
-    <hr m="t-4 b-2">
-    <YunSocialLinks />
-    <hr m="y-2">
-    <YunSidebarLinks />
-    <br>
+  <div v-else>
+    <slot />
   </div>
 </template>
 
 <style lang="scss">
-@use "~/styles/mixins" as *;
+.sidebar-nav {
+  .sidebar-nav-item {
+    color: var(--va-c-primary);
+    border: 1px solid var(--va-c-primary);
 
-.sidebar-panel {
-  padding: 0.5rem;
-}
+    &.active {
+      border: 1px solid var(--va-c-primary);
 
-.site-info {
-  &.fix-top {
-    margin-top: -1.5rem;
-  }
-}
-
-.site-author-avatar {
-  display: inline-block;
-  line-height: 0;
-  position: relative;
-
-  img {
-    height: 96px;
-    width: 96px;
-    max-width: 100%;
-    margin: 0px;
-    padding: 4px;
-    background-color: white;
-    box-shadow: 0 0 10px rgba(black, 0.2);
-    transition: 0.4s;
-
-    &:hover {
-      box-shadow: 0 0 30px rgba(var(--yun-c-primary-rgb), 0.2);
+      color: white;
+      background-color: var(--va-c-primary);
     }
   }
 }
-
-.site-author-name {
-  margin-top: 0;
-  margin-bottom: 1rem;
-  line-height: 1.5;
-}
-
-.site-author-status {
-  position: absolute;
-  height: 1.8rem;
-  width: 1.8rem;
-  bottom: 0;
-  right: 0;
-  line-height: 1.8rem;
-  border-radius: 50%;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  background-color: var(--yun-c-bg-light);
-
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.site-name {
-  color: var(--yun-c-text);
-  font-family: get-css-var('font-serif');
-  font-weight: get-css-var('font-serif-weight');
-}
-
-.site-subtitle {
-  color: get-css-var('c-gray');
-  display: block;
-}
-
-.site-description {
-  color: var(--yun-c-text);
-  font-size: 0.8rem;
-}
 </style>

package/components/YunSidebarNav.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { useCategory, usePostList, useTag } from 'valaxy'
+import { useCategory, usePostList, useTag, useThemeConfig } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
+const themeConfig = useThemeConfig()
 const posts = usePostList()
 const categories = useCategory()
 const tags = useTag()
@@ -28,8 +29,8 @@ const tags = useTag()
       <span class="count">{{ Array.from(tags).length }}</span>
     </router-link>
 
-    <router-link class="site-link-item yun-icon-btn" to="/about" :title="t('button.about')">
-      <div i-ri-clipboard-line />
+    <router-link class="site-link-item yun-icon-btn" :to="themeConfig.menu.custom.url" :title="t(themeConfig.menu.custom.title)">
+      <div :class="themeConfig.menu.custom.icon" />
     </router-link>
   </nav>
 </template>
@@ -55,7 +56,7 @@ const tags = useTag()
 
   flex-direction: column;
 
-  color: var(--yun-c-text);
+  color: var(--va-c-text);
 
   &:first-child, &:last-child {
     line-height: 1;
@@ -76,8 +77,8 @@ const tags = useTag()
   }
 
   .count {
-    color: var(--yun-c-text);
-    font-family: var(--yun-font-sans);
+    color: var(--va-c-text);
+    font-family: var(--va-font-sans);
     display: block;
     text-align: center;
     font-size: 1rem;
@@ -88,7 +89,7 @@ const tags = useTag()
     height: 1.5rem;
 
     &:hover {
-      color: var(--yun-c-primary-light);
+      color: var(--va-c-primary-light);
     }
   }
 }

package/components/YunSponsor.vue

@@ -11,9 +11,6 @@ const showQr = ref(false)
 
 <template>
   <div class="yun-sponsor-container flex justify-center items-center flex-col">
-    <!-- <a href="" :title="t('reward.donate')">
-
-    </a> -->
     <button class="sponsor-button yun-icon-btn shadow hover:shadow-md" :title="t('reward.donate')" text="red-400" @click="showQr = !showQr">
       <div i-ri-heart-line />
     </button>
@@ -26,7 +23,7 @@ const showQr = ref(false)
         :href="method.url" target="_blank"
         :style="`color:${method.color}`"
       >
-        <img w="full" class="sponsor-method-img" border="~ rounded" p="1" loading="lazy" :src="method.url" :title="method.name">
+        <img class="sponsor-method-img" border="~ rounded" p="1" loading="lazy" :src="method.url" :title="method.name">
         <div text="xl" m="2" :class="method.icon" />
       </a>
     </div>
@@ -39,7 +36,7 @@ const showQr = ref(false)
 
   div {
     transform: scale(1.1);
-    transition: transform var(--yun-transition-duration) ease-in-out;
+    transition: transform var(--va-transition-duration) ease-in-out;
   }
   &:hover {
     background-color: rgba(255, 255, 255, 0.9);
@@ -60,7 +57,7 @@ const showQr = ref(false)
   overflow: hidden;
   height: 0;
 
-  transition: height var(--yun-transition-duration) ease-in-out;
+  transition: height var(--va-transition-duration) ease-in-out;
 
   &.show {
     height: 220px;

package/components/YunToggleLocale.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { isClient, useStorage } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+const { t, availableLocales, locale } = useI18n()
+
+const lang = useStorage('valaxy-locale', locale.value)
+
+const toggleLocales = () => {
+  // change to some real logic
+  const locales = availableLocales
+
+  locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
+  // for localStorage
+  lang.value = locale.value
+
+  if (isClient)
+    document.documentElement.setAttribute('lang', locale.value)
+}
+</script>
+
+<template>
+  <button class="yun-icon-btn" :title="t('button.toggle_langs')" style="color:var(--va-c-text)" @click="toggleLocales">
+    <div i-ri-translate class="transition transform" :class="locale === 'en' ? 'rotate-y-180' : ''" />
+  </button>
+</template>

package/components/YunTwikoo.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { useConfig, useTwikoo } from 'valaxy'
+
+const config = useConfig()
+useTwikoo(config.value.comment.twikoo)
+</script>
+
+<template>
+  <div id="tcomment" w="full" />
+</template>
+
+<style lang="scss">
+// custom twikoo style
+</style>

package/components/YunWaline.vue

@@ -2,9 +2,7 @@
 import { useConfig, useWaline } from 'valaxy'
 
 const config = useConfig()
-useWaline({
-  serverURL: config.value.comment.waline.serverURL,
-})
+useWaline(config.value.comment.waline)
 </script>
 
 <template>
@@ -13,8 +11,8 @@ useWaline({
 
 <style lang="scss">
 #waline {
-  --waline-theme-color: var(--yun-c-primary);
-  --waline-active-color: var(--yun-c-primary-light);
+  --waline-theme-color: var(--va-c-primary);
+  --waline-active-color: var(--va-c-primary-light);
 
   .v[data-class=v] {
     .veditor {

package/composables/index.ts

@@ -1,4 +1,5 @@
 import { ref, watch } from 'vue'
+import { isClient } from '@vueuse/core'
 
 /**
  * fetch data from source, and random
@@ -11,10 +12,12 @@ export function useRandomData<T>(source: string | T[], random = false) {
 
   watch(() => source, async() => {
     let rawData: T[]
-    if (typeof source === 'string')
+    if (typeof source === 'string') {
+      if (!isClient)
+        return
       rawData = await fetch(source).then(res => res.json()) as T[]
-    else
-      rawData = source
+    }
+    else { rawData = source }
 
     data.value = random ? Array.from(rawData).sort(() => Math.random() - 0.5) : rawData
   }, { immediate: true })

package/config/index.ts

@@ -4,6 +4,16 @@ export const anonymousImage = 'https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/ava
  * Theme Config
  */
 export interface ThemeConfig {
+  // for unocss
+  safelist: string[]
+  colors: {
+    /**
+     * primary color
+     * @default '#0078E7'
+     */
+    primary: string
+  }
+
   /**
    * 首页标语
    */
@@ -92,6 +102,17 @@ export interface ThemeConfig {
     color: string
     icon: string
   }>
+
+  /**
+   * 菜单栏
+   */
+  menu: {
+    custom: {
+      title: string
+      url: string
+      icon: string
+    }
+  }
 }
 
 export type ThemeUserConfig = Partial<ThemeConfig>
@@ -100,6 +121,10 @@ export type ThemeUserConfig = Partial<ThemeConfig>
  * Default Config
  */
 export const defaultThemeConfig: ThemeConfig = {
+  safelist: ['i-ri-clipboard-line'],
+  colors: {
+    primary: '#0078E7',
+  },
   banner: {
     enable: true,
     title: '云游君的小站',
@@ -128,7 +153,7 @@ export const defaultThemeConfig: ThemeConfig = {
     icon: {
       name: 'i-ri-cloud-line',
       animated: true,
-      color: 'var(--yun-c-primary)',
+      color: 'var(--va-c-primary)',
       url: 'https://sponsors.yunyoujun.cn',
       title: 'Sponsor YunYouJun',
     },
@@ -143,7 +168,7 @@ export const defaultThemeConfig: ThemeConfig = {
 
   types: {
     'link': {
-      color: 'var(--yun-c-primary)',
+      color: 'var(--va-c-primary)',
       icon: 'i-ri-external-link-line',
     },
     'bilibili': {
@@ -155,7 +180,7 @@ export const defaultThemeConfig: ThemeConfig = {
       icon: 'i-ri-douban-line',
     },
     'github': {
-      color: 'var(--yun-c-text)',
+      color: 'var(--va-c-text)',
       icon: 'i-ri-github-line',
     },
     'netease-cloud-music': {
@@ -163,7 +188,7 @@ export const defaultThemeConfig: ThemeConfig = {
       icon: 'i-ri-netease-cloud-music-line',
     },
     'notion': {
-      color: 'var(--yun-c-text)',
+      color: 'var(--va-c-text)',
       icon: 'i-simple-icons-notion',
     },
     'twitter': {
@@ -187,6 +212,39 @@ export const defaultThemeConfig: ThemeConfig = {
       icon: 'i-ri-zhihu-line',
     },
   },
+
+  menu: {
+    custom: {
+      title: 'button.about',
+      icon: 'i-ri-clipboard-line',
+      url: '/about',
+    },
+  },
 }
 
+defaultThemeConfig.safelist = defaultThemeConfig.safelist.concat(generateSafelist(defaultThemeConfig))
+
 export default defaultThemeConfig
+
+/**
+ * generateSafelist by config
+ * @param themeConfig
+ * @returns
+ */
+export function generateSafelist(themeConfig: ThemeUserConfig) {
+  const safelist = []
+
+  const types = themeConfig.types
+  if (types) {
+    for (const type in types)
+      safelist.push(types[type].icon)
+  }
+
+  if (themeConfig.footer?.icon?.name)
+    safelist.push(themeConfig.footer?.icon?.name)
+
+  if (themeConfig.menu?.custom?.icon)
+    safelist.push(themeConfig.menu?.custom?.icon)
+
+  return safelist
+}

package/dist/index.d.ts

@@ -1,8 +1,18 @@
+import { Plugin } from 'vite';
+
 declare const anonymousImage = "https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg";
 /**
  * Theme Config
  */
 interface ThemeConfig {
+    safelist: string[];
+    colors: {
+        /**
+         * primary color
+         * @default '#0078E7'
+         */
+        primary: string;
+    };
     /**
      * 首页标语
      */
@@ -83,6 +93,16 @@ interface ThemeConfig {
         color: string;
         icon: string;
     }>;
+    /**
+     * 菜单栏
+     */
+    menu: {
+        custom: {
+            title: string;
+            url: string;
+            icon: string;
+        };
+    };
 }
 declare type ThemeUserConfig = Partial<ThemeConfig>;
 /**
@@ -90,4 +110,18 @@ declare type ThemeUserConfig = Partial<ThemeConfig>;
  */
 declare const defaultThemeConfig: ThemeConfig;
 
-export { ThemeConfig, ThemeUserConfig, anonymousImage, defaultThemeConfig };
+/**
+ * generateSafelist by config
+ * @param themeConfig
+ * @returns
+ */
+declare function generateSafelist(themeConfig: ThemeUserConfig): string[];
+
+interface UserOptions {
+    colors: {
+        primary: string;
+    };
+}
+declare function yunPlugin(userOptions?: Partial<ThemeConfig>): Plugin;
+
+export { ThemeConfig, ThemeUserConfig, UserOptions, anonymousImage, yunPlugin as default, defaultThemeConfig, generateSafelist, yunPlugin };

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var n="https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg",e= exports.defaultThemeConfig ={banner:{enable:!0,title:"\u4E91\u6E38\u541B\u7684\u5C0F\u7AD9"},bg_image:{enable:!0,url:"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/stars-timing-0-blur-30px.jpg",dark:"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/galaxy.jpg",opacity:1},say:{enable:!0,api:"https://el-bot-api.vercel.app/api/words/young",hitokoto:{enable:!1,api:"https://v1.hitokoto.cn"}},pages:[],footer:{since:2022,icon:{name:"i-ri-cloud-line",animated:!0,color:"var(--yun-c-primary)",url:"https://sponsors.yunyoujun.cn",title:"Sponsor YunYouJun"},powered:!0,beian:{enable:!1,icp:""}},types:{link:{color:"var(--yun-c-primary)",icon:"i-ri-external-link-line"},bilibili:{color:"#FF8EB3",icon:"i-ri-bilibili-line"},douban:{color:"#007722",icon:"i-ri-douban-line"},github:{color:"var(--yun-c-text)",icon:"i-ri-github-line"},"netease-cloud-music":{color:"#C10D0C",icon:"i-ri-netease-cloud-music-line"},notion:{color:"var(--yun-c-text)",icon:"i-simple-icons-notion"},twitter:{color:"#1da1f2",icon:"i-ri-twitter-line"},wechat:{color:"#1AAD19",icon:"i-ri-wechat-2-line"},weibo:{color:"#E6162D",icon:"i-ri-weibo-line"},yuque:{color:"#25b864",icon:"i-ant-design-yuque-outlined"},zhihu:{color:"#0084FF",icon:"i-ri-zhihu-line"}}};exports.anonymousImage = n; exports.defaultThemeConfig = e;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var d="https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg",n= exports.defaultThemeConfig ={safelist:["i-ri-clipboard-line"],colors:{primary:"#0078E7"},banner:{enable:!0,title:"\u4E91\u6E38\u541B\u7684\u5C0F\u7AD9"},bg_image:{enable:!0,url:"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/stars-timing-0-blur-30px.jpg",dark:"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/galaxy.jpg",opacity:1},say:{enable:!0,api:"https://el-bot-api.vercel.app/api/words/young",hitokoto:{enable:!1,api:"https://v1.hitokoto.cn"}},pages:[],footer:{since:2022,icon:{name:"i-ri-cloud-line",animated:!0,color:"var(--va-c-primary)",url:"https://sponsors.yunyoujun.cn",title:"Sponsor YunYouJun"},powered:!0,beian:{enable:!1,icp:""}},types:{link:{color:"var(--va-c-primary)",icon:"i-ri-external-link-line"},bilibili:{color:"#FF8EB3",icon:"i-ri-bilibili-line"},douban:{color:"#007722",icon:"i-ri-douban-line"},github:{color:"var(--va-c-text)",icon:"i-ri-github-line"},"netease-cloud-music":{color:"#C10D0C",icon:"i-ri-netease-cloud-music-line"},notion:{color:"var(--va-c-text)",icon:"i-simple-icons-notion"},twitter:{color:"#1da1f2",icon:"i-ri-twitter-line"},wechat:{color:"#1AAD19",icon:"i-ri-wechat-2-line"},weibo:{color:"#E6162D",icon:"i-ri-weibo-line"},yuque:{color:"#25b864",icon:"i-ant-design-yuque-outlined"},zhihu:{color:"#0084FF",icon:"i-ri-zhihu-line"}},menu:{custom:{title:"button.about",icon:"i-ri-clipboard-line",url:"/about"}}};n.safelist=n.safelist.concat(b(n));function b(i){var t,r,a,l,s,c,u,p;let e=[],o=i.types;if(o)for(let g in o)e.push(o[g].icon);return(r=(t=i.footer)==null?void 0:t.icon)!=null&&r.name&&e.push((l=(a=i.footer)==null?void 0:a.icon)==null?void 0:l.name),(c=(s=i.menu)==null?void 0:s.custom)!=null&&c.icon&&e.push((p=(u=i.menu)==null?void 0:u.custom)==null?void 0:p.icon),e}function f(i=n){return{name:"valaxy-theme-yun",enforce:"pre",config(){var e;return{css:{preprocessorOptions:{scss:{additionalData:`$c-primary: ${((e=i.colors)==null?void 0:e.primary)||"#0078E7"} !default;`}}}}}}}var v=f;exports.anonymousImage = d; exports.default = v; exports.defaultThemeConfig = n; exports.generateSafelist = b; exports.yunPlugin = f;

package/dist/index.mjs

@@ -1 +1 @@
-var e="https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg",o={banner:{enable:!0,title:"\u4E91\u6E38\u541B\u7684\u5C0F\u7AD9"},bg_image:{enable:!0,url:"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/stars-timing-0-blur-30px.jpg",dark:"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/galaxy.jpg",opacity:1},say:{enable:!0,api:"https://el-bot-api.vercel.app/api/words/young",hitokoto:{enable:!1,api:"https://v1.hitokoto.cn"}},pages:[],footer:{since:2022,icon:{name:"i-ri-cloud-line",animated:!0,color:"var(--yun-c-primary)",url:"https://sponsors.yunyoujun.cn",title:"Sponsor YunYouJun"},powered:!0,beian:{enable:!1,icp:""}},types:{link:{color:"var(--yun-c-primary)",icon:"i-ri-external-link-line"},bilibili:{color:"#FF8EB3",icon:"i-ri-bilibili-line"},douban:{color:"#007722",icon:"i-ri-douban-line"},github:{color:"var(--yun-c-text)",icon:"i-ri-github-line"},"netease-cloud-music":{color:"#C10D0C",icon:"i-ri-netease-cloud-music-line"},notion:{color:"var(--yun-c-text)",icon:"i-simple-icons-notion"},twitter:{color:"#1da1f2",icon:"i-ri-twitter-line"},wechat:{color:"#1AAD19",icon:"i-ri-wechat-2-line"},weibo:{color:"#E6162D",icon:"i-ri-weibo-line"},yuque:{color:"#25b864",icon:"i-ant-design-yuque-outlined"},zhihu:{color:"#0084FF",icon:"i-ri-zhihu-line"}}};export{e as anonymousImage,o as defaultThemeConfig};
+var h="https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg",n={safelist:["i-ri-clipboard-line"],colors:{primary:"#0078E7"},banner:{enable:!0,title:"\u4E91\u6E38\u541B\u7684\u5C0F\u7AD9"},bg_image:{enable:!0,url:"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/stars-timing-0-blur-30px.jpg",dark:"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/galaxy.jpg",opacity:1},say:{enable:!0,api:"https://el-bot-api.vercel.app/api/words/young",hitokoto:{enable:!1,api:"https://v1.hitokoto.cn"}},pages:[],footer:{since:2022,icon:{name:"i-ri-cloud-line",animated:!0,color:"var(--va-c-primary)",url:"https://sponsors.yunyoujun.cn",title:"Sponsor YunYouJun"},powered:!0,beian:{enable:!1,icp:""}},types:{link:{color:"var(--va-c-primary)",icon:"i-ri-external-link-line"},bilibili:{color:"#FF8EB3",icon:"i-ri-bilibili-line"},douban:{color:"#007722",icon:"i-ri-douban-line"},github:{color:"var(--va-c-text)",icon:"i-ri-github-line"},"netease-cloud-music":{color:"#C10D0C",icon:"i-ri-netease-cloud-music-line"},notion:{color:"var(--va-c-text)",icon:"i-simple-icons-notion"},twitter:{color:"#1da1f2",icon:"i-ri-twitter-line"},wechat:{color:"#1AAD19",icon:"i-ri-wechat-2-line"},weibo:{color:"#E6162D",icon:"i-ri-weibo-line"},yuque:{color:"#25b864",icon:"i-ant-design-yuque-outlined"},zhihu:{color:"#0084FF",icon:"i-ri-zhihu-line"}},menu:{custom:{title:"button.about",icon:"i-ri-clipboard-line",url:"/about"}}};n.safelist=n.safelist.concat(f(n));function f(i){var t,r,a,l,s,c,u,p;let e=[],o=i.types;if(o)for(let g in o)e.push(o[g].icon);return(r=(t=i.footer)==null?void 0:t.icon)!=null&&r.name&&e.push((l=(a=i.footer)==null?void 0:a.icon)==null?void 0:l.name),(c=(s=i.menu)==null?void 0:s.custom)!=null&&c.icon&&e.push((p=(u=i.menu)==null?void 0:u.custom)==null?void 0:p.icon),e}function d(i=n){return{name:"valaxy-theme-yun",enforce:"pre",config(){var e;return{css:{preprocessorOptions:{scss:{additionalData:`$c-primary: ${((e=i.colors)==null?void 0:e.primary)||"#0078E7"} !default;`}}}}}}}var x=d;export{h as anonymousImage,x as default,n as defaultThemeConfig,f as generateSafelist,d as yunPlugin};

package/index.ts

@@ -1 +1,32 @@
+import type { Plugin } from 'vite'
+import type { ThemeConfig } from './config'
+import { defaultThemeConfig } from './config'
+
 export * from './config'
+
+export interface UserOptions {
+  colors: {
+    primary: string
+  }
+}
+
+export function yunPlugin(userOptions: Partial<ThemeConfig> = defaultThemeConfig): Plugin {
+  return {
+    name: 'valaxy-theme-yun',
+    enforce: 'pre',
+
+    config() {
+      return {
+        css: {
+          preprocessorOptions: {
+            scss: {
+              additionalData: `$c-primary: ${userOptions.colors?.primary || '#0078E7'} !default;`,
+            },
+          },
+        },
+      }
+    },
+  }
+}
+
+export default yunPlugin

package/layouts/archives.vue

@@ -1,17 +1,19 @@
 <script lang="ts" setup>
-import { useFrontmatter, usePostList } from 'valaxy'
+import { useFrontmatter, usePostList, usePostTitle } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
 const frontmatter = useFrontmatter()
 const postList = usePostList()
+
+const title = usePostTitle(frontmatter)
 </script>
 
 <template>
   <YunBase>
     <template #header>
-      <YunPageHeader :title="frontmatter.title || t('menu.archives')" :icon="frontmatter.icon || 'i-ri-archive-line'" :color="frontmatter.color" />
+      <YunPageHeader :title="title || t('menu.archives')" :icon="frontmatter.icon || 'i-ri-archive-line'" :color="frontmatter.color" />
     </template>
     <template #content>
       <router-view />

package/layouts/base.vue

@@ -1,20 +1,28 @@
 <script lang="ts" setup>
-import { useConfig, useFrontmatter, usePostProperty } from 'valaxy'
+import { useConfig, useFrontmatter, usePostProperty, usePostTitle } from 'valaxy'
 const frontmatter = useFrontmatter()
 
 const config = useConfig()
 
 const { styles, icon, color } = usePostProperty(frontmatter.value.type)
+const title = usePostTitle(frontmatter)
 </script>
 
 <template>
-  <ValaxySidebar />
+  <ValaxySidebar>
+    <slot name="sidebar">
+      <YunSidebar v-if="$slots['sidebar-child']">
+        <slot name="sidebar-child" />
+      </YunSidebar>
+      <YunSidebar v-else />
+    </slot>
+  </ValaxySidebar>
 
   <main class="yun-main flex lt-md:ml-0">
     <div flex="~ 1 col" w="full" p="l-4 lt-md:0">
-      <YunCard m="0" p="4" class="page-card sm:p-6 lg:px-12 xl:px-16" :style="styles">
+      <YunCard m="0" p="4" class="relative page-card sm:p-6 lg:px-12 xl:px-16" :style="styles">
         <slot name="header">
-          <YunPageHeader :title="frontmatter.title" :icon="frontmatter.icon || icon" :color="frontmatter.color || color" />
+          <YunPageHeader :title="title" :icon="frontmatter.icon || icon" :color="frontmatter.color || color" />
         </slot>
         <template #content>
           <slot name="content">
@@ -30,8 +38,9 @@ const { styles, icon, color } = usePostProperty(frontmatter.value.type)
       </slot>
 
       <slot v-if="frontmatter.comment !== false" name="comment">
-        <YunCard v-if="config.comment.waline.enable" w="full" p="4" class="comment sm:p-8 lg:px-12 xl:px-16" :class="frontmatter.nav === false ? 'mt-4' : 0">
-          <YunWaline />
+        <YunCard w="full" p="4" class="comment sm:p-8 lg:px-12 xl:px-16" :class="frontmatter.nav === false ? 'mt-4' : 0">
+          <YunWaline v-if="config.comment.waline.enable" />
+          <YunTwikoo v-if="config.comment.twikoo.enable" />
         </YunCard>
       </slot>
 
@@ -58,7 +67,7 @@ const { styles, icon, color } = usePostProperty(frontmatter.value.type)
 @include xl {
   .page-card {
     // 8px scrollbar width
-    max-width: calc(100vw - 2 * var(--yun-sidebar-width-mobile) - 2rem - 8px);
+    max-width: calc(100vw - 2 * var(--va-sidebar-width-mobile) - 2rem - 8px);
   }
 }
 </style>

package/layouts/categories.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { useCategory, useFrontmatter, useInvisibleElement, usePostList } from 'valaxy'
+import { useCategory, useFrontmatter, useInvisibleElement, usePostList, usePostTitle } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -39,13 +39,15 @@ const displayCategory = (category: string) => {
 
   show()
 }
+
+const title = usePostTitle(frontmatter)
 </script>
 
 <template>
   <YunBase>
     <template #header>
       <YunPageHeader
-        :title="frontmatter.title || t('menu.categories')"
+        :title="title || t('menu.categories')"
         :icon="frontmatter.icon || 'i-ri-folder-2-line'"
         :color="frontmatter.color"
       />

package/layouts/home.vue

@@ -12,11 +12,20 @@ const isHome = useLayout('home')
 
 <template>
   <main class="yun-main justify-center items-center" :class="(isHome && !app.isSidebarOpen) && 'pl-0'" flex="~ col" w="full">
-    <ValaxySidebar />
+    <ValaxySidebar>
+      <slot name="sidebar">
+        <YunSidebar />
+      </slot>
+    </ValaxySidebar>
+
     <YunBanner />
     <YunSay w="full" />
 
-    <router-view />
+    <slot name="board" />
+
+    <slot>
+      <router-view />
+    </slot>
 
     <ValaxyFooter>
       <slot name="footer" />