feat(git-changelog): added new contributors section (#38)

Signed-off-by: Neko Ayaka <[email protected]>

docs/.vitepress/theme/index.ts

@@ -17,7 +17,10 @@ import {
   NolebaseHighlightTargetedHeading,
 } from '@nolebase/vitepress-plugin-highlight-targeted-heading'
 
-import { NolebaseGitChangelogPlugin } from '@nolebase/vitepress-plugin-git-changelog/client'
+import {
+  InjectionKey as NolebaseGitChangelogInjectionKey,
+  NolebaseGitChangelogPlugin,
+} from '@nolebase/vitepress-plugin-git-changelog/client'
 
 import 'virtual:uno.css'
 
@@ -60,6 +63,23 @@ export const Theme: ThemeConfig = {
         defaultToggle: true,
       },
     })
+
+    app.provide(NolebaseGitChangelogInjectionKey, {
+      mapContributors: [
+        {
+          name: 'Neko',
+          avatar: 'https://github.com/nekomeowww.png',
+          nameAliases: ['Neko Ayaka', 'Ayaka Neko'],
+          emailAliases: ['[email protected]'],
+        },
+        {
+          name: 'Rizumu',
+          avatar: 'https://github.com/LittleSound.png',
+          nameAliases: ['Rizumu Ayaka', 'Ayaka Rizumu'],
+          emailAliases: ['[email protected]'],
+        },
+      ],
+    })
   },
 }
 

packages/vitepress-plugin-git-changelog/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nolebase/vitepress-plugin-git-changelog",
   "type": "module",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A VitePress plugin that adds a changelog fetched from git to your documentation.",
   "author": {
     "name": "Nólëbase",

packages/vitepress-plugin-git-changelog/src/client/components/Contributors.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+
+import Changelog from 'virtual:nolebase-git-changelog'
+
+import { useRawPath } from '../composables/path'
+import { useCommits } from '../composables/commits'
+import { useI18n } from '../composables/i18n'
+import { InjectionKey } from '../constants'
+
+interface ContributorInfo {
+  name: string
+  commitsCount: number
+  avatarUrl?: string
+  url?: string
+}
+
+const options = inject(InjectionKey, {})
+
+const { t } = useI18n()
+const rawPath = useRawPath()
+const commits = useCommits(Changelog.commits, rawPath)
+
+const contributors = computed<ContributorInfo[]>(() => {
+  const map: Record<string, ContributorInfo> = {}
+  commits.value.forEach((c) => {
+    const targetCreatorByName = options.mapContributors?.find(item => item.nameAliases && Array.isArray(item.nameAliases) && item.nameAliases.includes(c.author_name))
+    const targetCreatorByEmail = options.mapContributors?.find(item => item.emailAliases && Array.isArray(item.emailAliases) && item.emailAliases.includes(c.author_email))
+
+    let name = ''
+    let avatar = ''
+    let url: string | undefined
+
+    if (targetCreatorByName) {
+      name = targetCreatorByName.name || c.author_name
+      avatar = targetCreatorByName.avatar || `https://gravatar.com/avatar/${c.author_avatar}?d=retro`
+
+      const foundGitHubLink = targetCreatorByName.links?.find(item => item.type === 'github')
+      if (foundGitHubLink)
+        url = foundGitHubLink.link
+    }
+    else if (targetCreatorByEmail) {
+      name = targetCreatorByEmail.name || c.author_name
+      avatar = targetCreatorByEmail.avatar || `https://gravatar.com/avatar/${c.author_avatar}?d=retro`
+
+      const foundGitHubLink = targetCreatorByEmail.links?.find(item => item.type === 'github')
+      if (foundGitHubLink)
+        url = foundGitHubLink.link
+    }
+    else {
+      name = c.author_name
+      avatar = `https://gravatar.com/avatar/${c.author_avatar}?d=retro`
+    }
+
+    if (!map[name]) {
+      map[name] = {
+        name,
+        commitsCount: 0,
+        avatarUrl: avatar,
+        url,
+      }
+    }
+
+    map[name].commitsCount++
+  })
+
+  return Object.values(map).sort((a, b) => b.commitsCount - a.commitsCount)
+})
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-4 pt-2">
+    <em
+      v-if="!contributors.length"
+    >
+      {{ t('noContributors') }}
+    </em>
+    <template
+      v-else
+    >
+      <template
+        v-for="c of contributors"
+        :key="c.name"
+      >
+        <a
+          v-if="typeof c.url !== 'undefined'"
+          :href="c.url"
+        >
+          <div class="flex items-center gap-2">
+            <img :src="c.avatarUrl" class="h-8 w-8 rounded-full">
+            {{ c.name }}
+          </div>
+        </a>
+        <div
+          v-else
+          class="flex items-center gap-2"
+        >
+          <img :src="c.avatarUrl" class="h-8 w-8 rounded-full">
+          {{ c.name }}
+        </div>
+      </template>
+    </template>
+  </div>
+</template>

packages/vitepress-plugin-git-changelog/src/client/index.ts

@@ -4,11 +4,13 @@ import type { Changelog, Commit } from '../types'
 import type { Locale, Options } from './types'
 import { InjectionKey } from './constants'
 import NolebaseGitChangelog from './components/Changelog.vue'
+import NolebaseGitContributors from './components/Contributors.vue'
 
 import 'virtual:uno.css'
 
 const components = {
   NolebaseGitChangelog,
+  NolebaseGitContributors,
 }
 
 export const NolebaseGitChangelogPlugin: Plugin = {
@@ -23,6 +25,7 @@ export const NolebaseGitChangelogPlugin: Plugin = {
 
 export {
   NolebaseGitChangelog,
+  NolebaseGitContributors,
   InjectionKey,
 }
 

packages/vitepress-plugin-git-changelog/src/client/locales.ts

@@ -2,13 +2,15 @@ import type { Locale } from './types'
 
 export const defaultEnLocale: Locale = {
   noLogs: 'No recent changes',
+  noContributors: 'No contributors',
   lastEdited: 'Last edited {{daysAgo}}',
   viewFullHistory: 'View full history',
   committedOn: ' on {{date}}',
 }
 
 export const defaultZhCNLocale: Locale = {
   noLogs: '暂无最近变更历史',
+  noContributors: '暂无相关贡献者',
   lastEdited: '最后编辑于 {{daysAgo}}',
   viewFullHistory: '查看完整历史',
   committedOn: ' 于 {{date}}',

packages/vitepress-plugin-git-changelog/src/client/types.ts

@@ -1,5 +1,8 @@
+import type { Contributor } from '../types'
+
 export interface Locale {
   noLogs?: string
+  noContributors?: string
   lastEdited?: string
   viewFullHistory?: string
   committedOn?: string
@@ -36,4 +39,5 @@ export interface Options {
    * ```
    */
   locales?: Record<string, Locale>
+  mapContributors?: Contributor[]
 }

packages/vitepress-plugin-git-changelog/src/types/index.ts

@@ -17,3 +17,18 @@ export interface Commit {
 export interface Changelog {
   commits: Commit[]
 }
+
+export interface SocialEntry {
+  type: 'github' | 'twitter' | 'email' | string
+  icon: string
+  link: string
+}
+
+export interface Contributor {
+  name?: string
+  avatar?: string
+  email?: string
+  links?: SocialEntry[]
+  nameAliases?: string[]
+  emailAliases?: string[]
+}

packages/vitepress-plugin-git-changelog/src/vite/index.ts

@@ -133,13 +133,21 @@ export function GitChangelog(options: {
 
 export function GitChangelogMarkdownSection(options?: {
   getChangelogTitle?: (code: string, id: string) => string
+  getContributorsTitle?: (code: string, id: string) => string
   excludes?: string[]
   exclude?: (id: string) => boolean
+  sections?: {
+    disableChangelog?: boolean
+    disableContributors?: boolean
+  }
 }): Plugin {
   const {
     getChangelogTitle = () => {
       return 'Changelog'
     },
+    getContributorsTitle = () => {
+      return 'Contributors'
+    },
     excludes = ['index.md'],
     exclude = () => false,
   } = options ?? {}
@@ -154,11 +162,27 @@ export function GitChangelogMarkdownSection(options?: {
       if (exclude(id))
         return null
 
-      return `${code}
+      const contributorsSection = options?.sections?.disableContributors
+        ? ''
+        : `
+
+## ${getContributorsTitle(code, id)}
+
+<NolebaseGitContributors />
+
+`
+
+      const changelogSection = options?.sections?.disableChangelog
+        ? ''
+        : `
 
 ## ${getChangelogTitle(code, id)}
 
-<NolebaseGitChangelog />`
+<NolebaseGitChangelog />
+
+`
+
+      return `${code}${contributorsSection}${changelogSection}`
     },
   }
 }