✨ feat(changelog): add changelog style configs (#669)

* ✨ feat(changelog): add configs `showAuthorAvatar` `showSummary` `reduceHeadingLevel` `newlineTimestamp` `addBackToTop` * ✅ test(changelog): fix changelog test * 🛠️ chore(changelog): clean * ✨ feat(changelog): better summary style * ✨ feat(changelog): add summary avatar list * 💄 style(changelog): better summary layout * 🐛 fix(changelog): footer position * 🐛 fix(changelog): fix summary spacing * 💄 style(changelog): fix typo * 📝 docs(changlog): update README.md * ✅ test(changelog): add `finalizeContext` and `transformer` tests
arvinxx · Jun 10, 2023 · f9e6585 · f9e6585
1 parent 678d734
commit f9e6585
Show file tree

Hide file tree

Showing 17 changed files with 446 additions and 51 deletions.
diff --git a/packages/changelog/.changelogrc.js b/packages/changelog/.changelogrc.js
@@ -2,4 +2,7 @@ const base = require('../../.changelogrc');
 
 module.exports = {
   ...base,
+  scopeDisplayName: {
+    '*': 'misc',
+  },
 };
diff --git a/packages/changelog/README.md b/packages/changelog/README.md
@@ -47,15 +47,48 @@ interface ChangelogConfig {
    * title language
    * @default en-US
    */
-  titleLanguage?: 'en-US' | 'zh-CN';
+  titleLanguage?: 'en-US' | 'zh-CN' | 'mix';
   /**
    * whether to show author
    * @default false
    */
   showAuthor?: boolean;
+  /**
+   * whether to show author avatar
+   * @default false
+   */
+  showAuthorAvatar?: boolean;
+  /**
+   * whether to show summary
+   * @default false
+   */
+  showSummary?: boolean;
+  /**
+   * Reduce heading level from # to ##
+   * @default false
+   */
+  reduceHeadingLevel?: boolean;
+  /**
+   * put timestamp to second line
+   * @default false
+   */
+  newlineTimestamp?: boolean;
+  /**
+   * add back to top button
+   * @default false
+   */
+  addBackToTop?: boolean;
 }
 ```
 
+> 👉 Tip: If turn on `back to top` button, should edit `CHANGELOG.md` first like below:
+
+```markdown
+<a name="readme-top"></a>
+
+# Changelog
+```
+
 ## License
 
 [MIT](../../LICENSE) ® Arvin Xu

diff --git a/packages/changelog/package.json b/packages/changelog/package.json
@@ -33,17 +33,18 @@
   "dependencies": {
     "@gitmoji/commit-types": "1.1.5",
     "@gitmoji/parser-opts": "1.4.0",
-    "cosmiconfig": "^7.0.0"
+    "cosmiconfig": "^7"
   },
   "devDependencies": {
-    "@types/conventional-changelog-core": "^4.1.1",
-    "better-than-before": "^1.0.0",
-    "conventional-changelog-core": "^4.2.2",
+    "@types/conventional-changelog-core": "^4",
+    "better-than-before": "^1",
+    "conventional-changelog-core": "^4",
     "conventional-changelog-writer": "^5",
     "conventional-commits-parser": "^3",
-    "git-dummy-commit": "^1.3.0",
-    "shelljs": "^0.8.4",
-    "through2": "^4.0.2"
+    "git-dummy-commit": "^1",
+    "pangu": "^4",
+    "shelljs": "^0",
+    "through2": "^4"
   },
   "publishConfig": {
     "access": "public",

diff --git a/packages/changelog/src/customConfig.ts b/packages/changelog/src/customConfig.ts
@@ -18,6 +18,14 @@ export interface CustomConfig {
    * 是否显示作者
    */
   showAuthor?: boolean;
+  /**
+   * 是否显示作者头像
+   */
+  showAuthorAvatar?: boolean;
+  /**
+   * 是否显示摘要
+   */
+  showSummary?: boolean;
   /**
    * whether to include emoji in title
    */
@@ -26,6 +34,18 @@ export interface CustomConfig {
    * title language
    */
   titleLanguage?: 'en-US' | 'zh-CN';
+  /**
+   * Reduce heading level from # to ##
+   */
+  reduceHeadingLevel?: boolean;
+  /**
+   * put timestamp to second line
+   */
+  newlineTimestamp?: boolean;
+  /**
+   * add back to top button
+   */
+  addBackToTop?: boolean;
 }
 
 const explorer = cosmiconfigSync('changelog');

diff --git a/packages/changelog/src/finalizeContext/__snapshots__/index.test.ts.snap b/packages/changelog/src/finalizeContext/__snapshots__/index.test.ts.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test transformCommitGroups should transform commitGroups correctly 1`] = `
+{
+  "authors": [
+    {
+      "authorEmail": "test@test.com",
+      "authorName": "test",
+      "authorNameEncode": "test",
+    },
+  ],
+  "commitGroups": [
+    {
+      "commits": [
+        {
+          "authorEmail": "test@test.com",
+          "authorName": "test",
+          "authorNameEncode": "test",
+          "first": true,
+          "hash": "1234",
+          "last": true,
+          "scope": "test",
+          "subject": "test commit",
+          "title": "✨ Features",
+        },
+      ],
+      "subtitle": "What's improved",
+      "title": "✨ Features",
+    },
+  ],
+}
+`;
diff --git a/packages/changelog/src/finalizeContext/index.test.ts b/packages/changelog/src/finalizeContext/index.test.ts
@@ -0,0 +1,83 @@
+import type { Context } from 'conventional-changelog-writer';
+import { CustomConfig } from '../customConfig';
+import { typeMap } from '../transformer/typeDisplayName';
+
+describe('test transformCommitGroups', () => {
+  const customConfig: CustomConfig = {
+    scopeDisplayName: {
+      '*': 'all',
+    },
+  };
+  const context: Context = {
+    commitGroups: [
+      {
+        title: '✨ Features',
+        commits: [
+          {
+            hash: '1234',
+            subject: 'test commit',
+            scope: 'test',
+            title: '✨ Features',
+            authorName: 'test',
+            authorEmail: 'test@test.com',
+            authorNameEncode: 'test',
+          },
+        ],
+      },
+    ],
+    authors: [],
+  };
+
+  it('should transform commitGroups correctly', () => {
+    const subCommitScope = customConfig?.scopeDisplayName?.['*'] || '';
+    const authors = {};
+    context.commitGroups = context.commitGroups.map((item) => {
+      const subtitle = Object.values(typeMap).find(
+        (i) =>
+          item.title.includes(i['emoji']) ||
+          item.title.includes(i['en-US']) ||
+          item.title.includes(i['zh-CN']),
+      ).subtitle;
+      let group;
+      let commits = item.commits.sort((a, b) => {
+        if (a.scope === subCommitScope && b.scope === subCommitScope) {
+          return 0;
+        } else if (a.scope === subCommitScope) {
+          return 1;
+        } else if (b.scope === subCommitScope) {
+          return -1;
+        } else {
+          return 0;
+        }
+      });
+      commits = commits.map((c, index) => {
+        if (group !== c.scope) {
+          group = c.scope;
+          c.first = true;
+        } else {
+          c.first = false;
+        }
+        if (!commits[index + 1] || group !== commits[index + 1].scope) {
+          c.last = true;
+        } else {
+          c.last = false;
+        }
+        if (c.authorNameEncode && !authors[c.authorNameEncode]) {
+          authors[c.authorNameEncode] = {
+            authorName: c.authorName,
+            authorEmail: c.authorEmail,
+            authorNameEncode: c.authorNameEncode,
+          };
+        }
+        return c;
+      });
+      return {
+        title: item.title,
+        subtitle,
+        commits,
+      };
+    });
+    context.authors = Object.values(authors);
+    expect(context).toMatchSnapshot();
+  });
+});
diff --git a/packages/changelog/src/finalizeContext/index.ts b/packages/changelog/src/finalizeContext/index.ts
@@ -0,0 +1,55 @@
+import type { Context } from 'conventional-changelog-writer';
+import { CustomConfig } from '../customConfig';
+import { typeMap } from '../transformer/typeDisplayName';
+export default (customConfig: CustomConfig) => (context: Context): Context => {
+  const subCommitScope = customConfig?.scopeDisplayName?.['*'] || '';
+  const authors = {};
+  context.commitGroups = context.commitGroups.map((item) => {
+    const subtitle = Object.values(typeMap).find(
+      (i) =>
+        item.title.includes(i['emoji']) ||
+        item.title.includes(i['en-US']) ||
+        item.title.includes(i['zh-CN']),
+    ).subtitle;
+    let group;
+    let commits = item.commits.sort((a, b) => {
+      if (a.scope === subCommitScope && b.scope === subCommitScope) {
+        return 0;
+      } else if (a.scope === subCommitScope) {
+        return 1;
+      } else if (b.scope === subCommitScope) {
+        return -1;
+      } else {
+        return 0;
+      }
+    });
+    commits = commits.map((c, index) => {
+      if (group !== c.scope) {
+        group = c.scope;
+        c.first = true;
+      } else {
+        c.first = false;
+      }
+      if (!commits[index + 1] || group !== commits[index + 1].scope) {
+        c.last = true;
+      } else {
+        c.last = false;
+      }
+      if (c.authorNameEncode && !authors[c.authorNameEncode]) {
+        authors[c.authorNameEncode] = {
+          authorName: c.authorName,
+          authorEmail: c.authorEmail,
+          authorNameEncode: c.authorNameEncode,
+        };
+      }
+      return c;
+    });
+    return {
+      title: item.title,
+      subtitle,
+      commits,
+    };
+  });
+  context.authors = Object.values(authors);
+  return context;
+};
diff --git a/packages/changelog/src/handleWriterOpts.ts b/packages/changelog/src/handleWriterOpts.ts
@@ -1,28 +1,47 @@
 import type { Options } from 'conventional-changelog-writer';
 import { readFileSync } from 'fs';
 import { resolve } from 'path';
-
 import type { CustomConfig } from './customConfig';
-
+import finalizeContext from './finalizeContext';
 import transformer from './transformer';
 
 const basePath = resolve(__dirname, './templates');
 
 const template = readFileSync(`${basePath}/template.hbs`, 'utf-8');
+const summaryTemplate = readFileSync(`${basePath}/summary-template.hbs`, 'utf-8');
 const header = readFileSync(`${basePath}/header.hbs`, 'utf-8');
+const headerNewlineTimestamp = readFileSync(`${basePath}/header-newline-timestamp.hbs`, 'utf-8');
 const commit = readFileSync(`${basePath}/commit.hbs`, 'utf-8');
 const footer = readFileSync(`${basePath}/footer.hbs`, 'utf-8');
 const author = readFileSync(`${basePath}/author.hbs`, 'utf-8');
-
-export default (customConfig: CustomConfig): Options => ({
-  transform: transformer(customConfig),
-  groupBy: 'type',
-  commitGroupsSort: 'title',
-  commitsSort: ['scope', 'subject'],
-  noteGroupsSort: 'title',
-  mainTemplate: template,
-  headerPartial: header,
-  // 替换 commit.hbs 模板中的 gitUserInfo
-  commitPartial: commit.replace(/{{gitUserInfo}}/g, customConfig.showAuthor ? author : ''),
-  footerPartial: footer,
-});
+const authorAvatar = readFileSync(`${basePath}/author-avatar.hbs`, 'utf-8');
+const backToTop = readFileSync(`${basePath}/back-to-top.hbs`, 'utf-8');
+const reduceHeadingLevel = (skip: boolean, template: string): string => {
+  if (skip) return template;
+  return template.replace(/(^|\n)(#+)/g, (match, p1, p2) => p1 + '#' + p2);
+};
+export default (customConfig: CustomConfig): Options => {
+  const mainTemplate = customConfig.showSummary ? summaryTemplate : template;
+  const commitPartial = commit.replace(
+    /{{gitUserInfo}}/g,
+    customConfig.showAuthor ? (customConfig.showAuthorAvatar ? authorAvatar : author) : '',
+  );
+  const headerPartial = customConfig.newlineTimestamp ? headerNewlineTimestamp : header;
+  const footerPartial = footer.replace(
+    /{{backToTop}}/g,
+    customConfig.addBackToTop ? backToTop : '',
+  );
+  return {
+    transform: transformer(customConfig),
+    groupBy: 'type',
+    commitGroupsSort: 'title',
+    commitsSort: ['scope', 'subject'],
+    noteGroupsSort: 'title',
+    mainTemplate: reduceHeadingLevel(!customConfig.reduceHeadingLevel, mainTemplate),
+    headerPartial: reduceHeadingLevel(!customConfig.reduceHeadingLevel, headerPartial),
+    // 替换 commit.hbs 模板中的 gitUserInfo
+    commitPartial: reduceHeadingLevel(!customConfig.reduceHeadingLevel, commitPartial),
+    footerPartial: reduceHeadingLevel(!customConfig.reduceHeadingLevel, footerPartial),
+    finalizeContext: finalizeContext(customConfig),
+  };
+};
diff --git a/packages/changelog/src/templates/author-avatar.hbs b/packages/changelog/src/templates/author-avatar.hbs
@@ -0,0 +1 @@
+{{#if authorName}} - by [<img width="16" height="16" src="https://avatars.githubusercontent.com/{{authorNameEncode}}" /> **{{authorName}}**](https://github.com/{{authorNameEncode}}){{/if}}
diff --git a/packages/changelog/src/templates/back-to-top.hbs b/packages/changelog/src/templates/back-to-top.hbs
@@ -0,0 +1,5 @@
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>