feat(git-changelog): use titleId for heading, support changing commit order and customizing commit hash digits

README.md

@@ -87,6 +87,8 @@ To find out the integration name, there is a list of integrations below.
 The project uses [`unbuild`](https://github.com/unjs/unbuild) and [`vite`](https://github.com/vitejs/vite) to develop and build. With the powerful features offered from [`jiti`](https://github.com/unjs/jiti), we no longer need to use [Rollup](https://rollupjs.org/) for tedious configuration and then watch the local file changes and bundle the modified and developed the modules without [`vite`](https://github.com/vitejs/vite) for hot-reload. We can directly run the following command to output the bundled file and get started on development:
 
 ```shell
+# run these scripts in root folder
+pnpm i
 pnpm run packages:stub
 ```
 
@@ -132,4 +134,18 @@ If you use [`@antfu/ni`](https://github.com/antfu/ni), you can also use the foll
 nr docs:build
 ```
 
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=nolebase/integrations&type=Date)](https://star-history.com/#nolebase/integrations&Date)
+
+## Project Status
+
+![Repobeats analytics image](https://repobeats.axiom.co/api/embed/422f7e142085eeb0c7ef854046101bf90927de91.svg "Repobeats analytics image")
+
+## Contributors
+
+Thanks to all the contributors!
+
+[![contributors](https://contrib.rocks/image?repo=nolebase/integrations)](https://github.com/nolebase/integrations/graphs/contributors)
+
 ### Written with ♥

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

@@ -16,6 +16,8 @@
 import CommitTagLine from './CommitTagLine.vue'
 
 const toggleViewMore = ref(false)
+// The order of commits, defaults to true (descending order)
+const isDescending = ref(true)
 
 const options = inject(InjectionKey, { locales: defaultLocales })
 
@@ -76,11 +78,20 @@
 
   return differenceInDays(new Date(), lastChangeDate.value) < 1
 })
+
+const reversedCommits = computed(() => {
+  // reverse() will change the original array, so deep copy it
+  // we can also use toReversed() in order to not change original array
+  // but toReversed() has lack of compatibility
+  const temp: typeof commits.value = [ ...commits.value ]
+  return temp.reverse()
+})
 </script>
 
 <template>
-  <h2 :id="t('changelog.title')">
+  <h2 :id="t('changelog.titleId')">
     {{ t('changelog.title') }}
+    <a class="header-anchor" :href="`#${t('changelog.titleId')}`" :aria-label="`Permalink to '${t('changelog.title')}'`" />
   </h2>
   <em v-if="!commits.length" opacity="70">{{ t('noLogs', { omitEmpty: true }) || t('changelog.noData') }}</em>
   <div
@@ -91,14 +102,14 @@
     class="vp-nolebase-git-changelog vp-nolebase-git-changelog-history vp-nolebase-git-changelog-history-list vp-nolebase-git-changelog-history-container"
     rounded-lg p-4
   >
-    <label cursor-pointer>
+    <label cursor-pointer @click="toggleViewMore = !toggleViewMore">
       <div
         class="vp-nolebase-git-changelog-title flex select-none items-center justify-between"
         transition="color ease-in-out"
         text="<sm:xs" duration-200
       >
         <span class="vp-nolebase-git-changelog-last-edited-title inline-flex items-center gap-3">
-          <span class="i-octicon:history-16" />
+          <svg class="i-octicon:history-16" />
           <span v-if="commits[0]">
             {{ t('lastEdited', {
               props: {
@@ -112,7 +123,10 @@
             }) }}
           </span>
         </span>
-        <input v-model="toggleViewMore" type="checkbox" invisible appearance-none>
+        <div
+          :class="isDescending ? 'i-octicon:sort-desc-16' : 'i-octicon:sort-asc-16'" ml-auto mr-4 cursor-pointer
+          @click.stop="toggleViewMore && (isDescending = !isDescending)"
+        />
         <span class="vp-nolebase-git-changelog-view-full-history-title inline-flex cursor-pointer items-center gap-3">
           <span class="<sm:hidden">
             {{ t('viewFullHistory', { omitEmpty: true }) || t('changelog.viewFullHistory') }}
@@ -134,7 +148,7 @@
         class="grid grid-cols-[30px_auto] mt-3 gap-1.5 children:my-auto -ml-1.5"
         text="<sm:xs"
       >
-        <template v-for="(commit) of commits" :key="commit.hash">
+        <template v-for="(commit) of (isDescending ? commits : reversedCommits)" :key="commit.hash">
           <template v-if="commit.tag && commit.tags && commit.release_tag_url && commit.release_tags_url">
             <CommitTagLine :commit="commit" />
           </template>

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

@@ -13,22 +13,22 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <div class="i-octicon:git-commit-16 m-auto rotate-90 transform opacity-30" />
-  <div flex items-center gap-1>
+  <div class="i-octicon:git-commit-16 m-auto rotate-90 transform op-30" />
+  <div flex gap-1>
     <a :href="props.commit.hash_url || `${props.commit.repo_url}/commit/${props.commit.hash}`" target="_blank">
       <code
         class="text-xs text-$vp-c-brand-1 hover:text-$vp-c-brand-1"
         transition="color ease-in-out"
         duration-200
       >
-        {{ commit.hash.slice(0, 7) }}
+        {{ commit.hash.slice(0, commit.commitHashDigits) }}
       </code>
     </a>
     <span>-</span>
     <span>
       <span class="text-sm <sm:text-xs" v-html="renderCommitMessage(commit.repo_url || 'https://github.com/example/example', commit.message)" />
       <ClientOnly>
-        <span class="text-xs opacity-50" :title="toDate(commit.date_timestamp).toString()">
+        <span class="text-xs op-50" :title="toDate(commit.date_timestamp).toString()">
           {{ t('committedOn', { props: { date: toDate(commit.date_timestamp).toLocaleDateString() }, omitEmpty: true }) || t('changelog.committedOn', { props: { date: toDate(commit.date_timestamp).toLocaleDateString() } }) }}
         </span>
       </ClientOnly>

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

@@ -83,8 +83,9 @@ watch(commits, async (newCommits) => {
 </script>
 
 <template>
-  <h2 :id="t('contributors.title')">
+  <h2 :id="t('contributors.titleId')">
     {{ t('contributors.title') }}
+    <a class="header-anchor" :href="`#${t('contributors.titleId')}`" :aria-label="`Permalink to '${t('contributors.title')}'`" />
   </h2>
   <div
     class="vp-nolebase-git-changelog vp-nolebase-git-changelog-contributors vp-nolebase-git-changelog-contributors-container vp-nolebase-git-changelog-contributors-list"

packages/vitepress-plugin-git-changelog/src/locales/en.yaml

@@ -1,10 +1,12 @@
 changelog:
   title: 'Changelog'
+  titleId: 'changelog'
   noData: 'No recent changes'
   lastEdited: 'Last edited {{daysAgo}}'
   lastEditedDateFnsLocaleName: 'enUS'
   viewFullHistory: 'View full history'
   committedOn: ' on {{date}}'
 contributors:
   title: 'Contributors'
+  titleId: 'contributors'
   noData: 'No contributors'

packages/vitepress-plugin-git-changelog/src/locales/zh-CN.yaml

@@ -1,10 +1,12 @@
 changelog:
   title: '页面历史'
+  titleId: '页面历史'
   noData: '暂无最近变更历史'
   lastEdited: '最后编辑于 {{daysAgo}}'
   lastEditedDateFnsLocaleName: 'zhCN'
   viewFullHistory: '查看完整历史'
   committedOn: ' 于 {{date}}'
 contributors:
   title: '贡献者'
+  titleId: '贡献者'
   noData: '暂无相关贡献者'

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

@@ -66,6 +66,10 @@ export interface Commit {
    * The repository URL.
    */
   repo_url?: string
+  /**
+   * The digits of commit hash.
+   */
+  commitHashDigits?: number
 }
 
 export interface Changelog {

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

@@ -12,6 +12,7 @@ import {
   type CommitToStringHandler,
   type CommitToStringsHandler,
   type RewritePathsBy,
+  defaultCommitHashDigits,
   defaultCommitURLHandler,
   defaultReleaseTagURLHandler,
   defaultReleaseTagsURLHandler,
@@ -54,6 +55,7 @@ export function GitChangelog(options: GitChangelogOptions = {}): Plugin {
     getReleaseTagsURL = defaultReleaseTagsURLHandler,
     getCommitURL = defaultCommitURLHandler,
     rewritePathsBy,
+    commitHashDigits = defaultCommitHashDigits,
   } = options
 
   const getRepoURL = typeof repoURL === 'function' ? repoURL : () => repoURL
@@ -74,6 +76,7 @@ export function GitChangelog(options: GitChangelogOptions = {}): Plugin {
       getReleaseTagURL,
       getReleaseTagsURL,
       rewritePathsBy,
+      typeof commitHashDigits === 'number' ? commitHashDigits : defaultCommitHashDigits,
     )
   }
 

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

@@ -133,6 +133,7 @@ export interface RewritePathsBy { handler?: CommitAndPathToStringHandler }
 export const defaultCommitURLHandler = (commit: Commit) => `${commit.repo_url}/commit/${commit.hash}`
 export const defaultReleaseTagURLHandler = (commit: Commit) => `${commit.repo_url}/releases/tag/${commit.tag}`
 export const defaultReleaseTagsURLHandler = (commit: Commit) => commit.tags?.map(tag => `${commit.repo_url}/releases/tag/${tag}`)
+export const defaultCommitHashDigits = 7
 
 export async function returnOrResolvePromise<T>(val: T | Promise<T>) {
   if (!(val instanceof Promise))
@@ -263,6 +264,7 @@ export async function parseCommits(
   getReleaseTagURL: CommitToStringHandler,
   getReleaseTagsURL: CommitToStringsHandler,
   optsRewritePathsBy?: RewritePathsBy,
+  commitHashDigits?: number,
 ): Promise<Commit[]> {
   rawLogs = rawLogs.filter(log => !!log)
 
@@ -278,6 +280,7 @@ export async function parseCommits(
       author_name,
       author_email,
       author_avatar: '',
+      commitHashDigits,
     }
 
     // rewrite path

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

@@ -109,6 +109,11 @@ export interface GitChangelogOptions {
    * The maximum number of git logs to fetch.
    */
   maxGitLogCount?: number
+  /**
+   * digits of commit hash which will be rendered in `Changelog` section
+   * @default 7
+   */
+  commitHashDigits?: number
   /**
    * The maximum number of concurrent processes to fetch git logs.
    *

packages/vitepress-plugin-graph-view/src/client/components/GraphView.vue

@@ -119,8 +119,11 @@ async function render() {
     return
 
   // Specify the color scale.
-  const color = scaleOrdinal([document.body.computedStyleMap().get('--vp-c-brand-2')!.toString(), ...schemeAccent])
-
+  // ! Since firefox does not support computedStyleMap yet
+  // ! see https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap#browser_compatibility
+  // ! we need use getComputedStyle & getPropertyValue instead
+  const vitepressBrandColor2 = getComputedStyle(document.body).getPropertyValue('--vp-c-brand-2')?.toString() || ''
+  const color = scaleOrdinal([vitepressBrandColor2, ...schemeAccent])
   // Create a simulation with several forces.
   const simulation = forceSimulation(nodes)
     .force('link', forceLink(links).id(d => (d as Node).id))