From 7285e0c530e4d877ed6a993d3a04504364a3bc10 Mon Sep 17 00:00:00 2001
From: Shawn Erquhart <shawn@erquh.art>
Date: Fri, 2 Nov 2018 11:27:17 -0400
Subject: [PATCH] website: fix GitHub stars (#1849)

---
 website/package.json               |  1 +
 website/src/components/header.js   | 26 +++++++++++++++-----------
 website/src/css/imports/header.css |  3 +++
 website/src/html.js                |  1 -
 website/yarn.lock                  |  4 ++++
 5 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/website/package.json b/website/package.json
index 5655832b..5aac2226 100755
--- a/website/package.json
+++ b/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",
diff --git a/website/src/components/header.js b/website/src/components/header.js
index 3853d0fe..03e4c9a0 100644
--- a/website/src/components/header.js
+++ b/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>
diff --git a/website/src/css/imports/header.css b/website/src/css/imports/header.css
index 2f64df5b..967acf51 100644
--- a/website/src/css/imports/header.css
+++ b/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;
       }
     }
   }
diff --git a/website/src/html.js b/website/src/html.js
index d55478f4..2b71923b 100644
--- a/website/src/html.js
+++ b/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>
diff --git a/website/yarn.lock b/website/yarn.lock
index d25f932f..8553830d 100644
--- a/website/yarn.lock
+++ b/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"