feat(plugin-git): refactor and add composables

Author: Mister-Hope

plugins/development/plugin-git/src/client/components/Contributors.ts

@@ -1,22 +1,19 @@
 import { useToggle } from '@vueuse/core'
 import type { FunctionalComponent } from 'vue'
-import { computed, defineComponent, h } from 'vue'
-import { usePageData, usePageFrontmatter, usePageLang } from 'vuepress/client'
-import type {
-  GitChangelog,
-  GitPluginFrontmatter,
-  GitPluginPageData,
-} from '../../shared/index.js'
-import { useGitLocaleConfig } from '../composables/index.js'
+import { defineComponent, h } from 'vue'
+import type { GitChangelogItem } from '../composables/index.js'
+import {
+  useChangelog,
+  useGitLocaleConfig,
+  useLastUpdated,
+} from '../composables/index.js'
 import { VPHeader } from './VPHeader.js'
 
 import '../styles/vars.css'
 import '../styles/changelog.css'
 
-type ResolvedChangelog = Omit<GitChangelog, 'date'> & { datetime: string }
-
-export const Changelog = defineComponent({
-  name: 'Changelog',
+export const GitChangelog = defineComponent({
+  name: 'GitChangelog',
 
   props: {
     /** Title of changelog */
@@ -30,55 +27,25 @@ export const Changelog = defineComponent({
   },
 
   setup(props) {
+    const changelog = useChangelog()
     const locale = useGitLocaleConfig()
-    const frontmatter = usePageFrontmatter<GitPluginFrontmatter>()
-    const page = usePageData<GitPluginPageData>()
-    const lang = usePageLang()
-
-    const list = computed<ResolvedChangelog[]>(() => {
-      if (frontmatter.value.changelog === false) return []
-
-      const formatter = new Intl.DateTimeFormat(lang.value, {
-        dateStyle: 'short',
-      })
-
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      return (page.value.git?.changelog ?? []).map(({ date, ...item }) => {
-        const datetime = formatter.format(date)
-        return { datetime, ...item }
-      })
-    })
-
-    const latestUpdated = computed(() => {
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      const latest = (page.value.git?.changelog ?? [])[0]
-
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (!latest) return ''
-
-      const formatter = new Intl.DateTimeFormat(lang.value, {
-        dateStyle: 'short',
-        timeStyle: 'short',
-      })
-      return formatter.format(latest.date)
-    })
+    const latestUpdated = useLastUpdated()
 
     const [active, toggleActive] = useToggle()
 
     const ChangelogHeader: FunctionalComponent = () =>
       h('div', { class: 'changelog-header', onClick: () => toggleActive() }, [
         h('div', { class: 'latest-updated' }, [
           h('span', { class: 'vpi-changelog' }),
-          h('span', [locale.value.latestUpdateAt, ' ']),
-          h('span', { 'data-allow-mismatch': '' }, latestUpdated.value),
+          h('span', { 'data-allow-mismatch': '' }, latestUpdated.value!.text),
         ]),
         h('div', [
           h('span', { class: 'vpi-changelog-menu' }),
           h('span', locale.value.viewChangelog),
         ]),
       ])
 
-    const ReleaseTag: FunctionalComponent<{ item: ResolvedChangelog }> = ({
+    const ReleaseTag: FunctionalComponent<{ item: GitChangelogItem }> = ({
       item,
     }) =>
       h(
@@ -89,12 +56,12 @@ export const Changelog = defineComponent({
           h('span', { 'class': 'datetime', 'data-allow-mismatch': '' }, [
             locale.value.timeOn,
             ' ',
-            item.datetime,
+            item.date,
           ]),
         ]),
       )
 
-    const Commit: FunctionalComponent<{ item: ResolvedChangelog }> = ({
+    const Commit: FunctionalComponent<{ item: GitChangelogItem }> = ({
       item,
     }) =>
       h('li', { class: 'changelog commit' }, [
@@ -113,12 +80,12 @@ export const Changelog = defineComponent({
         h('span', { 'class': 'datetime', 'data-allow-mismatch': '' }, [
           locale.value.timeOn || 'on',
           ' ',
-          item.datetime,
+          item.date,
         ]),
       ])
 
     return () =>
-      list.value.length
+      changelog.value.length
         ? [
             h(VPHeader, {
               level: props.headerLevel,
@@ -130,7 +97,7 @@ export const Changelog = defineComponent({
               h(ChangelogHeader),
 
               h('ul', { class: 'changelog-list' }, [
-                list.value.map((item) =>
+                changelog.value.map((item) =>
                   item.tag
                     ? h(ReleaseTag, { item, key: item.tag })
                     : h(Commit, { item, key: item.hash }),

…n-git/src/client/components/Changelog.ts …it/src/client/components/GitChangelog.tsplugins/development/plugin-git/src/client/components/Changelog.ts renamed to plugins/development/plugin-git/src/client/components/GitChangelog.ts plugins/development/plugin-git/src/client/components/Changelog.ts renamed to plugins/development/plugin-git/src/client/components/GitChangelog.ts

@@ -0,0 +1,64 @@
+import type { FunctionalComponent } from 'vue'
+import { defineComponent, h } from 'vue'
+import type { GitContributorInfo } from '../../shared/index.js'
+import { useContributors, useGitLocaleConfig } from '../composables/index.js'
+import { VPHeader } from './VPHeader.js'
+
+import '../styles/contributors.css'
+
+export const GitContributor: FunctionalComponent<GitContributorInfo> = ({
+  name,
+  url,
+  avatar,
+}) =>
+  h(
+    url ? 'a' : 'span',
+    {
+      href: url,
+      target: '_blank',
+      rel: 'noreferrer',
+      class: 'vp-contributor',
+    },
+    [
+      avatar
+        ? h('img', { src: avatar, alt: name, class: 'vp-contributor-avatar' })
+        : null,
+      h('span', { class: 'vp-contributor-name' }, name),
+    ],
+  )
+
+export const GitContributors = defineComponent({
+  name: 'GitContributors',
+
+  props: {
+    /** Contributor title */
+    title: String,
+
+    /** header level of contributor title */
+    headerLevel: {
+      type: Number,
+      default: 2,
+    },
+  },
+
+  setup(props) {
+    const contributors = useContributors()
+    const locale = useGitLocaleConfig()
+
+    return () =>
+      contributors.value.length
+        ? [
+            h(VPHeader, {
+              level: props.headerLevel,
+              anchor: 'doc-contributors',
+              text: props.title || locale.value.contributors,
+            }),
+            h(
+              'div',
+              { class: 'vp-contributors' },
+              contributors.value.map((item) => h(GitContributor, item)),
+            ),
+          ]
+        : null
+  },
+})

plugins/development/plugin-git/src/client/components/GitContributors.ts

@@ -1,3 +1,3 @@
-export * from './Contributors.js'
-export * from './Changelog.js'
+export * from './GitContributors.js'
+export * from './GitChangelog.js'
 export * from './VPHeader.js'

plugins/development/plugin-git/src/client/components/index.ts

@@ -1 +1,4 @@
+export * from './useChangelog.js'
+export * from './useContributors.js'
 export * from './useGitLocales.js'
+export * from './useLastUpdated.js'

plugins/development/plugin-git/src/client/composables/index.ts

@@ -0,0 +1,32 @@
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
+import { usePageData, usePageFrontmatter, usePageLang } from 'vuepress/client'
+import type {
+  GitChangelogInfo,
+  GitPluginFrontmatter,
+  GitPluginPageData,
+} from '../../shared/index.js'
+
+export interface GitChangelogItem extends GitChangelogInfo {
+  date: string
+}
+
+export const useChangelog = (): ComputedRef<GitChangelogItem[]> => {
+  const frontmatter = usePageFrontmatter<GitPluginFrontmatter>()
+  const lang = usePageLang()
+  const page = usePageData<GitPluginPageData>()
+
+  return computed(() => {
+    if (frontmatter.value.changelog === false) return []
+
+    const formatter = new Intl.DateTimeFormat(lang.value, {
+      dateStyle: 'short',
+    })
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    return (page.value.git?.changelog ?? []).map((item) => ({
+      date: formatter.format(item.time),
+      ...item,
+    }))
+  })
+}

plugins/development/plugin-git/src/client/composables/useChangelog.ts

@@ -0,0 +1,20 @@
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
+import { usePageData, usePageFrontmatter } from 'vuepress/client'
+import type {
+  GitContributorInfo,
+  GitPluginFrontmatter,
+  GitPluginPageData,
+} from '../../shared/index.js'
+
+export const useContributors = (): ComputedRef<GitContributorInfo[]> => {
+  const frontmatter = usePageFrontmatter<GitPluginFrontmatter>()
+  const page = usePageData<GitPluginPageData>()
+
+  return computed(() => {
+    if (frontmatter.value.contributors === false) return []
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    return page.value.git?.contributors ?? []
+  })
+}

plugins/development/plugin-git/src/client/composables/useContributors.ts

@@ -0,0 +1,38 @@
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
+import { usePageData, usePageLang } from 'vuepress/client'
+import type { GitPluginPageData } from '../../shared/index.js'
+import { useGitLocaleConfig } from './useGitLocales.js'
+
+export interface LastUpdated {
+  date: Date
+  iso: string
+  text: string
+}
+
+export const useLastUpdated = (): ComputedRef<LastUpdated | null> => {
+  const lang = usePageLang()
+  const locale = useGitLocaleConfig()
+  const page = usePageData<GitPluginPageData>()
+
+  return computed(() => {
+    const timeStamp =
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      page.value.git?.updatedTime ?? page.value.git?.changelog?.[0].time
+
+    if (!timeStamp) return null
+
+    const date = new Date(timeStamp)
+
+    const formatted = new Intl.DateTimeFormat(lang.value, {
+      dateStyle: 'short',
+      timeStyle: 'short',
+    }).format(timeStamp)
+
+    return {
+      date,
+      iso: date.toISOString(),
+      text: `${locale.value.latestUpdateAt} ${formatted}`,
+    }
+  })
+}