diff --git a/.babelrc b/.babelrc index 970673e67..0fa923123 100644 --- a/.babelrc +++ b/.babelrc @@ -8,11 +8,20 @@ "node": "6.10.3" } } + ], + [ + "babel-preset-gatsby", + { + "targets": { + "browsers": [">0.25%", "not dead"] + } + } ] ], "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-transform-object-assign", - "@babel/plugin-proposal-object-rest-spread" + "@babel/plugin-proposal-object-rest-spread", + "babel-plugin-macros" ] } diff --git a/.gitpod.yml b/.gitpod.yml index 5bba2fa33..3b415631e 100644 --- a/.gitpod.yml +++ b/.gitpod.yml @@ -12,21 +12,23 @@ vscode: - jpoissonnier.vscode-styled-components@0.0.29:7hF8G3VtB+HNearI5Zw+NA== - paulmolluzzo.convert-css-in-js@1.1.3:YnjK47pXScU3DMFfQzkkOw== + - lightyen.tailwindcss-intellisense-twin@0.7.4:Z6ktluLCqwxpOSSVZcyWvQ== + github: prebuilds: # enable for the master/default branch (defaults to true) master: true - # enable for all branches in this repo (defaults to false) +# enable for all branches in this repo (defaults to false) branches: true - # enable for pull requests coming from this repo (defaults to true) +# enable for pull requests coming from this repo (defaults to true) pullRequests: true - # enable for pull requests coming from forks (defaults to false) +# enable for pull requests coming from forks (defaults to false) pullRequestsFromForks: true - # add a check to pull requests (defaults to true) +# add a check to pull requests (defaults to true) addCheck: true - # add a "Review in Gitpod" button as a comment to pull requests (defaults to false) +# add a "Review in Gitpod" button as a comment to pull requests (defaults to false) addComment: false - # add a "Review in Gitpod" button to the pull request's description (defaults to false) +# add a "Review in Gitpod" button to the pull request's description (defaults to false) addBadge: false - # add a label once the prebuild is ready to pull requests (defaults to false) +# add a label once the prebuild is ready to pull requests (defaults to false) addLabel: false diff --git a/gatsby-browser.js b/gatsby-browser.js index 99cb7bd17..5efbd9a09 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1 +1,2 @@ +import "tailwindcss/dist/base.min.css"; require("prismjs/themes/prism-solarizedlight.css"); diff --git a/gatsby-config.js b/gatsby-config.js index dcc46bb1c..be84fe0b5 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -59,7 +59,7 @@ module.exports = { } }, 'gatsby-remark-prismjs', - 'gatsby-remark-gitpod', + // 'gatsby-remark-gitpod', { resolve: `gatsby-remark-autolink-headers`, options: { diff --git a/package.json b/package.json index 5581d51cc..2fae9de63 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ }, "dependencies": { "@emotion/core": "^10.0.28", - "@emotion/styled": "^10.0.27", + "@emotion/styled": "^11.1.5", "@sendgrid/mail": "^7.2.6", "babel-plugin-styled-components": "^1.10.7", "bowser": "^2.9.0", @@ -35,7 +35,7 @@ "gatsby-plugin-algolia-docsearch": "^1.0.5", "gatsby-plugin-canonical-urls": "^2.3.2", "gatsby-plugin-catch-links": "^2.3.3", - "gatsby-plugin-emotion": "^4.3.2", + "gatsby-plugin-emotion": "^6.1.0", "gatsby-plugin-exclude": "^1.0.2", "gatsby-plugin-feed": "^2.5.3", "gatsby-plugin-google-analytics": "^2.3.2", @@ -68,6 +68,7 @@ "typescript": "^3.9.3" }, "devDependencies": { + "@emotion/react": "^11.1.5", "@types/aws-lambda": "^8.10.63", "@types/classnames": "^2.2.10", "@types/node": "^14.0.6", @@ -79,9 +80,11 @@ "netlify-lambda": "^2.0.1", "prettier": "^2.0.5", "rimraf": "^3.0.2", + "tailwindcss": "^2.0.3", "tslint": "^6.1.2", "tslint-config-blvd": "^1.2.1", "tslint-config-prettier": "^1.18.0", - "tslint-plugin-prettier": "^2.3.0" + "tslint-plugin-prettier": "^2.3.0", + "twin.macro": "^2.3.0" } } diff --git a/plugins/gatsby-remark-gitpod/package-lock.json b/plugins/gatsby-remark-gitpod/package-lock.json index 4b54ad5bd..a08992844 100644 --- a/plugins/gatsby-remark-gitpod/package-lock.json +++ b/plugins/gatsby-remark-gitpod/package-lock.json @@ -1,8 +1,37 @@ { "name": "gatsby-remark-gitpod", "version": "1.0.0", - "lockfileVersion": 1, + "lockfileVersion": 2, "requires": true, + "packages": { + "": { + "version": "1.0.0", + "dependencies": { + "unist-util-visit": "^1.4.0" + } + }, + "node_modules/unist-util-is": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-2.1.2.tgz", + "integrity": "sha512-YkXBK/H9raAmG7KXck+UUpnKiNmUdB+aBGrknfQ4EreE1banuzrKABx3jP6Z5Z3fMSPMQQmeXBlKpCbMwBkxVw==" + }, + "node_modules/unist-util-visit": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.0.tgz", + "integrity": "sha512-FiGu34ziNsZA3ZUteZxSFaczIjGmksfSgdKqBfOejrrfzyUy5b7YrlzT1Bcvi+djkYDituJDy2XB7tGTeBieKw==", + "dependencies": { + "unist-util-visit-parents": "^2.0.0" + } + }, + "node_modules/unist-util-visit-parents": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.0.1.tgz", + "integrity": "sha512-6B0UTiMfdWql4cQ03gDTCSns+64Zkfo2OCbK31Ov0uMizEz+CJeAp0cgZVb5Fhmcd7Bct2iRNywejT0orpbqUA==", + "dependencies": { + "unist-util-is": "^2.1.2" + } + } + }, "dependencies": { "unist-util-is": { "version": "2.1.2", diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx deleted file mode 100644 index 24ec37c8c..000000000 --- a/src/components/ActionCard.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import { colors, borders } from '../styles/variables' -import link from './Link' - -const StyledActionCard = styled.section` - display: block; - max-width: 60rem; - margin: 8rem auto; - padding: 5rem 3rem; - text-align: center; - background: ${colors.offWhite}; - border: ${borders.light2}; - border-radius: 3px; - - h2 { - font-size: 2.8rem; - } - - p { - margin: -3rem 0 4rem; - } - - .btn-wrapper { - justify-content: center; - } -` - -interface Anchor { - text: string - href: string - subject?: string -} - -interface ActionCardProps { - title: string - text: string | JSX.Element - anchors: Anchor[] -} - - -const ActionCard: React.SFC = ({ title, text, anchors }) => ( - -

{title}

- {typeof text === 'string' ?

{text}

: text} -
- {link(anchors[0].href, anchors[0].text, anchors[0].subject)} - {anchors[1] ? link(anchors[1].href, anchors[1].text, anchors[1].subject) : null} -
- -) - -export default ActionCard diff --git a/src/components/AnnouncementBanner.tsx b/src/components/AnnouncementBanner.tsx deleted file mode 100644 index 58dd71964..000000000 --- a/src/components/AnnouncementBanner.tsx +++ /dev/null @@ -1,178 +0,0 @@ -import React, { useRef, useEffect } from 'react' -import styled from '@emotion/styled' -import { Link } from 'gatsby' -import { colors, borders } from '../styles/variables' -import { jobs } from '../pages/careers' - -const AnnoucementBannerWrapper = styled.div` - position: relative; - background: ${colors.grey}; - transition: all 0.3s; - - button { - position: absolute; - top: 50%; - transform: translateY(-50%); - right: 2rem; - border: none; - border-radius: 50%; - - @media(max-width: 505px) { - display: none; - } - } - - .cross { - display: block; - height: 1.5rem; - width: 1.5rem; - fill: ${colors.white} - } -` - -const StyledAnnouncementBanner = styled(Link)` - color: ${colors.white}; - font-weight: 400; - border-bottom: ${borders.light}; - - &:hover, - &:focus { - color: ${colors.white}; - } - - @media (max-width: 600px) { - font-size: 85%; - } - - .text { - padding: 1rem 0; - font-weight: 600; - text-align: center; - font-size: 90%; - - @media(max-width: 320px) { - padding: .8rem; - } - } - - @media(max-width: 505px) { - .help { - display: none; - } - - .openings { - margin-left: .3rem; - } - } - - @media(min-width: 506px) { - .openings { - display: inline flex; - align-items: center; - background: ${colors.white}; - color: ${colors.grey}; - padding: .5rem 1.4rem; - border-radius: 10rem; - margin-left: 2rem; - } - } - - .arrow { - margin-left: .8rem; - - @media(max-width: 505px) { - height: .8rem; - margin-left: .2rem; - } - } - - .arrow-path { - stroke: #3D515E; - - @media(max-width: 505px) { - stroke: #fff; - } - } -`; - -function markWasDisplayed(): void { - if (typeof localStorage !== 'undefined') { - localStorage.setItem('wasDisplayed', 'true'); - } -} - -function wasDisplayed(): boolean { - if (typeof localStorage !== 'undefined') { - // @ts-ignore - return localStorage.getItem('wasDisplayed') - } - return false; -} - -const AnnoucementBanner = () => { - const bannerRef = useRef(null) - - const hideTheBanner = () => { - if (null !== bannerRef.current) { - bannerRef.current.style.transform = 'translateY(-100%)' - bannerRef.current.style.marginTop = `-${bannerRef.current.offsetHeight}px` - } - - // @ts-ignore - markWasDisplayed(true); - - setTimeout(() => { - if (null !== bannerRef.current) { - bannerRef.current.style.display = 'none' - } - }, 300) - } - - useEffect(() => { - const wasAlreadyDisplayed = wasDisplayed(); - if (wasAlreadyDisplayed) { - if (null !== bannerRef.current) { - bannerRef.current.style.display = 'none'; - } - } - }) - - return ( - - -
-
- Wanna help make Gitpod better? Join our team!  - - {jobs.length} -  Openings - - - - -
-
- - - - ) -} - -export default AnnoucementBanner diff --git a/src/components/Arrow.tsx b/src/components/Arrow.tsx deleted file mode 100644 index d159c5494..000000000 --- a/src/components/Arrow.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React, { CSSProperties } from 'react' - -import styled from '@emotion/styled' -import { Global, css } from '@emotion/core' -import { colors } from '../styles/variables' - -const StyledArrow = styled.svg` - display: inline-block; - fill: ${colors.offWhite1}; - transition: all .2s; - height: 4.5rem; -` - -interface ArrrowProps { - styles?: CSSProperties -} - -const Arrow = ({ styles }: ArrrowProps) => ( - - - - -) - -export default Arrow diff --git a/src/components/BackToTopButton.tsx b/src/components/BackToTopButton.tsx deleted file mode 100644 index 424ff822a..000000000 --- a/src/components/BackToTopButton.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import { shadows, colors } from '../styles/variables' -import Arrow from './Arrow' - -const StyledScrollToTopButton = styled.a` - position: fixed; - right: 4%; - bottom: 2rem; - display: flex; - justify-content: center; - align-items: center; - box-shadow: ${shadows.light1}; - border-radius: 50%; - z-index: 100; - transition: transform .3s, opacity .2s, background-color .2s ease-in-out; - background: ${colors.white}; -` - - -class ScrollToTopButton extends React.Component { - - state = { - shouldBeRendered: false - } - - componentDidMount() { - window.addEventListener('scroll', () => { - if ( window.scrollY > 800) { - this.setState({shouldBeRendered: true}) - } - else { - this.setState({shouldBeRendered: false}) - } - }) - } - - render() { - return ( - - - - ) - } -} - -export default ScrollToTopButton diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx deleted file mode 100644 index 14c05acb2..000000000 --- a/src/components/Banner.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import link from './Link' - -const StyledBanner = styled.header` - /* ------------------------------------------- */ - /* ----- Banner ----- */ - /* ------------------------------------------- */ - - display: flex; - justify-content: space-between; - align-items: stretch; - padding: 14rem 0 10rem; - - @media (max-width: 960px) { - flex-direction: column-reverse; - padding: 5rem 0; - } - - @media (max-width: 960px) { - flex-direction: column-reverse; - padding: 1rem 0 5rem; - } - - @media (max-width: 640px) { - text-align: center; - } - - .banner__text { - flex: 0 0 55%; - } - - .para { - margin-top: 3rem; - - @media (min-width: 961px) { - max-width: 50rem; - } - } - - .btn { - margin: 5rem 2rem 2rem 0; - - @media (max-width: 960px) { - margin-top: 3rem; - } - } - - p + .btn { - margin-top: 3rem; - } - - - .img-container { - display: block; - flex: 0 0 30%; - - @media (min-width: 961px) { - margin-left: 3rem; - } - - @media (max-width: 960px) { - height: 20rem; - width: 100%; - height: 100%; - max-width: 30rem; - margin: 5rem 0; - } - - @media (max-width: 500px) { - max-width: 22rem; - } - } -` - -interface BannerProps { - subtitle: string - title: JSX.Element - paragraph?: string | JSX.Element - linkPath: string - linkText: string - img: JSX.Element -} - -const Banner: React.SFC = ({ subtitle, title, paragraph, linkPath, linkText, img, children }) => ( -
- -
-
-

{subtitle}

- {title} -
- {paragraph ?

{paragraph}

: null} - {link(linkPath, linkText, '', true, false)} - {children} -
-
- {img} -
- -
-) - -export default Banner diff --git a/src/components/Bg.tsx b/src/components/Bg.tsx deleted file mode 100644 index 5ddc9995f..000000000 --- a/src/components/Bg.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import { sizes } from '../styles/variables' - -const StyledBg = styled.img` - display: block; - width: 100%; - max-height: 40rem; - max-width: 100rem; - margin: 7rem auto; - - @media(max-width: ${sizes.breakpoints.md}) { - margin: 6rem auto; - } -` - -interface BgProps { - url: any - alt: string -} - -const Bg = ({url, alt}: BgProps) => ( -
- -
-) - - -export default Bg diff --git a/src/components/Circle.tsx b/src/components/Circle.tsx deleted file mode 100644 index ae645c1df..000000000 --- a/src/components/Circle.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -const Circle: React.SFC<{}> = () => ( - - - -) - -export default Circle diff --git a/src/components/DropDown.tsx b/src/components/DropDown.tsx deleted file mode 100644 index f87810473..000000000 --- a/src/components/DropDown.tsx +++ /dev/null @@ -1,214 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import ArrowDown from '../resources/arrow-down.svg' -import { colors, shadows, sizes } from '../styles/variables' -import { Link } from 'gatsby' -import ExternalLink from '../components/ExternalLink' - -const StyledDropDown = styled.div` - z-index: 900; - - @media(min-width: calc(${sizes.breakpoints.lg} + 1px)) { - position: relative; - } - - button { - cursor: pointer; - display: flex; - align-items: center; - border: none; - max-width: 20rem; - - &:hover, - &:focus { - color: ${colors.lightBlue}; - - &::before { - right: 0; - border-color: ${colors.lightBlue}; - } - } - } - - .arrow { - height: .8rem; - margin-left: 1rem; - @media(max-width: ${sizes.breakpoints.lg}) { - height: 1rem; - } - - @media(min-width: calc(${sizes.breakpoints.lg} + 1px)) { - display: none; - } - } - - ul { - display: flex; - flex-direction: column; - - @media(min-width: calc(${sizes.breakpoints.lg} + 1px)) { - position: absolute; - top: 2.5rem; - left: 7%; - width: 120%; - left: 50%; - transform: translateX(-50%); - min-width: 14rem; - padding: .5rem 0 1rem; - background: ${colors.offWhite}; - box-shadow: ${shadows.light}; - - &::before { - position: absolute; - top: 0; - content: ""; - display: block; - height: 130%; - width: 100%; - margin-top: -3rem; - } - } - } - - li { - @media(min-width: calc(${sizes.breakpoints.lg} + 1px)) { - margin: 1rem 0 0; - padding: 0 1.5rem; - font-size: 90%; - width: 100%; - border-bottom: none; - } - - @media(max-width: ${sizes.breakpoints.lg}) { - &:not(:last-child) { - margin-top: 1rem; - } - } - } - - .shown { - opacity: 1; - - @media(min-width: calc(${sizes.breakpoints.lg} + 1px)) { - background: ${colors.white}; - transform: scale(1) translate(-50%, 0); - } - } - - .hidden { - opacity: 0; - - @media(max-width: ${sizes.breakpoints.lg}) { - display: none; - } - - @media(min-width: calc(${sizes.breakpoints.lg} + 1px)) { - transform: scale(0) translate(-50%, -20rem); - } - } -` - -interface Anchor { - text: string - to: string - target?: boolean -} - -interface DropDownProps { - title: string - links: Anchor[] -} - -class DropDown extends React.Component { - - state = { - isRendered: false - } - - handleClick = () => { - this.setState({isRendered: !this.state.isRendered}) - } - - handleMouseEnter = () => { - this.setState({isRendered: true}) - } - - handleMouseLeave = () => { - this.setState({isRendered: false}) - } - - render () { - const { title, links } = this.props - const { isRendered } = this.state - - return ( - - - -
    - { - links.map(({text, to, target}, i) => - target ? - ( -
  • - -
    • - ) - : - ( -
  • - { - i == links.length - 1 ? - - {text} - - : - - {text} - - } -
    • - ) - ) - } - -
- - ) - } -} - -export default DropDown diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx deleted file mode 100644 index 7334c3658..000000000 --- a/src/components/ExternalLink.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import { colors, sizes } from '../styles/variables' - -const StyledExternalLink = styled.a` - .external { - height: 1.5rem; - transform: translate(.6rem, .3rem); - transition: all .2s; - opacity: 0; - fill: ${colors.text}; - - @media(max-width: ${sizes.breakpoints.md}) { - opacity: 1; - } - } - - &:hover, - &:active { - .external { - opacity: 1; - fill: ${colors.link}; - } - } -` - -interface ExternalLinkProps { - text: string - href: string - tabIndex?: number - className?: string, - onBlur?: any -} - -const ExternalLink: React.SFC = ({href, text, tabIndex, className, onBlur}) => ( - - {text} - -) - -export default ExternalLink diff --git a/src/components/FeatureCard.tsx b/src/components/FeatureCard.tsx deleted file mode 100644 index 9e5a5d84a..000000000 --- a/src/components/FeatureCard.tsx +++ /dev/null @@ -1,338 +0,0 @@ -import React, { useState } from 'react' - -import styled from '@emotion/styled' -import { sizes } from '../styles/variables' -import Pattern from '../resources/pattern-2.jpg' -import IconTick from '../resources/icon-tick-2.svg' - -const Styled = styled.div<{ - direction?: string - flexDirectionColumnForImgContainer?: boolean - opposite?: boolean - hasFigFootnote?: boolean -}>` - display: flex; - justify-content: space-between; - position: relative; - - &:not(:last-child) { - margin-bottom: 18rem; - - @media (max-width: 500px) { - margin-bottom: 10rem; - } - } - - @media (max-width: ${sizes.breakpoints.sm}) { - text-align: center; - } - - [id] { - position: absolute; - top: -25vh; - } - - @media (max-width: 1140px) { - flex-direction: column; - max-width: 740px; - } - - h2 + p { - margin: 0; - } - - &:nth-of-type(2n) { - @media (min-width: 1141px) { - flex-direction: ${({ opposite }) => (opposite ? 'reverse' : 'row-reverse')}; - } - - @media (min-width: 1141px) { - .why-gitpod__img-container { - padding-left: 8rem; - &::before { - left: 0; - } - - &:hover::before { - transform: translateX(-5rem); - } - } - } - } - - &:nth-of-type(2n + 1) { - @media (min-width: 1141px) { - flex-direction: ${({ opposite }) => (opposite ? 'row-reverse' : 'reverse')}; - } - } - - .text { - display: flex; - flex-direction: column; - justify-content: center; - min-width: 28rem; - - @media (min-width: 1141px) { - flex: 0 0 38%; - } - - @media (max-width: 1150px) { - padding: 0 4rem; - } - - @media (max-width: ${sizes.breakpoints.md}) { - padding: 0 1rem; - } - - @media (max-width: ${sizes.breakpoints.sm}) { - padding: 0 1rem; - } - } - - img { - width: 100%; - max-height: 440px; - - @media (max-width: 1140px) { - max-height: 400px; - } - - @media (max-width: 500px) { - max-height: 300px; - } - } - - .img-container { - display: flex; - flex-direction: ${({ flexDirectionColumnForImgContainer }) => (flexDirectionColumnForImgContainer ? 'column' : '')}; - justify-content: center; - align-items: ${({ flexDirectionColumnForImgContainer }) => (flexDirectionColumnForImgContainer ? '' : 'center')}; - width: 100%; - position: relative; - - &::before { - content: ''; - position: absolute; - display: block; - height: 100%; - width: 100%; - background: url(${Pattern}); - background-size: cover; - background-repeat: repeat; - z-index: -1; - opacity: 0.1; - border-radius: 3px; - - @media (max-width: ${sizes.breakpoints.md}) { - width: calc(30vh + 100%); - transform: translateX(-20vw); - } - } - - @media (min-width: 1141px) { - padding-right: ${({ direction }) => (direction === 'right' ? '8rem' : '')}; - padding-left: ${({ direction }) => (!(direction === 'right') ? '8rem' : '')}; - min-height: 520px; - max-height: 500px; - flex: 0 0 52%; - - &::before { - left: ${({ direction }) => (direction === 'right' ? '' : 0)}; - right: ${({ direction }) => (!(direction === 'right') ? '' : 0)}; - width: 60vw; - } - } - - @media (max-width: 1140px) { - min-height: 240px; - padding: 5rem; - margin-bottom: ${({ hasFigFootnote }) => (hasFigFootnote ? '7rem' : '2.5rem')}; - - &::before { - left: 0; - right: 0; - } - } - - @media(max-width: 800px) { - margin-bottom: ${({ hasFigFootnote }) => (hasFigFootnote ? '10rem' : '2.5rem')}; - } - - @media (max-width: 560px) { - padding: 3rem; - } - - @media (max-width: 450px) { - padding: 2rem; - } - } - - @keyframes slideInLeft { - 100% { - transform: translateX(5rem); - } - } - - @keyframes slideInRight { - 100% { - transform: translateX(-5rem); - } - } - - .in-view::before { - @media (min-width: 1141px) { - animation: ${({ direction }) => (direction === 'right' ? 'slideInLeft' : 'slideInRight')} 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1 normal - forwards; - } - } - - .buttons { - margin-top: 4rem; - - @media (max-width: 600px) { - margin-top: 1.5rem; - } - } - - ul { - margin-top: 5rem; - font-size: 1.9rem; - - @media (max-width: 500px) { - font-size: 1.6rem; - } - - @media (max-width: 320px) { - font-size: 1.5rem; - } - - @media (max-width: 290px) { - font-size: 1.4rem; - } - } - - li { - display: flex; - align-items: center; - &::before { - content: url(${IconTick}); - transform: scale(0.9); - display: block; - margin: 0 2rem 0 1rem; - left: -0.5rem; - - @media (max-width: 500px) { - margin: 0 1rem 0 0; - } - } - } - - p + .text-list { - margin-top: 2rem; - } - - .text-list { - margin-top: 0; - font-size: inherit; - - @media (max-width: ${sizes.breakpoints.sm}) { - text-align: left; - } - - li + li { - margin-top: 2rem; - } - } - - .footnote { - position: absolute; - margin-top: 4rem; - bottom: -5.5rem; - - @media (max-width: 454px) { - bottom: -5rem; - } - - @media(max-width: 420px) { - bottom: -6.5rem; - } - } - - img { - border-radius: 3px; - } -` - -export interface FeatureCardProps { - src?: string - alt?: string - Graphic?: any - title: string | JSX.Element - text?: string | JSX.Element - direction?: string - id?: string - featuresList?: string[] - Buttons?: any - icon?: string | JSX.Element - iconTitle?: string | JSX.Element - opposite?: boolean - Figure?: () => JSX.Element - figFootnote?: string | JSX.Element - footnote?: string | JSX.Element - gatsbyImage?: JSX.Element -} - -const FeatureCard = ({ - src, - alt, - Graphic, - title, - text, - direction, - id, - featuresList, - Buttons, - Figure, - opposite, - figFootnote, - footnote, - gatsbyImage -}: FeatureCardProps) => { - const [renderedGraphic, setRenderedGraphic] = useState('') - const hasFigFootnote = typeof figFootnote == 'string' || typeof figFootnote == 'object' - return ( - -
- {Graphic ? : null} - {src ? {alt} : null} - { - gatsbyImage ? gatsbyImage : null - } - {featuresList && featuresList.length ? ( -
    - {featuresList.map((feat, i) => ( -
  • {feat}
    • - ))} -
- ) : null} - {Figure ?
: null} - {figFootnote ?

{figFootnote}

: null} -
-
-

{title}

- {text ? text : null} - {Buttons ? : null} - {footnote ?

{footnote}

: null} -
- {id &&
} - - ) -} - -export default FeatureCard diff --git a/src/components/FeatureCards.tsx b/src/components/FeatureCards.tsx deleted file mode 100644 index d1508deb4..000000000 --- a/src/components/FeatureCards.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import { FeatureCardProps } from './FeatureCard' -import FeatureCard from './FeatureCard' - -const Styled = styled.section` - display: flex; - flex-direction: column; - padding-bottom: 5rem; - position: relative; -` - -const FeatureCards = ({ features, opposite }: { features: FeatureCardProps[]; opposite?: boolean }) => { - return ( - -
- {features.map((feature: FeatureCardProps, i) => { - let direction - if (opposite) { - direction = !(i % 2 == 0) ? 'right' : '' - } else { - direction = i % 2 == 0 ? 'right' : '' - } - return - })} -
- - ) -} - -export default FeatureCards diff --git a/src/components/FeatureItem.tsx b/src/components/FeatureItem.tsx deleted file mode 100644 index b01407a5c..000000000 --- a/src/components/FeatureItem.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import { borders, sizes } from '../styles/variables' - -const StyledFeatureItem = styled.div` - display: flex; - align-items: center; - flex: 0 0 45%; - max-width: 60rem; - margin: 0 auto; - margin-bottom: 5rem; - margin-top: 5rem; - - @media(max-width: ${sizes.breakpoints.lg}) { - flex-direction: column; - text-align: center; - } - - div { - @media(min-width: calc(${sizes.breakpoints.lg} + 1px)) { - border-left: ${borders.bold}; - margin-left: 3rem; - padding-left: 3rem; - } - } - - .h3 { - & + p { - margin: 0; - } - } - - p { - max-width: 320px; - } - - img { - max-width: 10rem; - max-height: 12rem; - - @media(min-width: calc(${sizes.breakpoints.lg} + 1px)) { - flex: 0 0 15%; - } - - @media(max-width: ${sizes.breakpoints.lg}) { - height: 10rem; - margin-bottom: 4rem; - } - } -` - -export interface FeatureItemProps { - title: string - text: string - img: string - alt?: string -} - -const FeatureItem = ({ title, text, img, alt }: FeatureItemProps) => ( - - {alt -
-

{title}

-

{text}

-
- -) - -export default FeatureItem diff --git a/src/components/FeaturesSection.tsx b/src/components/FeaturesSection.tsx deleted file mode 100644 index c49a91890..000000000 --- a/src/components/FeaturesSection.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import FeatureItem, { FeatureItemProps } from './FeatureItem' -import { sizes } from '../styles/variables' - -const StyledFeatures = styled.div` - display: flex; - flex-wrap: wrap; - justify-content: space-between; - - @media(max-width: ${sizes.breakpoints.lg}) { - margin-top: -5rem; - } - - @media(max-width: 900px) { - flex-direction: column; - - & > div { - max-width: 400px; - } - } -` - -const FeaturesSection = ({ features }: { features: FeatureItemProps[] }) => ( -
- - { - features.map( - (feature: FeatureItemProps, i) => - ) - } - -
-) - -export default FeaturesSection diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx deleted file mode 100644 index 5646a16c5..000000000 --- a/src/components/Footer.tsx +++ /dev/null @@ -1,226 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import { colors } from '../styles/variables' -import { Link } from 'gatsby' -import ExternalLink from './ExternalLink' - -const StyledFooter = styled.footer` - background: ${colors.offWhite}; - padding: 7rem 0 4rem; - font-size: 1.4rem; - - .links { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - max-width: 1000px; - margin: 0 auto; - - @media(min-width: 651px) { - ul { - width: 12.4rem; - } - } - - @media(max-width: 650px) { - justify-content: space-between; - - ul { - padding-bottom: 4rem; - border-bottom: 1px solid #ddd; - width: 48%; - text-align: center; - - &:not(:last-child) { - margin-bottom: 5rem; - } - - &:last-child { - transform: translateX(50%); - - img { - transform: translateX(1rem); - } - } - } - } - } - - li { - - &:not(:last-child) { - margin-bottom: 1.6rem; - } - - &:first-of-type { - font-size: 1.7rem; - font-weight: 600; - } - - } - - a { - color: ${colors.text}; - font-weight: 400; - transition: all .2s; - - &:hover, - &:focus { - color: ${colors.link}; - - svg { - fill: ${colors.text}; - } - - .mail { - stroke: ${colors.text}; - } - } - - } - - svg { - fill: #b5b5b5; - height: 2.9rem; - transition: all .2s; - } - - .contact { - li:not(:first-child) { - display: inline-block; - margin-left: 2rem; - transform: translateX(-2rem); - - @media(max-width: 650px) { - transform: translateX(-1rem); - } - } - } - - .info { - text-align: center; - margin: 5rem 0 0; - - p { - margin-bottom: 2rem; - } - } - -` - -const Footer: React.SFC<{}> = () => ( - -
-
-
    -
  • Gitpod
    • -
  • Features
    • -
  • Pricing
    • -
  • Blog
    • -
  • Self-Hosted
    • -
  • Gitpod vs GitHub
    Codespaces
    • -
  • Log In
    • -
-
    -
  • Solutions
    • -
  • Education
    • -
  • Recruiting
    • -
  • Vendor
    • -
-
    -
  • Developer
    • -
  • Getting started
    • -
  • Screencasts
    • -
  • Documentation
    • -
  • - -
    • -
  • - -
    • -
-
    -
  • Company
    • -
  • About
    • -
  • - Careers -
    • -
  • Media Kit
    • -
- -
-
-

Copyright © Gitpod

-
Imprint | Terms of Service | Privacy Policy
-
-
- -) - -export default Footer diff --git a/src/components/ImageProvider.tsx b/src/components/ImageProvider.tsx deleted file mode 100644 index 781590f0b..000000000 --- a/src/components/ImageProvider.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import React, { CSSProperties } from 'react' -import { graphql, useStaticQuery } from 'gatsby' -import Img from 'gatsby-image' - -import styled from '@emotion/styled' - -const StyledImageProvider = styled.div` - height: 100%; - width: 100%; -` - -interface ImageProviderProps { - fileName?: string - alt: string - wrapperStyles?: CSSProperties - imageStyles?: CSSProperties - isNotRelativeToGatsbyImgWrapper?: boolean - IsAPricingBoxIcon?: boolean - isBlurred?: boolean - fluidData?: any - providerStyles?: CSSProperties - className?: string - placeholderStyles?: CSSProperties -} - -const ImageProvider = ({ - fileName, - alt, - wrapperStyles, - imageStyles, - isNotRelativeToGatsbyImgWrapper, - IsAPricingBoxIcon, - isBlurred, - fluidData, - providerStyles, - className, - placeholderStyles -}: ImageProviderProps) => { - const { allImageSharp } = useStaticQuery(graphql` - query { - allImageSharp { - nodes { - fluid(traceSVG: { color: "#0b2144" }) { - originalName - tracedSVG - src - } - blurredFluid: fluid { - originalName - ...GatsbyImageSharpFluid - } - } - } - } - `) - - let resultingFluid - - if(!fluidData) { - const found = allImageSharp.nodes.find((n: any) => { - return n.fluid.originalName === fileName - }) - - resultingFluid = isBlurred ? found.blurredFluid : found.fluid - } - - const imageStylesIfIsNotRelativeToGatsbyImgWrapper = { - top: '50%', - transform: 'translateY(-50%) scale(.93)', - }; - - let position; - - if (isNotRelativeToGatsbyImgWrapper) { - position = 'none' - } else if (IsAPricingBoxIcon) { - position = 'static' - } else { - position = 'relative' - } - - return ( - - {alt} - - ) -} - -export default ImageProvider; diff --git a/src/components/InfoCard.tsx b/src/components/InfoCard.tsx deleted file mode 100644 index 3bb945ce4..000000000 --- a/src/components/InfoCard.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import React from 'react' - -import Twitter from '../resources/twitter.svg' -import Mail from '../resources/mail.svg' -import Discourse from '../resources/discourse.svg' -import { Link } from 'gatsby' -import styled from '@emotion/styled' -import { sizes } from '../styles/variables' - -const StyledInfoCard = styled.section` - /* --------------------------------------- */ - /* ----- Info ----- */ - /* --------------------------------------- */ - - section { - padding-top: 0; - } - - .h3 + p { - margin: 0; - } - - .info { - @media(min-width: 831px) { - flex: 0 0 44%; - - &:last-of-type { - margin-left: auto; - } - } - - @media(max-width: 830px) { - &:not(:last-of-type) { - margin-bottom: 5rem; - } - } - - &-container { - display: flex; - - @media(max-width: 830px) { - flex-direction: column; - } - } - - p:last-of-type { - margin-bottom: 2rem; - } - - a { - &:not(:last-of-type) { - margin-right: 2rem; - } - } - - @media(max-width: ${sizes.breakpoints.md}) { - &:not(:last-child) { - margin-bottom: 8rem; - } - } - } -` - -const InfoCard: React.SFC<{}> = () => ( - -
-
-

Getting Started with Gitpod

-

You can simply start coding in Gitpod by prefixing any GitHub URL with gitpod.io/#

-

For a more detailed description of Gitpod and its IDE, Theia, please have a look at our documentation.

- Gitpod Docs -
-
-

Do You Need Help?

-

If you have any question, issue or feedback, please get in touch. We love to hear your feedback and help you out.

- - Mail Logo - - - Discourse Logo - - - Twitter Logo - -
-
- -) - -export default InfoCard diff --git a/src/components/LayoutRoot.tsx b/src/components/LayoutRoot.tsx index 50a751687..d809f17ca 100644 --- a/src/components/LayoutRoot.tsx +++ b/src/components/LayoutRoot.tsx @@ -1,7 +1,6 @@ import * as React from 'react' -import { Global, css } from '@emotion/core' import styled from '@emotion/styled' -import base from '../styles/base' +import { BaseStyles } from '../styles/base' const StyledLayoutRoot = styled.div` display: flex; @@ -15,7 +14,7 @@ interface LayoutRootProps { const LayoutRoot: React.SFC = ({ children, className }) => ( <> - css(base)} /> + {children} ) diff --git a/src/components/Link.tsx b/src/components/Link.tsx deleted file mode 100644 index 7743b0bbb..000000000 --- a/src/components/Link.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Link } from 'gatsby' - -const link = (href: string, text: string, subject = '', primary: boolean = false, normal: boolean = true) => { - if (href.indexOf('://') !== -1) { - return ( - {text} - - ) - } else { - return ( - - {text} - - ) - } -} - -export default link diff --git a/src/components/Linkset.tsx b/src/components/Linkset.tsx deleted file mode 100644 index 66f735701..000000000 --- a/src/components/Linkset.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import { colors } from '../styles/variables' -import { Link } from 'gatsby' - -const StyledLinkSet = styled.div` - - &:not(:last-child) { - margin-bottom: 2rem; - } - - a { - display: inline-block; - font-size: 1.5rem; - border-left: solid 1px transparent; - color: ${colors.text}; - font-weight: 400; - - &:hover { - color: ${colors.lightBlue}; - } - - &.active { - color: ${colors.lightBlue}; - border-left: solid 1px ${colors.lightBlue}; - } - - &.caption { - margin-bottom: .4rem; - font-weight: 400; - font-size: 1.7rem; - padding-left: 1.0rem; - } - - &:not(.caption) { - padding-left: 1.8rem; - } - - } -` - -interface LinkSetProps { - caption: string - path: string -} - -class Linkset extends React.Component { - - render() { - - const { caption, path, children } = this.props - - return ( - -
  • - - {caption} - -
    • - {children} -     - ) - } -} - -export default Linkset diff --git a/src/components/MinimalFooter.tsx b/src/components/MinimalFooter.tsx deleted file mode 100644 index 282d2b69c..000000000 --- a/src/components/MinimalFooter.tsx +++ /dev/null @@ -1,45 +0,0 @@ -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 = () => ( - -
    -

    Copyright © Gitpod

    -
    - Imprint - Terms of Service - Privacy Policy -
    -
    -     -) - -export default MinimalFooter diff --git a/src/components/MoreInfo.tsx b/src/components/MoreInfo.tsx deleted file mode 100644 index 5eb50037b..000000000 --- a/src/components/MoreInfo.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -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; - align-items: center; - margin: 0 auto; - - @media (max-width: ${sizes.breakpoints.md}) { - padding-bottom: 8rem; - } - - @media (max-width: 720px) { - flex-direction: column; - text-align: center; - max-width: 550px; - - .btn-wrapper { - justify-content: center; - } - } - - img { - flex: 1; - height: 12rem; - - @media (max-width: 720px) { - max-width: 10rem; - margin-bottom: 2rem; - } - } - - div { - flex: 0 0 75%; - padding-left: 4rem; - border-left: ${borders.bold}; - - @media (max-width: 720px) { - border-left: none; - padding-left: 0; - } - } - - h2 { - margin-bottom: 5rem; - } - - h3 { - font-size: 110%; - margin-bottom: 0.5rem; - } -` - -export interface PricingLinksProps { - img?: JSX.Element - title?: JSX.Element - text?: JSX.Element - links?: JSX.Element - backgroundShouldBeWhite?: boolean - negativeSpaceTop?: string -} - -const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite, negativeSpaceTop }: PricingLinksProps) => { - let Img = img - let Title = title - let Text = text - let Links = links - if (!(img && title && text && links)) { - Img = Explore Gitpod - Title = ( - <> - Explore Gitpod - - ) - Text = <>Learn about collaboration, workspace sharing, reproducible snapshots, supported language features, and much more. - Links = ( - <> - - See Features - - - See Blog - - - ) - } - return ( - -
    - - {Img} -
    -

    {Title}

    -

    {Text}

    - {Links} -
    -     -
    -     - ) -} - -export default PricingLinks diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx deleted file mode 100644 index d35628a1b..000000000 --- a/src/components/Nav.tsx +++ /dev/null @@ -1,340 +0,0 @@ -import React, { useState, useEffect } from 'react' - -import styled from '@emotion/styled' -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; - justify-content: space-between; - align-items: center; - padding: 4rem 0; - position: relative; - - @media(max-width: 900px) { - font-size: 110%; - display: block; - } - - @media(max-width: ${sizes.breakpoints.md}) { - font-size: 100%; - } - - @media(max-width: ${sizes.breakpoints.sm}) { - font-size: 95%; - display: block; - } - - @media(max-width: ${sizes.breakpoints.md}) { - padding: 1rem; - } - - img { - height: 4.2rem; - transform: scale(.97); - } - - .nav__items { - display: flex; - align-items: center; - - @media(max-width: 900px) { - flex-direction: column; - width: 100%; - padding-top: 8rem; - min-height: 95vh; - align-items: center; - z-index: 1; - } - - @media(max-width: ${sizes.breakpoints.md}) { - min-height: 97vh; - } - } - - @media(max-width: 900px) { - .navIsRendered { - display: flex; - } - - .navIsNotRendered { - display: none; - } - } - - .nav__item { - cursor: pointer; - - @media(min-width: 901px) { - &:not(:last-child) { - margin-right: 4rem; - } - } - - @media(max-width: 900px) { - width: 100%; - padding: 2rem 0; - - &:not(:last-child) { - border-bottom: ${borders.light1}; - } - } - - &:last-child { - margin-left: -1rem; - } - } - - .btns { - display: flex; - align-items: center; - - @media(min-width: 901px) { - display: none; - } - - a { - margin-right: 1rem; - transform: translateY(-1px); - - @media(min-width: calc(${sizes.breakpoints.md} + 1px)) { - margin-right: 2rem; - } - } - } - - .nav__burger-container { - display: flex; - justify-content: space-between; - } - - .nav__btn { - position: relative; - cursor: pointer; - border: none; - z-index: 10000; - width: 4rem; - height: 4rem; - transition: all .2s; - - &:hover { - svg { - stroke: ${colors.lightBlue}; - fill: ${colors.lightBlue}; - } - } - - svg { - position: absolute; - top: 0; - right: 0; - width: 100%; - height: 100%; - transition: all .3s cubic-bezier(.25,.75,.5,1.25); - fill: ${colors.text}; - stroke: ${colors.text}; - - &#hamburger { - - @media(max-width: ${sizes.breakpoints.md}) { - transform: scale(.7); - } - - @media(min-width: calc(${sizes.breakpoints.md} + 1px)) { - transform: scale(.8); - } - } - - &#multiply { - transform: scale(.7); - - @media(max-width: ${sizes.breakpoints.md}) { - transform: scale(.65); - } - } - - @media(max-width: ${sizes.breakpoints.md}) { - transform: scale(.7); - } - } - - @media(min-width: 901px) { - display: none; - } - - &:hover, - &:focus { - transform: scale(1.05); - } - } - - - @media(max-width: 900px) { - .shown { - opacity: 1; - transform: scale(1) translateX(0); - max-width: ${sizes.grid.maxWidth}; - } - - .hiden { - opacity: .8; - transform: scale(1.1) translateX(-100vw); - } - - .container { - max-width: ${sizes.grid.maxWidth}; - width: 100%; - margin: 0 auto; - - @media(max-width: ${sizes.breakpoints.sm}) { - padding: 0 1rem; - } - } - - .is-shown { - opacity: 1; - - &--multiply { - transform: rotate(-90deg); - } - } - - .is-hidden { - opacity: 0; - } - } -` - -const Nav = ({ isAFlowPage, showReInstallExtensionButton }: { isAFlowPage?: boolean; showReInstallExtensionButton?: boolean }) => { - const [isNavRendered, setIsNavRendered] = useState(false) - const [browser, setBrowser] = useState() - - const unLock = () => { - if (window.innerWidth >= 900) { - setIsNavRendered(false) - } - } - - useEffect(() => { - window.addEventListener('resize', unLock) - let usersBrowser = getBrowser(window.navigator.userAgent) - setBrowser(getBrowserString(usersBrowser)) - - return () => { - window.removeEventListener('resize', unLock) - } - }) - - const toggleNavigation = () => { - setIsNavRendered(!isNavRendered) - } - - return ( -
    - -
    - -
    - Gitpod Logo - { - !isAFlowPage ?
    - Log In -
    - -
    -
    : null - } - { - showReInstallExtensionButton ? - Reinstall Extension - : null - } -
    - - - { - !isAFlowPage ? ( -
      -
    • - - Features - -
      • -
    • - - Screencasts - -
      • -
    • - - Docs - -
      • -
    • - - Blog - -
      • -
    • - - Pricing - -
      • -
    • - - Log In - -
      • -
    - ) : null - } - -     -
    -
    - ) -} - -export default Nav diff --git a/src/components/NewsletterForm.tsx b/src/components/NewsletterForm.tsx deleted file mode 100644 index 296753959..000000000 --- a/src/components/NewsletterForm.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import { sizes, borders } from '../styles/variables' - -const StyledNewsletterForm = styled.section` - /* ------------------------------------------- */ - /* ----- Section Newsletter ----- */ - /* ------------------------------------------- */ - - .newsletter { - padding: 12rem 0; - - @media(max-width: ${sizes.breakpoints.md}) { - padding: 8rem 0; - } - - &__input { - margin: 0 1.5rem 3rem 0; - padding: 1.2rem 2.5rem; - border: ${borders.light1}; - border-radius: 100px; - - @media(max-width: ${sizes.breakpoints.sm}) { - width: 100%; - } - } - - &__text { - margin: -3rem 0 3rem; - } - } -` - -const NewsletterForm: React.SFC<{}> = () => ( -
    - -

    Never Miss a Blog Post

    -

    Sign up for the newsletter and stay informs about the latest news from Gitpod and its community.

    -
    { - e.preventDefault() - }}> - - -
    -     -
    -) - -export default NewsletterForm diff --git a/src/components/Offers.tsx b/src/components/Offers.tsx deleted file mode 100644 index de75a5d36..000000000 --- a/src/components/Offers.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react' - -import PricingBox, { PricingBoxProps } from '../components/PricingBox' -import styled from '@emotion/styled' -import { sizes } from '../styles/variables' - -const StyledOffers = styled.section` - /* --------------------------------------- */ - /* ----- Offers ----- */ - /* --------------------------------------- */ - - .offers { - display: flex; - justify-content: center; - margin-top: 15rem; - - @media(max-width: ${sizes.breakpoints.md}) { - flex-direction: column; - align-items: center; - } - } - - .btn-container { - margin: 5rem 0; - text-align: center; - } - - @media(max-width: ${sizes.breakpoints.md}) { - h2 { - margin-bottom: 5rem; - } - - br { - display: none; - } - } - -` - -interface OffersProps { - title: string - offers: PricingBoxProps[], - para: JSX.Element -} - - -const Offers: React.SFC = ({ offers, title, para }) => ( - -
    -
    -

    {title}

    - { para } -
    -
    - { - offers.map( - (offer, i) => ( - - ) - ) - } -
    -
    -     -) - - -export default Offers diff --git a/src/components/OnBoarding.tsx b/src/components/OnBoarding.tsx deleted file mode 100644 index be58168e1..000000000 --- a/src/components/OnBoarding.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import { sizes } from '../styles/variables' - -const StyledOnBoarding = styled.section` - text-align: center; - - @media(max-width: ${sizes.breakpoints.md}) { - padding: 7rem 0; - } -` - -const OnBoarding: React.SFC<{link: string}> = ({ link }) => ( - -

    Would You Like to Have an Onboarding Session?

    - Schedule a Call -     -) - -export default OnBoarding diff --git a/src/components/PopOver.tsx b/src/components/PopOver.tsx deleted file mode 100644 index ddbad3b23..000000000 --- a/src/components/PopOver.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import { colors, sizes } from '../styles/variables' - -const StyledDescripion = styled.span` - position: relative; - - button { - position: relative; - display: inline-block; - height: 1.4rem; - width: 1.4rem; - font-weight: 600; - font-size: 1rem; - border: none; - color: ${colors.white}; - background: ${colors.offWhite1}; - border-radius: 50%; - - @media(max-width: ${sizes.breakpoints.md}) { - transform: scale(1.3); - margin-left: 1rem; - } - - @media(min-width: calc(${sizes.breakpoints.lg} + 1px)) { - transform: translateX(1rem); - } - - &::after { - content: ""; - position: absolute; - top: 0; - left: -25%; - display: block; - height: 3.5rem; - width: 3.5rem; - } - } - - .description__text { - padding: .5rem .5rem .5rem 1.5rem; - font-size: 1.2rem; - font-weight: 400; - color: ${colors.textDark}; - background: ${colors.offWhite2}; - z-index: 1000; - border-radius: 3px; - - @media(max-width: 1080px) { - position: absolute; - right: -5rem; - top: 2.4rem; - min-width: 18rem; - z-index: 9999999999; - } - - @media(min-width: 1081px) { - position: absolute; - top: 0; - left: 3rem; - min-width: 19rem; - } - } - - .bottom { - font-weight: 400; - right: -10rem; - top: 2.4rem; - min-width: 18rem; - z-index: 9999999999; - transform: translateX(-16.5rem); - - @media(max-width: 1081px) { - transform: translateX(-7.5rem); - } - } -` - -class Description extends React.Component<{ description: string | JSX.Element; textPosition?: string }, {}> { - state = { - isRendered: false - } - - handleClick = () => { - this.setState({ isRendered: !this.state.isRendered }) - } - - handleMouseEnter = () => { - this.setState({ isRendered: true }) - } - - handleMouseLeave = () => { - this.setState({ isRendered: false }) - } - - render() { - const { isRendered } = this.state - const { description } = this.props - const positionBottom = this.props.textPosition === 'bottom' - - return ( - - - {isRendered ?
    {description}
    : null} -     - ) - } -} - -export default Description diff --git a/src/components/PricingBox.tsx b/src/components/PricingBox.tsx deleted file mode 100644 index a45553daa..000000000 --- a/src/components/PricingBox.tsx +++ /dev/null @@ -1,362 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import { colors, sizes } from '../styles/variables' -import IconTick from '../resources/icon-tick.svg' - -interface StyledPricingBoxProps { - transform?: string - background?: boolean - hideButton?: boolean - banner?: string - bannerColor?: string - btnBackground?: boolean - isTitleOutside?: boolean -} - -const StyledPricingBox = styled.div` - position: relative; - margin: 2rem 1rem; - padding: 3rem 2.8rem; - font-size: 95%; - min-height: ${({ isTitleOutside }) => (isTitleOutside ? '42rem' : '51rem')}; - min-width: 20rem; - max-width: 26rem; - width: 25%; - text-align: center; - color: ${({ background }) => (background ? colors.white : null)}; - background: ${({ background }) => (background ? 'url("https://www.gitpod.io/galaxy.jpg")' : colors.white)}; - background-size: ${({ background }) => (background ? 'cover' : null)}; - background-position: ${({ background }) => (background ? 'left' : null)}; - border: 1px solid ${colors.offWhite2}; - background-color: ${colors.offWhite}; - border-radius: 3px; - margin-top: ${({ isTitleOutside }) => (isTitleOutside ? '6rem' : '2rem')}; - z-index: ${({ isTitleOutside }) => (isTitleOutside ? '1000' : 'none')};; - - @media(min-width: calc(${sizes.breakpoints.md} + 1px)) { - z-index: ${({ transform }) => (transform ? '1' : null)}; - } - - @media(min-width: calc(${sizes.breakpoints.lg} + 1px)) { - transform: ${({ transform }) => (transform ? transform : null)}; - } - - @media(max-width: ${sizes.breakpoints.lg}) { - min-height: 50rem; - padding: 3rem 2rem; - margin-bottom: 5rem; - min-height: ${({ isTitleOutside }) => (isTitleOutside ? '41rem' : '51rem')}; - } - - @media(max-width: 1096px) { - min-width: 25rem; - } - - @media(max-width: 860px) { - margin-top: ${({ banner }) => (banner ? '4rem' : '')}; - } - - @media(max-width: ${sizes.breakpoints.md}) { - min-height: ${({ isTitleOutside }) => (isTitleOutside ? '40rem' : '49rem')}; - min-width: 30rem; - padding: 2rem 3rem; - } - - @media(max-width: 650px) { - display: flex; - flex-direction: column; - align-items: center; - min-height: 0; - } - - @media(max-width: ${sizes.breakpoints.sm}) { - min-width: 25rem; - min-height: auto; - } - - @media(max-width: 320px) { - min-width: 25rem; - } - - > *:not(h4) { - color: inherit; - } - - .h4 { - font-size: 1.8rem; - margin-bottom: 0; - color: ${colors.textDark}; - margin: ${({ isTitleOutside }) => (isTitleOutside ? '-7rem 0 6rem' : '')} - } - - img, object, .g-image { - display: inline-block; - margin: 3rem 0 1rem; - height: 8rem; - width: 8rem; - - display: ${({ isTitleOutside }) => (isTitleOutside ? 'none' : '')}; - - @media(max-width: ${sizes.breakpoints.md}) { - margin: 1.5rem 0 1rem; - } - } - - .g-image { - position: relative; - width: 7rem; - height: 7rem; - margin: 0 0 5rem; - } - - .price { - font-size: 2.1rem; - font-weight: 600; - - span { - font-size: 80%; - font-weight: 400; - } - } - - .duration { - font-size: 1.3rem; - font-weight: 600; - margin: .8rem 0 1.5rem; - } - - .feature { - margin-top: 8rem; - } - - ul { - display: inline-block; - } - - li { - position: relative; - display: block; - font-size: 1.5rem; - text-align: left; - font-size: 85%; - padding-left: 1rem; - - &::before { - content: url(${IconTick}); - position: absolute; - left: -.5rem; - } - - &:not(:last-child) { - margin-bottom: .7rem; - } - } - - .info { - font-size: 95%; - border-top: 1px solid #ddd; - padding-top: 1rem; - } - - @media(min-width: calc(${sizes.breakpoints.lg} + 1px)) { - .span { - display: flex; - justify-content: space-between; - } - } - - .links-container { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - z-index: 9; - - @media(min-width: calc(${sizes.breakpoints.sm} + 1px)) { - position: absolute; - left: 50%; - width: 100%; - bottom: 1rem; - transform: translateX(-50%); - } - - @media(max-width: ${sizes.breakpoints.sm}) { - margin: 3rem 0 1rem; - } - - @media(min-width: calc(${sizes.breakpoints.lg} + 1px)) { - bottom: ${({ transform }) => (transform ? '2rem' : '1.5rem')}; - } - - @media(max-width: 650px) { - position: static; - transform: none; - margin-top: 5rem; - } - } - - .text { - width: 100%; - opacity: .7; - font-size: 90%; - - @media(min-width: calc(${sizes.breakpoints.sm} + 1px)) { - padding: 0 1.5rem; - } - } - - .is-hidden { - display: ${({ hideButton }) => (hideButton ? 'none' : '')}; - } - - .banner { - position: absolute; - left: 0; - bottom: 100%; - width: 100%; - background: ${colors.offWhite2}; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - - p { - width: 20ch; - margin: 0 auto; - padding: .8rem 0; - color: ${({ bannerColor }) => (bannerColor ? bannerColor : '')}; - font-size: 90%; - font-weight: 600; - } - } - - .blue-on-hover { - color: ${colors.text}; - border: 2px solid #fff; - - &:hover { - color: ${colors.white}; - border: 2px solid ${colors.lightBlue}; - } - } - - .btn { - background: ${({ btnBackground }) => (btnBackground ? colors.link : '')}; - color: ${({ btnBackground }) => (btnBackground ? colors.white : '')}; - border-color: ${({ btnBackground }) => (btnBackground ? colors.link : '')}; - - &:hover { - background: ${({ btnBackground }) => (btnBackground ? colors.lightBlue : '')}; - border-color: ${({ btnBackground }) => (btnBackground ? colors.lightBlue : '')}; - } - } - - .sub-action { - font-size: 90%; - margin-top: .5rem; - padding-bottom: 0; - } - - .spacer { - height: 2.5rem; - } -` - -export interface PricingBoxProps { - title: string - img?: HTMLImageElement - gatsbyImage?: JSX.Element - price?: string | JSX.Element - duration?: string - feature?: string | JSX.Element - features?: (string | JSX.Element)[] - transform?: string - background?: boolean - btnText?: string - btnBackground?: boolean - link?: string - hideButton?: true - btn?: JSX.Element - text?: string - banner?: string - bannerColor?: string - subAction?: JSX.Element - isTitleOutside?: boolean - info?: string - areFeaturesBold?: boolean - boldFeaturesCount?: number - perUserMonth?: boolean - headingLevel?: 'h2' | 'h3' -} - -const PricingBox: React.SFC = ({ - title, - img, - price, - duration, - feature, - features, - btnText, - btnBackground, - transform, - background, - link, - hideButton, - btn, - text, - banner, - bannerColor, - subAction, - isTitleOutside, - info, - areFeaturesBold, - boldFeaturesCount = 0, - perUserMonth, - headingLevel, - gatsbyImage -}) => ( - - { - headingLevel === 'h3' ?

    {title}

    : headingLevel === 'h2' ?

    {title}

    :

    {title}

    - } - {img ? img : null} - {gatsbyImage ?
    {gatsbyImage}
    : null} - {price ?
    {price}
    : null} - { perUserMonth ?
    per user/month
    : null } - {duration ?
    {duration}
    : null} - {feature ?
    {feature}
    : null} - {features && features.length ? ( -
      - {features.map((f, i) => ( -
    • - {f} -
      • - ))} -
    - ) : null} - {info ?

    {info}

    : null} -
    - - {btnText ? btnText : 'Start for Free'} - -
    - {text ?

    {text}

    : null} - {btn ? btn : null} - {subAction ? subAction : } -
    - {banner ? ( -
    -

    {banner}

    -
    - ) : null} -     -) - -export default PricingBox diff --git a/src/components/PricingTable.tsx b/src/components/PricingTable.tsx deleted file mode 100644 index db982683b..000000000 --- a/src/components/PricingTable.tsx +++ /dev/null @@ -1,183 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import { colors, sizes } from '../styles/variables' - -const StyledPricingTable = styled.section<{ enableScrollat1080?: boolean, disableMarginBottom?: boolean }>` - padding-bottom: 0; - margin-bottom: ${({disableMarginBottom}) => disableMarginBottom ? 0 : '5rem'}; - - .table-container { - @media (max-width: 1180px) { - overflow-x: ${({ enableScrollat1080: containerMaxWidthLarge }) => (containerMaxWidthLarge ? 'scroll' : '')}; - } - } - - .comparison { - h2 { - font-size: 3rem; - margin-bottom: -2.5rem; - font-weight: 600; - } - - td, - th { - border: none; - } - - .header { - th { - background: ${colors.offWhite}; - } - } - - th { - background: none; - } - - .th { - &__title { - min-width: 26rem; - - @media (max-width: 1160px) { - min-width: 21rem; - } - - @media (max-width: 450px) { - min-width: 18rem; - } - } - } - - tr { - background: ${colors.offWhite}; - - th { - background: ${colors.white}; - font-weight: 600; - } - } - } - - th { - span { - display: block; - } - - img { - height: 2.2rem; - width: 3rem; - transform: translateY(5px); - margin-right: 2rem; - - @media (max-width: 1160px) { - margin-right: 0.5rem; - } - - @media (max-width: ${sizes.breakpoints.md}) { - height: 1.7rem; - transform: translateY(3px); - margin-right: 0.5rem; - } - - @media (max-width: ${sizes.breakpoints.md}) { - height: 1.5rem; - } - } - } - - .header { - th { - text-align: center; - font-weight: 600; - font-size: 2rem; - padding: 3rem; - width: 25%; - - @media (max-width: ${sizes.breakpoints.md}) { - padding: 2rem; - } - - @media (max-width: ${sizes.breakpoints.md}) { - padding: 1.5rem; - } - - span { - font-size: 1.6rem; - font-weight: 400; - - @media (max-width: ${sizes.breakpoints.md}) { - font-size: 1.4rem; - } - - @media (max-width: ${sizes.breakpoints.md}) { - font-size: 1.2rem; - } - - span { - display: inline; - color: ${colors.link}; - font-weight: 600; - } - } - } - } - - .buttons { - th, - td { - background: none; - border: none; - } - - .btn { - margin-top: 2rem; - } - } - - .description { - display: inline-block; - transform: translateY(-0.1rem); - - &__text { - position: absolute; - top: 0; - left: 3rem; - width: 25rem; - min-width: 15rem; - - @media (max-width: ${sizes.breakpoints.md}) { - width: 18rem; - } - } - } - - .disclaimer { - padding: 3rem 0; - background: ${colors.white}; - } -` - -interface PricingTableProps { - title: string | JSX.Element - paragraph?: JSX.Element | string - id?: string - rows?: number - styles?: React.CSSProperties - containerMaxWidthLarge?: boolean - disableMarginBottom?: boolean -} - -const PricingTable: React.SFC = ({ title, paragraph, children, id, rows, styles, containerMaxWidthLarge, disableMarginBottom }) => ( -
    - -

    {title}

    -

    {paragraph}

    -
    - {children}
    -
    -     -
    -) - -export default PricingTable diff --git a/src/components/Quote.tsx b/src/components/Quote.tsx deleted file mode 100644 index 495dfde50..000000000 --- a/src/components/Quote.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import QuoteIcon from '../resources/quote.svg' -import { colors, sizes } from '../styles/variables' - -const StyledQuote = styled.section` - padding: 12rem 0; - margin: 0 auto; - - @media(max-width: ${sizes.breakpoints.md}) { - padding: 8rem 0; - } - - .h4 { - position: relative; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - color: ${colors.text}; - font-size: 2.5rem; - font-weight: 400; - - @media(max-width: ${sizes.breakpoints.sm}) { - font-size: 2.3rem; - } - - span { - max-width: 80rem; - - @media(max-width: 560px) { - padding: 0 1rem; - } - - @media(max-width: ${sizes.breakpoints.sm}) { - width: 100%; - } - } - - object { - height: 7rem; - - &:first-of-type { - transform: rotate(-180deg); - margin-right: 3rem; - } - - &:last-of-type { - margin-left: 3rem; - } - - @media(max-width: ${sizes.breakpoints.md}) { - height: 5rem; - margin: 0 2rem; - } - - @media(max-width: 580px) { - display: none; - } - } - - i { - @media(min-width: 581px) { - display: none; - } - } - } -` - -interface QuoteProps { - title: string | JSX.Element -} - -const Quote: React.SFC = ({title}) => ( - -

    - - “ {title}” - - - -) - -export default Quote diff --git a/src/components/SubmissionSucess.tsx b/src/components/SubmissionSucess.tsx deleted file mode 100644 index 7e6e145fe..000000000 --- a/src/components/SubmissionSucess.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react' -import tick from '../resources/tick.svg' -import styled from '@emotion/styled' -import { sizes } from '../styles/variables' - -const Styled = styled.div` - min-height: 80vh; - display: flex; - justify-content: center; - align-items: center; - - @media (max-width: ${sizes.breakpoints.md}) { - flex-direction: column; - text-align: center; - min-height: 70vh; - } - - h1 { - line-height: 1.8; - } - - span { - font-weight: 600; - } - - img { - display: inline-block; - height: 15rem; - margin-right: 3rem; - - @media (max-width: ${sizes.breakpoints.md}) { - margin-right: 0; - margin-bottom: 3rem; - } - } -` - -const SubmissionSucess = () => ( - - Tick -

    - Thanks! -
    We'll get back to you soon. -

    -     -) - -export default SubmissionSucess diff --git a/src/components/TextBox.tsx b/src/components/TextBox.tsx deleted file mode 100644 index e06eaed72..000000000 --- a/src/components/TextBox.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import { colors, borders } from '../styles/variables' - -const StyledTextBox = styled.div` - font-size: 90%; - - .box { - max-width: 75rem; - margin: 10rem auto; - padding: 8rem 5rem; - background: ${colors.white}; - border-radius: 3px; - border: ${borders.light2}; - } - - h1 { - margin-bottom: 6rem; - } - - h2 { - margin: 6rem 0 5rem; - } - - h3 { - margin-top: 4rem; - } - - h4 { - margin: 3rem 0 1rem; - } - - li + li { - margin-top: 2rem; - } - - .model { - padding: 2rem 3rem; - border: ${borders.light}; - font-size: 95%; - } -` - -const TextBox: React.SFC<{}> = ({ children }) => ( - -
    - { children } -
    -     -) - -export default TextBox diff --git a/src/components/TextCard.tsx b/src/components/TextCard.tsx deleted file mode 100644 index 94635a6f5..000000000 --- a/src/components/TextCard.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import { colors, shadows, sizes } from '../styles/variables' - -import Bitbucket from '../resources/bitbucket.svg' -import Github from '../resources/octicons-mark-github.svg' -import Gitlab from '../resources/gitlab.svg' -import Git from '../resources/git.png' -import VSC from '../resources/vsc.svg' -import Theia from '../resources/theia-ide.svg' -import Docker from '../resources/docker.svg' - -const Logos: any = { - Bitbucket: Bitbucket, - Github: Github, - Gitlab: Gitlab, - Git: Git, - VSC: VSC, - Theia: Theia, - Docker: Docker -} - -const StyledTextCard = styled.div` - width: 24%; - padding: 3rem; - margin-bottom: 3rem; - background: ${colors.white}; - box-shadow: ${shadows.light}; - border-radius: 3px; - - @media(min-width: calc(${sizes.breakpoints.md} + 1px)) { - width: 24%; - } - - @media(max-width: ${sizes.breakpoints.lg}) { - width: 49%; - max-width: 44rem; - } - - @media(max-width: ${sizes.breakpoints.md}) { - min-width: 32rem; - } - - @media(max-width: ${sizes.breakpoints.sm}) { - min-width: 28rem; - } - - .title { - text-align: center; - min-height: 5rem; - } - - .read-more { - margin-top: 6rem; - } - - .brands { - margin-top: 3rem; - } - - img { - height: 3rem; - - &:not(:last-child) { - margin-right: 2rem; - } - } -` - -interface TextCardProps { - title: string - paragraphs: (string | JSX.Element)[] - more?: JSX.Element - logos?: string[] -} - -const TextCard: React.SFC = ({title, paragraphs, more, logos}) => ( - -

    {title}

    - { paragraphs.map((p, i) =>

    {p}

    ) } - { more ? more : null } - {logos && logos.length ?
    - {logos.map((logo, i) => {`${logo})} -
    : null} -     -) - -export default TextCard diff --git a/src/components/TextCards.tsx b/src/components/TextCards.tsx deleted file mode 100644 index 434aabcb9..000000000 --- a/src/components/TextCards.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import { sizes } from '../styles/variables' - -const StyledTextCards = styled.section` - .text-cards { - display: flex; - flex-wrap: wrap; - - @media(min-width: calc(${sizes.breakpoints.md} + 1px)) { - justify-content: space-between; - } - - @media(max-width: ${sizes.breakpoints.md}) { - flex-direction: column; - align-items: center; - } - } -` - -interface TextCardsProps { - title?: string -} - -const TextCards: React.SFC = ({ title, children }) => ( -
    - - { title ?

    {title}

    : null } -
    - {children} -
    -     -
    -) - -export default TextCards diff --git a/src/components/TrustedBy.tsx b/src/components/TrustedBy.tsx deleted file mode 100644 index a1f8ad753..000000000 --- a/src/components/TrustedBy.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import { sizes } from '../styles/variables' - -const StyledTrustedBy = styled.section` - padding: 3rem 0; - - h3 { - text-align: center; - font-weight: 400; - } - - h2 { - text-align: center; - } - - .logos { - display: flex; - flex-wrap: wrap; - justify-content: center; - - @media (max-width: 540px) { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); - } - - a { - flex-basis: calc(14% - 2.2rem); - display: flex; - border: 2px solid transparent; - justify-content: center; - margin: 1.2rem; - - img { - height: 100%; - } - } - } - - .grey-logo { - filter: grayscale(100%) contrast(0%) brightness(116%); - -webkit-filter: grayscale(100%) contrast(0%) brightness(116%); - } - - .fcc { - filter: grayscale(100%) contrast(0%); - -webkit-filter: grayscale(100%) contrast(0%); - width: 13rem; - - @media (max-width: ${sizes.breakpoints.md}) { - width: 12rem; - } - - @media (max-width: ${sizes.breakpoints.md}) { - width: 11rem; - } - } - - .dwave-logo { - transform: scale(1.2); - filter: grayscale(100%) contrast(0%) brightness(112%); - -webkit-filter: grayscale(100%) contrast(0%) brightness(112%); - } - - .four-geeks { - transform: scale(0.9); - } - - .gatsby-logo { - filter: grayscale(100%) opacity(47%); - -webkit-filter: grayscale(100%) opacity(47%); - } - - .vue-logo { - filter: grayscale(100%) opacity(62%); - -webkit-filter: grayscale(100%) opacity(62%); - } -` - -const StyledBrandImage = styled.img<{ transform?: string }>` - width: 9.5rem; - - @media(max-width: ${sizes.breakpoints.lg}) { - width: 9rem; - } - - @media(max-width: ${sizes.breakpoints.md}) { - width: 7rem; - } - - @media(min-width: calc(${sizes.breakpoints.lg} + 1px)) { - transform: ${({ transform }) => (transform ? transform : 'none')}; - } -` - -interface Brand { - alt: string - url: string - svg: string - transform?: string - className?: string -} - -interface TrustedByProps { - brands: Brand[] - title: string | JSX.Element - styles?: React.CSSProperties -} - -const TrustedBy = ({ brands, title, styles }: TrustedByProps) => ( - -
    -

    - {title} -

    -
    - {brands.map((b: Brand) => ( - - - - ))} -
    -
    -     -) - -export default TrustedBy diff --git a/src/components/blog/MorePosts.tsx b/src/components/blog/MorePosts.tsx deleted file mode 100644 index deb7b1a92..000000000 --- a/src/components/blog/MorePosts.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import PostPreview from './PostPreview' -import { Posts } from './Posts' - -const StyledMorePosts = styled.section` - h2 { - text-align: center; - } -` - -const MorePosts = ({ posts }: { posts: any[] }) => ( -
    - -
    -

    - Discover More About Gitpod -

    - - {posts.map((p: any) => ( - - ))} - -
    -     -
    -) - -export default MorePosts diff --git a/src/components/blog/PostBanner.tsx b/src/components/blog/PostBanner.tsx deleted file mode 100644 index 6e2c5adb6..000000000 --- a/src/components/blog/PostBanner.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import React from 'react' - -import styled from '@emotion/styled' -import { colors } from '../../styles/variables' -import { useStaticQuery, graphql } from 'gatsby' -import BackgroundImage from 'gatsby-background-image' - -const StyledPostBanner = styled.header` - position: relative; - overflow-x: hidden; - border-top-left-radius: 2px; - border-top-right-radius: 2px; - - .bg { - display: block; - background-size: cover; - background-position: center; - height: 40rem; - border-top-left-radius: 2px; - border-top-right-radius: 2px; - } - - .contents { - display: flex; - flex-direction: column; - align-items: flex-start; - } - - h1 { - margin-top: 2rem; - } - - .h3 { - margin: 0; - color: ${colors.text}; - font-weight: 200; - } - - .info { - display: flex; - width: 100%; - justify-content: space-between; - } - - .author { - display: flex; - flex-direction: column; - } - - .share { - display: flex; - } - - span + span { - margin-top: 1rem; - } - - span:last-of-type { - &::after { - content: ''; - display: block; - margin-top: 2rem; - height: 5px; - width: 12rem; - background: ${colors.offWhite4}; - border-radius: 5px; - } - } -` - -interface PostBannerProps { - teaserImage: string - title: string - subtitle: string - date: JSX.Element - author: JSX.Element - shareButtons: JSX.Element -} - -const PostBanner: React.SFC = ({ title, subtitle, teaserImage, date, author, shareButtons }) => { - const { allImageSharp } = useStaticQuery(graphql` - query { - allImageSharp { - nodes { - fluid { - originalName - ...GatsbyImageSharpFluid - } - } - } - } - `) - - const image = teaserImage !== null && (teaserImage.substring(0,1) === '/' && !teaserImage.includes(".gif")) ? teaserImage.split('/')[1] : 'placeholder.jpg' - - const fluid = allImageSharp.nodes.find((n: any) => { - return n.fluid.originalName === image - }).fluid - - return ( - - -