docs: update gen changelog add to docs

docs/.vitepress/components/Changelog.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+// @ts-expect-error virtual
+import changelog from '/virtual-changelog'
+import { computed } from 'vue'
+import { renderCommitMessage } from '../theme/utils'
+import funcUtils from '../../../scripts/funcUtils.json';
+
+const props = defineProps<{ fn: string }>()
+const info = computed(() => funcUtils.find(i => i.name === props.fn)) as any;
+
+const allCommits = changelog as any[]
+
+
+const names = computed(() => [props.fn, ...(info.value?.alias || [])]);
+
+const commits = computed(() => {
+  const related = allCommits
+    .filter(c => c.version || c.functions?.some((i: any) => names.value.includes(i)))
+
+  return related.filter((i, idx) => {
+    if (i.version && (!related[idx + 1] || related[idx + 1]?.version))
+      return false
+    return true
+  })
+})
+</script>
+
+<template>
+  <em v-if="!commits.length" opacity="70">No recent changes</em>
+
+  <div v-if="commits.length" class="grid grid-cols-[30px_auto] gap-1.5 children:my-auto changeLog">
+    <template v-for="(commit, idx) of commits" :key="commit.hash">
+      <template v-if="idx === 0 && !commit.version">
+        <div m="t-1" />
+        <div m="t-1" />
+        <div class="m-auto inline-flex bg-gray-400/10 w-7 h-7 rounded-full text-sm opacity-90">
+          <octicon-git-pull-request-draft-16 m="auto" />
+        </div>
+        <div>
+          <code>Pending for release...</code>
+        </div>
+      </template>
+      <template v-if="commit.version">
+        <div m="t-1" />
+        <div m="t-1" />
+        <div class="m-auto inline-flex justify-center items-center bg-gray-400/10 w-7 h-7 rounded-full text-sm opacity-90">
+          <svg viewBox="0 0 16 16" width="1.2em" height="1.2em" m="auto" style="display: inline-block;"><path fill="currentColor" d="M14.064 0h.186C15.216 0 16 .784 16 1.75v.186a8.75 8.75 0 0 1-2.564 6.186l-.458.459q-.472.471-.979.904v3.207c0 .608-.315 1.172-.833 1.49l-2.774 1.707a.75.75 0 0 1-1.11-.418l-.954-3.102a1 1 0 0 1-.145-.125L3.754 9.816a1 1 0 0 1-.124-.145L.528 8.717a.75.75 0 0 1-.418-1.11l1.71-2.774A1.75 1.75 0 0 1 3.31 4h3.204q.433-.508.904-.979l.459-.458A8.75 8.75 0 0 1 14.064 0M8.938 3.623h-.002l-.458.458c-.76.76-1.437 1.598-2.02 2.5l-1.5 2.317l2.143 2.143l2.317-1.5c.902-.583 1.74-1.26 2.499-2.02l.459-.458a7.25 7.25 0 0 0 2.123-5.127V1.75a.25.25 0 0 0-.25-.25h-.186a7.25 7.25 0 0 0-5.125 2.123M3.56 14.56c-.732.732-2.334 1.045-3.005 1.148a.23.23 0 0 1-.201-.064a.23.23 0 0 1-.064-.201c.103-.671.416-2.273 1.15-3.003a1.502 1.502 0 1 1 2.12 2.12m6.94-3.935q-.132.09-.266.175l-2.35 1.521l.548 1.783l1.949-1.2a.25.25 0 0 0 .119-.213ZM3.678 8.116L5.2 5.766q.087-.135.176-.266H3.309a.25.25 0 0 0-.213.119l-1.2 1.95ZM12 5a1 1 0 1 1-2 0a1 1 0 0 1 2 0"></path></svg>
+        </div>
+        <div>
+          <a
+            :href="`https://github.com/agiletech-web-dev/js-utils-es/releases/tag/${commit.version}`"
+            target="_blank"
+          >
+            <code class="!text-primary font-bold">{{ commit.version }}</code>
+          </a>
+          <span class="opacity-50 text-xs"> on {{ new Date(commit.date).toLocaleDateString() }}</span>
+        </div>
+      </template>
+      <template v-else>
+        <svg viewBox="0 0 16 16" width="1.2em" height="1.2em" class="m-auto transform rotate-90 opacity-30" style="display: inline-block;"><path fill="currentColor" d="M11.93 8.5a4.002 4.002 0 0 1-7.86 0H.75a.75.75 0 0 1 0-1.5h3.32a4.002 4.002 0 0 1 7.86 0h3.32a.75.75 0 0 1 0 1.5Zm-1.43-.75a2.5 2.5 0 1 0-5 0a2.5 2.5 0 0 0 5 0"></path></svg>
+        <div>
+          <a :href="`https://github.com/agiletech-web-dev/js-utils-es/commit/${commit.hash}`" target="_blank">
+            <code class="!text-xs !text-$vp-c-text-2 !hover:text-primary">{{ commit.hash.slice(0, 5) }}</code>
+          </a>
+          <span text="sm">
+            -
+            <span v-html="renderCommitMessage(commit.message.replace(`(${fn})`, ''))" />
+          </span>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>

docs/.vitepress/components/Contributors.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// @ts-expect-error missing types
+import _contributors from '/virtual-contributors'
+import { computed } from 'vue'
+
+import { generateGithubAvatar, generateGithubLink, generateUserName } from '../theme/utils';
+
+const props = defineProps<{ fn: string }>()
+
+const contributors = computed(() => _contributors[props.fn] || [] as any[])
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-4 pt-2">
+    <em v-if="!contributors.length" opacity="70">No recent changes</em>
+
+    <div v-for="c of contributors" :key="c.hash" class="flex gap-2 items-center">
+      <a :href="generateGithubLink(c.name)" target="_blank" rel="noopener noreferrer" class="flex gap-2 items-center">
+        <img :src="generateGithubAvatar(c.name, c.hash)" class="w-8 h-8 rounded-full">
+        {{ generateUserName(c.name) }}
+      </a>
+    </div>
+  </div>
+</template>

docs/.vitepress/plugins/changelog.ts

@@ -0,0 +1,17 @@
+import type { Plugin } from 'vite'
+
+const ID = '/virtual-changelog'
+
+export function ChangeLog(data: any[]): Plugin {
+  return {
+    name: 'js-utils-changelog',
+    resolveId(id) {
+      return id === ID ? ID : null
+    },
+    load(id) {
+      if (id !== ID)
+        return null
+      return `export default ${JSON.stringify(data)}`
+    },
+  }
+}

docs/.vitepress/plugins/contributors.ts

@@ -0,0 +1,17 @@
+import type { Plugin } from 'vite'
+
+const ID = '/virtual-contributors'
+
+export function Contributors(data: Record<string, any[]>): Plugin {
+  return {
+    name: 'vueusjs-utils-contributors',
+    resolveId(id) {
+      return id === ID ? ID : null
+    },
+    load(id) {
+      if (id !== ID)
+        return null
+      return `export default ${JSON.stringify(data)}`
+    },
+  }
+}

docs/.vitepress/plugins/markdownTransform.ts

@@ -65,8 +65,17 @@ export async function getFunctionMarkdown(pkg: string, name: string) {
     .map(i => `[${i![0]}](${i![1]})`).join(' • ')
 
   const sourceSection = `## Source\n\n${links}\n`
+  const ContributorsSection = `
+## Contributors
 
-  const footer = `\n${sourceSection}`
+<Contributors fn="${fileNameTs}" />
+  `
+  const changelogSection = `
+## Changelog
+
+<Changelog fn="${fileNameTs}" />
+`
+  const footer = `\n${sourceSection}\n${ContributorsSection}\n${changelogSection}\n`
 
   return footer;
 }

docs/.vitepress/theme/index.ts

@@ -1,28 +1,21 @@
 import Theme from 'vitepress/theme'
-import { NolebaseGitChangelogPlugin } from '@nolebase/vitepress-plugin-git-changelog/client'
 import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import type { EnhanceAppContext } from 'vitepress'
-import Layout from './Layout.vue'
 import 'uno.css'
 import './style.css'
-import '@nolebase/vitepress-plugin-git-changelog/client/style.css'
+// import '@nolebase/vitepress-plugin-git-changelog/client/style.css'
 import '@shikijs/vitepress-twoslash/style.css'
+import Contributors from '../components/Contributors.vue'
+import Changelog from '../components/Changelog.vue'
+import Layout from './Layout.vue'
 
 export default {
   ...Theme,
   Layout,
   enhanceApp({ app }: EnhanceAppContext) {
-    app.use(NolebaseGitChangelogPlugin, {
-      mapAuthors: [
-        {
-          name: 'hunghg255',
-          username: 'hunghg255',
-          mapByNameAliases: ['Hung Hoang', 'Hoang Hung'],
-          mapByEmailAliases: ['[email protected]'],
-        },
-      ],
-      numCommitHashLetters: 7,
-    })
+    app.component('Contributors', Contributors)
+    app.component('Changelog', Changelog)
+
     app.use(TwoslashFloatingVue)
   },
 }

docs/.vitepress/theme/style.css

@@ -185,3 +185,9 @@
 .VPHomeHero .VPImage {
   border-radius: 16px;
 }
+
+.changeLog {
+  padding: 16px;
+  border-radius: 12px;
+  background: var(--vp-c-bg-soft);
+}

docs/.vitepress/theme/utils.ts

@@ -0,0 +1,65 @@
+export function renderMarkdown(markdownText = '') {
+  const htmlText = markdownText
+    .replace(/^### (.*$)/gm, '<h3>$1</h3>')
+    .replace(/^## (.*$)/gm, '<h2>$1</h2>')
+    .replace(/^# (.*$)/gm, '<h1>$1</h1>')
+    .replace(/^> (.*$)/gm, '<blockquote>$1</blockquote>')
+    .replace(/\*\*(.*)\*\*/g, '<b>$1</b>')
+    .replace(/\*(.*)\*/g, '<i>$1</i>')
+    .replace(/!\[(.*?)\]\((.*?)\)/g, '<img alt=\'$1\' src=\'$2\' />')
+    .replace(/\[(.*?)\]\((.*?)\)/g, '<a href=\'$2\'>$1</a>')
+    .replace(/`(.*?)`/g, '<code>$1</code>')
+    .replace(/\n$/gm, '<br />')
+
+  return htmlText.trim()
+}
+
+export function renderCommitMessage(msg: string) {
+  return renderMarkdown(msg)
+    .replace(/#(\d+)/g, '<a href=\'https://github.com/agiletech-web-dev/js-utils-es/issues/$1\'>#$1</a>')
+}
+
+const mapAuthors = [
+  {
+    nameDipslay: 'Hung Hoang',
+    username: 'hunghg255',
+    mapByNameAliases: ['Hung Hoang', 'Hoang Hung'],
+    mapByEmailAliases: ['[email protected]'],
+  },
+];
+
+export function generateGithubAvatar(nameCommit: string, hash: string) {
+  const match = mapAuthors.find((author) => {
+    return author.mapByNameAliases.includes(nameCommit) || author.mapByEmailAliases.includes(nameCommit) || author.username === nameCommit;
+  });
+
+  if (match) {
+    return `https://github.com/${match.username}.png`;
+  }
+
+  return `https://gravatar.com/avatar/${hash}?d=retro`;
+}
+
+export function generateUserName(nameCommit: string) {
+  const match = mapAuthors.find((author) => {
+    return author.mapByNameAliases.includes(nameCommit) || author.mapByEmailAliases.includes(nameCommit) || author.username === nameCommit;
+  });
+
+  if (match) {
+    return match.nameDipslay || nameCommit;
+  }
+
+  return nameCommit;
+}
+
+export function generateGithubLink(nameCommit: string) {
+  const match = mapAuthors.find((author) => {
+    return author.mapByNameAliases.includes(nameCommit) || author.mapByEmailAliases.includes(nameCommit) || author.username === nameCommit;
+  });
+
+  if (match) {
+    return `https://github.com/${match.username}`;
+  }
+
+  return `https://github.com/${nameCommit}`;
+}

docs/package.json

@@ -17,7 +17,6 @@
   "devDependencies": {
     "@nolebase/vitepress-plugin-enhanced-mark": "^2.2.1",
     "@nolebase/vitepress-plugin-enhanced-readabilities": "^2.2.1",
-    "@nolebase/vitepress-plugin-git-changelog": "^2.2.2",
     "@nolebase/vitepress-plugin-highlight-targeted-heading": "^2.2.1",
     "@shikijs/vitepress-twoslash": "^1.10.3",
     "@vitejs/plugin-vue-jsx": "^4.0.0",

docs/vite.config.ts

@@ -1,39 +1,35 @@
 import { defineConfig } from 'vite'
 import Unocss from 'unocss/vite'
 import VueJsx from '@vitejs/plugin-vue-jsx'
-import {
-  GitChangelog,
-  GitChangelogMarkdownSection,
-} from '@nolebase/vitepress-plugin-git-changelog/vite'
-import { MarkdownTransform } from '.vitepress/plugins/markdownTransform'
+import changeLog from '../scripts/changeLog.json';
+import contributions from '../scripts/contributions.json';
+import { ChangeLog } from './.vitepress/plugins/changelog'
+import { Contributors } from './.vitepress/plugins/contributors'
+import { MarkdownTransform } from './.vitepress/plugins/markdownTransform'
 
-const githubRepo = 'agiletech-web-dev/js-utils-es'
-const githubLink: 'https://github.com/agiletech-web-dev/js-utils-es' = `https://github.com/${githubRepo}`
-
-export default defineConfig({
-  plugins: [
-    MarkdownTransform(),
-    VueJsx(),
-    Unocss(),
-    GitChangelog({
-      maxGitLogCount: 2000,
-      repoURL: () => githubLink,
-    }),
-    GitChangelogMarkdownSection(),
-  ],
-  optimizeDeps: {
-    include: [
-      '@nolebase/vitepress-plugin-enhanced-readabilities > @nolebase/ui > @rive-app/canvas',
-    ],
-    exclude: [
-      '@nolebase/vitepress-plugin-enhanced-readabilities/client',
-      'vitepress',
-    ],
-  },
-  ssr: {
-    noExternal: [
-      '@nolebase/vitepress-plugin-enhanced-readabilities',
-      '@nolebase/vitepress-plugin-highlight-targeted-heading',
+export default defineConfig(async () => {
+  return {
+    plugins: [
+      MarkdownTransform(),
+      ChangeLog(changeLog),
+      Contributors(contributions),
+      VueJsx(),
+      Unocss(),
     ],
-  },
+    optimizeDeps: {
+      include: [
+        '@nolebase/vitepress-plugin-enhanced-readabilities > @nolebase/ui > @rive-app/canvas',
+      ],
+      exclude: [
+        '@nolebase/vitepress-plugin-enhanced-readabilities/client',
+        'vitepress',
+      ],
+    },
+    ssr: {
+      noExternal: [
+        '@nolebase/vitepress-plugin-enhanced-readabilities',
+        '@nolebase/vitepress-plugin-highlight-targeted-heading',
+      ],
+    },
+  }
 })

eslint.config.mjs

@@ -7,5 +7,6 @@ export default antfu({
     'style/member-delimiter-style': 'off',
     'ts/ban-ts-comment': 'off',
     'test/consistent-test-it': 'off',
+    'style/eol-last': 'off',
   },
 });

package.json

@@ -203,14 +203,20 @@
     "docs:dev": "pnpm run -C ./docs dev",
     "docs:preview": "pnpm run -C ./docs preview",
     "docs:build": "pnpm run -C ./docs build",
-    "verify-commit": "verify-commit-msg"
+    "verify-commit": "verify-commit-msg",
+    "gen-changelog": "esno ./scripts/genFuncUtils.ts && esno ./scripts/changelog.ts"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.22.0",
+    "@types/md5": "^2.3.5",
     "@types/node": "^18.19.33",
     "bumpp": "^9.4.1",
     "eslint": "^9.7.0",
+    "esno": "^4.7.0",
+    "execa": "^9.3.0",
     "git-scm-hooks": "^0.0.7",
+    "globby": "^14.0.2",
+    "md5": "^2.3.0",
     "tsup": "^8.1.0",
     "typescript": "^5.4.5",
     "verify-commit-msg": "^0.0.10",