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 +}