@sugarat/theme 0.4.12 → 0.5.0

package/src/composables/config/index.ts

@@ -1,45 +1,13 @@
 /* eslint-disable ts/no-namespace */
-import type { ElButton } from 'element-plus'
-import type { DefaultTheme, Route } from 'vitepress'
+import type { DefaultTheme } from 'vitepress'
 import type { RSSOptions } from 'vitepress-plugin-rss'
 import type { Mapping, Repo } from '@giscus/vue'
 import type { Options as Oml2dOptions } from 'oh-my-live2d'
-import type { Ref } from 'vue'
 import type { PagefindConfig } from 'vitepress-plugin-pagefind'
+import type { AnnouncementOptions } from 'vitepress-plugin-announcement'
 
 type RSSPluginOptions = RSSOptions
 
-// TODO: 重构 lint 问题
-export declare namespace BlogPopover {
-  export interface Title {
-    type: 'title'
-    content: string
-    style?: string
-  }
-
-  export interface Text {
-    type: 'text'
-    content: string
-    style?: string
-  }
-
-  export interface Image {
-    type: 'image'
-    src: string
-    style?: string
-  }
-
-  export interface Button {
-    type: 'button'
-    link: string
-    content: string
-    style?: string
-    props?: InstanceType<typeof ElButton>['$props']
-  }
-
-  export type Value = Title | Text | Image | Button
-}
-
 export type ThemeableImage =
   | string
   | { src: string; alt?: string }
@@ -293,50 +261,6 @@ export namespace Theme {
     html?: string
   }
 
-  /**
-   * 公告
-   */
-  export interface Popover {
-    title: string
-    /**
-     * 细粒度的时间控制
-     * 默认展示时间，-1 只展示1次，其它数字为每次都展示，一定时间后自动消失，0为不自动消失
-     * 配置改变时，会重新触发展示
-     */
-    duration: number
-    /**
-     * 移动端自动最小化
-     * @default false
-     */
-    mobileMinify?: boolean
-    body?: BlogPopover.Value[]
-    footer?: BlogPopover.Value[]
-    /**
-     * 手动重新打开
-     * @default true
-     */
-    reopen?: boolean
-    /**
-     * 是否打开闪烁提示，通常需要和 reopen 搭配使用
-     * @default true
-     */
-    twinkle?: boolean
-    /**
-     * 设置展示图标，svg
-     * @recommend https://iconbuddy.app/search?q=fire
-     */
-    icon?: string
-    /**
-     * 设置关闭图标，svg
-     * @recommend https://iconbuddy.app/search?q=fire
-     */
-    closeIcon?: string
-    /**
-     * 自定义展示策略
-     * @param to 切换到的目标路由
-     */
-    onRouteChanged?: (to: Route, show: Ref<boolean>) => void
-  }
   export interface FriendLink {
     nickname: string
     des: string
@@ -425,6 +349,7 @@ export namespace Theme {
     | 'el-red'
   export interface BlogConfig {
     blog?: false
+    locales?: Record<string, Omit<BlogConfig, 'locales' | 'pagesData' | 'search' | 'popover' | 'RSS'> & { pagesData?: PageData[] }>
     /**
      * 展示日期格式化
      */
@@ -436,6 +361,11 @@ export namespace Theme {
      */
     themeColor?: ThemeColor
     pagesData: PageData[]
+    /**
+     * @deprecated 请使用 VitePress 官方 srcDir 替代
+     *
+     * @doc https://vitepress.dev/zh/reference/site-config#srcdir
+     */
     srcDir?: string
     author?: string
     hotArticle?: HotArticle | false
@@ -462,7 +392,7 @@ export namespace Theme {
      * el-alert
      */
     alert?: Alert
-    popover?: Popover
+    popover?: AnnouncementOptions
     friend?: FriendLink[] | FriendConfig
     authorList?: Omit<FriendLink, 'avatar'>[]
     /**
@@ -535,6 +465,9 @@ export namespace Theme {
      * 渲染时替换图片地址
      */
     imageStyle?: ImageStyleConfig
+    groupIcon?: {
+      customIcon: Record<string, string>
+    }
   }
 
   export type FormatShowDate = {

package/src/hooks/useOml2d.ts

@@ -1,4 +1,4 @@
-import { onMounted } from 'vue'
+import { onMounted, watch } from 'vue'
 import type { Options } from 'oh-my-live2d'
 import { useOml2dOptions } from '../composables/config/blog'
 
@@ -37,13 +37,13 @@ const defaultOptions: Options = {
 }
 export function useOml2d() {
   const oml2dOptions = useOml2dOptions()
-  onMounted(async () => {
-    if (oml2dOptions) {
+  const init = async () => {
+    if (oml2dOptions.value) {
       const { loadOml2d } = await import('oh-my-live2d')
       loadOml2d({
         ...defaultOptions,
         ...oml2dOptions,
-        models: oml2dOptions?.models?.map(model => ({
+        models: oml2dOptions?.value?.models?.map(model => ({
           ...defaultModelOptions,
           ...model,
           stageStyle: {
@@ -57,27 +57,34 @@ export function useOml2d() {
         })),
         tips: {
           ...defaultOptions.tips,
-          ...oml2dOptions.tips,
+          ...oml2dOptions?.value.tips,
           style: {
             // @ts-expect-error
             ...defaultOptions?.tips?.style,
             // @ts-expect-error
-            ...oml2dOptions?.tips?.style
+            ...oml2dOptions?.value.tips?.style
           },
           mobileStyle: {
             // @ts-expect-error
             ...defaultOptions?.tips?.mobileStyle,
             // @ts-expect-error
-            ...oml2dOptions?.tips?.mobileStyle
+            ...oml2dOptions?.value.tips?.mobileStyle
           },
           copyTips: {
             // @ts-expect-error
             ...defaultOptions?.tips?.copyTips,
             // @ts-expect-error
-            ...oml2dOptions?.tips?.copyTips
+            ...oml2dOptions?.value.tips?.copyTips
           }
         }
       })
     }
+  }
+  // TODO: destroy
+  // watch(oml2dOptions, () => {
+  //   init()
+  // })
+  onMounted(() => {
+    init()
   })
 }

package/src/index.ts

@@ -35,6 +35,9 @@ import UserWorksPage from './components/UserWorks.vue'
 // 内置一些特殊的主题色
 import './styles/theme/inline-theme.var.css'
 
+// 导入group icons
+import 'virtual:group-icons.css'
+
 export const BlogTheme: Theme = {
   ...DefaultTheme,
   Layout: withConfigProvider(BlogApp),

package/src/node.ts

@@ -46,7 +46,7 @@ export function getThemeConfig(cfg: Partial<Theme.BlogConfig> = {}) {
   return {
     themeConfig: {
       blog: {
-        pagesData,
+        pagesData, // 插件里补全
         ...cfg
       },
       // 补充一些额外的配置用于继承
@@ -63,6 +63,10 @@ export function defineConfig(config: UserConfig<Theme.Config>): any {
   return config
 }
 
+export function defineLocaleConfig(cfg: Omit<Theme.BlogConfig, 'locales' | 'pagesData'>) {
+  return cfg
+}
+
 // 重新导包 tabsMarkdownPlugin 导出CJS格式支持
 export { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 

package/src/styles/index.scss

@@ -102,12 +102,12 @@ html.dark {
 }
 
 // sidebar
-@media (min-width: 1440px) {
-  aside.VPSidebar {
-    padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 16px)) / 2)) !important;
-    padding-right: 10px !important;
-  }
-}
+// @media (min-width: 1440px) {
+//   aside.VPSidebar {
+//     // padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 16px)) / 2)) !important;
+//     // padding-right: 10px !important;
+//   }
+// }
 
 .VPDoc .content main {
   img {

package/src/utils/node/hot-reload-plugin.ts

@@ -1,5 +1,7 @@
+import fs from 'fs'
 import type { PluginOption } from 'vite'
 import type { SiteConfig } from 'vitepress'
+import { grayMatter } from '@sugarat/theme-shared'
 import type { Theme } from '../../composables/config/index'
 import { getArticleMeta } from './theme'
 import { debounce, isEqual } from './index'
@@ -21,6 +23,7 @@ export function themeReloadPlugin() {
         server.restart()
       }, 500)
       server.watcher.on('add', async (path) => {
+        // TODO: rewrite 和 动态路由兼容
         const route = generateRoute(path)
         const meta = await getArticleMeta(path, route, blogConfig?.timeZone)
         blogConfig.pagesData.push({
@@ -32,10 +35,37 @@ export function themeReloadPlugin() {
 
       server.watcher.on('change', async (path: string) => {
         const route = generateRoute(path)
+        const fileContent = await fs.promises.readFile(path, 'utf-8')
+        const { data: frontmatter } = grayMatter(fileContent, {
+          excerpt: true,
+        })
         const meta = await getArticleMeta(path, route, blogConfig?.timeZone)
         const matched = blogConfig.pagesData.find(v => v.route === route)
 
-        if (matched && !isEqual(matched.meta, meta, ['date', 'description'])) {
+        // 自动生成的部分属性不参与比较，避免刷新频繁
+        const excludeKeys = ['date', 'description'].filter(key => !frontmatter[key])
+        // 主题不关心的属性不参与比较，避免刷新频繁
+        const inlineKeys = [
+          // vitepress 默认主题 https://vitepress.dev/zh/reference/frontmatter-config
+          'lang',
+          'outline',
+          'head',
+          'layout',
+          'hero',
+          'features',
+          'navbar',
+          'sidebar',
+          'aside',
+          'lastUpdated',
+          'editLink',
+          'footer',
+          'pageClass',
+          // 本主题扩展 https://theme.sugarat.top/config/frontmatter.html
+          'hiddenCover',
+          'readingTime',
+          'buttonAfterArticle'
+        ]
+        if (matched && !isEqual(matched.meta, meta, inlineKeys.concat(excludeKeys))) {
           matched.meta = meta
           restart()
         }

package/src/utils/node/index.ts

@@ -31,8 +31,6 @@ export function getFirstImagURLFromMD(content: string, route: string) {
     return url
   }
 
-  // TODO: 其它协议，待补充
-
   const paths = joinPath('/', route).split('/')
   paths.splice(paths.length - 1, 1)
   const relativePath = url.startsWith('/') ? url : path.join(paths.join('/') || '', url)

package/src/utils/node/mdPlugins.ts

@@ -3,6 +3,7 @@ import { createRequire } from 'module'
 import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 import type { UserConfig } from 'vitepress'
 import timeline from 'vitepress-markdown-timeline'
+import { groupIconMdPlugin } from 'vitepress-plugin-group-icons'
 import type { Theme } from '../../composables/config/index'
 import { aliasObjectToArray } from './index'
 
@@ -30,6 +31,9 @@ export function getMarkdownPlugins(cfg?: Partial<Theme.BlogConfig>) {
   if (cfg?.timeline !== false) {
     markdownPlugin.push(timeline)
   }
+
+  markdownPlugin.push(groupIconMdPlugin)
+
   return markdownPlugin
 }
 

package/src/utils/node/theme.ts

@@ -1,9 +1,6 @@
-/* eslint-disable prefer-rest-params */
 import fs from 'node:fs'
 import path from 'node:path'
-import process from 'node:process'
-import glob from 'fast-glob'
-import { getDefaultTitle, getFileLastModifyTime, getTextSummary, grayMatter, normalizePath } from '@sugarat/theme-shared'
+import { getDefaultTitle, getFileLastModifyTime, getTextSummary, getVitePressPages, grayMatter, normalizePath, renderDynamicMarkdown } from '@sugarat/theme-shared'
 import type { SiteConfig } from 'vitepress'
 import type { Theme } from '../../composables/config/index'
 import { formatDate } from '../client'
@@ -29,8 +26,8 @@ export function getPageRoute(filepath: string, srcDir: string) {
 }
 
 const defaultTimeZoneOffset = new Date().getTimezoneOffset() / -60
-export async function getArticleMeta(filepath: string, route: string, timeZone = defaultTimeZoneOffset) {
-  const fileContent = await fs.promises.readFile(filepath, 'utf-8')
+export async function getArticleMeta(filepath: string, route: string, timeZone = defaultTimeZoneOffset, baseContent?: string) {
+  const fileContent = baseContent || await fs.promises.readFile(filepath, 'utf-8')
 
   const { data: frontmatter, excerpt, content } = grayMatter(fileContent, {
     excerpt: true,
@@ -70,6 +67,7 @@ export async function getArticleMeta(filepath: string, route: string, timeZone =
     = meta.description || getTextSummary(content, 100) || excerpt
 
   // 获取封面图
+  // TODO: 耦合信息优化
   meta.cover
     = meta.cover
     ?? (getFirstImagURLFromMD(fileContent, route))
@@ -81,19 +79,18 @@ export async function getArticleMeta(filepath: string, route: string, timeZone =
   }
   return meta as Theme.PageMeta
 }
+
 export async function getArticles(cfg: Partial<Theme.BlogConfig>, vpConfig: SiteConfig) {
-  const srcDir
-    = cfg?.srcDir || vpConfig.srcDir.replace(vpConfig.root, '').replace(/^\//, '')
-    || process.argv.slice(2)?.[1]
-    || '.'
-  const files = glob.sync(`${srcDir}/**/*.md`, { ignore: ['node_modules'], absolute: true })
+  const pages = getVitePressPages(vpConfig)
+  const metaResults = pages.reduce((prev, value) => {
+    const { page, route, originRoute, filepath, isDynamic, dynamicRoute } = value
 
-  const metaResults = files.reduce((prev, curr) => {
-    const route = getPageRoute(curr, vpConfig.srcDir)
-    const metaPromise = getArticleMeta(curr, route, cfg?.timeZone)
+    const metaPromise = (isDynamic && dynamicRoute)
+      ? getArticleMeta(filepath, originRoute, cfg?.timeZone, renderDynamicMarkdown(filepath, dynamicRoute.params, dynamicRoute.content))
+      : getArticleMeta(filepath, originRoute, cfg?.timeZone)
 
     // 提前获取，有缓存取缓存
-    prev[curr] = {
+    prev[page] = {
       route,
       metaPromise
     }
@@ -105,8 +102,8 @@ export async function getArticles(cfg: Partial<Theme.BlogConfig>, vpConfig: Site
 
   const pageData: Theme.PageData[] = []
 
-  for (const file of files) {
-    const { route, metaPromise } = metaResults[file]
+  for (const page of pages) {
+    const { route, metaPromise } = metaResults[page.page]
     const meta = await metaPromise
     if (meta.layout === 'home') {
       continue
@@ -142,5 +139,5 @@ export function patchVPThemeConfig(
 }
 
 export function checkConfig(cfg?: Partial<Theme.BlogConfig>) {
-  // TODO：保留
+  // 保留
 }

package/src/utils/node/vitePlugins.ts

@@ -1,6 +1,3 @@
-import path from 'node:path'
-import { existsSync, readFileSync } from 'node:fs'
-import { Buffer } from 'node:buffer'
 import type { HeadConfig, SiteConfig } from 'vitepress'
 import {
   pagefindPlugin
@@ -8,6 +5,8 @@ import {
 import { RssPlugin } from 'vitepress-plugin-rss'
 import type { PluginOption } from 'vite'
 import { joinPath } from '@sugarat/theme-shared'
+import { AnnouncementPlugin } from 'vitepress-plugin-announcement'
+import { groupIconVitePlugin } from 'vitepress-plugin-group-icons'
 import type { Theme } from '../../composables/config/index'
 import { _require } from './mdPlugins'
 import { themeReloadPlugin } from './hot-reload-plugin'
@@ -16,7 +15,7 @@ import { getArticles } from './theme'
 export function getVitePlugins(cfg: Partial<Theme.BlogConfig> = {}) {
   const plugins: any[] = []
 
-  // 处理cover image的路径（暂只支持自动识别的文章首图）
+  // 处理 cover image 的路径（暂只支持自动识别的文章首图）
   plugins.push(coverImgTransform())
 
   // 处理自定义主题色
@@ -26,10 +25,10 @@ export function getVitePlugins(cfg: Partial<Theme.BlogConfig> = {}) {
   // 自动重载首页
   plugins.push(themeReloadPlugin())
 
-  // 主题pageData生成
+  // 主题 pageData生成
   plugins.push(providePageData(cfg))
 
-  // 内置简化版的pagefind
+  // 内置 pagefind
   if (cfg && cfg.search !== false) {
     const ops = cfg.search instanceof Object ? cfg.search : {}
     plugins.push(
@@ -39,7 +38,7 @@ export function getVitePlugins(cfg: Partial<Theme.BlogConfig> = {}) {
     )
   }
 
-  // 内置支持Mermaid
+  // 内置支持 Markdown 流程图 Mermaid
   if (cfg?.mermaid !== false) {
     const { MermaidPlugin } = _require('vitepress-plugin-mermaid')
     plugins.push(inlineInjectMermaidClient())
@@ -50,6 +49,16 @@ export function getVitePlugins(cfg: Partial<Theme.BlogConfig> = {}) {
   if (cfg?.RSS) {
     ;[cfg?.RSS].flat().forEach(rssConfig => plugins.push(RssPlugin(rssConfig)))
   }
+
+  // 内置支持 全局公告
+  if (cfg?.popover) {
+    plugins.push(AnnouncementPlugin(cfg.popover))
+  }
+
+  // 内置支持 group icon
+
+  plugins.push(groupIconVitePlugin(cfg?.groupIcon))
+
   return plugins
 }
 
@@ -101,58 +110,138 @@ export function inlineBuildEndPlugin(buildEndFn: any[]) {
   }
 }
 
-// TODO: 支持frontmatter中的相对路径图片自动处理
+// 支持frontmatter中的相对路径图片自动处理
 export function coverImgTransform() {
   let blogConfig: Theme.BlogConfig
   let vitepressConfig: SiteConfig
   let assetsDir: string
+
+  const relativeMetaName: (keyof Theme.PageMeta)[] = ['cover']
+  const relativeMeta: Theme.PageMeta[] = []
+  const relativeMetaMap: Record<string, Theme.PageMeta> = {}
+  const viteAssetsMap: Record<string, string> = {}
+  const relativePathMap: Record<string, string> = {}
   return {
     name: '@sugarat/theme-plugin-cover-transform',
     apply: 'build',
-    enforce: 'pre',
+    // enforce: 'pre',
     configResolved(config: any) {
       vitepressConfig = config.vitepress
       assetsDir = vitepressConfig.assetsDir
       blogConfig = config.vitepress.site.themeConfig.blog
+
+      const pagesData = [...blogConfig.pagesData]
+      // 兼容国际化
+      if (vitepressConfig.site.locales && Object.keys(vitepressConfig.site.locales).length > 1 && blogConfig?.locales) {
+        Object.values(blogConfig?.locales).map(v => v.pagesData)
+          .filter(v => !!v)
+          .forEach(v => pagesData.push(...v))
+      }
+      // 提取所有相对路径的属性
+      pagesData.forEach((v) => {
+        relativeMetaName.forEach((k) => {
+          const value = v.meta[k]
+          if (value && typeof value === 'string' && value.startsWith('/')) {
+            const absolutePath = `${vitepressConfig.srcDir}${value}`
+
+            // 复用已经映射后的值
+            if (relativeMetaMap[absolutePath]) {
+              Object.assign(v.meta, { [k]: relativeMetaMap[absolutePath][k] })
+              return
+            }
+
+            relativePathMap[value] = absolutePath
+            relativePathMap[absolutePath] = value
+            relativeMeta.push(v.meta)
+            relativeMetaMap[absolutePath] = v.meta
+          }
+        })
+      })
     },
-    async generateBundle(_: any, bundle: Record<string, any>) {
+    moduleParsed(info) {
+      if (!relativePathMap[info.id]) {
+        return
+      }
+      const asset = info.code?.match(/export default "(.*)"/)?.[1]
+      if (!asset) {
+        return
+      }
+
+      viteAssetsMap[info.id] = asset
+      viteAssetsMap[asset] = info.id
+
+      // 换成 ViteAssets，影响输出 HTML
+      relativeMeta.forEach((meta) => {
+        relativeMetaName.forEach((k) => {
+          const value = meta[k]
+          if (!value || !relativePathMap[value as string]) {
+            return
+          }
+          const viteAsset = viteAssetsMap[relativePathMap[value as string]]
+          if (viteAsset) {
+            Object.assign(meta, { [k]: viteAsset })
+          }
+        })
+      })
+    },
+    generateBundle(_: any, bundle: Record<string, any>) {
+      // 换成 最终输出路径，影响 CSR 内容
       const assetsMap = Object.entries(bundle).filter(([key]) => {
         return key.startsWith(assetsDir)
       }).map(([_, value]) => {
         return value
-      })
-      for (const page of blogConfig.pagesData) {
-        const { cover } = page.meta
-        // 是否相对路径引用
-        if (!cover?.startsWith?.('/')) {
-          continue
-        }
-        try {
-          // 寻找构建后的
-          const realPath = path.join(vitepressConfig.root, cover)
-          if (!existsSync(realPath)) {
-            continue
+      }).filter(v => v.type === 'asset')
+
+      if (!assetsMap.length) {
+        return
+      }
+
+      relativeMeta.forEach((meta) => {
+        relativeMetaName.forEach((k) => {
+          const value = meta[k]
+          if (!value || !viteAssetsMap[value as string]) {
+            return
           }
-          const fileBuffer = readFileSync(realPath)
-          const matchAsset = assetsMap.find(v => Buffer.compare(fileBuffer, v.source) === 0)
+          const absolutePath = viteAssetsMap[value as string]
+          const matchAsset = assetsMap.find(v => joinPath(`${vitepressConfig.srcDir}/`, v.originalFileName) === absolutePath)
           if (matchAsset) {
-            page.meta.cover = joinPath('/', matchAsset.fileName)
+            Object.assign(meta, { [k]: joinPath('/', matchAsset.fileName) })
           }
-        }
-        catch (e: any) {
-          vitepressConfig.logger.warn(e?.message)
-        }
-      }
+        })
+      })
     }
-  }
+  } as PluginOption
 }
 
 export function providePageData(cfg: Partial<Theme.BlogConfig>) {
   return {
     name: '@sugarat/theme-plugin-provide-page-data',
     async config(config: any) {
-      const pagesData = await getArticles(cfg, config.vitepress)
-      config.vitepress.site.themeConfig.blog.pagesData = pagesData
+      const vitepressConfig: SiteConfig = config.vitepress
+      const pagesData = await getArticles(cfg, vitepressConfig)
+      if (vitepressConfig.site.locales && Object.keys(vitepressConfig.site.locales).length > 1) {
+        if (!vitepressConfig.site.themeConfig.blog.locales) {
+          vitepressConfig.site.themeConfig.blog.locales = {}
+        }
+        // 兼容国际化
+        const localeKeys = Object.keys(vitepressConfig.site.locales)
+        localeKeys.forEach((localeKey) => {
+          if (!vitepressConfig.site.themeConfig.blog.locales[localeKey]) {
+            vitepressConfig.site.themeConfig.blog.locales[localeKey] = {}
+          }
+
+          vitepressConfig.site.themeConfig.blog.locales[localeKey].pagesData = pagesData.filter((v) => {
+            const { route } = v
+            const isRoot = localeKey === 'root'
+            if (isRoot) {
+              return !localeKeys.filter(v => v !== 'root').some(k => route.startsWith(`/${k}`))
+            }
+            return route.startsWith(`/${localeKey}`)
+          })
+        })
+        return
+      }
+      vitepressConfig.site.themeConfig.blog.pagesData = pagesData
     },
   } as PluginOption
 }