@sugarat/theme 0.2.30 → 0.3.1

package/src/components/{BlogComment.vue → BlogCommentWrapper.vue}

@@ -1,66 +1,33 @@
 <script setup lang="ts">
 import { useElementSize, useElementVisibility, useWindowSize } from '@vueuse/core'
-import { useData, useRoute } from 'vitepress'
-import { computed, h, ref, watch } from 'vue'
+import { useData } from 'vitepress'
+import { computed, h, ref } from 'vue'
 import { ElIcon } 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'
+import { useBlogConfig } from '../composables/config/blog'
 
 const { frontmatter } = useData()
 const commentEl = ref(null)
 const commentIsVisible = useElementVisibility(commentEl)
 
 function handleScrollToComment() {
-  document.querySelector('#giscus-comment')?.scrollIntoView({
+  document.querySelector('#blog-comment-wrapper')?.scrollIntoView({
     behavior: 'smooth',
     block: 'start'
   })
 }
-const giscusConfig = useGiscusConfig()
 
-const commentConfig = computed<Theme.CommentConfig>(() => {
-  if (!giscusConfig) {
-    return {} as any
-  }
-  return giscusConfig
-})
+const { comment: _comment } = useBlogConfig()
+const commentConfig = computed(() =>
+  _comment === false ? undefined : _comment
+)
 
 const show = computed(() => {
-  if (frontmatter.value.comment === false) {
-    return frontmatter.value.comment
-  }
-  if (!giscusConfig) {
-    return giscusConfig
-  }
-  return (
-    giscusConfig.repo
-    && giscusConfig.repoId
-    && giscusConfig.category
-    && giscusConfig.categoryId
-  )
+  return _comment && frontmatter.value.comment !== false
 })
 
-const { isDark } = useData()
-
-const route = useRoute()
-const showComment = ref(true)
-watch(
-  () => route.path,
-  () => {
-    showComment.value = false
-    setTimeout(() => {
-      showComment.value = true
-    }, 200)
-  },
-  {
-    immediate: true
-  }
-)
-
 const { width } = useWindowSize()
-const mobileMinify = computed(() => width.value < 768 && (commentConfig.value.mobileMinify ?? true))
+const mobileMinify = computed(() => width.value < 768 && (commentConfig.value?.mobileMinify ?? true))
 
 const CommentIcon = commentConfig.value?.icon
   ? h('i', {
@@ -78,20 +45,13 @@ const { width: _docWidth } = useElementSize(el)
 const docWidth = computed(() => `${_docWidth.value}px`)
 
 const labelText = computed(() => {
-  return commentConfig.value.label ?? '评论'
+  return commentConfig.value?.label ?? '评论'
 })
 </script>
 
 <template>
-  <div v-if="show && _docWidth" id="giscus-comment" ref="commentEl" class="comment" data-pagefind-ignore="all">
-    <Giscus
-      v-if="showComment" :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 v-if="show && _docWidth" id="blog-comment-wrapper" ref="commentEl" class="blog-comment-wrapper" data-pagefind-ignore="all">
+    <slot />
     <div v-show="!commentIsVisible" class="comment-btn-wrapper">
       <span v-if="!mobileMinify && labelText" class="icon-wrapper-text" @click="handleScrollToComment">
         <ElIcon :size="20">
@@ -151,7 +111,7 @@ const labelText = computed(() => {
     border-radius: 2px;
     padding: 2px 6px;
 
-    span.text{
+    span.text {
       font-size: 12px;
       margin-left: 4px;
     }

package/src/components/BlogHomeBanner.vue

@@ -126,7 +126,7 @@ h1 {
 
 .inspiring-wrapper {
   margin: 16px 0;
-  height: 24px;
+  height: 32px;
   width: auto;
 
   h2 {

package/src/components/BlogHomeHeaderAvatar.vue

@@ -1,12 +1,8 @@
 <script  setup lang="ts">
 import { useData, withBase } 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(() =>
@@ -19,7 +15,7 @@ const alwaysHide = computed(() => frontmatter.value.blog?.minScreenAvatar === fa
 </script>
 
 <template>
-  <div v-show="inMiniScreen && !alwaysHide" class="blog-home-header-avatar">
+  <div v-show="!alwaysHide" class="blog-home-header-avatar">
     <img :src="withBase(logo)" alt="avatar">
   </div>
 </template>
@@ -47,4 +43,10 @@ const alwaysHide = computed(() => frontmatter.value.blog?.minScreenAvatar === fa
         transition-timing-function: cubic-bezier(.34, 0, .84, 1)
     }
 }
+
+@media screen and (min-width: 768px) {
+  .blog-home-header-avatar{
+    display: none;
+  }
+}
 </style>

package/src/components/BlogHomeInfo.vue

@@ -34,7 +34,7 @@ import BlogFriendLink from './BlogFriendLink.vue'
 
 @media screen and (min-width: 767px) {
   .blog-info {
-    max-width: 300px;
+    width: 280px;
   }
 }
 </style>

package/src/components/BlogHomeTags.vue

@@ -12,7 +12,7 @@ import {
 
 const route = useRoute()
 const docs = useArticles()
-const showTags = useConfig()?.config?.blog?.homeTags ??  true
+const showTags = useConfig()?.config?.blog?.homeTags ?? true
 const tags = computed(() => {
   return [...new Set(docs.value.map(v => v.meta.tag || []).flat(3))]
 })

package/src/components/BlogHotArticle.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { ElButton, ElLink } from 'element-plus'
-import { withBase } from 'vitepress'
+import { ElButton } from 'element-plus'
+import { useRouter, withBase } from 'vitepress'
 import { useArticles, useBlogConfig, useCleanUrls } from '../composables/config/blog'
 import { formatShowDate, wrapperCleanUrls } from '../utils/client'
 import { fireSVG } from '../constants/svg'
@@ -26,6 +26,11 @@ const recommendList = computed(() => {
 })
 
 const currentPage = ref(1)
+
+const router = useRouter()
+function handleLinkClick(link: string) {
+  router.go(link)
+}
 function changePage() {
   const newIdx
     = currentPage.value % Math.ceil(recommendList.value.length / pageSize.value)
@@ -48,7 +53,10 @@ const showChangeBtn = computed(() => {
 </script>
 
 <template>
-  <div v-if="_hotArticle !== false && (recommendList.length || empty) " class="card recommend" data-pagefind-ignore="all">
+  <div
+    v-if="_hotArticle !== false && (recommendList.length || empty)" class="card recommend"
+    data-pagefind-ignore="all"
+  >
     <!-- 头部 -->
     <div class="card-header">
       <span class="title" v-html="title" />
@@ -64,11 +72,19 @@ const showChangeBtn = computed(() => {
         <!-- 简介 -->
         <div class="des">
           <!-- title -->
-          <ElLink type="info" class="title" :href="withBase(v.route)">
-            {{
-              v.meta.title
-            }}
-          </ElLink>
+          <a
+            :href="withBase(v.route)"
+            class="title" @click="(e) => {
+              e.preventDefault()
+              handleLinkClick(withBase(v.route))
+            }"
+          >
+            <span>
+              {{
+                v.meta.title
+              }}
+            </span>
+          </a>
           <!-- 描述信息 -->
           <div class="suffix">
             <!-- 日期 -->
@@ -172,6 +188,19 @@ const showChangeBtn = computed(() => {
     .title {
       font-size: 14px;
       color: var(--vp-c-text-1);
+      font-weight: 500;
+      position: relative;
+      cursor: pointer;
+    }
+
+    .title:hover::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: 0;
+      bottom: -3px;
+      border-bottom: 1px solid #b1b3b8;
     }
 
     .suffix {

package/src/components/BlogItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { withBase } from 'vitepress'
+import { useRouter, withBase } from 'vitepress'
 import { computed } from 'vue'
 import { formatShowDate, wrapperCleanUrls } from '../utils/client'
 import { useCleanUrls } from '../composables/config/blog'
@@ -19,24 +19,36 @@ const props = defineProps<{
 const showTime = computed(() => {
   return formatShowDate(props.date)
 })
-
 const cleanUrls = useCleanUrls()
 const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route)))
+
+const router = useRouter()
+function handleSkipDoc() {
+  router.go(link.value)
+}
 </script>
 
 <template>
-  <!-- TODO: 响应式优化使用纯 CSS -->
-  <a class="blog-item" :href="link">
-    <i v-if="!!pin" class="pin" />
+  <a
+    class="blog-item" :href="link" @click="(e) => {
+      e.preventDefault()
+      handleSkipDoc()
+    }"
+  >
+    <i v-show="!!pin" class="pin" />
     <!-- 标题 -->
-    <p class="title mobile-visible">{{ title }}</p>
+    <p class="title mobile-visible">
+      {{ title }}
+    </p>
     <div class="info-container">
       <!-- 左侧信息 -->
       <div class="info-part">
         <!-- 标题 -->
-        <p class="title pc-visible">{{ title }}</p>
+        <p class="title pc-visible">
+          {{ title }}
+        </p>
         <!-- 简短描述 -->
-        <p v-if="!descriptionHTML && !!description" class="description">
+        <p v-show="!descriptionHTML && !!description" class="description">
           {{ description }}
         </p>
         <template v-if="descriptionHTML">
@@ -44,19 +56,19 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
         </template>
         <!-- 底部补充描述 -->
         <div class="badge-list pc-visible">
-          <span v-if="author" class="split">{{ author }}</span>
+          <span v-show="author" class="split">{{ author }}</span>
           <span class="split">{{ showTime }}</span>
-          <span v-if="tag?.length" class="split">{{ tag.join(' · ') }}</span>
+          <span v-show="tag?.length" class="split">{{ tag?.join(' · ') }}</span>
         </div>
       </div>
       <!-- 右侧封面图 -->
-      <div v-if="cover" class="cover-img" :style="`background-image: url(${withBase(`${cover}`)});`" />
+      <div v-show="cover" class="cover-img" :style="`background-image: url(${withBase(`${cover}`)});`" />
     </div>
     <!-- 底部补充描述 -->
     <div class="badge-list mobile-visible">
-      <span v-if="author" class="split">{{ author }}</span>
+      <span v-show="author" class="split">{{ author }}</span>
       <span class="split">{{ showTime }}</span>
-      <span v-if="tag?.length" class="split">{{ tag.join(' · ') }}</span>
+      <span v-show="tag?.length" class="split">{{ tag?.join(' · ') }}</span>
     </div>
   </a>
 </template>
@@ -166,7 +178,8 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
   margin-left: 24px;
   border-radius: 2px;
   background-repeat: no-repeat;
-  background-size: 120px 80px;
+  background-size: contain;
+  background-position: center;
 }
 
 .pc-visible {
@@ -181,7 +194,8 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
   .cover-img {
     width: 100px;
     height: 60px;
-    background-size: 100px 60px;
+    background-size: contain;
+    background-position: center;
   }
 
   .pc-visible {

package/src/components/BlogPopover.vue

@@ -239,6 +239,10 @@ function PopoverValue(props: { key: number; item: BlogPopover.Value },
 
   img {
     width: 100%;
+    // TODO: 未来优化，自动预获取图片高度填充
+    height: 100px;
+    object-fit: contain;
+    margin: 0 auto;
   }
 }
 

package/src/components/BlogRecommendArticle.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue'
-import { useRoute, withBase } from 'vitepress'
-import { ElButton, ElLink } from 'element-plus'
+import { useRoute, useRouter, withBase } from 'vitepress'
+import { ElButton } from 'element-plus'
 import { formatShowDate, wrapperCleanUrls } from '../utils/client'
 import { useArticles, useBlogConfig, useCleanUrls } from '../composables/config/blog'
 import { recommendSVG } from '../constants/svg'
@@ -147,6 +147,11 @@ onMounted(() => {
 })
 
 const cleanUrls = useCleanUrls()
+
+const router = useRouter()
+function handleLinkClick(link: string) {
+  router.go(link)
+}
 </script>
 
 <template>
@@ -169,13 +174,18 @@ const cleanUrls = useCleanUrls()
         <!-- 简介 -->
         <div class="des">
           <!-- title -->
-          <ElLink
-            type="info" class="title" :class="{
+          <a
+            class="title" :class="{
               current: isCurrentDoc(v.route),
-            }" :href="wrapperCleanUrls(cleanUrls, v.route)"
+            }"
+            :href="wrapperCleanUrls(cleanUrls, v.route)"
+            @click="(e) => {
+              e.preventDefault()
+              handleLinkClick(wrapperCleanUrls(cleanUrls, v.route))
+            }"
           >
-            {{ v.meta.title }}
-          </ElLink>
+            <span>{{ v.meta.title }}</span>
+          </a>
           <!-- 描述信息 -->
           <div class="suffix">
             <!-- 日期 -->
@@ -248,12 +258,25 @@ const cleanUrls = useCleanUrls()
       color: var(--vp-c-text-1);
       word-break: break-all;
       white-space: break-spaces;
+      font-weight: 500;
+      position: relative;
+      cursor: pointer;
 
       &.current {
         color: var(--vp-c-brand-1);
       }
     }
 
+    .title:hover::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: 0;
+      bottom: -3px;
+      border-bottom: 1px solid #b1b3b8;
+    }
+
     .suffix {
       font-size: 12px;
       color: var(--vp-c-text-2);

package/src/components/CommentArtalk.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useData, useRoute } from 'vitepress'
+import type Artalk from 'artalk'
+
+import { useBlogConfig } from '../composables/config/blog'
+
+const { isDark, page } = useData()
+const el = ref<HTMLDivElement>()
+
+const route = useRoute()
+
+const artalk = ref<Artalk>()
+
+const { comment } = useBlogConfig()
+const commentConfig = computed(() => {
+  if (comment && 'type' in comment && comment.type === 'artalk') {
+    return comment.options
+  }
+
+  return false
+})
+
+onMounted(() => {
+  // CDN 异步加载，有优化空间
+  const observer = new MutationObserver((mutationsList, observer) => {
+    if (window.Artalk && commentConfig.value && el.value) {
+      artalk.value = window.Artalk.init({
+        el: el.value,
+        darkMode: isDark.value,
+        pageKey: route.path,
+        pageTitle: page.value.title,
+        server: commentConfig.value?.server,
+        site: commentConfig.value?.site,
+      })
+      observer.disconnect()
+    }
+  })
+
+  observer.observe(document.head, { subtree: true, childList: true, attributes: true, attributeFilter: ['id'] })
+})
+
+watch(() => route.path, () => {
+  if (artalk.value) {
+    artalk.value.update({
+      pageKey: route.path,
+      pageTitle: page.value.title,
+    })
+    artalk.value.reload()
+  }
+})
+
+onUnmounted(() => {
+  if (artalk.value) {
+    artalk.value.destroy()
+  }
+})
+
+watch(isDark, () => {
+  if (artalk.value) {
+    artalk.value.setDarkMode(isDark.value)
+  }
+})
+</script>
+
+<template>
+  <div v-if="commentConfig" ref="el" class="artalk-container" />
+</template>
+
+<style lang="scss" scoped>
+.artalk-container {
+  --at-color-main: var(--vp-c-brand-2);
+}
+</style>

package/src/components/CommentGiscus.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { useData, useRoute } from 'vitepress'
+import { computed, ref, watch } from 'vue'
+import Giscus from '@giscus/vue'
+import { useBlogConfig } from '../composables/config/blog'
+
+// 读取配制
+const { comment } = useBlogConfig()
+const commentConfig = computed(() => {
+  if (!comment) {
+    return false
+  }
+  if ('type' in comment && comment.type === 'giscus') {
+    return comment.options
+  }
+  else if (!('type' in comment)) {
+    return comment
+  }
+
+  return false
+})
+
+const { isDark } = useData()
+
+const route = useRoute()
+const showComment = ref(true)
+watch(
+  () => route.path,
+  () => {
+    showComment.value = false
+    setTimeout(() => {
+      showComment.value = true
+    }, 200)
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<template>
+  <Giscus
+    v-if="commentConfig" :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'"
+  />
+</template>

package/src/composables/config/blog.ts

@@ -104,13 +104,12 @@ export function useOml2dOptions() {
   return inject(configSymbol)!.value.blog?.oml2d
 }
 
-export function useBlogThemeMode() {
-  return inject(configSymbol)!.value?.blog?.blog ?? true
+export function useDarkTransitionConfig() {
+  return inject(configSymbol)!.value.blog?.darkTransition ?? true
 }
 
-export function useGiscusConfig() {
-  const blogConfig = useConfig()
-  return blogConfig.config?.blog?.comment
+export function useBlogThemeMode() {
+  return inject(configSymbol)!.value?.blog?.blog ?? true
 }
 
 export function useArticles() {

package/src/composables/config/index.ts

@@ -100,7 +100,9 @@ export namespace Theme {
     type: string
   }
 
-  export interface CommentConfig extends GiscusConfig {
+  export type CommentConfig = ((GiscusOption & CommentCommonConfig) | GiscusConfig | ArtalkConfig)
+
+  export interface CommentCommonConfig {
     /**
      * @default '评论'
      */
@@ -116,7 +118,15 @@ export namespace Theme {
      */
     mobileMinify?: boolean
   }
-  export interface GiscusConfig {
+  export interface GiscusConfig extends CommentCommonConfig {
+    type: 'giscus'
+    options: GiscusOption
+  }
+  export interface ArtalkConfig extends CommentCommonConfig {
+    type: 'artalk'
+    options: ArtalkOption
+  }
+  export interface GiscusOption {
     repo: Repo
     repoId: string
     category: string
@@ -126,6 +136,10 @@ export namespace Theme {
     lang?: string
     loading?: 'lazy' | 'eager'
   }
+  export interface ArtalkOption {
+    site: string
+    server: string
+  }
 
   export interface HotArticle {
     title?: string
@@ -351,7 +365,8 @@ export namespace Theme {
     search?: SearchConfig
     /**
      * 配置评论
-     * power by https://giscus.app/zh-CN
+     * giscus: https://giscus.app/zh-CN
+     * artalk: https://artalk.js.org/
      */
     comment?: CommentConfig | false
     /**
@@ -424,6 +439,13 @@ export namespace Theme {
      */
     oml2d?: Oml2dOptions
     homeTags?: boolean
+    buttonAfterArticle?: ButtonAfterArticleConfig | false
+    /**
+     * 是否开启深色模式过渡动画
+     * @reference https://vitepress.dev/zh/guide/extending-default-theme#on-appearance-toggle
+     * @default true
+     */
+    darkTransition?: boolean
   }
 
   export interface BackToTop {
@@ -509,4 +531,20 @@ export namespace Theme {
      */
     handleChangeSlogan?: (oldSlogan: string) => string | Promise<string>
   }
+  export interface ButtonAfterArticleConfig {
+    openTitle?: string
+    closeTitle?: string
+    content?: string
+    icon?: 'aliPay' | 'wechatPay' | string
+    /**
+     * 按钮尺寸
+     * @default 'default'
+     */
+    size?: 'small' | 'default' | 'large'
+    /**
+     * 默认展开
+     * @default false
+     */
+    expand?: boolean
+  }
 }