@sugarat/theme 0.1.38 → 0.1.40

package/src/components/BlogFriendLink.vue

@@ -24,7 +24,7 @@ import { ElAvatar } from 'element-plus'
 import { useDark } from '@vueuse/core'
 import { computed } from 'vue'
 import { useBlogConfig } from '../composables/config/blog'
-import { getImageUrl } from '../utils'
+import { getImageUrl } from '../utils/client'
 
 const isDark = useDark({
   storageKey: 'vitepress-theme-appearance'
@@ -114,4 +114,4 @@ const friendList = computed(() => {
     }
   }
 }
-</style>
+</style>

package/src/components/BlogHomeOverview.vue

@@ -19,7 +19,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { isCurrentWeek } from '../utils'
+import { isCurrentWeek } from '../utils/client'
 import { useArticles } from '../composables/config/blog'
 
 const docs = useArticles()

package/src/components/BlogHotArticle.vue

@@ -44,7 +44,7 @@ import { ref, computed } from 'vue'
 import { ElButton, ElLink } from 'element-plus'
 import { withBase } from 'vitepress'
 import { useArticles, useBlogConfig } from '../composables/config/blog'
-import { formatShowDate } from '../utils/index'
+import { formatShowDate } from '../utils/client'
 
 const { hotArticle } = useBlogConfig()
 const title = computed(() => hotArticle?.title || '🔥 精选文章')

package/src/components/BlogItem.vue

@@ -42,7 +42,7 @@
 import { withBase } from 'vitepress'
 import { computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'
-import { formatShowDate } from '../utils/index'
+import { formatShowDate } from '../utils/client'
 
 const { width } = useWindowSize()
 const inMobile = computed(() => width.value <= 500)

package/src/components/BlogRecommendArticle.vue

@@ -1,12 +1,13 @@
 <template>
   <div
-    class="card recommend"
+    class="recommend"
+    :class="{ card: sidebarStyle === 'card' }"
     v-if="_recommend !== false && (recommendList.length || emptyText)"
     data-pagefind-ignore="all"
   >
     <!-- 头部 -->
     <div class="card-header">
-      <span class="title">{{ title }}</span>
+      <span class="title" v-if="title">{{ title }}</span>
       <el-button
         v-if="showChangeBtn"
         size="small"
@@ -20,7 +21,7 @@
     <ol class="recommend-container" v-if="currentWikiData.length">
       <li v-for="(v, idx) in currentWikiData" :key="v.route">
         <!-- 序号 -->
-        <i class="num">{{ idx + 1 }}</i>
+        <i class="num">{{ startIdx + idx + 1 }}</i>
         <!-- 简介 -->
         <div class="des">
           <!-- title -->
@@ -47,20 +48,27 @@
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
-import { ElButton, ElLink } from 'element-plus'
 import { useRoute, withBase } from 'vitepress'
-import { formatShowDate } from '../utils/index'
+import { ElButton, ElLink } from 'element-plus'
+import { formatShowDate } from '../utils/client'
 import { useArticles, useBlogConfig } from '../composables/config/blog'
 
 const { recommend: _recommend } = useBlogConfig()
 
+const sidebarStyle = computed(() =>
+  _recommend && _recommend?.style ? _recommend.style : 'sidebar'
+)
+
+const recommendPadding = computed(() =>
+  sidebarStyle.value === 'card' ? '10px' : '0px'
+)
 const recommend = computed(() =>
   _recommend === false ? undefined : _recommend
 )
-const title = computed(() => recommend.value?.title || '🔍 相关文章')
+const title = computed(() => recommend.value?.title ?? '🔍 相关文章')
 const pageSize = computed(() => recommend.value?.pageSize || 9)
 const nextText = computed(() => recommend.value?.nextText || '换一组')
-const emptyText = computed(() => recommend.value?.empty ?? '暂无推荐文章')
+const emptyText = computed(() => recommend.value?.empty ?? '暂无相关文章')
 
 const docs = useArticles()
 
@@ -110,6 +118,8 @@ const changePage = () => {
     currentPage.value % Math.ceil(recommendList.value.length / pageSize.value)
   currentPage.value = newIdx + 1
 }
+// 当前页开始的序号
+const startIdx = computed(() => (currentPage.value - 1) * pageSize.value)
 
 const currentWikiData = computed(() => {
   const startIdx = (currentPage.value - 1) * pageSize.value
@@ -143,7 +153,7 @@ const showChangeBtn = computed(() => {
 
 .recommend {
   flex-direction: column;
-  padding: 16px 10px;
+  padding: v-bind(recommendPadding);
 }
 
 .recommend-container {
@@ -163,7 +173,7 @@ const showChangeBtn = computed(() => {
       color: var(--description-font-color);
       font-weight: 600;
       margin: 6px 8px 10px 0;
-      width: 18px;
+      width: 22px;
       height: 18px;
       line-height: 18px;
       text-align: center;

package/src/components/BlogSearch.vue

@@ -132,7 +132,7 @@ import { computed, nextTick, ref, watch, onBeforeMount, onMounted } from 'vue'
 import { Command } from 'vue-command-palette'
 import { useRoute, useRouter, withBase } from 'vitepress'
 import { useMagicKeys, useWindowSize } from '@vueuse/core'
-import { chineseSearchOptimize, formatDate } from '../utils'
+import { chineseSearchOptimize, formatDate } from '../utils/client'
 import { useArticles, useBlogConfig } from '../composables/config/blog'
 import { Theme } from '../composables/config'
 import LogoPagefind from './LogoPagefind.vue'

package/src/components/BlogSidebar.vue

@@ -1,19 +1,35 @@
-<template>
-  <div class="sidebar" data-pagefind-ignore="all"><BlogRecommendArticle /></div>
-</template>
-
 <script lang="ts" setup>
+import { computed } from 'vue'
+import { useBlogConfig } from '../composables/config/blog'
 import BlogRecommendArticle from './BlogRecommendArticle.vue'
+
+const { recommend: _recommend } = useBlogConfig()
+
+const sidebarStyle = computed(() =>
+  _recommend && _recommend?.style ? _recommend.style : 'card'
+)
+const marginTop = computed(() =>
+  sidebarStyle.value === 'card' ? '40px' : '0px'
+)
+const marginTopMini = computed(() =>
+  sidebarStyle.value === 'card' ? '60px' : '0px'
+)
 </script>
 
+<template>
+  <div v-if="_recommend !== false" class="sidebar" data-pagefind-ignore="all">
+    <BlogRecommendArticle />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .sidebar {
-  margin-top: 40px;
+  margin-top: v-bind(marginTop);
 }
 
 @media screen and (min-width: 960px) and (max-width: 1120px) {
   .sidebar {
-    margin-top: 60px;
+    margin-top: v-bind(marginTopMini);
   }
 }
 </style>

package/src/components/UserWorks.vue

@@ -198,7 +198,7 @@ import {
   getGithubUpdateTime,
   formatDate,
   getGithubDirUpdateTime
-} from '../utils'
+} from '../utils/client'
 import {
   useUserWorks,
   useActiveAnchor,

package/src/composables/config/index.ts

@@ -1,5 +1,6 @@
 import type { ElButton } from 'element-plus'
 import type { DefaultTheme } from 'vitepress'
+import type { FeedOptions } from 'feed'
 
 export namespace BlogPopover {
   export interface Title {
@@ -106,11 +107,16 @@ export namespace Theme {
     nextText?: string
     /**
      * 是否展示当前正在浏览的文章在左侧
-     * @default false
+     * @default true
      */
     showSelf?: boolean
     filter?: (page: Theme.PageData) => boolean
     empty?: string | boolean
+    /**
+     * 设置推荐文章的展示风格
+     * @default 'sidebar'
+     */
+    style?: 'card' | 'sidebar'
   }
 
   export interface HomeBlog {
@@ -261,11 +267,37 @@ export namespace Theme {
     works?: UserWorks
     /**
      * https://mermaid.js.org/config/setup/modules/mermaidAPI.html#mermaidapi-configuration-defaults for options
-     * @default false
+     * @default true
      */
     mermaid?: any
+    /**
+     * 设置解析 frontmatter 里 date 的时区
+     * @default 8 => 'UTC+8'
+     * */
+    timeZone?: number
+    /**
+     * 启用RSS配置
+     */
+    RSS?: RSSOptions
   }
 
+  export type RSSOptions = FeedOptions & {
+    baseUrl: string
+    /**
+     * 线上访问的RSS地址
+     */
+    url: string
+    /**
+     * 输出的RSS文件名
+     * @default 'feed.rss'
+     */
+    filename?: string
+    /**
+     * 是否展示RSS的图标
+     * @default true
+     */
+    showIcon?: boolean
+  }
   export interface Config extends DefaultTheme.Config {
     blog?: BlogConfig
   }

package/src/node.ts

@@ -1,388 +1,56 @@
 /* eslint-disable global-require */
 /* eslint-disable prefer-rest-params */
-import glob from 'fast-glob'
-import matter from 'gray-matter'
-import fs from 'fs'
-import { execSync, spawn, spawnSync } from 'child_process'
-import path from 'path'
-import type { SiteConfig, UserConfig } from 'vitepress'
-import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
-import { formatDate } from './utils/index'
+import type { UserConfig } from 'vitepress'
 import type { Theme } from './composables/config/index'
-
-const checkKeys = ['themeConfig']
-
+import {
+  getMarkdownPlugins,
+  registerMdPlugins,
+  wrapperCfgWithMermaid,
+  supportRunExtendsPlugin
+} from './utils/node/mdPlugins'
+import { getArticles, patchVPThemeConfig } from './utils/node/theme'
+import { getVitePlugins, registerVitePlugins } from './utils/node/vitePlugins'
+
+/**
+ * 获取主题的配置
+ * @param cfg 主题配置
+ */
 export function getThemeConfig(cfg?: Partial<Theme.BlogConfig>) {
-  const srcDir = cfg?.srcDir || process.argv.slice(2)?.[1] || '.'
-  const files = glob.sync(`${srcDir}/**/*.md`, { ignore: ['node_modules'] })
-
-  const data = files
-    .map((v) => {
-      let route = v
-        // 处理文件后缀名
-        .replace('.md', '')
-
-      // 去除 srcDir 处理目录名
-      if (route.startsWith('./')) {
-        route = route.replace(
-          new RegExp(
-            `^\\.\\/${path
-              .join(srcDir, '/')
-              .replace(new RegExp(`\\${path.sep}`, 'g'), '/')}`
-          ),
-          ''
-        )
-      } else {
-        route = route.replace(
-          new RegExp(
-            `^${path
-              .join(srcDir, '/')
-              .replace(new RegExp(`\\${path.sep}`, 'g'), '/')}`
-          ),
-          ''
-        )
-      }
-
-      const fileContent = fs.readFileSync(v, 'utf-8')
-
-      // TODO: 支持JSON
-      const meta: Partial<Theme.PageMeta> = {
-        ...matter(fileContent).data
-      }
-
-      if (!meta.title) {
-        meta.title = getDefaultTitle(fileContent)
-      }
-      if (!meta.date) {
-        // getGitTimestamp(v).then((v) => {
-        //   meta.date = formatDate(v)
-        // })
-        meta.date = getFileBirthTime(v)
-      } else {
-        // TODO: 开放配置，设置时区
-        meta.date = formatDate(
-          new Date(`${new Date(meta.date).toUTCString()}+8`)
-        )
-      }
-
-      // 处理tags和categories,兼容历史文章
-      meta.categories =
-        typeof meta.categories === 'string'
-          ? [meta.categories]
-          : meta.categories
-      meta.tags = typeof meta.tags === 'string' ? [meta.tags] : meta.tags
-      meta.tag = [meta.tag || []]
-        .flat()
-        .concat([
-          ...new Set([...(meta.categories || []), ...(meta.tags || [])])
-        ])
-
-      // 获取摘要信息
-      const wordCount = 100
-      meta.description =
-        meta.description || getTextSummary(fileContent, wordCount)
-
-      // 获取封面图
-      meta.cover =
-        meta.cover ??
-        (fileContent.match(/[!]\[.*?\]\((https:\/\/.+)\)/)?.[1] || '')
-
-      // 是否发布 默认发布
-      if (meta.publish === false) {
-        meta.hidden = true
-        meta.recommend = false
-      }
-
-      return {
-        route: `/${route}`,
-        meta
-      }
-    })
-    .filter((v) => v.meta.layout !== 'home')
-
-  const extraConfig: any = {}
+  // 文章数据
+  const pagesData = getArticles(cfg)
+  const extraVPConfig: any = {}
 
-  if (
-    cfg?.search === 'pagefind' ||
-    (cfg?.search instanceof Object && cfg.search.mode === 'pagefind')
-  ) {
-    checkKeys.push('vite')
-
-    let resolveConfig: any
-    extraConfig.vite = {
-      plugins: [
-        {
-          name: '@sugarar/theme-plugin-pagefind',
-          enforce: 'pre',
-          configResolved(config: any) {
-            if (resolveConfig) {
-              return
-            }
-            resolveConfig = config
-
-            const vitepressConfig: SiteConfig = config.vitepress
-            if (!vitepressConfig) {
-              return
-            }
-
-            // 添加 自定义 vitepress 的钩子
-            const selfBuildEnd = vitepressConfig.buildEnd
-            vitepressConfig.buildEnd = (siteConfig: any) => {
-              // 调用自己的
-              selfBuildEnd?.(siteConfig)
-              // 调用pagefind
-              const ignore: string[] = [
-                // 侧边栏内容
-                'div.aside',
-                // 标题锚点
-                'a.header-anchor'
-              ]
-              const { log } = console
-              log()
-              log('=== pagefind: https://pagefind.app/ ===')
-              let command = `npx pagefind --source ${path.join(
-                process.argv.slice(2)?.[1] || '.',
-                '.vitepress/dist'
-              )}`
-
-              if (ignore.length) {
-                command += ` --exclude-selectors "${ignore.join(', ')}"`
-              }
-
-              log(command)
-              log()
-              execSync(command, {
-                stdio: 'inherit'
-              })
-            }
-          },
-          // 添加检索的内容标识
-          transform(code: string, id: string) {
-            if (id.endsWith('theme-default/Layout.vue')) {
-              return code.replace(
-                '<VPContent>',
-                '<VPContent data-pagefind-body>'
-              )
-            }
-            return code
-          }
-        }
-      ]
-    }
-  }
-  const markdownPlugin: any[] = []
-  // tabs支持
-  if (cfg?.tabs) {
-    markdownPlugin.push(tabsMarkdownPlugin)
-  }
-
-  // 流程图支持
-  if (cfg) {
-    cfg.mermaid = cfg?.mermaid ?? true
-  }
-  if (cfg?.mermaid !== false) {
-    const { MermaidMarkdown } = require('vitepress-plugin-mermaid')
-    markdownPlugin.push(MermaidMarkdown)
-  }
+  // 获取要加载的vite插件
+  const vitePlugins = getVitePlugins(cfg)
+  // 注册Vite插件
+  registerVitePlugins(extraVPConfig, vitePlugins)
 
+  // 获取要加载的markdown插件
+  const markdownPlugin = getMarkdownPlugins(cfg)
   // 注册markdown插件
-  if (markdownPlugin.length) {
-    extraConfig.markdown = {
-      config(...rest: any[]) {
-        markdownPlugin.forEach((plugin) => {
-          plugin?.(...rest)
-        })
-      }
-    }
-  }
+  registerMdPlugins(extraVPConfig, markdownPlugin)
+
   return {
     themeConfig: {
       blog: {
-        pagesData: data as Theme.PageData[],
+        pagesData,
         ...cfg
       },
-      ...(cfg?.blog !== false && cfg?.recommend !== false
-        ? {
-            sidebar: [
-              {
-                text: '',
-                items: []
-              }
-            ]
-          }
-        : undefined)
+      // 补充一些额外的配置用于继承
+      ...patchVPThemeConfig(cfg)
     },
-    ...extraConfig
+    ...extraVPConfig
   }
 }
 
-export function getDefaultTitle(content: string) {
-  const title =
-    clearMatterContent(content)
-      .split('\n')
-      ?.find((str) => {
-        return str.startsWith('# ')
-      })
-      ?.slice(2)
-      .replace(/^\s+|\s+$/g, '') || ''
-  return title
-}
-
-export function clearMatterContent(content: string) {
-  let first___: unknown
-  let second___: unknown
-
-  const lines = content.split('\n').reduce<string[]>((pre, line) => {
-    // 移除开头的空白行
-    if (!line.trim() && pre.length === 0) {
-      return pre
-    }
-    if (line.trim() === '---') {
-      if (first___ === undefined) {
-        first___ = pre.length
-      } else if (second___ === undefined) {
-        second___ = pre.length
-      }
-    }
-    pre.push(line)
-    return pre
-  }, [])
-  return (
-    lines
-      // 剔除---之间的内容
-      .slice((second___ as number) || 0)
-      .join('\n')
-  )
-}
-
-export function getFileBirthTime(url: string) {
-  let date = new Date()
-
-  try {
-    // 参考 vitepress 中的 getGitTimestamp 实现
-    const infoStr = spawnSync('git', ['log', '-1', '--pretty="%ci"', url])
-      .stdout?.toString()
-      .replace(/["']/g, '')
-      .trim()
-    if (infoStr) {
-      date = new Date(infoStr)
-    }
-  } catch (error) {
-    return formatDate(date)
-  }
-
-  return formatDate(date)
-}
-
-export function getGitTimestamp(file: string) {
-  return new Promise((resolve, reject) => {
-    const child = spawn('git', ['log', '-1', '--pretty="%ci"', file])
-    let output = ''
-    child.stdout.on('data', (d) => {
-      output += String(d)
-    })
-    child.on('close', () => {
-      resolve(+new Date(output))
-    })
-    child.on('error', reject)
-  })
-}
-
-function getTextSummary(text: string, count = 100) {
-  return (
-    clearMatterContent(text)
-      .match(/^# ([\s\S]+)/m)?.[1]
-      // 除去标题
-      ?.replace(/#/g, '')
-      // 除去图片
-      ?.replace(/!\[.*?\]\(.*?\)/g, '')
-      // 除去链接
-      ?.replace(/\[(.*?)\]\(.*?\)/g, '$1')
-      // 除去加粗
-      ?.replace(/\*\*(.*?)\*\*/g, '$1')
-      ?.split('\n')
-      ?.filter((v) => !!v)
-      ?.slice(1)
-      ?.join('\n')
-      ?.replace(/>(.*)/, '')
-      ?.slice(0, count)
-  )
-}
-
-export function assignMermaid(config: any) {
-  if (!config.mermaid) return
-
-  if (!config.vite) config.vite = {}
-  if (!config.vite.plugins) config.vite.plugins = []
-  const { MermaidPlugin } = require('vitepress-plugin-mermaid')
-  config.vite.plugins.push(MermaidPlugin(config.mermaid))
-  if (!config.vite.resolve) config.vite.resolve = {}
-  if (!config.vite.resolve.alias) config.vite.resolve.alias = {}
-
-  config.vite.resolve.alias = [
-    ...aliasObjectToArray({
-      ...config.vite.resolve.alias,
-      'cytoscape/dist/cytoscape.umd.js': 'cytoscape/dist/cytoscape.esm.js',
-      mermaid: 'mermaid/dist/mermaid.esm.mjs'
-    }),
-    { find: /^dayjs\/(.*).js/, replacement: 'dayjs/esm/$1' }
-  ]
-}
-function aliasObjectToArray(obj: Record<string, string>) {
-  return Object.entries(obj).map(([find, replacement]) => ({
-    find,
-    replacement
-  }))
-}
+/**
+ * defineConfig Helper
+ */
 export function defineConfig(config: UserConfig<Theme.Config>): any {
-  // 兼容低版本主题配置
-  // @ts-ignore
-  if (config.themeConfig?.themeConfig) {
-    config.extends = checkKeys.reduce((pre, key) => {
-      // @ts-ignore
-      pre[key] = config.themeConfig[key]
-      // @ts-ignore
-      delete config.themeConfig[key]
-      return pre
-    }, {})
-
-    // 打印warn信息
-    setTimeout(() => {
-      console.warn('==↓ 主题配置方式过期，请尽快参照文档更新 ↓==')
-      console.warn('https://theme.sugarat.top/config/global.html')
-    }, 1200)
-  }
-  // @ts-ignore
-  const extendThemeConfig = config.extends?.themeConfig
-    ?.blog as Theme.BlogConfig
-
-  // 开关支持Mermaid
-  const resultConfig =
-    extendThemeConfig.mermaid === false
-      ? config
-      : {
-          ...config,
-          mermaid:
-            extendThemeConfig.mermaid === true ? {} : extendThemeConfig.mermaid
-        }
-  assignMermaid(resultConfig)
-
-  // 处理markdown插件
-  if (!resultConfig.markdown) resultConfig.markdown = {}
-  // @ts-ignore
-  if (config.extends?.markdown?.config) {
-    const markdownExtendsConfigOriginal =
-      // @ts-ignore
-      config.extends?.markdown?.config
-    const selfMarkdownConfig = resultConfig.markdown?.config
-
-    resultConfig.markdown.config = (...rest: any[]) => {
-      // @ts-ignore
-      selfMarkdownConfig?.(...rest)
-      markdownExtendsConfigOriginal?.(...rest)
-    }
-  }
+  const resultConfig = wrapperCfgWithMermaid(config)
+  supportRunExtendsPlugin(resultConfig)
   return resultConfig
 }
 
+// 重新导包 tabsMarkdownPlugin 导出CJS格式支持
 export { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'

package/src/styles/index.scss

@@ -65,7 +65,7 @@ html[class='dark'] {
 @media screen and (min-width: 768px) and (max-width: 1200px) {
   .VPNavBarMenuGroup .button span.text,
   .VPNavBarMenuLink {
-    font-size: 10px;
+    font-size: 12px !important;
   }
   .VPNavBar {
     height: auto !important;

package/src/utils/{index.ts → client/index.ts}

@@ -1,4 +1,4 @@
-import type { ThemeableImage } from '../composables/config'
+import type { ThemeableImage } from '../../composables/config'
 
 export function formatDate(d: any, fmt = 'yyyy-MM-dd hh:mm:ss') {
   if (!(d instanceof Date)) {