Use react-github-buttons instead of outside script

rvsia · rvsia · commit c301364fab9b · 2020-04-22T11:10:50.000+02:00
diff --git a/packages/react-renderer-demo/package.json b/packages/react-renderer-demo/package.json
@@ -49,6 +49,7 @@
         "react-ace": "^6.3.2",
         "react-copy-to-clipboard": "^5.0.1",
         "react-dom": "^16.13.0",
+        "react-github-buttons": "^0.4.0",
         "react-sticky-box": "^0.8.0"
     },
     "devDependencies": {
diff --git a/packages/react-renderer-demo/src/app/pages/_document.js b/packages/react-renderer-demo/src/app/pages/_document.js
@@ -25,7 +25,6 @@ class MyDocument extends Document {
         <body>
           <Main />
           <NextScript />
-          <script async defer src="https://buttons.github.io/buttons.js"></script>
         </body>
       </html>
     );
diff --git a/packages/react-renderer-demo/src/app/pages/index.js b/packages/react-renderer-demo/src/app/pages/index.js
@@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import Link from 'next/link';
+import { Star } from 'react-github-buttons';
 
 import LandingPageTitle from '@docs/components/landing-page/landing-page-title';
 import LandingPageCards from '@docs/components/landing-page/landing-page-cards';
@@ -26,8 +27,8 @@ const useStyles = makeStyles((theme) => ({
     marginTop: 48
   },
   npmLink: {
-    display: 'block',
-    textAlign: 'center',
+    display: 'flex',
+    justifyContent: 'center',
     marginTop: 24
   },
   getStartedAnchor: {
@@ -40,6 +41,20 @@ const useStyles = makeStyles((theme) => ({
     paddingLeft: 16,
     paddingRight: 16,
     textTransform: 'none'
+  },
+  gitHubStar: {
+    textDecoration: 'none',
+    '& button': {
+      lineHeight: 1.43,
+      padding: '1px 6px',
+      maxHeight: 20
+    },
+    '& a': {
+      padding: '2px 5px',
+      lineHeight: 1.43,
+      fontFamily: 'sans-serif',
+      maxHeight: 20
+    }
   }
 }));
 
@@ -62,15 +77,9 @@ const LandingPage = () => {
           </Link>
         </div>
         <div className={classes.npmLink}>
-          <a
-            className="github-button"
-            href="https://github.com/data-driven-forms/react-forms"
-            data-show-count="true"
-            aria-label="Star data-driven-forms/react-forms on GitHub"
-          >
-            Star
+          <a className={classes.gitHubStar} href="https://github.com/data-driven-forms/react-forms" rel="noopener noreferrer" target="_blank">
+            <Star owner="data-driven-forms" repo="react-forms" />
           </a>
-          &nbsp;
           <a href="https://badge.fury.io/js/%40data-driven-forms%2Freact-form-renderer" rel="noopener noreferrer" target="_blank">
             <img src="https://badge.fury.io/js/%40data-driven-forms%2Freact-form-renderer.svg" alt="current version" />
           </a>
diff --git a/yarn.lock b/yarn.lock
@@ -16427,6 +16427,11 @@ react-fontawesome@^1.6.1:
   dependencies:
     prop-types "^15.5.6"
 
+react-github-buttons@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/react-github-buttons/-/react-github-buttons-0.4.0.tgz#ab7870772dea946526c7a7c53fdd8f39a63b6cb5"
+  integrity sha512-MG5EnS/V8sIP+ExUnITlz47aSA5QvvwL1lLdQNazXSs0ewoZWTMoAv5FZwkMa7bMAwVOuQg38JtOqCrptKELkw==
+
 react-input-autosize@^2.2.1, react-input-autosize@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
