[incubator-dubbo-website] branch asf-site updated: add github star and fork icons in home page (#309)

[wangxin]

This is an automated email from the ASF dual-hosted git repository.

wangxin pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/incubator-dubbo-website.git


The following commit(s) were added to refs/heads/asf-site by this push:
     new 5d421d1  add github star and  fork icons in home page  (#309)
5d421d1 is described below

commit 5d421d181e39dab504a8503dafad3d2b0d28bfe4
Author: Xin Wang <xin.victorw...@gmail.com>
AuthorDate: Mon Mar 4 23:55:12 2019 +0800

    add github star and  fork icons in home page  (#309)
    
    * update
    
    * update icon align center
    
    update icon align center
    
    * add imgs
---
 img/fork.png              | Bin 0 -> 350 bytes
 img/star.png              | Bin 0 -> 297 bytes
 src/pages/home/index.jsx  |  30 ++++++++++++++++++++++++++++++
 src/pages/home/index.scss |  35 ++++++++++++++++++++++++++++++++++-
 4 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/img/fork.png b/img/fork.png
new file mode 100644
index 0000000..76f8100
Binary files /dev/null and b/img/fork.png differ
diff --git a/img/star.png b/img/star.png
new file mode 100644
index 0000000..25811c9
Binary files /dev/null and b/img/star.png differ
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 2326a87..16cf50c 100644
--- a/src/pages/home/index.jsx
+++ b/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" />
diff --git a/src/pages/home/index.scss b/src/pages/home/index.scss
index 71ddeda..496931b 100644
--- a/src/pages/home/index.scss
+++ b/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;
     }
   }
-}
\ No newline at end of file
+}