docs(site): improve home site contributors ui

alibaba · Aug 3, 2021 · 7592baf · 7592baf
1 parent d872ea4
commit 7592baf
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 11 deletions.
diff --git a/docs/functions/contributors.ts b/docs/functions/contributors.ts
@@ -6,9 +6,19 @@ const octokit = new Octokit({
   auth: process.env.GITHUB_TOKEN,
 })
 
-export const handler: Handler = async () => {
+const headers = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Headers': 'Content-Type',
+  'Access-Control-Allow-Methods': 'GET',
+}
+
+export const handler: Handler = async (event) => {
+  if (event.httpMethod !== 'GET') {
+    return { statusCode: 405, body: 'Method Not Allowed' }
+  }
   return {
     statusCode: 200,
+    headers,
     body: JSON.stringify(
       await octokit.repos.listContributors({
         owner: 'alibaba',

diff --git a/docs/index.md b/docs/index.md
@@ -95,6 +95,7 @@ export default () => (
  */
 import React from 'react'
 import { Section } from './site/Section'
+import { Contributors } from './site/Contributors'
 import './site/styles.less'
 
 export default () => (
@@ -103,9 +104,7 @@ export default () => (
     style={{ marginTop: 100 }}
     titleStyle={{ paddingBottom: 140, fontWeight: 'bold' }}
   >
-    <a href="https://github.com/alibaba/formily/graphs/contributors">
-      <img src="https://contrib.rocks/image?repo=alibaba/formily" />
-    </a>
+    <Contributors />
   </Section>
 )
 ```

diff --git a/docs/index.zh-CN.md b/docs/index.zh-CN.md
@@ -95,6 +95,7 @@ export default () => (
  */
 import React from 'react'
 import { Section } from './site/Section'
+import { Contributors } from './site/Contributors'
 import './site/styles.less'
 
 export default () => (
@@ -103,9 +104,7 @@ export default () => (
     style={{ marginTop: 100 }}
     titleStyle={{ paddingBottom: 140 }}
   >
-    <a href="https://github.com/alibaba/formily/graphs/contributors">
-      <img src="https://contrib.rocks/image?repo=alibaba/formily" />
-    </a>
+    <Contributors />
   </Section>
 )
 ```

diff --git a/docs/site/Contributors.less b/docs/site/Contributors.less
@@ -0,0 +1,30 @@
+.contri-list {
+  display: flex;
+  flex-wrap: wrap;
+
+  .contri-user {
+    display: flex;
+    flex-direction: column;
+    width: 120px;
+    height: 120px;
+    align-items: center;
+    justify-content: center;
+
+    &-avatar {
+      display: block;
+      width: 60px;
+      height: 60px;
+      border-radius: 60px;
+      overflow: hidden;
+      transition: all 0.15s ease-in-out;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    &-info {
+      text-align: center;
+    }
+  }
+}
diff --git a/docs/site/Contributors.tsx b/docs/site/Contributors.tsx
@@ -1,18 +1,33 @@
 import React, { useEffect, useState } from 'react'
+import './Contributors.less'
 
 export const Contributors: React.FC = () => {
-  const [contributors, setContributors] = useState<any[]>()
+  const [contributors, setContributors] = useState([])
   useEffect(() => {
-    fetch('./.netlify/functions/contributors')
+    fetch('//v2.formilyjs.org/.netlify/functions/contributors')
       .then((res) => res.json())
       .then(({ data }) => {
         setContributors(data)
       })
   }, [])
   return (
-    <div>
+    <div className="contri-list">
       {contributors.map((user, key) => (
-        <div key={key}></div>
+        <div className="contri-user" key={key}>
+          <a
+            className="contri-user-avatar"
+            href={user.html_url}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img src={user.avatar_url} />
+          </a>
+          <div className="contri-user-info">
+            <a href={user.html_url} target="_blank" rel="noreferrer">
+              <div className="contri-user-name">{user.login}</div>
+            </a>
+          </div>
+        </div>
       ))}
     </div>
   )