@sugarat/theme 0.2.3 → 0.2.5

package/README.md

@@ -16,6 +16,9 @@ npm create @sugarat/theme@latest
 
 # With Yarn:
 yarn create @sugarat/theme
+
+# With Bun
+bunx @sugarat/create-theme --bun
 ```
 
 ![](https://img.cdn.sugarat.top/mdImg/MTY4OTQyMDE1NTcxMA==689420155710)

package/node.d.ts

@@ -1,6 +1,7 @@
 import { DefaultTheme, UserConfig } from 'vitepress';
 import { ElButton } from 'element-plus';
 import { RSSOptions } from 'vitepress-plugin-rss';
+import { Repo, Mapping } from '@giscus/vue';
 export { tabsMarkdownPlugin } from 'vitepress-plugin-tabs';
 
 type RSSPluginOptions = RSSOptions;
@@ -82,14 +83,14 @@ declare namespace Theme {
         type: string;
     }
     interface GiscusConfig {
-        repo: string;
+        repo: Repo;
         repoId: string;
         category: string;
         categoryId: string;
-        mapping?: string;
+        mapping?: Mapping;
         inputPosition?: 'top' | 'bottom';
         lang?: string;
-        loading?: 'lazy' | 'auto' | 'eager';
+        loading?: 'lazy' | 'eager';
     }
     interface HotArticle {
         title?: string;
@@ -106,7 +107,19 @@ declare namespace Theme {
          * @default true
          */
         showSelf?: boolean;
+        /**
+         * 自定义文章过滤
+         */
         filter?: (page: Theme.PageData) => boolean;
+        /**
+         * 自定义排序
+         * @default 'date'
+         */
+        sort?: 'date' | 'filename' | ((a: Theme.PageData, b: Theme.PageData) => number);
+        /**
+         * 当没有推荐文章时的提示，设置为 false 则不展示
+         * @default '暂无相关文章'
+         */
         empty?: string | boolean;
         /**
          * 设置推荐文章的展示风格
@@ -122,6 +135,10 @@ declare namespace Theme {
         pageSize?: number;
         author?: string | boolean;
         logo?: string | boolean;
+        /**
+         * @default 'card'
+         */
+        avatarMode?: 'card' | 'split';
     }
     interface ArticleConfig {
         readingTime?: boolean;
@@ -272,14 +289,14 @@ declare namespace Theme {
         /**
          * 首页页脚
          */
-        footer?: Footer;
+        footer?: Footer | Footer[];
     }
     type RSSOptions = RSSPluginOptions;
     interface Footer {
         /**
          * 自定义补充信息
          */
-        message?: string;
+        message?: string | string[];
         /**
          * 是否展示主题版本信息
          */

package/node.js

@@ -36,7 +36,7 @@ __export(node_exports, {
 });
 module.exports = __toCommonJS(node_exports);
 
-// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.0.0-rc.17_vue@3.3.4/node_modules/vitepress-plugin-tabs/dist/index.js
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.0.0-rc.20_vue@3.3.4/node_modules/vitepress-plugin-tabs/dist/index.js
 var tabsMarker = "=tabs";
 var tabsMarkerLen = tabsMarker.length;
 var ruleBlockTabs = (state, startLine, endLine, silent) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -33,6 +33,7 @@
     "types"
   ],
   "dependencies": {
+    "@giscus/vue": "^2.3.0",
     "@mdit-vue/shared": "^0.12.0",
     "@mermaid-js/mermaid-mindmap": "^9.3.0",
     "@vue/shared": "^3.2.45",
@@ -40,7 +41,7 @@
     "fast-glob": "^3.2.12",
     "gray-matter": "^4.0.3",
     "mermaid": "^10.2.4",
-    "vitepress-plugin-mermaid": "^2.0.13",
+    "vitepress-plugin-mermaid": "2.0.13",
     "vitepress-plugin-pagefind": "0.2.10",
     "vitepress-plugin-rss": "0.1.3",
     "vitepress-plugin-tabs": "0.2.0"
@@ -51,7 +52,7 @@
     "pagefind": "1.0.3",
     "sass": "^1.56.1",
     "typescript": "^4.8.2",
-    "vitepress": "1.0.0-rc.17",
+    "vitepress": "1.0.0-rc.20",
     "vue": "^3.3.4"
   },
   "scripts": {

package/src/components/BlogApp.vue

@@ -15,6 +15,7 @@ import BlogArticleAnalyze from './BlogArticleAnalyze.vue'
 import BlogAlert from './BlogAlert.vue'
 import BlogPopover from './BlogPopover.vue'
 import BlogFooter from './BlogFooter.vue'
+import BlogHomeHeaderAvatar from './BlogHomeHeaderAvatar.vue'
 
 const { frontmatter } = useData()
 const layout = computed(() => frontmatter.value.layout)
@@ -49,6 +50,7 @@ const { Layout } = Theme
     <template v-if="isBlogTheme" #home-hero-before>
       <slot name="home-hero-before" />
       <div class="home">
+        <BlogHomeHeaderAvatar />
         <div class="header-banner">
           <BlogHomeBanner />
         </div>

package/src/components/BlogComment.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { useElementVisibility } from '@vueuse/core'
 import { useData, useRoute } from 'vitepress'
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { ElAffix, ElButton } from 'element-plus'
 import { Comment } from '@element-plus/icons-vue'
+import Giscus from '@giscus/vue'
 import { useGiscusConfig } from '../composables/config/blog'
 import type { Theme } from '../composables/config/index'
 
@@ -19,9 +20,9 @@ function handleScrollToComment() {
 }
 const giscusConfig = useGiscusConfig()
 
-const commentConfig = computed<Partial<Theme.GiscusConfig>>(() => {
+const commentConfig = computed<Theme.GiscusConfig>(() => {
   if (!giscusConfig) {
-    return {}
+    return {} as any
   }
   return giscusConfig
 })
@@ -57,14 +58,6 @@ watch(
     immediate: true
   }
 )
-
-// TODO：可以优化，不需要重载
-watch(isDark, () => {
-  showComment.value = false
-  nextTick(() => {
-    showComment.value = true
-  })
-})
 </script>
 
 <template>
@@ -91,24 +84,19 @@ watch(isDark, () => {
         评论
       </ElButton>
     </ElAffix>
-    <!-- eslint-disable-next-line vue/require-component-is -->
-    <component
-      is="script"
+    <Giscus
       v-if="showComment"
-      src="https://giscus.app/client.js"
-      :data-repo="commentConfig.repo"
-      :data-repo-id="commentConfig.repoId"
-      :data-category="commentConfig.category"
-      :data-category-id="commentConfig.categoryId"
-      :data-mapping="commentConfig.mapping || 'pathname'"
-      data-reactions-enabled="1"
-      data-emit-metadata="0"
-      :data-input-position="commentConfig.inputPosition || 'top'"
-      :data-theme="isDark ? 'dark' : 'light'"
-      :data-lang="commentConfig.lang || 'zh-CN'"
-      crossorigin="anonymous"
-      :data-loading="commentConfig.loading || 'eager'"
-      async
+      :repo="commentConfig.repo"
+      :repo-id="commentConfig.repoId"
+      :category="commentConfig.category"
+      :category-id="commentConfig.categoryId"
+      :mapping="commentConfig.mapping || 'pathname'"
+      reactions-enabled="1"
+      emit-metadata="0"
+      :input-position="commentConfig.inputPosition || 'top'"
+      :theme="isDark ? 'dark' : 'light'"
+      :lang="commentConfig.lang || 'zh-CN'"
+      :loading="commentConfig.loading || 'eager'"
     />
   </div>
 </template>

package/src/components/BlogFooter.vue

@@ -1,74 +1,90 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed } from 'vue'
 import { useHomeFooterConfig } from '../composables/config/blog'
 import packageJSON from '../../package.json'
 import { copyrightSVG, icpSVG, themeSVG } from '../constants/svg'
 
-const footer = useHomeFooterConfig()
-const data = ref<{
-  name: string
-  link?: string
-  icon?: string | boolean
-}[]>([])
-onMounted(() => {
-  if (!footer) {
-    return
-  }
-  const { icpRecord, securityRecord, copyright, version } = footer
-  // version
-  if (version !== false) {
-    data.value.push({
-      name: `@sugarat/theme@${packageJSON.version}`,
-      link: 'https://theme.sugarat.top/',
-      icon: themeSVG
-    })
-  }
-  // copyright
-  if (typeof copyright === 'string') {
-    data.value.push({
-      name: copyright,
-      icon: copyrightSVG
-    })
-  }
-  if (copyright instanceof Object) {
-    data.value.push({
-      icon: copyrightSVG,
-      name: copyright.message,
-      ...copyright
-    })
-  }
-  // 备案信息
-  if (icpRecord) {
-    data.value.push({
-      icon: icpSVG,
-      ...icpRecord
-    })
-  }
-  // 网备信息
-  if (securityRecord) {
-    data.value.push({
-      icon: 'security',
-      ...securityRecord
-    })
+const footerData = useHomeFooterConfig()
+
+const renderData = computed(() => {
+  if (!footerData) {
+    return []
   }
+  const flatData = [footerData].flat()
+  return flatData.flat().map((footer, idx) => {
+    const { icpRecord, securityRecord, copyright, version, message } = footer
+    const data: {
+      name: string
+      link?: string
+      icon?: string | boolean
+    }[] = []
+    // message
+    const messageData: string[] = [message || []].flat()
+
+    // version
+    const isLast = idx === flatData.length - 1
+    if ((version !== false && isLast) || version === true) {
+      data.push({
+        name: `@sugarat/theme@${packageJSON.version}`,
+        link: 'https://theme.sugarat.top/',
+        icon: themeSVG
+      })
+    }
+    // copyright
+    if (typeof copyright === 'string') {
+      data.push({
+        name: copyright,
+        icon: copyrightSVG
+      })
+    }
+    if (copyright instanceof Object) {
+      data.push({
+        icon: copyrightSVG,
+        name: copyright.message,
+        ...copyright
+      })
+    }
+    // 备案信息
+    if (icpRecord) {
+      data.push({
+        icon: icpSVG,
+        ...icpRecord
+      })
+    }
+    // 网备信息
+    if (securityRecord) {
+      data.push({
+        icon: 'security',
+        ...securityRecord
+      })
+    }
+    return {
+      data,
+      messageData
+    }
+  })
 })
 </script>
 
 <template>
-  <footer v-if="footer" class="blog-footer">
-    <p v-if="footer?.message" v-html="footer?.message" />
-    <p class="footer-item-list">
-      <span v-for="(item, index) in data" :key="index" class="footer-item">
-        <i v-if="item.icon === 'security'">
-          <img src="./../styles/gongan.png" alt="公网安备">
-        </i>
-        <i v-else-if="item.icon" v-html="item.icon" />
-        <a v-if="item.link" :href="item.link" target="_blank" rel="noopener noreferrer">
-          {{ item.name }}
-        </a>
-        <span v-else>{{ item.name }}</span>
-      </span>
-    </p>
+  <footer v-if="renderData.length" class="blog-footer">
+    <!-- eslint-disable vue/require-v-for-key -->
+    <!-- see https://cn.vuejs.org/guide/essentials/list.html#v-for-on-template -->
+    <template v-for="({ data, messageData }) in renderData">
+      <p v-for="message in messageData" v-html="message" />
+      <p class="footer-item-list">
+        <span v-for="item in data" class="footer-item">
+          <i v-if="item.icon === 'security'">
+            <img src="./../styles/gongan.png" alt="公网安备">
+          </i>
+          <i v-else-if="item.icon" v-html="item.icon" />
+          <a v-if="item.link" :href="item.link" target="_blank" rel="noopener noreferrer">
+            {{ item.name }}
+          </a>
+          <span v-else>{{ item.name }}</span>
+        </span>
+      </p>
+    </template>
   </footer>
 </template>
 

package/src/components/BlogHomeBanner.vue

@@ -113,6 +113,7 @@ h1 {
     display: none;
   }
 }
+
 @keyframes fade-in {
   0% {
     opacity: 0;
@@ -127,6 +128,7 @@ h1 {
   margin: 16px 0;
   height: 24px;
   width: auto;
+
   h2 {
     animation: fade-in 0.5s ease-in-out;
     cursor: pointer;

package/src/components/BlogHomeHeaderAvatar.vue

@@ -0,0 +1,50 @@
+<script  setup lang="ts">
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+import { useBlogConfig } from '../composables/config/blog'
+
+const { width } = useWindowSize()
+const inMiniScreen = computed(() => width.value <= 767)
+
+const { home } = useBlogConfig()
+const { frontmatter, site } = useData()
+const logo = computed(() =>
+  frontmatter.value.logo
+    ?? frontmatter.value?.blog?.logo
+    ?? home?.logo
+    ?? site.value.themeConfig.logo
+)
+const alwaysHide = computed(() => frontmatter.value.blog?.minScreenAvatar === false)
+</script>
+
+<template>
+  <div v-show="inMiniScreen && !alwaysHide" class="blog-home-header-avatar">
+    <img :src="logo" alt="avatar">
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.blog-home-header-avatar {
+    padding-top: 40px;
+    display: flex;
+    align-items: center;
+
+    img {
+        display: block;
+        margin: 0 auto;
+        width: 130px;
+        height: 130px;
+        border-radius: 50%;
+        background-color: transparent;
+        border: 5px solid rgba(var(--bg-gradient-home));
+        box-sizing: border-box;
+    }
+
+    img:hover {
+        transform: rotate(666turn);
+        transition-duration: 59s;
+        transition-timing-function: cubic-bezier(.34, 0, .84, 1)
+    }
+}
+</style>

package/src/components/BlogHomeInfo.vue

@@ -3,14 +3,10 @@ import BlogHomeOverview from './BlogHomeOverview.vue'
 import BlogHotArticle from './BlogHotArticle.vue'
 import BlogHomeTags from './BlogHomeTags.vue'
 import BlogFriendLink from './BlogFriendLink.vue'
-import BlogAuthor from './BlogAuthor.vue'
 </script>
 
 <template>
   <div class="blog-info" data-pagefind-ignore="all">
-    <!-- 头像信息 -->
-    <BlogAuthor />
-
     <!-- 统计数据，日后支持，点击筛选出左侧的数据 -->
     <BlogHomeOverview />
 

package/src/components/BlogHomeOverview.vue

@@ -1,7 +1,16 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
+import { useData } from 'vitepress'
 import { isCurrentWeek } from '../utils/client'
-import { useArticles } from '../composables/config/blog'
+import { useArticles, useBlogConfig } from '../composables/config/blog'
+import BlogAuthor from './BlogAuthor.vue'
+
+const { home } = useBlogConfig()
+const { frontmatter } = useData()
+const avatarMode = computed(() => frontmatter.value?.blog?.avatarMode || home?.avatarMode || 'card')
+
+const showCardAvatar = computed(() => avatarMode.value === 'card')
+const showSplitCard = computed(() => avatarMode.value === 'split')
 
 const docs = useArticles()
 const notHiddenArticles = computed(() => {
@@ -25,20 +34,25 @@ const currentWeek = computed(() => {
 </script>
 
 <template>
-  <div class="card overview-data">
-    <div class="overview-item">
-      <span class="count">{{ notHiddenArticles.length }}</span>
-      <span class="label">博客文章</span>
-    </div>
-    <div class="split" />
-    <div class="overview-item">
-      <span class="count">+{{ currentMonth?.length }}</span>
-      <span class="label">本月更新</span>
-    </div>
-    <div class="split" />
-    <div class="overview-item">
-      <span class="count">+{{ currentWeek?.length }}</span>
-      <span class="label">本周更新</span>
+  <!-- 头像信息 -->
+  <BlogAuthor v-if="showSplitCard" />
+  <div class="card">
+    <BlogAuthor v-if="showCardAvatar" />
+    <div class="overview-data">
+      <div class="overview-item">
+        <span class="count">{{ notHiddenArticles.length }}</span>
+        <span class="label">博客文章</span>
+      </div>
+      <div class="split" />
+      <div class="overview-item">
+        <span class="count">+{{ currentMonth?.length }}</span>
+        <span class="label">本月更新</span>
+      </div>
+      <div class="split" />
+      <div class="overview-item">
+        <span class="count">+{{ currentWeek?.length }}</span>
+        <span class="label">本周更新</span>
+      </div>
     </div>
   </div>
 </template>
@@ -56,6 +70,7 @@ const currentWeek = computed(() => {
   transition: all 0.3s;
   background-color: rgba(var(--bg-gradient));
   display: flex;
+  flex-direction: column;
 
   &:hover {
     box-shadow: var(--box-shadow-hover);

package/src/components/BlogRecommendArticle.vue

@@ -56,7 +56,24 @@ const recommendList = computed(() => {
   topList.sort((a, b) => Number(a.meta.recommend) - Number(b.meta.recommend))
 
   const normalList = origin.filter(v => !v.meta?.recommend)
-  normalList.sort((a, b) => +new Date(b.meta.date) - +new Date(a.meta.date))
+
+  // 排序
+  const sortMode = recommend.value?.sort ?? 'date'
+  // 默认时间排序
+  let compareFn = (a: any, b: any) => +new Date(b.meta.date) - +new Date(a.meta.date)
+  // 文件名排序
+  if (sortMode === 'filename') {
+    compareFn = (a: any, b: any) => {
+      const aName = a.route.split('/').pop()
+      const bName = b.route.split('/').pop()
+      return aName.localeCompare(bName)
+    }
+  }
+  // 自定义排序
+  if (typeof sortMode === 'function') {
+    compareFn = sortMode
+  }
+  normalList.sort(compareFn)
 
   return topList.concat(normalList)
 })

package/src/composables/config/blog.ts

@@ -27,7 +27,7 @@ const currentPageNum: InjectionKey<Ref<number>> = Symbol('home-page-num')
 
 const userWorks: InjectionKey<Ref<Theme.UserWorks>> = Symbol('user-works')
 
-const homeFooter: InjectionKey<Theme.Footer | undefined> = Symbol('home-footer')
+const homeFooter: InjectionKey<Theme.Footer | Theme.Footer[] | undefined> = Symbol('home-footer')
 
 export function withConfigProvider(App: Component) {
   return defineComponent({

package/src/composables/config/index.ts

@@ -2,6 +2,7 @@
 import type { ElButton } from 'element-plus'
 import type { DefaultTheme } from 'vitepress'
 import type { RSSOptions } from 'vitepress-plugin-rss'
+import type { Mapping, Repo } from '@giscus/vue'
 
 type RSSPluginOptions = RSSOptions
 
@@ -89,14 +90,14 @@ export namespace Theme {
   }
 
   export interface GiscusConfig {
-    repo: string
+    repo: Repo
     repoId: string
     category: string
     categoryId: string
-    mapping?: string
+    mapping?: Mapping
     inputPosition?: 'top' | 'bottom'
     lang?: string
-    loading?: 'lazy' | 'auto' | 'eager'
+    loading?: 'lazy' | 'eager'
   }
 
   export interface HotArticle {
@@ -114,7 +115,19 @@ export namespace Theme {
      * @default true
      */
     showSelf?: boolean
+    /**
+     * 自定义文章过滤
+     */
     filter?: (page: Theme.PageData) => boolean
+    /**
+     * 自定义排序
+     * @default 'date'
+     */
+    sort?: 'date' | 'filename' | ((a: Theme.PageData, b: Theme.PageData) => number)
+    /**
+     * 当没有推荐文章时的提示，设置为 false 则不展示
+     * @default '暂无相关文章'
+     */
     empty?: string | boolean
     /**
      * 设置推荐文章的展示风格
@@ -131,6 +144,10 @@ export namespace Theme {
     pageSize?: number
     author?: string | boolean
     logo?: string | boolean
+    /**
+     * @default 'card'
+     */
+    avatarMode?: 'card' | 'split'
   }
 
   export interface ArticleConfig {
@@ -303,7 +320,7 @@ export namespace Theme {
     /**
      * 首页页脚
      */
-    footer?: Footer
+    footer?: Footer | Footer[]
   }
 
   export type RSSOptions = RSSPluginOptions
@@ -312,7 +329,7 @@ export namespace Theme {
     /**
      * 自定义补充信息
      */
-    message?: string
+    message?: string | string[]
     /**
      * 是否展示主题版本信息
      */

package/src/styles/index.scss

@@ -13,7 +13,7 @@ html {
 }
 
 html.dark {
-  --bg-gradient: 20, 20, 20;
+  --bg-gradient: 20, 20, 20, 0.7;
   --bg-gradient-home: 20, 20, 20;
   --box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.6);
   --nav-bgc: rgba(0, 0, 0, 0.8);