From 769d3be23d8a7f649e5c7e7cf8f8b64b5456e92b Mon Sep 17 00:00:00 2001
From: ZhouWei <1244620067@qq.com>
Date: Sat, 12 Aug 2023 01:06:26 +0800
Subject: [PATCH] feat: add contributors list

---
 README-zh_CN.md                               |  8 ++
 README.md                                     |  4 +-
 site/src/components/Contributors/constants.ts |  4 +
 site/src/components/Contributors/index.vue    | 91 +++++++++++++++++++
 site/src/layouts/Demo.vue                     |  3 +
 5 files changed, 108 insertions(+), 2 deletions(-)
 create mode 100644 site/src/components/Contributors/constants.ts
 create mode 100644 site/src/components/Contributors/index.vue

diff --git a/README-zh_CN.md b/README-zh_CN.md
index b13bfeb79b..02cb124018 100644
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -102,3 +102,11 @@ Support us with a monthly donation and help us continue our activities. [[Become
 <a href="https://www.mokeyjay.com" target="_blank"><img  width="64" style="border-radius: 50%;" src="https://www.mokeyjay.com/headimg.png" title="donation by Patreon"></a>
 
 ## [更多赞助者 (通过 Patreon、支付宝、微信、paypal 等等)](https://github.com/vueComponent/ant-design-vue/blob/master/BACKERS.md)
+
+## 贡献者
+
+感谢所有为 ant-design-vue 做出贡献的人!
+
+<a href="https://github.com/vueComponent/ant-design-vue/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=vueComponent/ant-design-vue&max=100&columns=15" />
+</a>
diff --git a/README.md b/README.md
index a72ec80918..00cea269ba 100644
--- a/README.md
+++ b/README.md
@@ -83,6 +83,8 @@ Become a sponsor and get your logo on our README on Github with a link to your s
 
 <a href="http://www.jeecg.com/" target="_blank"><img src="https://aliyuncdn.antdv.com/jeecg-logo.png" height="64"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/9/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/10/avatar.svg"></a>
 
+## [More Sponsor (From Patreon、alipay、wechat、paypal...)](https://github.com/vueComponent/ant-design-vue/blob/master/BACKERS.md)
+
 ## Contributors
 
 Thank you to all the people who already contributed to ant-design-vue!
@@ -91,8 +93,6 @@ Thank you to all the people who already contributed to ant-design-vue!
   <img src="https://contrib.rocks/image?repo=vueComponent/ant-design-vue&max=100&columns=15" />
 </a>
 
-## [More Sponsor (From Patreon、alipay、wechat、paypal...)](https://github.com/vueComponent/ant-design-vue/blob/master/BACKERS.md)
-
 [![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/104172832)
 
 This project is tested with BrowserStack.
diff --git a/site/src/components/Contributors/constants.ts b/site/src/components/Contributors/constants.ts
new file mode 100644
index 0000000000..cbeef08a8d
--- /dev/null
+++ b/site/src/components/Contributors/constants.ts
@@ -0,0 +1,4 @@
+export const REPO_OWNER = 'VueComponent';
+export const REPO_NAME = 'ant-design-vue';
+export const REPO_PATH = `${REPO_OWNER}/${REPO_NAME}`;
+export const REPO_BRANCH = 'main';
diff --git a/site/src/components/Contributors/index.vue b/site/src/components/Contributors/index.vue
new file mode 100644
index 0000000000..755e47184a
--- /dev/null
+++ b/site/src/components/Contributors/index.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+import { useRoute } from 'vue-router';
+import { REPO_PATH } from './constants';
+
+defineProps({
+  isZn: Boolean,
+});
+const route = useRoute();
+const contributors = ref([]);
+const filterData = data => {
+  const arr = [];
+  data.forEach(item => {
+    if (!!item.author?.login || !!item.author?.html_url || !!item.author?.avatar_url) {
+      arr.push({
+        login: item.author.login,
+        url: item.author.html_url,
+        avatar: item.author.avatar_url,
+      });
+    }
+  });
+  contributors.value = arr.reduce((acc, curr) => {
+    if (!acc.find(item => item.login === curr.login)) {
+      acc.push(curr);
+    }
+    return acc;
+  }, []);
+};
+const getContributors = async () => {
+  const path = route.path;
+  const parts = path.split('/');
+  const name = parts[2];
+  const componentName = name.includes('-') ? name.replace('-cn', '') : name;
+  const url = `https://api.github.com/repos/${REPO_PATH}/commits?path=/components/${componentName}`;
+  try {
+    const req = await fetch(url);
+    const res = await req.json();
+    filterData(res);
+  } catch (e) {
+    return null;
+  }
+};
+watchEffect(() => {
+  getContributors();
+});
+</script>
+
+<template>
+  <ul v-if="contributors.length > 0" class="acss-1ppw8kl">
+    <li v-for="item in contributors" :key="item.login">
+      <a-tooltip :title="`${isZn ? '文档贡献者：' : 'contribotors: '}${item.login}`">
+        <a :href="item.url" target="_blank">
+          <a-avatar :src="item.avatar" size="small" />
+        </a>
+      </a-tooltip>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.acss-1ppw8kl {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-top: 120px !important;
+  clear: both;
+}
+
+.acss-1ppw8kl li {
+  height: 24px;
+}
+
+.acss-1ppw8kl li,
+.acss-1ppw8kl .ant-avatar + .ant-avatar {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  -webkit-margin-end: -8px;
+  margin-inline-end: -8px;
+}
+
+.acss-1ppw8kl:hover li,
+.acss-1ppw8kl:hover .ant-avatar {
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+}
+</style>
diff --git a/site/src/layouts/Demo.vue b/site/src/layouts/Demo.vue
index 4c513a5356..f41e0f1af0 100644
--- a/site/src/layouts/Demo.vue
+++ b/site/src/layouts/Demo.vue
@@ -13,18 +13,21 @@
     <slot />
     <!-- <GoogleAds v-if="showAd" :key="`goo-${route.path}`" /> -->
     <section class="markdown api-container" v-html="api"></section>
+    <Contributor :isZn="isZhCN" />
   </article>
 </template>
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
 import { useRoute } from 'vue-router';
 // import GoogleAds from '../components/rice/GoogleAds.vue';
+import Contributor from '../components/Contributors/index.vue';
 
 const showAd = location.host.indexOf('antdv.com') > -1;
 export default defineComponent({
   name: 'Demo',
   components: {
     // GoogleAds,
+    Contributor,
   },
   props: ['pageData', 'isZhCN'],
   setup(props) {