@sugarat/theme 0.1.0

package/src/composables/config/index.ts

@@ -0,0 +1,159 @@
+import type { ElButton } from 'element-plus'
+import { DefaultTheme } from 'vitepress'
+
+export 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 namespace Theme {
+  export interface PageMeta {
+    title: string
+    date: string
+    tag?: string[]
+    description?: string
+    cover?: string
+    sticky?: number
+    author?: string
+    hidden?: boolean
+    layout?: string
+    // old
+    categories: string[]
+    tags: string[]
+  }
+  export interface PageData {
+    route: string
+    meta: PageMeta
+  }
+  export interface activeTag {
+    label: string
+    type: string
+  }
+
+  export interface GiscusConfig {
+    repo: string
+    repoId: string
+    category: string
+    categoryId: string
+    mapping?: string
+    inputPosition?: 'top' | 'bottom'
+    lang?: string
+    loading?: 'lazy' | ''
+  }
+
+  export interface HotArticle {
+    title?: string
+    pageSize?: number
+    nextText?: string
+    empty?: string | boolean
+  }
+  export interface RecommendArticle {
+    title?: string
+    pageSize?: number
+    nextText?: string
+    empty?: string | boolean
+  }
+
+  export interface HomeBlog {
+    name?: string
+    motto?: string
+    inspiring?: string
+    pageSize?: number
+  }
+
+  export interface ArticleConfig {
+    readingTime?: boolean
+  }
+  export interface Alert {
+    type: 'success' | 'warning' | 'info' | 'error'
+    /**
+     * 细粒度的时间控制
+     * 默认展示时间，-1 只展示1次，其它数字为每次都展示，一定时间后自动消失，0为不自动消失
+     * 配置改变时，会重新触发展示
+     */
+    duration: number
+    title?: string
+    description?: string
+    closable?: boolean
+    center?: boolean
+    closeText?: string
+    showIcon?: boolean
+    html?: string
+  }
+
+  export interface Popover {
+    title: string
+    /**
+     * 细粒度的时间控制
+     * 默认展示时间，-1 只展示1次，其它数字为每次都展示，一定时间后自动消失，0为不自动消失
+     * 配置改变时，会重新触发展示
+     */
+    duration: number
+    body?: BlogPopover.Value[]
+    footer?: BlogPopover.Value[]
+    /**
+     * 手动重新打开
+     */
+    reopen?: boolean
+  }
+  export interface FriendLink {
+    nickname: string
+    des: string
+    url: string
+    avatar: string
+  }
+  export interface BlogConfig {
+    pagesData: PageData[]
+    srcDir?: string
+    author?: string
+    hotArticle?: HotArticle
+    home?: HomeBlog
+    // TODO: 本地全文搜索定制 pagefind || minisearch
+    search?: boolean
+    /**
+     * 配置评论
+     * power by https://giscus.app/zh-CN
+     */
+    comment?: GiscusConfig | false
+    recommend?: RecommendArticle
+    article?: ArticleConfig
+    /**
+     * el-alert
+     */
+    alert?: Alert
+    popover?: Popover
+    friend?: FriendLink[]
+  }
+
+  export interface Config extends DefaultTheme.Config {
+    blog: BlogConfig
+  }
+  export interface HomeConfig {
+    handleChangeSlogan?: (oldSlogan: string) => string | Promise<string>
+  }
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+// override style
+import './styles/index.scss'
+
+// element-ui
+import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+
+import { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import BlogApp from './components/BlogApp.vue'
+import { withConfigProvider } from './composables/config/blog'
+
+export const BlogTheme: Theme = {
+  ...DefaultTheme,
+  Layout: withConfigProvider(BlogApp)
+}
+
+export * from './composables/config/index'

package/src/node.ts

@@ -0,0 +1,175 @@
+import glob from 'fast-glob'
+import matter from 'gray-matter'
+import fs from 'fs'
+import { execSync, spawn } from 'child_process'
+import path from 'path'
+import type { UserConfig } from 'vitepress'
+import { formatDate } from './utils/index'
+import type { Theme } from './composables/config/index'
+
+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, '/')}`),
+          ''
+        )
+      } else {
+        route = route.replace(new RegExp(`^${path.join(srcDir, '/')}`), '')
+      }
+
+      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.tag = (meta.tag || []).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] ||
+        ''
+      return {
+        route: `/${route}`,
+        meta
+      }
+    })
+    .filter((v) => v.meta.layout !== 'home')
+
+  return {
+    blog: {
+      pagesData: data as Theme.PageData[],
+      ...cfg
+    },
+    sidebar: [
+      {
+        text: '',
+        items: []
+      }
+    ]
+  }
+}
+
+export function getDefaultTitle(content: string) {
+  const title =
+    clearMatterContent(content)
+      .split('\n')
+      ?.find((str) => {
+        return str.startsWith('# ')
+      })
+      ?.slice(2)
+      .replace(/[\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) {
+  // 参考 vitepress 中的 getGitTimestamp 实现
+  const infoStr = execSync(`git log -1 --pretty="%ci" ${url}`)
+    .toString('utf-8')
+    .trim()
+  let date = new Date()
+  if (infoStr) {
+    date = new Date(infoStr)
+  }
+  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 defineConfig(config: UserConfig<Theme.Config>) {
+  return config
+}

package/src/styles/index.scss

@@ -0,0 +1,95 @@
+html {
+  --bg-gradient: 255, 255, 255, 0.1;
+  --bg-gradient-home: 255, 255, 255;
+  --box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
+
+  // blog-item
+  --box-shadow-hover: 0 2px 16px 0 rgba(0, 0, 0, 0.2);
+  --nav-bgc: rgba(255, 255, 255, 0.9);
+  --badge-font-color: #4e5969;
+  --description-font-color: #86909c;
+}
+
+html[class='dark'] {
+  --bg-gradient: 20, 20, 20;
+  --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);
+  --box-shadow-hover: 0 2px 16px 0 rgba(0, 0, 0, 0.7);
+  --badge-font-color: #bdc3cc;
+  --description-font-color: #9facba;
+}
+.VPHome {
+  &::before {
+    content: '';
+    inset: 0;
+    position: fixed;
+    top: 0;
+    z-index: -1;
+    background-image: url(./bg.png);
+    background-repeat: repeat;
+    min-height: 100%;
+  }
+  min-height: calc(100vh - var(--vp-nav-height));
+  background: radial-gradient(
+    ellipse,
+    rgba(var(--bg-gradient-home), 1) 0%,
+    rgba(var(--bg-gradient-home), 0) 700%
+  );
+}
+
+@media screen and (max-width: 959px) {
+  .VPNav {
+    background-color: var(--nav-bgc);
+  }
+}
+
+.el-pagination {
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.el-pagination > * {
+  margin-bottom: 10px !important;
+}
+
+@media screen and (min-width: 768px) and (max-width: 1200px) {
+  .VPNavBarMenuGroup .button span.text,
+  .VPNavBarMenuLink {
+    font-size: 10px;
+  }
+  .VPNavBar {
+    height: auto !important;
+  }
+  .VPNavBarMenu.menu {
+    flex-wrap: wrap;
+  }
+}
+
+@media screen and (min-width: 960px) and (max-width: 1120px) {
+  .VPContent.has-sidebar {
+    margin-top: 60px !important;
+  }
+}
+
+// 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;
+  }
+}
+
+.VPDoc .content main {
+  img {
+    max-height: 300px;
+    margin: 0 auto;
+    cursor: pointer;
+  }
+
+  .vp-doc a {
+    word-break: break-all;
+  }
+}

package/src/utils/index.ts

@@ -0,0 +1,84 @@
+export function formatDate(d: any, fmt = 'yyyy-MM-dd hh:mm:ss') {
+  if (!(d instanceof Date)) {
+    d = new Date(d)
+  }
+  const o: any = {
+    'M+': d.getMonth() + 1, // 月份
+    'd+': d.getDate(), // 日
+    'h+': d.getHours(), // 小时
+    'm+': d.getMinutes(), // 分
+    's+': d.getSeconds(), // 秒
+    'q+': Math.floor((d.getMonth() + 3) / 3), // 季度
+    S: d.getMilliseconds() // 毫秒
+  }
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(
+      RegExp.$1,
+      `${d.getFullYear()}`.substr(4 - RegExp.$1.length)
+    )
+  }
+  // eslint-disable-next-line no-restricted-syntax
+  for (const k in o) {
+    if (new RegExp(`(${k})`).test(fmt))
+      fmt = fmt.replace(
+        RegExp.$1,
+        RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length)
+      )
+  }
+  return fmt
+}
+
+export function isCurrentWeek(date: Date, target?: Date) {
+  const now = target || new Date()
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+  const oneDay = 1000 * 60 * 60 * 24
+  const nowWeek = today.getDay()
+  // 本周一的时间
+  const startWeek = today.getTime() - (nowWeek === 0 ? 6 : nowWeek - 1) * oneDay
+  return +date >= startWeek && +date <= startWeek + 7 * oneDay
+}
+
+export function formatShowDate(date: Date | string) {
+  const source = +new Date(date)
+  const now = +new Date()
+  const diff = now - source
+  const oneSeconds = 1000
+  const oneMinute = oneSeconds * 60
+  const oneHour = oneMinute * 60
+  const oneDay = oneHour * 24
+  const oneWeek = oneDay * 7
+  if (diff < oneMinute) {
+    return `${Math.floor(diff / oneSeconds)}秒前`
+  }
+  if (diff < oneHour) {
+    return `${Math.floor(diff / oneMinute)}分钟前`
+  }
+  if (diff < oneDay) {
+    return `${Math.floor(diff / oneHour)}小时前`
+  }
+  if (diff < oneWeek) {
+    return `${Math.floor(diff / oneDay)}天前`
+  }
+
+  return formatDate(new Date(date), 'yyyy-MM-dd')
+}
+
+const pattern =
+  /[a-zA-Z0-9_\u0392-\u03c9\u00c0-\u00ff\u0600-\u06ff\u0400-\u04ff]+|[\u4e00-\u9fff\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af]+/g
+
+// copy from https://github.com/youngjuning/vscode-juejin-wordcount/blob/main/count-word.ts
+export default function countWord(data: string) {
+  const m = data.match(pattern)
+  let count = 0
+  if (!m) {
+    return 0
+  }
+  for (let i = 0; i < m.length; i += 1) {
+    if (m[i].charCodeAt(0) >= 0x4e00) {
+      count += m[i].length
+    } else {
+      count += 1
+    }
+  }
+  return count
+}

package/types/vue-shim.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { ComponentOptions } from 'vue'
+
+  const comp: ComponentOptions
+  export default comp
+}