website: fix GitHub stars (#1849)

This commit is contained in:
Shawn Erquhart 2018-11-02 11:27:17 -04:00 committed by GitHub
parent c765793971
commit 7285e0c530
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 23 additions and 12 deletions

View File

@ -28,6 +28,7 @@
"gatsby-transformer-json": "next", "gatsby-transformer-json": "next",
"gatsby-transformer-remark": "next", "gatsby-transformer-remark": "next",
"gatsby-transformer-yaml": "next", "gatsby-transformer-yaml": "next",
"github-buttons": "git+https://github.com/ntkme/github-buttons.git",
"lodash": "^4.17.10", "lodash": "^4.17.10",
"netlify-cms": "^2.0.11", "netlify-cms": "^2.0.11",
"postcss-at2x": "^2.0.0", "postcss-at2x": "^2.0.0",

View File

@ -14,9 +14,12 @@ class Header extends Component {
scrolled: false, scrolled: false,
}; };
componentDidMount() { async componentDidMount() {
// TODO: use raf to throttle events // TODO: use raf to throttle events
window.addEventListener('scroll', this.handleScroll); window.addEventListener('scroll', this.handleScroll);
const gitHubButtonModule = await import('github-buttons/dist/react');
this.GitHubButton = gitHubButtonModule.default;
this.forceUpdate();
} }
componentWillUnmount() { componentWillUnmount() {
@ -35,6 +38,7 @@ class Header extends Component {
render() { render() {
const { scrolled } = this.state; const { scrolled } = this.state;
const GitHubButton = this.GitHubButton;
return ( return (
<Location> <Location>
@ -72,16 +76,16 @@ class Header extends Component {
Blog Blog
</Link> </Link>
<span className="gh-button"> <span className="gh-button">
<a {GitHubButton && (
id="ghstars" <GitHubButton
className="github-button" href="https://github.com/netlify/netlify-cms"
href="https://github.com/netlify/netlify-cms" data-icon="octicon-star"
data-icon="octicon-star" data-show-count="true"
data-show-count="true" aria-label="Star netlify/netlify-cms on GitHub"
aria-label="Star netlify/netlify-cms on GitHub" >
> Star
Star </GitHubButton>
</a> )}
</span> </span>
</div> </div>
</div> </div>

View File

@ -133,8 +133,11 @@ header {
display: inline-block; display: inline-block;
margin-left: $small; margin-left: $small;
vertical-align: middle; vertical-align: middle;
position: relative;
top: 2px;
@media screen and (max-width: $mobile) { @media screen and (max-width: $mobile) {
margin-top: $tiny; margin-top: $tiny;
top: 0;
} }
} }
} }

View File

@ -28,7 +28,6 @@ class HTML extends React.Component {
<div key={'body'} id="___gatsby" dangerouslySetInnerHTML={{ __html: this.props.body }} /> <div key={'body'} id="___gatsby" dangerouslySetInnerHTML={{ __html: this.props.body }} />
{this.props.postBodyComponents} {this.props.postBodyComponents}
<Gitter room="netlify/NetlifyCMS" /> <Gitter room="netlify/NetlifyCMS" />
<script async defer src="https://buttons.github.io/buttons.js" />
<script src="//unpkg.com/docsearch.js@2.4.1/dist/cdn/docsearch.min.js" /> <script src="//unpkg.com/docsearch.js@2.4.1/dist/cdn/docsearch.min.js" />
</body> </body>
</html> </html>

View File

@ -4745,6 +4745,10 @@ getpass@^0.1.1:
dependencies: dependencies:
assert-plus "^1.0.0" assert-plus "^1.0.0"
"github-buttons@git+https://github.com/ntkme/github-buttons.git":
version "0.0.0"
resolved "git+https://github.com/ntkme/github-buttons.git#4fd814f425cdeb57c9938151c668c8f7c6f779bc"
github-from-package@0.0.0: github-from-package@0.0.0:
version "0.0.0" version "0.0.0"
resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce" resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"