add browser extension flow pages. (#835)

* update get started section. Fixes gitpod-io/website#819 * add browser extension flow pages. * exclude the extension uninstall page from the build. * small fixes.
gitpod-io · Jan 25, 2021 · ec896c4 · ec896c4
1 parent 657738d
commit ec896c4
Show file tree

Hide file tree

Showing 29 changed files with 728 additions and 474 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -36,7 +36,7 @@ module.exports = {
     {
       // Exclude pages from the page build -- https://www.gatsbyjs.org/packages/gatsby-plugin-exclude/
       resolve: 'gatsby-plugin-exclude',
-      options: { paths: ['/docs/README'] }
+      options: { paths: ['/docs/README', '/extension-uninstall'] }
     },
     {
       resolve: 'gatsby-transformer-remark',

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -216,7 +216,7 @@ const Footer: React.SFC<{}> = () => (
                 </ul>
             </div>
             <div className="info">
-                <p>Copyright © <a href="https://www.gitpod.io/" target="_blank" rel="noopener" title="Gitpod">Gitpod</a></p>
+                <p>Copyright &copy; <a href="https://www.gitpod.io/" target="_blank" rel="noopener" title="Gitpod">Gitpod</a></p>
                 <div><Link to="/imprint/">Imprint</Link>&nbsp;|&nbsp;<Link to="/terms/">Terms of Service</Link>&nbsp;|&nbsp;<Link to="/privacy/">Privacy Policy</Link></div>
             </div>
         </div>

diff --git a/src/components/MinimalFooter.tsx b/src/components/MinimalFooter.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+
+import styled from '@emotion/styled'
+import { Link } from 'gatsby'
+import { colors } from '../styles/variables'
+
+const StyledMinimalFooter = styled.footer`
+    padding: 5rem 0 6rem;
+    text-align: center;
+    color: ${colors.lightGrey};
+    background: ${colors.offWhite};
+
+    p {
+        margin-bottom: 2rem;
+    }
+
+    a,
+    .link {
+        color: inherit;
+        font-weight: 400;
+    }
+
+    .link {
+        padding: 0 1rem;
+
+        &:not(:last-child) {
+            border-right: 1px solid;
+        }
+    }
+`
+
+const MinimalFooter = () => (
+    <StyledMinimalFooter role="footer">
+        <div className="row">
+            <p>Copyright &copy; <a href="https://www.gitpod.io/" target="_blank" rel="noopener" title="Gitpod">Gitpod</a></p>
+            <div>
+                <Link className="link" to="/imprint">Imprint</Link>
+                <Link className="link" to="/terms">Terms of Service</Link>
+                <Link className="link" to="/privacy">Privacy Policy</Link>
+            </div>
+        </div>
+    </StyledMinimalFooter>
+)
+
+export default MinimalFooter
diff --git a/src/components/MoreInfo.tsx b/src/components/MoreInfo.tsx
@@ -5,6 +5,12 @@ import { borders, sizes } from '../styles/variables'
 import { Link } from 'gatsby'
 import MapGrey from '../resources/map-grey.svg'
 
+const StyledMoreInfo = styled.div<{negativeSpaceTop?: string}>`
+    @media(min-width: calc(${sizes.breakpoints.md} + 1px)) {
+        margin-top: ${({negativeSpaceTop}) => negativeSpaceTop };
+    }   
+`
+
 const StyledPricingLinks = styled.section`
   max-width: 850px;
   display: flex;
@@ -62,9 +68,10 @@ export interface PricingLinksProps {
   text?: JSX.Element
   links?: JSX.Element
   backgroundShouldBeWhite?: boolean
+  negativeSpaceTop?: string
 }
 
-const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: PricingLinksProps) => {
+const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite, negativeSpaceTop }: PricingLinksProps) => {
   let Img = img
   let Title = title
   let Text = text
@@ -89,9 +96,10 @@ const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: Pric
     )
   }
   return (
-    <div
+    <StyledMoreInfo
       className="pattern-bg"
-      style={{ marginBottom: backgroundShouldBeWhite ? '' : '10rem', background: backgroundShouldBeWhite ? 'none' : '' }}
+      style={{ marginBottom: backgroundShouldBeWhite ? '' : '10rem', background: backgroundShouldBeWhite ? 'none' : ''}}
+      negativeSpaceTop={negativeSpaceTop}
     >
       <div className="row">
         <StyledPricingLinks>
@@ -103,7 +111,7 @@ const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: Pric
           </div>
         </StyledPricingLinks>
       </div>
-    </div>
+    </StyledMoreInfo>
   )
 }
 

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -5,6 +5,8 @@ import { Link } from 'gatsby'
 import GitpodLogoDark from '../resources/gitpod-logo-dark.svg'
 import { colors, sizes, borders } from '../styles/variables'
 import { Global, css } from '@emotion/core'
+import { getBrowser } from '../utils/helpers'
+import { getBrowserString } from './gitpod-vs-codespaces/Difference'
 
 const StyledNav = styled.nav`
     display: flex;
@@ -207,8 +209,9 @@ const StyledNav = styled.nav`
     }
 `
 
-const Nav = () => {
+const Nav = ({ isAFlowPage, showReInstallExtensionButton }: { isAFlowPage?: boolean; showReInstallExtensionButton?: boolean }) => {
     const [isNavRendered, setIsNavRendered] = useState(false)
+    const [browser, setBrowser] = useState<any>()
 
     const unLock = () => {
         if (window.innerWidth >= 1040) {
@@ -218,6 +221,8 @@ const Nav = () => {
 
     useEffect(() => {
         window.addEventListener('resize', unLock)
+        let usersBrowser = getBrowser(window.navigator.userAgent)
+        setBrowser(getBrowserString(usersBrowser))
 
         return () => {
             window.removeEventListener('resize', unLock)
@@ -239,51 +244,70 @@ const Nav = () => {
             />
             <div className="row">
                 <StyledNav role="navigation" className="nav">
-                    <div className="nav__burger-container">
+                    <div className="nav__burger-container" style={isAFlowPage ? { width: '100%' } : {}}>
                         <Link to="/"><img alt="Gitpod Logo" src={GitpodLogoDark} /></Link>
-                        <div className="btns">
-                            <a href="https://gitpod.io/login/" rel="noopener" style={{ display: isNavRendered ? 'none' : '' }}>Log In</a>
-                            <div className="nav__btn-container" aria-live="assertive">
-                                <button
-                                    className="nav__btn"
-                                    aria-label={isNavRendered ? "Hide the Navigation Items" : "Show the Navigation Items"}
-                                    onClick={toggleNavigation}
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.112 31.112"
-                                        className={isNavRendered ? 'is-shown--multiply' : 'is-hidden'}
-                                        aria-hidden={isNavRendered ? false : true}
-                                        id="multiply"
+                        {
+                            !isAFlowPage ? <div className="btns">
+                                <a href="https://gitpod.io/login/" rel="noopener" style={{ display: isNavRendered ? 'none' : '' }}>Log In</a>
+                                <div className="nav__btn-container" aria-live="assertive">
+                                    <button
+                                        className="nav__btn"
+                                        aria-label={isNavRendered ? "Hide the Navigation Items" : "Show the Navigation Items"}
+                                        onClick={toggleNavigation}
                                     >
-                                        <title>close menu icon</title>
-                                        <path d="M31.112 1.414L29.698 0 15.556 14.142 1.414 0 0 1.414l14.142 14.142L0 29.698l1.414 1.414L15.556 16.97l14.142 14.142 1.414-1.414L16.97 15.556z" />
-                                    </svg>
-                                    <svg
-                                        className={isNavRendered ? 'is-hidden' : 'is-shown'}
-                                        aria-hidden={isNavRendered ? true : false}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        viewBox="0 0 26 18"
-                                        id="hamburger"
-                                    >
-                                        <title>hamburger menu icon</title>
-                                        <g transform="translate(-647.5 -86.5)" strokeWidth="2"><line x2="24" transform="translate(648.5 87.5)" /><line x2="24" transform="translate(648.5 95.5)" /><line x2="24" transform="translate(648.5 103.5)" /></g>
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
+                                        <svg
+                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.112 31.112"
+                                            className={isNavRendered ? 'is-shown--multiply' : 'is-hidden'}
+                                            aria-hidden={isNavRendered ? false : true}
+                                            id="multiply"
+                                        >
+                                            <title>close menu icon</title>
+                                            <path d="M31.112 1.414L29.698 0 15.556 14.142 1.414 0 0 1.414l14.142 14.142L0 29.698l1.414 1.414L15.556 16.97l14.142 14.142 1.414-1.414L16.97 15.556z" />
+                                        </svg>
+                                        <svg
+                                            className={isNavRendered ? 'is-hidden' : 'is-shown'}
+                                            aria-hidden={isNavRendered ? true : false}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            viewBox="0 0 26 18"
+                                            id="hamburger"
+                                        >
+                                            <title>hamburger menu icon</title>
+                                            <g transform="translate(-647.5 -86.5)" strokeWidth="2"><line x2="24" transform="translate(648.5 87.5)" /><line x2="24" transform="translate(648.5 95.5)" /><line x2="24" transform="translate(648.5 103.5)" /></g>
+                                        </svg>
+                                    </button>
+                                </div>
+                            </div> : null
+                        }
+                        {
+                            showReInstallExtensionButton ? <a
+                                className="btn"
+                                href={
+                                    browser === 'Firefox'
+                                        ? 'https://addons.mozilla.org/en-GB/firefox/addon/gitpod/'
+                                        : 'https://chrome.google.com/webstore/detail/gitpod-dev-environments-i/dodmmooeoklaejobgleioelladacbeki'
+                                }
+                                target="_blank"
+                            >
+                                Reinstall Extension
+                            </a> : null
+                        }
                     </div>
 
 
-                    <ul className={`nav__items ${isNavRendered ? 'navIsRendered' : 'navIsNotRendered'}`} >
-                        <li className="nav__item"><Link activeClassName="active" to='/features/' className="link">Features</Link></li>
-                        <li className="nav__item"><Link activeClassName="active" to='/screencasts/' className="link">Screencasts</Link></li>
-                        <li className="nav__item"><Link activeClassName="active" to='/self-hosted/' className="link">Install</Link></li>
-                        <li className="nav__item"><Link activeClassName="active" to='/pricing/' className="link">Pricing</Link></li>
-                        <li className="nav__item"><Link activeClassName="active" to='/docs/' className="link">Docs</Link></li>
-                        <li className="nav__item"><Link activeClassName="active" to='/blog/' className="link">Blog</Link></li>
-                        <li className="nav__item"><Link activeClassName="active" to='https://community.gitpod.io/' target='true' className="link">Community</Link></li>
-                        <li className="nav__item"><a href="https://gitpod.io/login/" rel="noopener" className="btn btn--small">Log In</a></li>
-                    </ul>
+                    {
+                        !isAFlowPage ? (
+                            <ul className={`nav__items ${isNavRendered ? 'navIsRendered' : 'navIsNotRendered'}`} >
+                                <li className="nav__item"><Link activeClassName="active" to='/features/' className="link">Features</Link></li>
+                                <li className="nav__item"><Link activeClassName="active" to='/screencasts/' className="link">Screencasts</Link></li>
+                                <li className="nav__item"><Link activeClassName="active" to='/self-hosted/' className="link">Install</Link></li>
+                                <li className="nav__item"><Link activeClassName="active" to='/pricing/' className="link">Pricing</Link></li>
+                                <li className="nav__item"><Link activeClassName="active" to='/docs/' className="link">Docs</Link></li>
+                                <li className="nav__item"><Link activeClassName="active" to='/blog/' className="link">Blog</Link></li>
+                                <li className="nav__item"><Link activeClassName="active" to='https://community.gitpod.io/' target='true' className="link">Community</Link></li>
+                                <li className="nav__item"><a href="https://gitpod.io/login/" rel="noopener" className="btn btn--small">Log In</a></li>
+                            </ul>
+                        ) : null
+                    }
 
                 </StyledNav>
             </div>

diff --git a/src/components/careers/ExpandableJob.tsx b/src/components/careers/ExpandableJob.tsx
@@ -1,9 +1,11 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 
 import styled from '@emotion/styled'
 import { colors, borders } from '../../styles/variables'
 import Arrow from '../Arrow'
 import GitpodLogo from '../../resources/gitpod-logo-dark.svg'
+// @ts-ignore
+import hyphenate from '../../utils/hyphenate'
 
 const StyledExpandableJob = styled.div`
   position: relative;
@@ -84,6 +86,13 @@ export interface ExpandableJobProps {
 
 const ExpandableJob = ({ title, intro, paragraphs, lists, textAfterTheLists, rendered, date }: ExpandableJobProps) => {
     const [isRendered, setIsRendered] = useState<boolean>(rendered || false)
+    const hash = hash
+
+    useEffect(() => {
+        if (window.location.hash === hash) {
+            setIsRendered(true)
+        }
+    })
 
     const toggleIsRendered = () => {
         setIsRendered(!isRendered)
@@ -152,7 +161,7 @@ const ExpandableJob = ({ title, intro, paragraphs, lists, textAfterTheLists, ren
     }
 
     return (
-        <StyledExpandableJob>
+        <StyledExpandableJob id={hash}>
             <button onClick={toggleIsRendered}>
                 <Arrow
                     styles={{ transform: isRendered ? 'rotate(-90deg)' : 'rotate(90deg)' }}