website: fix GitHub stars (#1849)

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>