feat(git-changelog): new options for displaying commits in relative d…

…istance from now (#255)

Signed-off-by: Neko Ayaka <neko@ayaka.moe>

docs/.vitepress/theme/index.ts

@@ -76,6 +76,7 @@ export default defineThemeUnconfig({
               username: 'northword',
             },
           ],
+          commitsRelativeTime: true,
         },
       },
     }),

docs/pages/en/integrations/vitepress-plugin-git-changelog/configure-ui.md

@@ -260,6 +260,11 @@ export interface Options {
    * @default 7
    */
   numCommitHashLetters?: number
+  /**
+   * Whether to display the relative time of the commit
+   * in the format as 'x days ago' or 'x hours ago'
+   */
+  commitsRelativeTime?: boolean
 }
 ```
 

docs/pages/zh-CN/integrations/vitepress-plugin-git-changelog/configure-ui.md

@@ -260,6 +260,11 @@ export interface Options {
    * @default 7
    */
   numCommitHashLetters?: number
+  /**
+   * Whether to display the relative time of the commit
+   * in the format as 'x days ago' or 'x hours ago'
+   */
+  commitsRelativeTime?: boolean
 }
 ```
 

packages/unconfig-vitepress/src/plugins/nolebase/index.ts

@@ -99,6 +99,7 @@ const defaultOptions: NolebasePluginPresetOptions = {
     enable: true,
     options: {
       mapContributors: [],
+      commitsRelativeTime: true,
     },
   },
   graphView: {

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

@@ -16,18 +16,47 @@ import { defaultEnLocale, defaultLocales } from '../locales'
 import CommitRegularLine from './CommitRegularLine.vue'
 import CommitTagLine from './CommitTagLine.vue'
 
-const toggleViewMore = ref(false)
-// The order of commits, defaults to true (descending order)
-const isDescending = ref(true)
-
 const options = defu(inject(InjectionKey, {}), defaultOptions)
 
-const { lang, page } = useData()
 const { t } = useI18n()
+const { lang, page } = useData()
 const { commits, update } = useCommits(page)
 
+// The order of commits, defaults to true (descending order)
+const isDescending = ref(true)
+const toggleViewMore = ref(false)
 const lastChangeDate = ref<Date>(commits.value[0]?.date_timestamp ? toDate(commits.value[0]?.date_timestamp) : new Date())
 
+const locale = computed<Locale>(() => {
+  if (!options.locales || typeof options.locales === 'undefined')
+    return defaultLocales[lang.value] || defaultEnLocale || {}
+
+  return options.locales[lang.value] || defaultEnLocale || {}
+})
+
+const isFreshChange = computed(() => {
+  if (!lastChangeDate.value)
+    return false
+
+  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()
+})
+
+onMounted(() => {
+  lastChangeDate.value = commits.value[0]?.date_timestamp ? toDate(commits.value[0]?.date_timestamp) : new Date()
+})
+
+watch(commits, () => {
+  lastChangeDate.value = commits.value[0]?.date_timestamp ? toDate(commits.value[0]?.date_timestamp) : new Date()
+})
+
 onMounted(() => {
   if (import.meta.hot) {
     import.meta.hot.send('nolebase-git-changelog:client-mounted', {
@@ -61,36 +90,6 @@ onMounted(() => {
     })
   }
 })
-
-onMounted(() => {
-  lastChangeDate.value = commits.value[0]?.date_timestamp ? toDate(commits.value[0]?.date_timestamp) : new Date()
-})
-
-watch(commits, () => {
-  lastChangeDate.value = commits.value[0]?.date_timestamp ? toDate(commits.value[0]?.date_timestamp) : new Date()
-})
-
-const locale = computed<Locale>(() => {
-  if (!options.locales || typeof options.locales === 'undefined')
-    return defaultLocales[lang.value] || defaultEnLocale || {}
-
-  return options.locales[lang.value] || defaultEnLocale || {}
-})
-
-const isFreshChange = computed(() => {
-  if (!lastChangeDate.value)
-    return false
-
-  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>

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

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import { computed, inject } from 'vue'
 import { toDate } from 'date-fns'
+import { useData } from 'vitepress'
 import { defu } from 'defu'
-import { inject } from 'vue'
 
 import { useI18n } from '../composables/i18n'
-import type { Commit } from '../types'
-import { renderCommitMessage } from '../utils'
+import type { Commit, Locale } from '../types'
+import { formatDistanceToNowFromValue, renderCommitMessage } from '../utils'
+import { defaultEnLocale, defaultLocales } from '../locales'
 import { InjectionKey, defaultNumCommitHashLetters, defaultOptions } from '../constants'
 
 const props = defineProps<{
@@ -15,6 +17,26 @@ const props = defineProps<{
 const options = defu(inject(InjectionKey, {}), defaultOptions)
 
 const { t } = useI18n()
+const { lang } = useData()
+
+const locale = computed<Locale>(() => {
+  if (!options.locales || typeof options.locales === 'undefined')
+    return defaultLocales[lang.value] || defaultEnLocale || {}
+
+  return options.locales[lang.value] || defaultEnLocale || {}
+})
+
+function formatCommittedOn(timestamp: number): string {
+  const date = toDate(timestamp)
+  let dateStr = date.toLocaleDateString()
+
+  if (options.commitsRelativeTime) {
+    dateStr = formatDistanceToNowFromValue(date, locale.value.changelog?.lastEditedDateFnsLocaleName || lang.value || 'enUS')
+  }
+
+  return t('committedOn', { props: { date: dateStr }, omitEmpty: true })
+    || t('changelog.committedOn', { props: { date: dateStr } })
+}
 </script>
 
 <template>
@@ -34,7 +56,7 @@ const { t } = useI18n()
       <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 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() } }) }}
+          {{ formatCommittedOn(commit.date_timestamp) }}
         </span>
       </ClientOnly>
     </span>

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

@@ -1,14 +1,41 @@
 <script setup lang="ts">
+import { computed, inject } from 'vue'
 import { toDate } from 'date-fns'
+import { useData } from 'vitepress'
+import { defu } from 'defu'
 
-import type { Commit } from '../types'
+import type { Commit, Locale } from '../types'
 import { useI18n } from '../composables/i18n'
+import { formatDistanceToNowFromValue } from '../utils'
+import { defaultEnLocale, defaultLocales } from '../locales'
+import { InjectionKey, defaultOptions } from '../constants'
 
 const props = defineProps<{
   commit: Commit
 }>()
 
+const options = defu(inject(InjectionKey, {}), defaultOptions)
+
 const { t } = useI18n()
+const { lang } = useData()
+
+const locale = computed<Locale>(() => {
+  if (!options.locales || typeof options.locales === 'undefined')
+    return defaultLocales[lang.value] || defaultEnLocale || {}
+
+  return options.locales[lang.value] || defaultEnLocale || {}
+})
+
+function formatCommittedOn(timestamp: number): string {
+  const date = toDate(timestamp)
+  let dateStr = date.toLocaleDateString()
+  if (options.commitsRelativeTime) {
+    dateStr = formatDistanceToNowFromValue(date, locale.value.changelog?.lastEditedDateFnsLocaleName || lang.value || 'enUS')
+  }
+
+  return t('committedOn', { props: { date: dateStr }, omitEmpty: true })
+    || t('changelog.committedOn', { props: { date: dateStr } })
+}
 </script>
 
 <template>
@@ -26,7 +53,7 @@ const { t } = useI18n()
     </span>
     <ClientOnly>
       <span class="text-xs opacity-50" :title="toDate(props.commit.date_timestamp).toString()">
-        {{ t('committedOn', { props: { date: toDate(props.commit.date_timestamp).toLocaleDateString() }, omitEmpty: true }) || t('changelog.committedOn', { props: { date: toDate(props.commit.date_timestamp).toLocaleDateString() } }) }}
+        {{ formatCommittedOn(props.commit.date_timestamp) }}
       </span>
     </ClientOnly>
   </div>

packages/vitepress-plugin-git-changelog/src/client/composables/commits.ts

@@ -5,7 +5,7 @@ import Changelog from 'virtual:nolebase-git-changelog'
 import type { Commit } from '../../types'
 
 export function useCommits(pageData: Ref<PageData>) {
-  const gitChangelog = ref<typeof Changelog>(Changelog)
+  const gitChangelog = ref<{ commits: Commit[] }>(Changelog)
   if (!gitChangelog.value)
     gitChangelog.value = { commits: [] }
 

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

@@ -126,6 +126,11 @@ export interface Options {
    * @default 7
    */
   numCommitHashLetters?: number
+  /**
+   * Whether to display the relative time of the commit
+   * in the format as 'x days ago' or 'x hours ago'
+   */
+  commitsRelativeTime?: boolean
   /**
    * Whether to hide the git-changelog h2 header
    */

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

@@ -34,7 +34,7 @@ export function formatDistanceToNowFromValue(value: Date, localeName = 'enUS') {
     })
   }
   catch (err) {
-    return value
+    return value.toLocaleDateString()
   }
 }