From 3ee3d1d0f9b29692aad0189a5c27ce98bed35380 Mon Sep 17 00:00:00 2001 From: Nisar Hassan Naqvi Date: Mon, 18 Jan 2021 16:00:44 +0000 Subject: [PATCH] make site valid in accordance to W3C validator.. Fixes gitpod-io/website#842 --- gitpod | 2 +- src/components/FeatureCard.tsx | 21 ++++------ src/components/Footer.tsx | 22 ++++++++-- src/components/MoreInfo.tsx | 4 +- src/components/Nav.tsx | 2 +- src/components/PopOver.tsx | 8 ++-- src/components/TrustedBy.tsx | 6 +-- src/components/blog/PostPreview.tsx | 6 ++- src/components/index/PrefixInput.tsx | 50 +++++++++++------------ src/components/index/TextFeature.tsx | 2 +- src/components/pricing/PricingBoxes.tsx | 4 +- src/contents/features.tsx | 15 ++++--- src/contents/moreInfoContents.tsx | 2 +- src/pages/blog.tsx | 8 ++-- src/pages/careers.tsx | 1 + src/pages/enterprise-license.tsx | 14 +++---- src/pages/gitpod-vs-github-codespaces.tsx | 13 ++++-- src/pages/recruiting.tsx | 1 - src/pages/self-hosted.tsx | 2 +- src/pages/vendor.tsx | 3 +- src/styles/base.ts | 3 +- 21 files changed, 105 insertions(+), 84 deletions(-) diff --git a/gitpod b/gitpod index 6eb0ceac3..12d357f46 160000 --- a/gitpod +++ b/gitpod @@ -1 +1 @@ -Subproject commit 6eb0ceac3d127c49d6ca18158058a938339d4c96 +Subproject commit 12d357f465f00682a35f0d74e716650876b30a69 diff --git a/src/components/FeatureCard.tsx b/src/components/FeatureCard.tsx index 9e5a5d84a..b073fb04e 100644 --- a/src/components/FeatureCard.tsx +++ b/src/components/FeatureCard.tsx @@ -5,12 +5,7 @@ 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 -}>` +const Styled = styled.div` display: flex; justify-content: space-between; position: relative; @@ -43,7 +38,7 @@ const Styled = styled.div<{ &:nth-of-type(2n) { @media (min-width: 1141px) { - flex-direction: ${({ opposite }) => (opposite ? 'reverse' : 'row-reverse')}; + flex-direction: ${({ opposite }) => (opposite ? 'row' : 'row-reverse')}; } @media (min-width: 1141px) { @@ -130,15 +125,15 @@ const Styled = styled.div<{ } @media (min-width: 1141px) { - padding-right: ${({ direction }) => (direction === 'right' ? '8rem' : '')}; - padding-left: ${({ direction }) => (!(direction === 'right') ? '8rem' : '')}; + padding-right: ${(props) => (props["data-direction"] === 'right' ? '8rem' : '')}; + padding-left: ${(props) => (!(props["data-direction"] === 'right') ? '8rem' : '')}; min-height: 520px; max-height: 500px; flex: 0 0 52%; &::before { - left: ${({ direction }) => (direction === 'right' ? '' : 0)}; - right: ${({ direction }) => (!(direction === 'right') ? '' : 0)}; + left: ${(props) => (props["data-direction"] === 'right' ? '' : 0)}; + right: ${(props) => (!(props["data-direction"] === 'right') ? '' : 0)}; width: 60vw; } } @@ -181,7 +176,7 @@ const Styled = styled.div<{ .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 + animation: ${(props) => (props["data-direction"] === 'right' ? 'slideInLeft' : 'slideInRight')} 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1 normal forwards; } } @@ -303,7 +298,7 @@ const FeatureCard = ({ return ( = () => ( -
  • {Img}

    {Title}

    -

    {Text}

    + {Text} {Links}
    diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index 697c17919..66e36277a 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -242,7 +242,7 @@ const Nav = () => {
    Gitpod Logo
    - Log In + Log In
    + { + questionMarkShouldNotBeAButton ? ? : + } {isRendered ?
    {description}
    : null} ) diff --git a/src/components/TrustedBy.tsx b/src/components/TrustedBy.tsx index a1f8ad753..d3820c4da 100644 --- a/src/components/TrustedBy.tsx +++ b/src/components/TrustedBy.tsx @@ -78,7 +78,7 @@ const StyledTrustedBy = styled.section` } ` -const StyledBrandImage = styled.img<{ transform?: string }>` +const StyledBrandImage = styled.img<{ transformValue?: string }>` width: 9.5rem; @media(max-width: ${sizes.breakpoints.lg}) { @@ -90,7 +90,7 @@ const StyledBrandImage = styled.img<{ transform?: string }>` } @media(min-width: calc(${sizes.breakpoints.lg} + 1px)) { - transform: ${({ transform }) => (transform ? transform : 'none')}; + transform: ${({ transformValue }) => (transformValue ? transformValue : 'none')}; } ` @@ -117,7 +117,7 @@ const TrustedBy = ({ brands, title, styles }: TrustedByProps) => (
    {brands.map((b: Brand) => ( - + ))}
    diff --git a/src/components/blog/PostPreview.tsx b/src/components/blog/PostPreview.tsx index 78cf28821..1070b93be 100644 --- a/src/components/blog/PostPreview.tsx +++ b/src/components/blog/PostPreview.tsx @@ -45,6 +45,10 @@ const StyledPostPreview = styled.div` font-weight: 400; flex-wrap: wrap; } + + .author-name { + font-weight: 600; + } ` interface BlogData { @@ -120,7 +124,7 @@ const PostPreview: React.SFC = (props) => { by { authors.map((author, idx) => - {author.name}{idx < authors.length - 1 ? ', ' : ''} + {author.name}{idx < authors.length - 1 ? ', ' : ''} ) } diff --git a/src/components/index/PrefixInput.tsx b/src/components/index/PrefixInput.tsx index 877486d2f..56458274e 100644 --- a/src/components/index/PrefixInput.tsx +++ b/src/components/index/PrefixInput.tsx @@ -272,33 +272,33 @@ const PrefixInput = () => { return ( - -
    - -
    -
    + + + + + + https://gitpod.io/# -
    + { onChange={handleChange} type="text" /> -
    + <>

    { error ? error : 'Enter your GitLab, GitHub, or Bitbucket URL' } @@ -320,13 +320,13 @@ const PrefixInput = () => { Start Workspace -

    +     -
    -
    -
    + + +   -
    +     ) } diff --git a/src/components/index/TextFeature.tsx b/src/components/index/TextFeature.tsx index 133298eb0..67f3b4537 100644 --- a/src/components/index/TextFeature.tsx +++ b/src/components/index/TextFeature.tsx @@ -53,7 +53,7 @@ const TextFeature = ({ img, title, text, btnText, href }: TextFeatureProps) => (

    {title}

    -

    {text}

    + <>{text} {btnText ? ( {btnText} diff --git a/src/components/pricing/PricingBoxes.tsx b/src/components/pricing/PricingBoxes.tsx index 96797533b..f87c12f45 100644 --- a/src/components/pricing/PricingBoxes.tsx +++ b/src/components/pricing/PricingBoxes.tsx @@ -273,7 +273,7 @@ const PricingBoxes = ({ isRendered, changeIsRendered }: PricingBoxesProps) => { ))}
    - + {selfHostedPlans.map((plan, i) => ( { headingLevel="h2" /> ))} - +

    diff --git a/src/contents/features.tsx b/src/contents/features.tsx index 04b5eb14e..dff61d254 100644 --- a/src/contents/features.tsx +++ b/src/contents/features.tsx @@ -174,7 +174,7 @@ export const features: FeatureCardProps[] = [ ), icon: ( - + Collaborate with your friends, colleagues, and clients and run software or hunt down bugs together.

    More about Sharing Workspaces. -

    ), icon: ( - + - + @@ -261,12 +260,12 @@ export const features: FeatureCardProps[] = [ ), icon: ( - + - + @@ -297,7 +296,7 @@ export const features: FeatureCardProps[] = [ ), icon: ( - + - + diff --git a/src/contents/moreInfoContents.tsx b/src/contents/moreInfoContents.tsx index 41f4ddadf..c08febeb4 100644 --- a/src/contents/moreInfoContents.tsx +++ b/src/contents/moreInfoContents.tsx @@ -13,7 +13,7 @@ export const MoreInfoContents = { text: ( <>

    Unleash Developer Productivity.

    - Run your own Gitpod and enjoy automated setups, better collaboration, higher code quality, and a more streamlined workflow. +

    Run your own Gitpod and enjoy automated setups, better collaboration, higher code quality, and a more streamlined workflow.

    ), links: ( diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx index 5a3f040d9..c4516a8a2 100644 --- a/src/pages/blog.tsx +++ b/src/pages/blog.tsx @@ -102,15 +102,15 @@ const BlogPage: React.SFC = (props) => { {/* ----- Section Posts ----- */} - {/* ----- Section Newsletter ----- */} {/* */} diff --git a/src/pages/careers.tsx b/src/pages/careers.tsx index 894d31d06..21dc02189 100644 --- a/src/pages/careers.tsx +++ b/src/pages/careers.tsx @@ -169,6 +169,7 @@ const Careers = () => (
    +

    Gitpod Team

    diff --git a/src/pages/enterprise-license.tsx b/src/pages/enterprise-license.tsx index ff1a6f879..6c5f017ac 100644 --- a/src/pages/enterprise-license.tsx +++ b/src/pages/enterprise-license.tsx @@ -47,7 +47,7 @@ const StyledEnterpriseLicensePage = styled.div` margin-bottom: 5rem; } - h3 { + h2 { font-size: 2rem; } @@ -119,7 +119,7 @@ const StyledEnterpriseLicensePage = styled.div` max-width: 500px; margin: 0 auto 10rem; - h3 { + h2 { font-weight: 400; } @@ -324,7 +324,7 @@ const EnterpriseLicensePage = () => {
    -

    How many seats would you like to purchase?

    +

    How many seats would you like to purchase?

    -

    What is the domain name of your Gitpod Self-Hosted installation?

    +

    What is the domain name of your Gitpod Self-Hosted installation?

    -

    Customer Information

    +

    Customer Information

    -
    +
    Gitpod vs GitHub Codespaces at a Glance} @@ -106,10 +111,10 @@ const GitpodVsGitHubCodespacesPage = () => (   -

    Gitpod

    + Gitpod -

    GitHub Codespaces

    + GitHub Codespaces @@ -287,7 +292,7 @@ const GitpodVsGitHubCodespacesPage = () => (
    -
    + diff --git a/src/pages/recruiting.tsx b/src/pages/recruiting.tsx index 8bba07bee..4df8cffe9 100644 --- a/src/pages/recruiting.tsx +++ b/src/pages/recruiting.tsx @@ -2,7 +2,6 @@ import React from 'react' import IndexLayout from '../layouts' import Banner from '../components/Banner' -import Recruiting from '../resources/recruiting-icon.svg' import TextCards from '../components/TextCards' import TextCard from '../components/TextCard' import { textCardsData } from '../contents/recruiting' diff --git a/src/pages/self-hosted.tsx b/src/pages/self-hosted.tsx index d268dd46c..303f908dc 100644 --- a/src/pages/self-hosted.tsx +++ b/src/pages/self-hosted.tsx @@ -51,7 +51,7 @@ const SelfHostedPage: React.SFC<{}> = ({ data }: any) => { title={

    Self-Host Gitpod
    on Your Own Infrastructure. -

    + } linkPath="/self-hosted/#install" linkText="Install Now" diff --git a/src/pages/vendor.tsx b/src/pages/vendor.tsx index d1a2f1d21..f5e56be98 100644 --- a/src/pages/vendor.tsx +++ b/src/pages/vendor.tsx @@ -2,7 +2,6 @@ import React from 'react' import IndexLayout from '../layouts' import Banner from '../components/Banner' -import Vendor from '../resources/vendor.svg' import TextCards from '../components/TextCards' import TextCard from '../components/TextCard' import { textCardsData } from '../contents/vendor' @@ -16,7 +15,7 @@ import Circle from '../components/Circle' import Bitbucket from '../resources/bitbucket.svg' import Github from '../resources/octicons-mark-github.svg' import Gitlab from '../resources/gitlab.svg' -import { Link } from 'gatsby' +import { Link, graphql } from 'gatsby' import Img from 'gatsby-image' const VendorPage: React.SFC<{}> = ({data}: any) => ( diff --git a/src/styles/base.ts b/src/styles/base.ts index aef7109fc..2a5dfd3d9 100644 --- a/src/styles/base.ts +++ b/src/styles/base.ts @@ -40,7 +40,8 @@ export default ` overflow-x: hidden; } - section { + section, + .section { padding: 12rem 0; @media(max-width: ${sizes.breakpoints.md}) {