add github star and fork icons in home page

src/pages/home/index.jsx

@@ -17,6 +17,8 @@ class Home extends Language {
     super(props);
     this.state = {
       headerType: 'primary',
+      starCount: 0,
+      forkCount: 0,
     };
   }
 
@@ -33,9 +35,19 @@ class Home extends Language {
         });
       }
     });
+
+    fetch('//api.github.com/repos/apache/incubator-dubbo')
+        .then(res => res.json())
+        .then((data) => {
+          this.setState({
+            starCount: data.stargazers_count,
+            forkCount: data.forks_count,
+          });
+        });
   }
 
   render() {
+    const { starCount, forkCount } = this.state;
     const language = this.getLanguage();
     const dataSource = homeConfig[language];
     const { headerType } = this.state;
@@ -61,6 +73,24 @@ class Home extends Language {
               <Button type="primary" link={getLink(dataSource.brand.getStartedButton.link)}>{dataSource.brand.getStartedButton.text}</Button>
               <Button type="normal" link={getLink(dataSource.brand.viewOnGithubButton.link)}>{dataSource.brand.viewOnGithubButton.text}</Button>
             </div>
+            <div className="github-buttons">
+              <a href="https://github.com/apache/incubator-dubbo">
+                <div className="star">
+                  <img src="img/star.png" />
+                  <span className="type">Star</span>
+                  <span className="line" />
+                  <span className="count">{starCount}</span>
+                </div>
+              </a>
+              <a href="https://github.com/apache/incubator-dubbo/fork">
+                <div className="fork">
+                  <img src="img/fork.png" />
+                  <span className="type">Fork</span>
+                  <span className="line" />
+                  <span className="count">{forkCount}</span>
+                </div>
+              </a>
+            </div>
           </div>
           <div className="animation animation1" />
           <div className="animation animation2" />

src/pages/home/index.scss

@@ -128,6 +128,39 @@
         margin-right: 20px;
       }
     }
+    .github-buttons {
+      margin-top: 20px;
+      a {
+        margin-right: 0px;
+        margin-left: 20px;
+        img {
+          width: 16px;
+          height: 16px;
+        }
+        div {
+          border-radius: 2px;
+          display: inline-block;
+          height: 24px;
+          line-height: 24px;
+          padding-left: 5px;
+          color: #fff;
+          background: rgba(255, 255, 255, 0.2);
+          .type {
+            padding: 0 8px 0 4px;
+          }
+          .line {
+            display: inline-block;
+            box-sizing: border-box;
+            width: 1px;
+            height: 12px;
+            border-left: 1px solid rgba(255, 255, 255, 0.2);
+          }
+          .count {
+            padding: 0 14px;
+          }
+        }
+      }
+    }
   }
   .introduction-section {
     background: #F9FAFA;
@@ -431,4 +464,4 @@
       padding-right: 20px;
     }
   }
-}
+}