feat(docs-contributors): 文档添加贡献者信息

@antv/gatsby-theme-antv/gatsby-node.js

@@ -423,10 +423,16 @@ exports.sourceNodes = ({ actions }) => {
   const { createTypes } = actions;
 
   createTypes(`
+    type Contributor {
+      author: String
+      avatar: String
+      github: String
+    }
     type MarkdownRemarkFrontmatter {
       icon: String
       order: Int
       redirect_from: [String]
+      contributors: [Contributor]
     }
 
     type MarkdownRemark {

@antv/gatsby-theme-antv/site/common.json

@@ -3,6 +3,7 @@
   "周边生态": "Ecosystem",
   "搜索…": "Search...",
   "在 GitHub 上编辑": "Edit on GitHub",
+  "贡献者": "Contributors",
   "演示": "Examples",
   "代码演示": "Examples",
   "设计指引": "Design Guide",

@antv/gatsby-theme-antv/site/components/Contributors.module.less

@@ -0,0 +1,7 @@
+.docs-contributors {
+  display: inline-block;
+
+  img {
+    cursor: pointer;
+  }
+}

@antv/gatsby-theme-antv/site/components/Contributors.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import _ from 'lodash';
+import { Avatar, Tooltip } from 'antd';
+import styles from './Contributors.module.less';
+
+type Props = {
+  contributors: Array<{
+    author?: string;
+    avatar: string;
+    github: string;
+  }>;
+  style?: React.CSSProperties;
+};
+
+const Contributors: React.FC<Props> = (props) => {
+  const { contributors, style } = props;
+
+  const openGithub = (githubId: string) => {
+    window.open(`https://github.com/${githubId}`);
+  };
+
+  return (
+    <div className={styles.docsContributors} style={style || {}}>
+      {_.map(contributors, ({ author, avatar, github }) => {
+        return (
+          <Tooltip title={author}>
+            <span onClick={() => openGithub(github)}>
+              <Avatar size={24} src={avatar} />
+            </span>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Contributors;

@antv/gatsby-theme-antv/site/templates/document.tsx

@@ -28,6 +28,7 @@ import NavigatorBanner from '../components/NavigatorBanner';
 import SEO from '../components/Seo';
 import CustomTag from '../components/CustomTag';
 import MdPlayground from '../components/MdPlayground';
+import Contributors from '../components/Contributors';
 import { usePrevAndNext } from '../hooks';
 import { capitalize } from '../utils';
 import styles from './markdown.module.less';
@@ -435,6 +436,8 @@ export default function Template({
             </h1>
             <div className={styles.meta}>
               <ReadingTime readingTime={readingTime} />
+              <span className={styles.contributorsLabel}>{t('贡献者')}:</span>
+              <Contributors contributors={frontmatter.contributors} />
             </div>
             <div className={styles.content}>{renderAst(htmlAst)}</div>
             <div>
@@ -482,6 +485,11 @@ export const pageQuery = graphql`
       }
       frontmatter {
         title
+        contributors {
+          author
+          github
+          avatar
+        }
       }
       parent {
         ... on File {

@antv/gatsby-theme-antv/site/templates/markdown.module.less

@@ -228,6 +228,10 @@
       .contentReset;
     }
   }
+
+  .contributors-label {
+    margin: 0 8px;
+  }
 }
 
 // reference yuque UI

example/docs/api/g2plot/scatter.en.md

@@ -0,0 +1,18 @@
+---
+title: Scatter
+order: 1
+contributors:
+  [
+    {
+      author: '新茗',
+      github: 'visiky',
+      avatar: 'https://gw.alipayobjects.com/zos/antfincdn/KAeYPA3TV0/avatar.jpeg',
+    },
+  ]
+---
+
+### 图表容器
+
+`markdown:docs/common/chart-options.en.md`
+
+<playground path='basic/demo/ts-demo.ts' rid='rect'></playground>

example/docs/api/g2plot/scatter.zh.md

@@ -0,0 +1,18 @@
+---
+title: 散点图
+order: 1
+contributors:
+  [
+    {
+      author: '新茗',
+      github: 'visiky',
+      avatar: 'https://gw.alipayobjects.com/zos/antfincdn/KAeYPA3TV0/avatar.jpeg',
+    },
+  ]
+---
+
+### 图表容器
+
+`markdown:docs/common/chart-options.zh.md`
+
+<playground path='basic/demo/ts-demo.ts' rid='rect'></playground>