This is an automated email from the ASF dual-hosted git repository. wangxin pushed a commit to branch revert-323-fix/322 in repository https://gitbox.apache.org/repos/asf/incubator-dubbo-website.git
commit 19bc413aad2a1688b666d0d735698f72b3b23eb3 Author: Xin Wang <xin.victorw...@gmail.com> AuthorDate: Thu Mar 14 16:08:35 2019 +0800 Revert "highlight stars and forks. resolve #322 (#323)" This reverts commit 49dc2336040852fa6453081d49b84a14676104f6. --- src/pages/home/index.jsx | 40 ++++++++++++++++++++++++++++++---------- src/pages/home/index.scss | 34 ++++++++++++++++++++++++++++++---- 2 files changed, 60 insertions(+), 14 deletions(-) diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx index d56c707..1626c4b 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,16 +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"> - <img alt="GitHub stars" - src="https://img.shields.io/github/stars/apache/incubator-dubbo.svg?style=for-the-badge" /> - </a> - <a href="https://github.com/apache/incubator-dubbo"> - <img alt="GitHub forks" - src="https://img.shields.io/github/forks/apache/incubator-dubbo.svg?style=for-the-badge" /> - </a> - </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 ae04444..3abc3ac 100644 --- a/src/pages/home/index.scss +++ b/src/pages/home/index.scss @@ -130,10 +130,36 @@ } .github-buttons { margin-top: 20px; - text-align: center; - a { - margin-left: 20px; - } + a { + margin-right: 10px; + margin-left: 10px; + 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 {