@sugarat/theme 0.1.0

package/src/components/BlogPopover.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="theme-blog-popover" v-show="show">
+    <div class="header">
+      <div class="title-wrapper">
+        <el-icon size="20px"><Flag /></el-icon>
+        <span class="title">{{ popoverProps?.title }}</span>
+      </div>
+      <el-icon @click="show = false" class="close-icon" size="20px"
+        ><CircleCloseFilled
+      /></el-icon>
+    </div>
+    <div class="body content" v-if="bodyContent.length">
+      <PopoverValue v-for="(v, idx) in bodyContent" :key="idx" :item="v">
+        {{ v.type !== 'image' ? v.content : '' }}
+      </PopoverValue>
+      <hr v-if="footerContent.length" />
+    </div>
+    <div class="footer content">
+      <PopoverValue v-for="(v, idx) in footerContent" :key="idx" :item="v">
+        {{ v.type !== 'image' ? v.content : '' }}
+      </PopoverValue>
+    </div>
+  </div>
+  <div
+    class="theme-blog-popover-close"
+    v-show="!show && (popoverProps?.reopen ?? true) && popoverProps?.title"
+    @click="show = true"
+  >
+    <el-icon size="20px"><Flag /></el-icon>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ElIcon, ElButton } from 'element-plus'
+import { Flag, CircleCloseFilled } from '@element-plus/icons-vue'
+import { computed, onMounted, ref, h } from 'vue'
+import type { BlogPopover } from '@sugarat/theme'
+import { parseStringStyle } from '@vue/shared'
+import { useBlogConfig } from '../composables/config/blog'
+
+const { popover: popoverProps } = useBlogConfig()
+
+const show = ref(false)
+
+const bodyContent = computed(() => {
+  return popoverProps?.body || []
+})
+
+const footerContent = computed(() => {
+  return popoverProps?.footer || []
+})
+
+onMounted(() => {
+  if (!popoverProps?.title) {
+    return
+  }
+
+  const storageKey = 'theme-blog-popover'
+  // 取旧值
+  const oldValue = localStorage.getItem(storageKey)
+  const newValue = JSON.stringify(popoverProps)
+  localStorage.setItem(storageKey, newValue)
+
+  // >= 0 每次都展示，区别是否自动消失
+  if (Number(popoverProps?.duration ?? '') >= 0) {
+    show.value = true
+    if (popoverProps?.duration) {
+      setTimeout(() => {
+        show.value = false
+      }, popoverProps?.duration)
+    }
+  }
+
+  if (oldValue !== newValue && popoverProps?.duration === -1) {
+    // 当做新值处理
+    show.value = true
+  }
+})
+
+const PopoverValue = (
+  props: { key: number; item: BlogPopover.Value },
+  { slots }: any
+) => {
+  const { key, item } = props
+  if (item.type === 'title') {
+    return h(
+      'h4',
+      {
+        style: parseStringStyle(item.style || '')
+      },
+      item.content
+    )
+  }
+  if (item.type === 'text') {
+    return h(
+      'p',
+      {
+        style: parseStringStyle(item.style || '')
+      },
+      item.content
+    )
+  }
+  if (item.type === 'image') {
+    return h('img', {
+      src: item.src,
+      style: parseStringStyle(item.style || '')
+    })
+  }
+  if (item.type === 'button') {
+    return h(
+      ElButton,
+      {
+        type: 'primary',
+        onClick: () => {
+          window.open(item.link, '_self')
+        },
+        style: parseStringStyle(item.style || ''),
+        ...item.props
+      },
+      slots
+    )
+  }
+  return h(
+    'div',
+    {
+      key
+    },
+    ''
+  )
+}
+</script>
+
+<style lang="scss" scoped>
+.theme-blog-popover {
+  width: 258px;
+  position: fixed;
+  top: 80px;
+  right: 20px;
+  z-index: 19;
+  box-sizing: border-box;
+  border: 1px solid var(--el-color-primary-light-3);
+  border-radius: 6px;
+  background-color: rgba(var(--bg-gradient-home));
+  box-shadow: var(--box-shadow);
+}
+@media screen and (min-width: 760px) and (max-width: 1140px) {
+  .theme-blog-popover {
+    top: 200px;
+  }
+}
+.header {
+  background-color: var(--el-color-primary-light-3);
+  color: #fff;
+  padding: 6px 4px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .close-icon {
+    cursor: pointer;
+  }
+}
+
+.title-wrapper {
+  display: flex;
+  align-items: center;
+  .title {
+    font-size: 14px;
+    padding-left: 6px;
+  }
+}
+
+.body {
+  box-sizing: border-box;
+  padding: 10px 10px 0;
+  hr {
+    border: none;
+    border-bottom: 1px solid #eaecef;
+  }
+}
+.footer {
+  box-sizing: border-box;
+  padding: 10px;
+}
+
+.body.content,
+.footer.content {
+  text-align: center;
+  h4 {
+    text-align: center;
+    font-size: 12px;
+  }
+  p {
+    text-align: center;
+    padding: 10px 0;
+    font-size: 14px;
+  }
+  img {
+    width: 100%;
+  }
+}
+
+.theme-blog-popover-close {
+  cursor: pointer;
+  opacity: 0.5;
+  position: fixed;
+  z-index: 19;
+  top: 80px;
+  right: 10px;
+  position: fixed;
+  background-color: var(--el-color-primary-light-3);
+  padding: 8px;
+  color: #fff;
+  font-size: 12px;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/src/components/BlogRecommendArticle.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="card recommend" v-if="recommendList.length || emptyText">
+    <!-- 头部 -->
+    <div class="card-header">
+      <span class="title">{{ title }}</span>
+      <el-button
+        v-if="showChangeBtn"
+        size="small"
+        type="primary"
+        text
+        @click="changePage"
+        >{{ nextText }}</el-button
+      >
+    </div>
+    <!-- 文章列表 -->
+    <ol class="recommend-container" v-if="currentWikiData.length">
+      <li v-for="(v, idx) in currentWikiData" :key="v.route">
+        <!-- 序号 -->
+        <i class="num">{{ idx + 1 }}</i>
+        <!-- 简介 -->
+        <div class="des">
+          <!-- title -->
+          <el-link type="info" class="title" :href="v.route">{{
+            v.meta.title
+          }}</el-link>
+          <!-- 描述信息 -->
+          <div class="suffix">
+            <!-- 日期 -->
+            <span class="tag">{{ formatShowDate(v.meta.date) }}</span>
+          </div>
+        </div>
+      </li>
+    </ol>
+    <div class="empty-text" v-else>{{ emptyText }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { ElButton, ElLink } from 'element-plus'
+import { useRoute } from 'vitepress'
+import { formatShowDate } from '../utils/index'
+import { useArticles, useBlogConfig } from '../composables/config/blog'
+
+const { recommend } = useBlogConfig()
+const title = computed(() => recommend?.title || '🔍 相关文章')
+const pageSize = computed(() => recommend?.pageSize || 9)
+const nextText = computed(() => recommend?.nextText || '换一组')
+const emptyText = computed(() => recommend?.empty ?? '暂无推荐文章')
+
+const docs = useArticles()
+
+const route = useRoute()
+
+const recommendList = computed(() => {
+  const paths = route.path.split('/')
+  const origin = docs.value
+    // 过滤出公共路由前缀
+    // 限制为同路由前缀
+    .filter(
+      (v) =>
+        v.route.split('/').length === paths.length &&
+        v.route.startsWith(paths.slice(0, paths.length - 1).join('/'))
+    )
+    // 过滤出带标题的
+    .filter((v) => !!v.meta.title)
+    // 过滤掉自己
+    .filter((v) => v.route !== route.path.replace(/.html$/, ''))
+
+  origin.sort((a, b) => +new Date(b.meta.date) - +new Date(a.meta.date))
+  return origin
+})
+const currentPage = ref(1)
+const changePage = () => {
+  const newIdx =
+    currentPage.value % Math.ceil(recommendList.value.length / pageSize.value)
+  currentPage.value = newIdx + 1
+}
+
+const currentWikiData = computed(() => {
+  const startIdx = (currentPage.value - 1) * pageSize.value
+  const endIdx = startIdx + pageSize.value
+  return recommendList.value.slice(startIdx, endIdx)
+})
+
+const showChangeBtn = computed(() => {
+  return recommendList.value.length > pageSize.value
+})
+</script>
+
+<style lang="scss" scoped>
+.card {
+  position: relative;
+  margin: 0 auto 10px;
+  padding: 10px;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 0.25rem;
+  box-shadow: var(--box-shadow);
+  box-sizing: border-box;
+  transition: all 0.3s;
+  background-color: rgba(var(--bg-gradient));
+  display: flex;
+
+  &:hover {
+    box-shadow: var(--box-shadow-hover);
+  }
+}
+
+.recommend {
+  flex-direction: column;
+  padding: 16px 10px;
+}
+
+.recommend-container {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0 10px 0 0px;
+  width: 100%;
+
+  li {
+    display: flex;
+
+    .num {
+      display: block;
+      font-size: 14px;
+      color: var(--description-font-color);
+      font-weight: 600;
+      margin: 6px 12px 10px 0;
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+      text-align: center;
+    }
+
+    .des {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .title {
+      font-size: 14px;
+      color: var(--vp-c-text-1);
+      word-break: break-all;
+      white-space: break-spaces;
+    }
+
+    .suffix {
+      font-size: 12px;
+      color: var(--vp-c-text-2);
+    }
+  }
+}
+
+.card-header {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  .title {
+    font-size: 16px;
+  }
+}
+.empty-text {
+  padding: 6px;
+  font-size: 14px;
+  text-align: center;
+}
+</style>

package/src/components/BlogSearch.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="blog-search" v-if="openSearch">
+    <div class="nav-search-btn-wait" @click="searchModal = true">
+      <el-icon size="22px">
+        <Search />
+      </el-icon>
+      <span class="search-tip">搜索</span>
+    </div>
+    <el-dialog
+      class="search-dialog"
+      :fullscreen="isFullScreen"
+      append-to-body
+      modal
+      v-model="searchModal"
+      width="500px"
+      align-center
+    >
+      <template #header>
+        <el-input
+          ref="searchInput"
+          autofocus
+          size="large"
+          v-model="searchWords"
+          class="w-50 m-2"
+          placeholder="Search Docs"
+          :prefix-icon="Search"
+        />
+      </template>
+      <el-empty v-if="!searchResult.length" description="No Result" />
+      <ul v-else>
+        <span>共：{{ searchResult.length }}个搜索结果</span>
+        <el-button
+          v-if="showNextResult"
+          type="primary"
+          size="small"
+          class="nextPage"
+          @click="handleNext"
+        >
+          换一组</el-button
+        >
+        <li v-for="item in showSearchResult" :key="item.route">
+          <el-card body-style="padding:10px;" shadow="hover">
+            <a :href="item.route" @click="searchModal = false">
+              <div class="title">
+                <span>{{ item.meta.title }}</span>
+                <span class="date">
+                  {{ formatDate(item.meta.date, 'yyyy-MM-dd') }}</span
+                >
+              </div>
+              <div class="des">
+                {{ item.meta.description }}
+              </div>
+            </a>
+          </el-card>
+        </li>
+      </ul>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import {
+  ElInput,
+  ElEmpty,
+  ElIcon,
+  ElDialog,
+  InputInstance,
+  ElCard,
+  ElButton
+} from 'element-plus'
+import { useWindowSize } from '@vueuse/core'
+import { formatDate } from '../utils'
+import { useArticles, useBlogConfig } from '../composables/config/blog'
+
+const { search: openSearch = true } = useBlogConfig()
+
+const searchModal = ref(false)
+
+const { width } = useWindowSize()
+const isFullScreen = computed(() => width.value < 500)
+
+const searchWords = ref('')
+const searchInput = ref<InputInstance>()
+watch(
+  () => searchModal.value,
+  () => {
+    if (searchModal.value) {
+      setTimeout(() => {
+        searchInput.value?.focus()
+      })
+    }
+  }
+)
+
+const docs = useArticles()
+
+const searchResult = computed(() => {
+  if (!searchWords.value) return []
+  const result = docs.value.filter((v) =>
+    `${v.meta.description}${v.meta.title}`.includes(searchWords.value)
+  )
+  result.sort((a, b) => {
+    return +new Date(b.meta.date) - +new Date(a.meta.date)
+  })
+  return result
+})
+const pageSize = ref(6)
+const currentPage = ref(0)
+const showSearchResult = computed(() => {
+  // 合法性处理
+  const pageIdx =
+    currentPage.value % Math.ceil(searchResult.value.length / pageSize.value)
+  const startIdx = pageIdx * pageSize.value
+  return searchResult.value.slice(startIdx, startIdx + pageSize.value)
+})
+const showNextResult = computed(
+  () => searchResult.value.length > pageSize.value
+)
+const handleNext = () => {
+  currentPage.value =
+    (currentPage.value + 1) %
+    Math.ceil(searchResult.value.length / pageSize.value)
+}
+</script>
+
+<style lang="scss" scoped>
+.blog-search {
+  flex: 1;
+  margin-left: 10px;
+
+  .nav-search-btn-wait {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px;
+    box-sizing: border-box;
+    width: 100px;
+
+    &:hover {
+      border: 2px solid #409eff;
+      border-radius: 20px;
+    }
+
+    .search-tip {
+      color: #909399;
+      font-size: 14px;
+      padding-left: 10px;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.search-dialog {
+  .el-empty {
+    padding: 0;
+  }
+
+  .el-empty__image {
+    width: 100px;
+  }
+  ul {
+    position: relative;
+  }
+  li {
+    margin-bottom: 10px;
+    font-size: 12px;
+  }
+
+  li .title {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  li .des {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-break: keep-all;
+    white-space: nowrap;
+    color: var(--el-color-info-dark-2);
+  }
+
+  li .date {
+    color: var(--el-color-info-light-3);
+    min-width: 80px;
+  }
+
+  .nextPage {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: -30px;
+  }
+}
+</style>

package/src/components/BlogSidebar.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="sidebar"><BlogRecommendArticle /></div>
+</template>
+
+<script lang="ts" setup>
+import BlogRecommendArticle from './BlogRecommendArticle.vue'
+</script>
+
+<style lang="scss" scoped>
+.sidebar {
+  margin-top: 40px;
+}
+
+@media screen and (min-width: 960px) and (max-width: 1120px) {
+  .sidebar {
+    margin-top: 60px;
+  }
+}
+</style>

package/src/composables/config/blog.ts

@@ -0,0 +1,96 @@
+import { useData, useRoute } from 'vitepress'
+import {
+  Component,
+  computed,
+  defineComponent,
+  h,
+  inject,
+  InjectionKey,
+  provide,
+  ref,
+  Ref
+} from 'vue'
+import type { Theme } from './index'
+
+const configSymbol: InjectionKey<Ref<Theme.Config>> = Symbol('theme-config')
+
+const activeTagSymbol: InjectionKey<Ref<Theme.activeTag>> = Symbol('active-tag')
+
+const homeConfigSymbol: InjectionKey<Theme.HomeConfig> = Symbol('home-config')
+
+export function withConfigProvider(App: Component) {
+  return defineComponent({
+    name: 'ConfigProvider',
+    props: {
+      handleChangeSlogan: {
+        type: Function,
+        required: false
+      }
+    },
+    setup(props, { slots }) {
+      provide(homeConfigSymbol, props as Theme.HomeConfig)
+
+      const { theme } = useData()
+      const config = computed(() => resolveConfig(theme.value))
+      provide(configSymbol, config)
+
+      const activeTag = ref<Theme.activeTag>({
+        label: '',
+        type: ''
+      })
+      provide(activeTagSymbol, activeTag)
+      return () => h(App, null, slots)
+    }
+  })
+}
+
+export function useConfig() {
+  return {
+    config: inject(configSymbol)!.value
+  }
+}
+
+export function useBlogConfig() {
+  return inject(configSymbol)!.value.blog
+}
+
+export function useHomeConfig() {
+  return inject(homeConfigSymbol)!
+}
+
+export function useGiscusConfig() {
+  const blogConfig = useConfig()
+  return blogConfig.config.blog.comment
+}
+
+export function useArticles() {
+  const blogConfig = useConfig()
+  const articles = computed(() => blogConfig.config?.blog?.pagesData || [])
+  return articles
+}
+
+export function useActiveTag() {
+  return inject(activeTagSymbol)!
+}
+
+export function useCurrentArticle() {
+  const blogConfig = useConfig()
+  const route = useRoute()
+
+  const docs = computed(() => blogConfig.config.blog.pagesData)
+  const currentArticle = computed(() =>
+    docs.value.find((v) => v.route === route.path.replace(/.html$/, ''))
+  )
+
+  return currentArticle
+}
+
+function resolveConfig(config: Theme.Config): Theme.Config {
+  return {
+    ...config,
+    blog: {
+      ...config?.blog,
+      pagesData: config?.blog?.pagesData || []
+    }
+  }
+}