Add GH buttons (#884)

Author: gtsiolis

package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
+    "@sendgrid/mail": "^7.2.6",
     "babel-plugin-styled-components": "^1.10.7",
     "bowser": "^2.9.0",
     "classnames": "^2.2.6",
@@ -59,11 +60,11 @@
     "react": "^16.13.1",
     "react-cookie-consent": "^5.0.1",
     "react-dom": "^16.13.1",
+    "react-github-btn": "^1.2.0",
     "react-helmet": "^6.0.0",
     "react-modal-video": "^1.2.3",
     "react-tweet-embed": "^1.2.2",
-    "typescript": "^3.9.3",
-    "@sendgrid/mail": "^7.2.6"
+    "typescript": "^3.9.3"
   },
   "devDependencies": {
     "@types/aws-lambda": "^8.10.63",

src/components/index/Banner.tsx

@@ -6,6 +6,7 @@ import GitLab from '../../resources/gitlab.svg'
 import GitHub from '../../resources/octicons-mark-github.svg'
 import Bitbucket from '../../resources/bitbucket.svg'
 import { sizes, colors } from '../../styles/variables'
+import GitHubButton from 'react-github-btn'
 
 const Styled = styled.div`
   .pattern {
@@ -84,6 +85,10 @@ const Banner = () => (
               <img src={Bitbucket} alt="Bitbucket" />
             </p>
           </div>
+          <div className="header__repository-details">
+            <GitHubButton href="https://github.com/gitpod-io/gitpod" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star gitpod-io/gitpod on GitHub">Star</GitHubButton>&nbsp;
+            <GitHubButton href="https://github.com/gitpod-io/gitpod/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork gitpod-io/gitpod on GitHub">Fork</GitHubButton>
+          </div>
           <div className="banner__screenshot-container">
             <img alt="Gitpod Screenshot" src={Screenshot} className="banner__screenshot" />
           </div>

yarn.lock

@@ -8533,6 +8533,11 @@ gitconfiglocal@^2.1.0:
   dependencies:
     ini "^1.3.2"
 
+github-buttons@^2.8.0:
+  version "2.14.1"
+  resolved "https://registry.yarnpkg.com/github-buttons/-/github-buttons-2.14.1.tgz#56177245e328892949dd59af58c6a7b6c530ad14"
+  integrity sha512-ODvmvylJZPn2Rg/OYRwQcGhIi1gWJ3ZpfkaFUMiBYAZtQQUNTPM7ka5iP+mn5J+DBicvgR24M2GV6QqB0M4zPQ==
+
 [email protected]:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"
@@ -14157,6 +14162,13 @@ react-focus-lock@^2.3.1:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
+react-github-btn@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-github-btn/-/react-github-btn-1.2.0.tgz#464066f999a77c0eed27980260601b51cbe15614"
+  integrity sha512-/b2TGTeek5Ky+KtuP5BxOaXgb1FGhbwgZNI6rkwkGk7+xtCtsNMkdchOcCnC3qU1JGTWPKzYZWpPBIouVhXAoQ==
+  dependencies:
+    github-buttons "^2.8.0"
+
 react-helmet@^6.0.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"