Skip to content

Commit

Permalink
chore(www): refactor, tidy and convert Gatsby homepage to function co…
Browse files Browse the repository at this point in the history 
…mponent (#25540)

* move <Diagram/> styles inside <Diagram/> component

* convert IndexRoute to function component

* add HomepageGetStarted component

* moved the wrapper styles to object

* semantics :3
  • Loading branch information
@abhishekjakhar
abhishekjakhar committed Jul 9, 2020
1 parent 1c3ebf7 commit d048dbd
Show file tree
Hide file tree
Showing 3 changed files with 208 additions and 206 deletions.
190 changes: 99 additions & 91 deletions www/src/components/diagram.js
View file
Expand Up @@ -215,114 +215,122 @@ const Diagram = () => (
`}
render={({ allStaticHostsYaml: { nodes: staticHosts } }) => (
<section
className="Diagram"
sx={{
flex: `1 1 100%`,
fontFamily: `heading`,
py: 6,
textAlign: `center`,
[mediaQueries.sm]: {
px: 6,
},
width: `100%`,
p: 8,
pt: 0,
}}
>
<h1
<div
className="Diagram"
sx={{
fontWeight: `heading`,
mb: 6,
flex: `1 1 100%`,
fontFamily: `heading`,
py: 6,
textAlign: `center`,
[mediaQueries.sm]: {
px: 6,
},
}}
>
How Gatsby works
</h1>
<div sx={{ maxWidth: `30rem`, mt: 0, mx: `auto`, mb: 9 }}>
<FuturaParagraph>
Pull data from <em>anywhere</em>
</FuturaParagraph>
</div>

<Segment className="Source">
<SegmentTitle>Data Sources</SegmentTitle>
<SourceItems>
<SourceItem>
<ItemTitle>CMSs</ItemTitle>
<ItemDescription>
Contentful, Drupal, WordPress, etc.
</ItemDescription>
</SourceItem>
<SourceItem>
<ItemTitle>Markdown</ItemTitle>
<ItemDescription>Documentation, Posts, etc.</ItemDescription>
</SourceItem>
<SourceItem>
<ItemTitle>Data</ItemTitle>
<ItemDescription>
APIs, Databases, YAML, JSON, CSV, etc.
</ItemDescription>
</SourceItem>
</SourceItems>
</Segment>

<Segment className="Build">
<VerticalLine />
<SegmentTitle>Build</SegmentTitle>
<div
<h1
sx={{
...box,
backgroundColor: `purple.70`,
backgroundSize: t => `${t.sizes[10]} ${t.sizes[10]}`,
backgroundImage: t =>
`linear-gradient(45deg, ${t.colors.purple[80]} 25%, transparent 25%, transparent 50%, ${t.colors.purple[80]} 50%, ${t.colors.purple[80]} 75%, transparent 75%, transparent)`,
py: 0,
fontWeight: `heading`,
mb: 6,
}}
>
How Gatsby works
</h1>
<div sx={{ maxWidth: `30rem`, mt: 0, mx: `auto`, mb: 9 }}>
<FuturaParagraph>
Pull data from <em>anywhere</em>
</FuturaParagraph>
</div>

<Segment className="Source">
<SegmentTitle>Data Sources</SegmentTitle>
<SourceItems>
<SourceItem>
<ItemTitle>CMSs</ItemTitle>
<ItemDescription>
Contentful, Drupal, WordPress, etc.
</ItemDescription>
</SourceItem>
<SourceItem>
<ItemTitle>Markdown</ItemTitle>
<ItemDescription>Documentation, Posts, etc.</ItemDescription>
</SourceItem>
<SourceItem>
<ItemTitle>Data</ItemTitle>
<ItemDescription>
APIs, Databases, YAML, JSON, CSV, etc.
</ItemDescription>
</SourceItem>
</SourceItems>
</Segment>

<Segment className="Build">
<VerticalLine />
<Gatsby />
<SegmentTitle>Build</SegmentTitle>
<div
sx={{
...box,
backgroundColor: `purple.70`,
backgroundSize: t => `${t.sizes[10]} ${t.sizes[10]}`,
backgroundImage: t =>
`linear-gradient(45deg, ${t.colors.purple[80]} 25%, transparent 25%, transparent 50%, ${t.colors.purple[80]} 50%, ${t.colors.purple[80]} 75%, transparent 75%, transparent)`,
py: 0,
}}
>
<VerticalLine />
<Gatsby />
<VerticalLine />
<div
sx={{
...borderAndBoxShadow,
...boxPadding,
bg: `white`,
display: `inline-block`,
py: 3,
width: `auto`,
}}
>
<ItemDescription color="grey.50">
HTML &middot; CSS &middot;
{` `}
<TechWithIcon icon={ReactJSIcon} height="1.1em">
React
</TechWithIcon>
</ItemDescription>
</div>
<VerticalLine />
</div>
</Segment>

<Segment className="Deploy">
<VerticalLine />
<SegmentTitle>Deploy</SegmentTitle>
<div
sx={{
...borderAndBoxShadow,
...boxPadding,
bg: `white`,
display: `inline-block`,
py: 3,
width: `auto`,
...box,
pb: 5,
}}
>
<ItemDescription color="grey.50">
HTML &middot; CSS &middot;
{` `}
<TechWithIcon icon={ReactJSIcon} height="1.1em">
React
</TechWithIcon>
<ItemTitle>Web Hosting</ItemTitle>
<ItemDescription>
{staticHosts.map((staticHost, index) => (
<Fragment key={staticHost.url}>
{index > 0 && `, `}
<ItemDescriptionLink to={staticHost.url}>
{staticHost.title}
</ItemDescriptionLink>
</Fragment>
))}
{` `}& many more
</ItemDescription>
</div>
<VerticalLine />
</div>
</Segment>

<Segment className="Deploy">
<VerticalLine />
<SegmentTitle>Deploy</SegmentTitle>
<div
sx={{
...box,
pb: 5,
}}
>
<ItemTitle>Web Hosting</ItemTitle>
<ItemDescription>
{staticHosts.map((staticHost, index) => (
<Fragment key={staticHost.url}>
{index > 0 && `, `}
<ItemDescriptionLink to={staticHost.url}>
{staticHost.title}
</ItemDescriptionLink>
</Fragment>
))}
{` `}& many more
</ItemDescription>
</div>
</Segment>
</Segment>
</div>
</section>
)}
/>
Expand Down
31 changes: 31 additions & 0 deletions www/src/components/homepage/homepage-get-started.js
View file
@@ -0,0 +1,31 @@
/** @jsx jsx */
import { jsx } from "theme-ui"

import { MdArrowForward as ArrowForwardIcon } from "react-icons/md"

import Container from "../../components/container"
import FuturaParagraph from "../../components/futura-paragraph"
import Button from "../../components/button"

export default function HomepageGetStarted() {
return (
<section sx={{ flex: `1 1 100%`, textAlign: `center` }}>
<Container withSidebar={false}>
<h1 sx={{ fontWeight: `heading`, mt: 0 }}>Curious yet?</h1>
<FuturaParagraph>
It only takes a few minutes to get up and running!
</FuturaParagraph>
<Button
secondary
variant="large"
to="/docs/"
tracking="Curious Yet -> Get Started"
overrideCSS={{ mt: 5 }}
icon={<ArrowForwardIcon />}
>
Get Started
</Button>
</Container>
</section>
)
}

0 comments on commit d048dbd

Please sign in to comment.