website: fix GitHub stars (#1849)

website/package.json

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

website/src/components/header.js

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

website/src/css/imports/header.css

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

website/src/html.js

@@ -28,7 +28,6 @@ class HTML extends React.Component {
           <div key={'body'} id="___gatsby" dangerouslySetInnerHTML={{ __html: this.props.body }} />
           {this.props.postBodyComponents}
           <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" />
         </body>
       </html>

website/yarn.lock

@@ -4745,6 +4745,10 @@ getpass@^0.1.1:
   dependencies:
     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:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"