From b483519646a769922a401ee9c30f7574bb20543d Mon Sep 17 00:00:00 2001
From: ajuner <106791576@qq.com>
Date: Mon, 24 May 2021 23:46:01 +0800
Subject: [PATCH] docs: add user (#72)

* docs: add user

* fix(users): add params

* feat(users): add imgStyle

* Update README.md

* Update USERS.js

* Update README.md

* Update README.en-US.md

* Update update-users.js

Co-authored-by: xrkffgg <xrkffgg@gmail.com>
---
 README.en-US.md        | 91 ++++++++++++++++++++++++------------------
 README.md              | 91 ++++++++++++++++++++++++------------------
 USERS.js               | 20 ++++++++--
 script/update-users.js | 36 +++++++++++++++--
 4 files changed, 152 insertions(+), 86 deletions(-)

diff --git a/README.en-US.md b/README.en-US.md
index 82a4465..ce90774 100644
--- a/README.en-US.md
+++ b/README.en-US.md
@@ -32,98 +32,111 @@ Please leave a message at [**here**](https://github.com/actions-cool/issues-help
 <tr>
   <td align="center" width="180">
     <a href="https://github.com/ant-design/ant-design">
-      <img src="https://avatars1.githubusercontent.com/u/12101536?s=200&v=4" width="46" />
-      <div>ant-design</div>
+      <img src="https://avatars1.githubusercontent.com/u/12101536?s=200&v=4" width="46"/>
     </a>
   </td>
   <td align="center" width="180">
     <a href="https://github.com/ant-design-blazor/ant-design-blazor">
-      <img src="https://raw.githubusercontent.com/ant-design-blazor/ant-design-blazor/7dbee63648e088c73c47eada79c897bc39fc3c26/logo.svg" width="46" />
-      <div>ant-design-blazor</div>
+      <img src="https://raw.githubusercontent.com/ant-design-blazor/ant-design-blazor/7dbee63648e088c73c47eada79c897bc39fc3c26/logo.svg" width="46"/>
     </a>
   </td>
   <td align="center" width="180">
     <a href="https://github.com/vueComponent/ant-design-vue">
-      <img src="https://avatars1.githubusercontent.com/u/32120805?s=200&v=4" width="46" />
-      <div>ant-design-vue</div>
+      <img src="https://avatars1.githubusercontent.com/u/32120805?s=200&v=4" width="46"/>
     </a>
   </td>
   <td align="center" width="180">
     <a href="https://github.com/umijs/dumi">
-      <img src="https://avatars1.githubusercontent.com/u/33895495?s=200&v=4" width="46" />
-      <div>dumi</div>
+      <img src="https://avatars1.githubusercontent.com/u/33895495?s=200&v=4" width="46"/>
     </a>
   </td>
+</tr>
+<tr>
+  <td align="center" width="180"><a href="https://github.com/ant-design/ant-design">ant-design</a></td>
+  <td align="center" width="180"><a href="https://github.com/ant-design-blazor/ant-design-blazor">ant-design-blazor</a></td>
+  <td align="center" width="180"><a href="https://github.com/vueComponent/ant-design-vue">ant-design-vue</a></td>
+  <td align="center" width="180"><a href="https://github.com/umijs/dumi">dumi</a></td>
 </tr><tr>
+  <td align="center" width="180">
+    <a href="https://github.com/alibaba/formily">
+      <img src="https://img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg" width=""/>
+    </a>
+  </td>
   <td align="center" width="180">
     <a href="https://github.com/vuejs/jsx-next">
-      <img src="https://avatars.githubusercontent.com/u/6128107?s=200&v=4" width="46" />
-      <div>jsx-next</div>
+      <img src="https://avatars.githubusercontent.com/u/6128107?s=200&v=4" width="46"/>
     </a>
   </td>
   <td align="center" width="180">
     <a href="https://github.com/mui-org/material-ui">
-      <img src="https://avatars2.githubusercontent.com/u/33663932?s=200&v=4" width="46" />
-      <div>material-ui</div>
+      <img src="https://avatars2.githubusercontent.com/u/33663932?s=200&v=4" width="46"/>
     </a>
   </td>
   <td align="center" width="180">
     <a href="https://github.com/jdf2e/nutui">
-      <img src="https://img14.360buyimg.com/imagetools/s200x200_jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png" width="46" />
-      <div>nutui</div>
-    </a>
-  </td>
-  <td align="center" width="180">
-    <a href="https://github.com/prettier/prettier">
-      <img src="https://github.com/prettier/prettier-logo/blob/master/images/prettier-icon-light.png?raw=true" width="46" />
-      <div>prettier</div>
+      <img src="https://img14.360buyimg.com/imagetools/s200x200_jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png" width="46"/>
     </a>
   </td>
+</tr>
+<tr>
+  <td align="center" width="180"><a href="https://github.com/alibaba/formily">formily</a></td>
+  <td align="center" width="180"><a href="https://github.com/vuejs/jsx-next">jsx-next</a></td>
+  <td align="center" width="180"><a href="https://github.com/mui-org/material-ui">material-ui</a></td>
+  <td align="center" width="180"><a href="https://github.com/jdf2e/nutui">nutui</a></td>
 </tr><tr>
+  <td align="center" width="180">
+    <a href="https://github.com/prettier/prettier">
+      <img src="https://github.com/prettier/prettier-logo/blob/master/images/prettier-icon-light.png?raw=true" width="46"/>
+    </a>
+  </td>
   <td align="center" width="180">
     <a href="https://github.com/ant-design/pro-components">
-      <img src="https://avatars1.githubusercontent.com/u/12101536?s=200&v=4" width="46" />
-      <div>pro-components</div>
+      <img src="https://avatars1.githubusercontent.com/u/12101536?s=200&v=4" width="46"/>
     </a>
   </td>
   <td align="center" width="180">
     <a href="https://github.com/react-component">
-      <img src="https://avatars3.githubusercontent.com/u/9441414?s=200&v=4" width="46" />
-      <div>react-component</div>
+      <img src="https://avatars3.githubusercontent.com/u/9441414?s=200&v=4" width="46"/>
     </a>
   </td>
   <td align="center" width="180">
     <a href="https://github.com/lijinke666/react-music-player">
-      <img src="https://github.com/lijinke666/react-music-player/blob/master/assetsImg/logo.png?raw=true" width="46" />
-      <div>react-music-player</div>
-    </a>
-  </td>
-  <td align="center" width="180">
-    <a href="https://github.com/umijs/umi">
-      <img src="https://avatars1.githubusercontent.com/u/33895495?s=200&v=4" width="46" />
-      <div>umi</div>
+      <img src="https://github.com/lijinke666/react-music-player/blob/master/assetsImg/logo.png?raw=true" width="46"/>
     </a>
   </td>
+</tr>
+<tr>
+  <td align="center" width="180"><a href="https://github.com/prettier/prettier">prettier</a></td>
+  <td align="center" width="180"><a href="https://github.com/ant-design/pro-components">pro-components</a></td>
+  <td align="center" width="180"><a href="https://github.com/react-component">react-component</a></td>
+  <td align="center" width="180"><a href="https://github.com/lijinke666/react-music-player">react-music-player</a></td>
 </tr><tr>
+  <td align="center" width="180">
+    <a href="https://github.com/umijs/umi">
+      <img src="https://avatars1.githubusercontent.com/u/33895495?s=200&v=4" width="46"/>
+    </a>
+  </td>
   <td align="center" width="180">
     <a href="https://github.com/vitejs/vite">
-      <img src="https://avatars.githubusercontent.com/u/65625612?s=200&v=4" width="46" />
-      <div>vite</div>
+      <img src="https://avatars.githubusercontent.com/u/65625612?s=200&v=4" width="46"/>
     </a>
   </td>
   <td align="center" width="180">
     <a href="https://github.com/AttoJS/vue-request">
-      <img src="https://raw.githubusercontent.com/AttoJS/art/master/vue-request-logo.png" width="46" />
-      <div>vue-request</div>
+      <img src="https://raw.githubusercontent.com/AttoJS/art/master/vue-request-logo.png" width="46"/>
     </a>
   </td>
   <td align="center" width="180">
     <a href="https://github.com/zoo-js/zoo">
-      <img src="https://avatars1.githubusercontent.com/u/70757173?s=200&v=4" width="46" />
-      <div>zoo</div>
+      <img src="https://avatars1.githubusercontent.com/u/70757173?s=200&v=4" width="46"/>
     </a>
   </td>
-  <td align="center" width="180"></td>
+</tr>
+<tr>
+  <td align="center" width="180"><a href="https://github.com/umijs/umi">umi</a></td>
+  <td align="center" width="180"><a href="https://github.com/vitejs/vite">vite</a></td>
+  <td align="center" width="180"><a href="https://github.com/AttoJS/vue-request">vue-request</a></td>
+  <td align="center" width="180"><a href="https://github.com/zoo-js/zoo">zoo</a></td>
 </tr>
 </table>
 
diff --git a/README.md b/README.md
index 9b39971..d15d6a5 100644
--- a/README.md
+++ b/README.md
@@ -32,98 +32,111 @@
 <tr>
   <td align="center" width="180">
     <a href="https://github.com/ant-design/ant-design">
-      <img src="https://avatars1.githubusercontent.com/u/12101536?s=200&v=4" width="46" />
-      <div>ant-design</div>
+      <img src="https://avatars1.githubusercontent.com/u/12101536?s=200&v=4" width="46"/>
     </a>
   </td>
   <td align="center" width="180">
     <a href="https://github.com/ant-design-blazor/ant-design-blazor">
-      <img src="https://raw.githubusercontent.com/ant-design-blazor/ant-design-blazor/7dbee63648e088c73c47eada79c897bc39fc3c26/logo.svg" width="46" />
-      <div>ant-design-blazor</div>
+      <img src="https://raw.githubusercontent.com/ant-design-blazor/ant-design-blazor/7dbee63648e088c73c47eada79c897bc39fc3c26/logo.svg" width="46"/>
     </a>
   </td>
   <td align="center" width="180">
     <a href="https://github.com/vueComponent/ant-design-vue">
-      <img src="https://avatars1.githubusercontent.com/u/32120805?s=200&v=4" width="46" />
-      <div>ant-design-vue</div>
+      <img src="https://avatars1.githubusercontent.com/u/32120805?s=200&v=4" width="46"/>
     </a>
   </td>
   <td align="center" width="180">
     <a href="https://github.com/umijs/dumi">
-      <img src="https://avatars1.githubusercontent.com/u/33895495?s=200&v=4" width="46" />
-      <div>dumi</div>
+      <img src="https://avatars1.githubusercontent.com/u/33895495?s=200&v=4" width="46"/>
     </a>
   </td>
+</tr>
+<tr>
+  <td align="center" width="180"><a href="https://github.com/ant-design/ant-design">ant-design</a></td>
+  <td align="center" width="180"><a href="https://github.com/ant-design-blazor/ant-design-blazor">ant-design-blazor</a></td>
+  <td align="center" width="180"><a href="https://github.com/vueComponent/ant-design-vue">ant-design-vue</a></td>
+  <td align="center" width="180"><a href="https://github.com/umijs/dumi">dumi</a></td>
 </tr><tr>
+  <td align="center" width="180">
+    <a href="https://github.com/alibaba/formily">
+      <img src="https://img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg" width=""/>
+    </a>
+  </td>
   <td align="center" width="180">
     <a href="https://github.com/vuejs/jsx-next">
-      <img src="https://avatars.githubusercontent.com/u/6128107?s=200&v=4" width="46" />
-      <div>jsx-next</div>
+      <img src="https://avatars.githubusercontent.com/u/6128107?s=200&v=4" width="46"/>
     </a>
   </td>
   <td align="center" width="180">
     <a href="https://github.com/mui-org/material-ui">
-      <img src="https://avatars2.githubusercontent.com/u/33663932?s=200&v=4" width="46" />
-      <div>material-ui</div>
+      <img src="https://avatars2.githubusercontent.com/u/33663932?s=200&v=4" width="46"/>
     </a>
   </td>
   <td align="center" width="180">
     <a href="https://github.com/jdf2e/nutui">
-      <img src="https://img14.360buyimg.com/imagetools/s200x200_jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png" width="46" />
-      <div>nutui</div>
-    </a>
-  </td>
-  <td align="center" width="180">
-    <a href="https://github.com/prettier/prettier">
-      <img src="https://github.com/prettier/prettier-logo/blob/master/images/prettier-icon-light.png?raw=true" width="46" />
-      <div>prettier</div>
+      <img src="https://img14.360buyimg.com/imagetools/s200x200_jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png" width="46"/>
     </a>
   </td>
+</tr>
+<tr>
+  <td align="center" width="180"><a href="https://github.com/alibaba/formily">formily</a></td>
+  <td align="center" width="180"><a href="https://github.com/vuejs/jsx-next">jsx-next</a></td>
+  <td align="center" width="180"><a href="https://github.com/mui-org/material-ui">material-ui</a></td>
+  <td align="center" width="180"><a href="https://github.com/jdf2e/nutui">nutui</a></td>
 </tr><tr>
+  <td align="center" width="180">
+    <a href="https://github.com/prettier/prettier">
+      <img src="https://github.com/prettier/prettier-logo/blob/master/images/prettier-icon-light.png?raw=true" width="46"/>
+    </a>
+  </td>
   <td align="center" width="180">
     <a href="https://github.com/ant-design/pro-components">
-      <img src="https://avatars1.githubusercontent.com/u/12101536?s=200&v=4" width="46" />
-      <div>pro-components</div>
+      <img src="https://avatars1.githubusercontent.com/u/12101536?s=200&v=4" width="46"/>
     </a>
   </td>
   <td align="center" width="180">
     <a href="https://github.com/react-component">
-      <img src="https://avatars3.githubusercontent.com/u/9441414?s=200&v=4" width="46" />
-      <div>react-component</div>
+      <img src="https://avatars3.githubusercontent.com/u/9441414?s=200&v=4" width="46"/>
     </a>
   </td>
   <td align="center" width="180">
     <a href="https://github.com/lijinke666/react-music-player">
-      <img src="https://github.com/lijinke666/react-music-player/blob/master/assetsImg/logo.png?raw=true" width="46" />
-      <div>react-music-player</div>
-    </a>
-  </td>
-  <td align="center" width="180">
-    <a href="https://github.com/umijs/umi">
-      <img src="https://avatars1.githubusercontent.com/u/33895495?s=200&v=4" width="46" />
-      <div>umi</div>
+      <img src="https://github.com/lijinke666/react-music-player/blob/master/assetsImg/logo.png?raw=true" width="46"/>
     </a>
   </td>
+</tr>
+<tr>
+  <td align="center" width="180"><a href="https://github.com/prettier/prettier">prettier</a></td>
+  <td align="center" width="180"><a href="https://github.com/ant-design/pro-components">pro-components</a></td>
+  <td align="center" width="180"><a href="https://github.com/react-component">react-component</a></td>
+  <td align="center" width="180"><a href="https://github.com/lijinke666/react-music-player">react-music-player</a></td>
 </tr><tr>
+  <td align="center" width="180">
+    <a href="https://github.com/umijs/umi">
+      <img src="https://avatars1.githubusercontent.com/u/33895495?s=200&v=4" width="46"/>
+    </a>
+  </td>
   <td align="center" width="180">
     <a href="https://github.com/vitejs/vite">
-      <img src="https://avatars.githubusercontent.com/u/65625612?s=200&v=4" width="46" />
-      <div>vite</div>
+      <img src="https://avatars.githubusercontent.com/u/65625612?s=200&v=4" width="46"/>
     </a>
   </td>
   <td align="center" width="180">
     <a href="https://github.com/AttoJS/vue-request">
-      <img src="https://raw.githubusercontent.com/AttoJS/art/master/vue-request-logo.png" width="46" />
-      <div>vue-request</div>
+      <img src="https://raw.githubusercontent.com/AttoJS/art/master/vue-request-logo.png" width="46"/>
     </a>
   </td>
   <td align="center" width="180">
     <a href="https://github.com/zoo-js/zoo">
-      <img src="https://avatars1.githubusercontent.com/u/70757173?s=200&v=4" width="46" />
-      <div>zoo</div>
+      <img src="https://avatars1.githubusercontent.com/u/70757173?s=200&v=4" width="46"/>
     </a>
   </td>
-  <td align="center" width="180"></td>
+</tr>
+<tr>
+  <td align="center" width="180"><a href="https://github.com/umijs/umi">umi</a></td>
+  <td align="center" width="180"><a href="https://github.com/vitejs/vite">vite</a></td>
+  <td align="center" width="180"><a href="https://github.com/AttoJS/vue-request">vue-request</a></td>
+  <td align="center" width="180"><a href="https://github.com/zoo-js/zoo">zoo</a></td>
 </tr>
 </table>
 
diff --git a/USERS.js b/USERS.js
index 0cbc75f..88d4120 100644
--- a/USERS.js
+++ b/USERS.js
@@ -1,5 +1,12 @@
 // **************************************************************************
 // Add to end
+
+/**
+ * @param {string} url        github地址
+ * @param {string} logo       logo地址
+ * @param {string} width      自定义宽度
+ */
+
 const users = [
   {
     url: 'https://github.com/ant-design/ant-design',
@@ -47,19 +54,24 @@ const users = [
   },
   {
     url: 'https://github.com/prettier/prettier',
-    logo: 'https://github.com/prettier/prettier-logo/blob/master/images/prettier-icon-light.png?raw=true'
+    logo: 'https://github.com/prettier/prettier-logo/blob/master/images/prettier-icon-light.png?raw=true',
   },
   {
     url: 'https://github.com/vuejs/jsx-next',
-    logo: 'https://avatars.githubusercontent.com/u/6128107?s=200&v=4'
+    logo: 'https://avatars.githubusercontent.com/u/6128107?s=200&v=4',
   },
   {
     url: 'https://github.com/vitejs/vite',
-    logo: 'https://avatars.githubusercontent.com/u/65625612?s=200&v=4'
+    logo: 'https://avatars.githubusercontent.com/u/65625612?s=200&v=4',
   },
   {
     url: 'https://github.com/jdf2e/nutui',
-    logo: 'https://img14.360buyimg.com/imagetools/s200x200_jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png'
+    logo: 'https://img14.360buyimg.com/imagetools/s200x200_jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png',
+  },
+  {
+    width: 'auto',
+    url: 'https://github.com/alibaba/formily',
+    logo: 'https://img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg',
   },
 ];
 
diff --git a/script/update-users.js b/script/update-users.js
index 5ba3ac2..cf57ca9 100644
--- a/script/update-users.js
+++ b/script/update-users.js
@@ -5,10 +5,12 @@ const { stripIndent } = require('common-tags');
 
 let { users } = require('../USERS.js');
 
-users.sort((a, b) => getName(a).localeCompare(getName(b)));
+users.sort((a, b) => getCurrentName(a).localeCompare(getCurrentName(b)));
 
 // **************************************************************************
+const DEFAULT_WIDTH = 46;
 
+// **************************************************************************
 let table = '';
 let row = users.length / 4;
 let lastNo = users.length % 4;
@@ -21,7 +23,14 @@ for (let j = 1; j <= row; j++) {
   <td align="center" width="180">${getImg(users[(j - 1) * 4 + 1])}</td>
   <td align="center" width="180">${getImg(users[(j - 1) * 4 + 2])}</td>
   <td align="center" width="180">${getImg(users[(j - 1) * 4 + 3])}</td>
-</tr>`;
+</tr>
+<tr>
+  <td align="center" width="180">${getName(users[(j - 1) * 4])}</td>
+  <td align="center" width="180">${getName(users[(j - 1) * 4 + 1])}</td>
+  <td align="center" width="180">${getName(users[(j - 1) * 4 + 2])}</td>
+  <td align="center" width="180">${getName(users[(j - 1) * 4 + 3])}</td>
+</tr>
+`;
   table += data;
 }
 
@@ -65,15 +74,34 @@ function getImg(o) {
   if (o) {
     return `
     <a href="${o.url}">
-      <img src="${o.logo}" width="46" />
-      <div>${getName(o)}</div>
+      <img src="${o.logo}"${getImgWidth(o)}/>
     </a>
   `;
   }
   return ``;
 }
 
+function getImgWidth(o) {
+  if(o) {
+    let width = o.width;
+    if (width === 'auto') {
+      width = ''
+    } else {
+      width = width ? width : DEFAULT_WIDTH;
+    };
+    return ` width="${width}"`;
+  }
+  return '';
+}
+
 function getName(o) {
+  if (o) {
+    return `<a href="${o.url}">${o.url.split('/').slice(-1)[0]}</a>`;
+  }
+  return ``;
+}
+
+function getCurrentName(o) {
   if (o) {
     return o.url.split('/').slice(-1)[0];
   }