valaxy-theme-yun 0.0.5

package/components/YunSidebar.vue

@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import { useConfig } from 'valaxy'
+import { useRouter } from 'vue-router'
+
+const config = useConfig()
+const router = useRouter()
+</script>
+
+<template>
+  <div class="sidebar-panel">
+    <div class="site-info" m="t-6">
+      <a class="site-author-avatar">
+        <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>
+
+    <YunSidebarNav />
+    <hr m="t-4 b-2">
+    <YunSocialLinks />
+    <hr m="y-2">
+    <YunSidebarLinks />
+    <br>
+  </div>
+</template>
+
+<style lang="scss">
+@use "~/styles/mixins" as *;
+
+.sidebar-panel {
+  padding: 0.5rem;
+}
+
+.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);
+    }
+  }
+}
+
+.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/YunSidebarLinks.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { useThemeConfig } from 'valaxy'
+const themeConfig = useThemeConfig()
+</script>
+
+<template>
+  <div class="links">
+    <a v-for="item, i in themeConfig.pages" :key="i" class="link-item yun-icon-btn" :href="item.url" :title="item.name" :target="item.url.startsWith('http') ? '_blank' : ''" :style="`color:${item.color}`">
+      <div :class="item.icon" class="icon" />
+    </a>
+  </div>
+</template>
+
+<style lang="scss">
+.sidebar {
+  .links {
+    display: flex;
+    justify-content: center;
+  }
+
+  .link-item {
+    display: inline-flex;
+
+    .icon {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+}
+</style>

package/components/YunSidebarNav.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import { useCategory, usePostList, useTag } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const posts = usePostList()
+const categories = useCategory()
+const tags = useTag()
+</script>
+
+<template>
+  <nav class="site-nav" text-xl mt-6>
+    <router-link class="site-link-item yun-icon-btn" to="/" :title="t('menu.home')">
+      <div i-ri-home-4-line />
+    </router-link>
+
+    <router-link class="site-link-item" to="/archives/" :title="t('menu.archives')">
+      <div class="icon" i-ri-archive-line />
+      <span class="count">{{ posts.length }}</span>
+    </router-link>
+    <router-link class="site-link-item" to="/categories/" :title="t('menu.categories')">
+      <div class="icon" i-ri-folder-2-line />
+      <span class="count">{{ Array.from(categories.children).length }}</span>
+    </router-link>
+    <router-link class="site-link-item" to="/tags/" :title="t('menu.tags')">
+      <div class="icon" i-ri-price-tag-3-line />
+      <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>
+  </nav>
+</template>
+
+<style lang="scss">
+@use "~/styles/mixins" as *;
+
+.site-nav {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  line-height: 1.5;
+  white-space: nowrap;
+  text-align: center;
+  margin-top: 1rem;
+}
+
+.site-link-item {
+  display: flex;
+  padding: 0 15px;
+  align-items: center;
+  border-left: 1px solid get-css-var('c-gray');
+
+  flex-direction: column;
+
+  color: var(--yun-c-text);
+
+  &:first-child, &:last-child {
+    line-height: 1;
+    padding: 0;
+  }
+
+  &:first-child {
+    border-left: none;
+    border-right: 1px solid get-css-var('c-gray');
+  }
+
+  &:last-child {
+    border-left: 1px solid get-css-var('c-gray');
+  }
+
+  &:nth-child(2) {
+    border: none;
+  }
+
+  .count {
+    color: var(--yun-c-text);
+    font-family: var(--yun-font-sans);
+    display: block;
+    text-align: center;
+    font-size: 1rem;
+  }
+
+  .icon {
+    width: 1.5rem;
+    height: 1.5rem;
+
+    &:hover {
+      color: var(--yun-c-primary-light);
+    }
+  }
+}
+</style>

package/components/YunSocialLinks.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { useConfig } from 'valaxy'
+
+const config = useConfig()
+</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}`">
+      <div class="icon" :class="item.icon" />
+    </a>
+  </div>
+</template>
+
+<style lang="scss">
+.links-of-author {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  .icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  &-item {
+    line-height: 1;
+    font-size: 0.9rem;
+  }
+}
+</style>

package/components/YunSponsor.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { useConfig } from 'valaxy'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
+const config = useConfig()
+
+const showQr = ref(false)
+</script>
+
+<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>
+
+    <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"
+        class="flex flex-col justify-center items-center animate-iteration-1"
+        :class="showQr && 'animate-fade-in'"
+        :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">
+        <div text="xl" m="2" :class="method.icon" />
+      </a>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.sponsor-button {
+  background-color: rgba(255, 255, 255, 0.1);
+
+  div {
+    transform: scale(1.1);
+    transition: transform var(--yun-transition-duration) ease-in-out;
+  }
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.9);
+
+    div {
+      transform: scale(1.2);
+    }
+  }
+
+  a {
+    &:hover {
+      border: none;
+    }
+  }
+}
+
+.qrcode-container {
+  overflow: hidden;
+  height: 0;
+
+  transition: height var(--yun-transition-duration) ease-in-out;
+
+  &.show {
+    height: 220px;
+  }
+}
+
+.sponsor-method-img {
+  width: 12rem;
+  max-width: 90%;
+  aspect-ratio: 1;
+}
+</style>

package/components/YunWaline.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { useConfig, useWaline } from 'valaxy'
+
+const config = useConfig()
+useWaline({
+  serverURL: config.value.comment.waline.serverURL,
+})
+</script>
+
+<template>
+  <div id="waline" w="full" />
+</template>
+
+<style lang="scss">
+#waline {
+  --waline-theme-color: var(--yun-c-primary);
+  --waline-active-color: var(--yun-c-primary-light);
+
+  .v[data-class=v] {
+    .veditor {
+      width: calc(100% - 2em);
+      padding: 0.5rem;
+    }
+  }
+}
+</style>

package/composables/index.ts

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

package/config/index.ts

@@ -0,0 +1,192 @@
+export const anonymousImage = 'https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg'
+
+/**
+ * Theme Config
+ */
+export interface ThemeConfig {
+  /**
+   * 首页标语
+   */
+  banner: {
+    enable: boolean
+    /**
+     * 标题
+     */
+    title: string
+  }
+
+  bg_image: {
+    enable: boolean
+    url: string
+    dark?: string
+    opacity: number
+  }
+
+  /**
+   * say something
+   * https://say.elpsy.cn
+   */
+  say: {
+    enable: boolean
+    api: string
+    hitokoto: {
+      enable: boolean
+      api: string
+    }
+  }
+
+  pages: {
+    name: string
+    url: string
+    icon: string
+    color: string
+  }[]
+
+  /**
+   * footer
+   */
+  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
+    }
+  }
+
+  /**
+   * post card types
+   */
+  types: Record<string, {
+    color: string
+    icon: string
+  }>
+}
+
+export type ThemeUserConfig = Partial<ThemeConfig>
+
+/**
+ * Default Config
+ */
+export const defaultThemeConfig: ThemeConfig = {
+  banner: {
+    enable: true,
+    title: '云游君的小站',
+  },
+
+  bg_image: {
+    enable: true,
+    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: true,
+    api: 'https://el-bot-api.vercel.app/api/words/young',
+    hitokoto: {
+      enable: false,
+      api: 'https://v1.hitokoto.cn',
+    },
+  },
+
+  pages: [],
+
+  footer: {
+    since: 2022,
+    icon: {
+      name: 'i-ri-cloud-line',
+      animated: true,
+      color: 'var(--yun-c-primary)',
+      url: 'https://sponsors.yunyoujun.cn',
+      title: '',
+    },
+
+    powered: true,
+
+    beian: {
+      enable: false,
+      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 default defaultThemeConfig

package/dist/index.d.ts

@@ -0,0 +1,93 @@
+declare const anonymousImage = "https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg";
+/**
+ * Theme Config
+ */
+interface ThemeConfig {
+    /**
+     * 首页标语
+     */
+    banner: {
+        enable: boolean;
+        /**
+         * 标题
+         */
+        title: string;
+    };
+    bg_image: {
+        enable: boolean;
+        url: string;
+        dark?: string;
+        opacity: number;
+    };
+    /**
+     * say something
+     * https://say.elpsy.cn
+     */
+    say: {
+        enable: boolean;
+        api: string;
+        hitokoto: {
+            enable: boolean;
+            api: string;
+        };
+    };
+    pages: {
+        name: string;
+        url: string;
+        icon: string;
+        color: string;
+    }[];
+    /**
+     * footer
+     */
+    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;
+        };
+    };
+    /**
+     * post card types
+     */
+    types: Record<string, {
+        color: string;
+        icon: string;
+    }>;
+}
+declare type ThemeUserConfig = Partial<ThemeConfig>;
+/**
+ * Default Config
+ */
+declare const defaultThemeConfig: ThemeConfig;
+
+export { ThemeConfig, ThemeUserConfig, anonymousImage, defaultThemeConfig };

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var e="https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg",n= 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:""},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 = e; exports.defaultThemeConfig = n;

package/dist/index.mjs

@@ -0,0 +1 @@
+var n="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:""},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{n as anonymousImage,o as defaultThemeConfig};

package/index.ts

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