|
|
|
@ -10,7 +10,9 @@ import Flex from 'components/Flex'; |
|
|
|
import mountCodeExample from 'utils/mountCodeExample'; |
|
|
|
import PropTypes from 'prop-types'; |
|
|
|
import React, {Component} from 'react'; |
|
|
|
import {graphql} from 'gatsby'; |
|
|
|
import TitleAndMetaTags from 'components/TitleAndMetaTags'; |
|
|
|
import Layout from 'components/Layout'; |
|
|
|
import {colors, media, sharedStyles} from 'theme'; |
|
|
|
import createOgUrl from 'utils/createOgUrl'; |
|
|
|
import loadScript from 'utils/loadScript'; |
|
|
|
@ -70,260 +72,267 @@ class Home extends Component { |
|
|
|
|
|
|
|
render() { |
|
|
|
const {examples, marketing} = this.state; |
|
|
|
const {location} = this.props; |
|
|
|
|
|
|
|
return ( |
|
|
|
<div css={{width: '100%'}}> |
|
|
|
<Layout location={location}> |
|
|
|
<TitleAndMetaTags |
|
|
|
title="React – A JavaScript library for building user interfaces" |
|
|
|
ogUrl={createOgUrl('index.html')} |
|
|
|
/> |
|
|
|
<header |
|
|
|
css={{ |
|
|
|
backgroundColor: colors.dark, |
|
|
|
color: colors.white, |
|
|
|
}}> |
|
|
|
<div |
|
|
|
<div css={{width: '100%'}}> |
|
|
|
<header |
|
|
|
css={{ |
|
|
|
paddingTop: 45, |
|
|
|
paddingBottom: 20, |
|
|
|
|
|
|
|
[media.greaterThan('small')]: { |
|
|
|
paddingTop: 60, |
|
|
|
paddingBottom: 70, |
|
|
|
}, |
|
|
|
|
|
|
|
[media.greaterThan('xlarge')]: { |
|
|
|
paddingTop: 95, |
|
|
|
paddingBottom: 85, |
|
|
|
maxWidth: 1500, // Positioning of background logo
|
|
|
|
marginLeft: 'auto', |
|
|
|
marginRight: 'auto', |
|
|
|
position: 'relative', |
|
|
|
'::before': { |
|
|
|
content: ' ', |
|
|
|
position: 'absolute', |
|
|
|
top: 0, |
|
|
|
left: 0, |
|
|
|
bottom: 0, |
|
|
|
right: 0, |
|
|
|
backgroundImage: `url(${logoWhiteSvg})`, |
|
|
|
backgroundRepeat: 'no-repeat', |
|
|
|
backgroundPosition: '100% 100px', |
|
|
|
backgroundSize: '50% auto', |
|
|
|
opacity: 0.05, |
|
|
|
}, |
|
|
|
}, |
|
|
|
backgroundColor: colors.dark, |
|
|
|
color: colors.white, |
|
|
|
}}> |
|
|
|
<div |
|
|
|
css={{ |
|
|
|
// Content should be above absolutely-positioned hero image
|
|
|
|
position: 'relative', |
|
|
|
}}> |
|
|
|
<Container> |
|
|
|
<h1 |
|
|
|
css={{ |
|
|
|
color: colors.brand, |
|
|
|
textAlign: 'center', |
|
|
|
margin: 0, |
|
|
|
fontSize: 45, |
|
|
|
letterSpacing: '0.01em', |
|
|
|
[media.size('xsmall')]: { |
|
|
|
fontSize: 30, |
|
|
|
}, |
|
|
|
[media.greaterThan('xlarge')]: { |
|
|
|
fontSize: 60, |
|
|
|
}, |
|
|
|
}}> |
|
|
|
React |
|
|
|
</h1> |
|
|
|
<p |
|
|
|
css={{ |
|
|
|
paddingTop: 15, |
|
|
|
textAlign: 'center', |
|
|
|
fontSize: 24, |
|
|
|
letterSpacing: '0.01em', |
|
|
|
fontWeight: 200, |
|
|
|
|
|
|
|
[media.size('xsmall')]: { |
|
|
|
fontSize: 16, |
|
|
|
maxWidth: '12em', |
|
|
|
marginLeft: 'auto', |
|
|
|
marginRight: 'auto', |
|
|
|
}, |
|
|
|
paddingTop: 45, |
|
|
|
paddingBottom: 20, |
|
|
|
|
|
|
|
[media.greaterThan('xlarge')]: { |
|
|
|
paddingTop: 20, |
|
|
|
fontSize: 30, |
|
|
|
}, |
|
|
|
}}> |
|
|
|
A JavaScript library for building user interfaces |
|
|
|
</p> |
|
|
|
<Flex |
|
|
|
valign="center" |
|
|
|
css={{ |
|
|
|
paddingTop: 40, |
|
|
|
[media.greaterThan('small')]: { |
|
|
|
paddingTop: 60, |
|
|
|
paddingBottom: 70, |
|
|
|
}, |
|
|
|
|
|
|
|
[media.greaterThan('xlarge')]: { |
|
|
|
paddingTop: 65, |
|
|
|
}, |
|
|
|
}}> |
|
|
|
<CtaItem> |
|
|
|
<ButtonLink to="/docs/getting-started.html" type="primary"> |
|
|
|
Get Started |
|
|
|
</ButtonLink> |
|
|
|
</CtaItem> |
|
|
|
<CtaItem> |
|
|
|
<ButtonLink to="/tutorial/tutorial.html" type="secondary"> |
|
|
|
Take the Tutorial |
|
|
|
</ButtonLink> |
|
|
|
</CtaItem> |
|
|
|
</Flex> |
|
|
|
</Container> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</header> |
|
|
|
|
|
|
|
<Container> |
|
|
|
<div css={sharedStyles.markdown}> |
|
|
|
<section |
|
|
|
css={[ |
|
|
|
sectionStyles, |
|
|
|
{ |
|
|
|
[media.lessThan('medium')]: { |
|
|
|
marginTop: 0, |
|
|
|
marginBottom: 0, |
|
|
|
overflowX: 'auto', |
|
|
|
paddingTop: 30, |
|
|
|
WebkitOverflowScrolling: 'touch', |
|
|
|
position: 'relative', |
|
|
|
maskImage: |
|
|
|
'linear-gradient(to right, transparent, white 10px, white 90%, transparent)', |
|
|
|
[media.greaterThan('xlarge')]: { |
|
|
|
paddingTop: 95, |
|
|
|
paddingBottom: 85, |
|
|
|
maxWidth: 1500, // Positioning of background logo
|
|
|
|
marginLeft: 'auto', |
|
|
|
marginRight: 'auto', |
|
|
|
position: 'relative', |
|
|
|
'::before': { |
|
|
|
content: ' ', |
|
|
|
position: 'absolute', |
|
|
|
top: 0, |
|
|
|
left: 0, |
|
|
|
bottom: 0, |
|
|
|
right: 0, |
|
|
|
backgroundImage: `url(${logoWhiteSvg})`, |
|
|
|
backgroundRepeat: 'no-repeat', |
|
|
|
backgroundPosition: '100% 100px', |
|
|
|
backgroundSize: '50% auto', |
|
|
|
opacity: 0.05, |
|
|
|
}, |
|
|
|
}, |
|
|
|
]}> |
|
|
|
}}> |
|
|
|
<div |
|
|
|
css={{ |
|
|
|
display: 'flex', |
|
|
|
flexDirection: 'row', |
|
|
|
|
|
|
|
[media.lessThan('medium')]: { |
|
|
|
display: 'block', |
|
|
|
whiteSpace: 'nowrap', |
|
|
|
}, |
|
|
|
// Content should be above absolutely-positioned hero image
|
|
|
|
position: 'relative', |
|
|
|
}}> |
|
|
|
{marketing.map((column, index) => ( |
|
|
|
<div |
|
|
|
key={index} |
|
|
|
<Container> |
|
|
|
<h1 |
|
|
|
css={{ |
|
|
|
display: 'flex', |
|
|
|
flexDirection: 'column', |
|
|
|
flex: '0 1 33%', |
|
|
|
marginLeft: 40, |
|
|
|
|
|
|
|
'&:first-of-type': { |
|
|
|
marginLeft: 0, |
|
|
|
|
|
|
|
[media.lessThan('medium')]: { |
|
|
|
marginLeft: 10, |
|
|
|
}, |
|
|
|
color: colors.brand, |
|
|
|
textAlign: 'center', |
|
|
|
margin: 0, |
|
|
|
fontSize: 45, |
|
|
|
letterSpacing: '0.01em', |
|
|
|
[media.size('xsmall')]: { |
|
|
|
fontSize: 30, |
|
|
|
}, |
|
|
|
|
|
|
|
[media.lessThan('medium')]: { |
|
|
|
display: 'inline-block', |
|
|
|
verticalAlign: 'top', |
|
|
|
marginLeft: 0, |
|
|
|
whiteSpace: 'normal', |
|
|
|
width: '75%', |
|
|
|
marginRight: 20, |
|
|
|
paddingBottom: 40, |
|
|
|
|
|
|
|
'&:first-of-type': { |
|
|
|
marginTop: 0, |
|
|
|
}, |
|
|
|
[media.greaterThan('xlarge')]: { |
|
|
|
fontSize: 60, |
|
|
|
}, |
|
|
|
}}> |
|
|
|
<h3 |
|
|
|
css={[ |
|
|
|
headingStyles, |
|
|
|
{ |
|
|
|
'&&': { |
|
|
|
// Make specificity higher than the site-wide h3 styles.
|
|
|
|
color: colors.subtle, |
|
|
|
paddingTop: 0, |
|
|
|
fontWeight: 300, |
|
|
|
fontSize: 20, |
|
|
|
|
|
|
|
[media.greaterThan('xlarge')]: { |
|
|
|
fontSize: 24, |
|
|
|
fontWeight: 200, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
]}> |
|
|
|
{column.title} |
|
|
|
</h3> |
|
|
|
<div dangerouslySetInnerHTML={{__html: column.content}} /> |
|
|
|
</div> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
<hr |
|
|
|
css={{ |
|
|
|
height: 1, |
|
|
|
marginBottom: -1, |
|
|
|
border: 'none', |
|
|
|
borderBottom: `1 solid ${colors.divider}`, |
|
|
|
}} |
|
|
|
/> |
|
|
|
<section css={sectionStyles}> |
|
|
|
<div id="examples"> |
|
|
|
{examples.map((example, index) => ( |
|
|
|
<div |
|
|
|
key={index} |
|
|
|
React |
|
|
|
</h1> |
|
|
|
<p |
|
|
|
css={{ |
|
|
|
marginTop: 40, |
|
|
|
paddingTop: 15, |
|
|
|
textAlign: 'center', |
|
|
|
fontSize: 24, |
|
|
|
letterSpacing: '0.01em', |
|
|
|
fontWeight: 200, |
|
|
|
|
|
|
|
[media.size('xsmall')]: { |
|
|
|
fontSize: 16, |
|
|
|
maxWidth: '12em', |
|
|
|
marginLeft: 'auto', |
|
|
|
marginRight: 'auto', |
|
|
|
}, |
|
|
|
|
|
|
|
'&:first-child': { |
|
|
|
marginTop: 0, |
|
|
|
[media.greaterThan('xlarge')]: { |
|
|
|
paddingTop: 20, |
|
|
|
fontSize: 30, |
|
|
|
}, |
|
|
|
}}> |
|
|
|
A JavaScript library for building user interfaces |
|
|
|
</p> |
|
|
|
<Flex |
|
|
|
valign="center" |
|
|
|
css={{ |
|
|
|
paddingTop: 40, |
|
|
|
|
|
|
|
[media.greaterThan('xlarge')]: { |
|
|
|
marginTop: 80, |
|
|
|
paddingTop: 65, |
|
|
|
}, |
|
|
|
}}> |
|
|
|
<h3 css={headingStyles}>{example.title}</h3> |
|
|
|
<div dangerouslySetInnerHTML={{__html: example.content}} /> |
|
|
|
<div id={example.id} /> |
|
|
|
</div> |
|
|
|
))} |
|
|
|
<CtaItem> |
|
|
|
<ButtonLink |
|
|
|
to="/docs/getting-started.html" |
|
|
|
type="primary"> |
|
|
|
Get Started |
|
|
|
</ButtonLink> |
|
|
|
</CtaItem> |
|
|
|
<CtaItem> |
|
|
|
<ButtonLink to="/tutorial/tutorial.html" type="secondary"> |
|
|
|
Take the Tutorial |
|
|
|
</ButtonLink> |
|
|
|
</CtaItem> |
|
|
|
</Flex> |
|
|
|
</Container> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
</Container> |
|
|
|
|
|
|
|
<section |
|
|
|
css={{ |
|
|
|
background: colors.dark, |
|
|
|
color: colors.white, |
|
|
|
paddingTop: 45, |
|
|
|
paddingBottom: 45, |
|
|
|
}}> |
|
|
|
</div> |
|
|
|
</header> |
|
|
|
|
|
|
|
<Container> |
|
|
|
<Flex valign="center"> |
|
|
|
<CtaItem> |
|
|
|
<ButtonLink to="/docs/getting-started.html" type="primary"> |
|
|
|
Get Started |
|
|
|
</ButtonLink> |
|
|
|
</CtaItem> |
|
|
|
<CtaItem> |
|
|
|
<ButtonLink to="/tutorial/tutorial.html" type="secondary"> |
|
|
|
Take the Tutorial |
|
|
|
</ButtonLink> |
|
|
|
</CtaItem> |
|
|
|
</Flex> |
|
|
|
<div css={sharedStyles.markdown}> |
|
|
|
<section |
|
|
|
css={[ |
|
|
|
sectionStyles, |
|
|
|
{ |
|
|
|
[media.lessThan('medium')]: { |
|
|
|
marginTop: 0, |
|
|
|
marginBottom: 0, |
|
|
|
overflowX: 'auto', |
|
|
|
paddingTop: 30, |
|
|
|
WebkitOverflowScrolling: 'touch', |
|
|
|
position: 'relative', |
|
|
|
maskImage: |
|
|
|
'linear-gradient(to right, transparent, white 10px, white 90%, transparent)', |
|
|
|
}, |
|
|
|
}, |
|
|
|
]}> |
|
|
|
<div |
|
|
|
css={{ |
|
|
|
display: 'flex', |
|
|
|
flexDirection: 'row', |
|
|
|
|
|
|
|
[media.lessThan('medium')]: { |
|
|
|
display: 'block', |
|
|
|
whiteSpace: 'nowrap', |
|
|
|
}, |
|
|
|
}}> |
|
|
|
{marketing.map((column, index) => ( |
|
|
|
<div |
|
|
|
key={index} |
|
|
|
css={{ |
|
|
|
display: 'flex', |
|
|
|
flexDirection: 'column', |
|
|
|
flex: '0 1 33%', |
|
|
|
marginLeft: 40, |
|
|
|
|
|
|
|
'&:first-of-type': { |
|
|
|
marginLeft: 0, |
|
|
|
|
|
|
|
[media.lessThan('medium')]: { |
|
|
|
marginLeft: 10, |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
[media.lessThan('medium')]: { |
|
|
|
display: 'inline-block', |
|
|
|
verticalAlign: 'top', |
|
|
|
marginLeft: 0, |
|
|
|
whiteSpace: 'normal', |
|
|
|
width: '75%', |
|
|
|
marginRight: 20, |
|
|
|
paddingBottom: 40, |
|
|
|
|
|
|
|
'&:first-of-type': { |
|
|
|
marginTop: 0, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}}> |
|
|
|
<h3 |
|
|
|
css={[ |
|
|
|
headingStyles, |
|
|
|
{ |
|
|
|
'&&': { |
|
|
|
// Make specificity higher than the site-wide h3 styles.
|
|
|
|
color: colors.subtle, |
|
|
|
paddingTop: 0, |
|
|
|
fontWeight: 300, |
|
|
|
fontSize: 20, |
|
|
|
|
|
|
|
[media.greaterThan('xlarge')]: { |
|
|
|
fontSize: 24, |
|
|
|
fontWeight: 200, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
]}> |
|
|
|
{column.title} |
|
|
|
</h3> |
|
|
|
<div dangerouslySetInnerHTML={{__html: column.content}} /> |
|
|
|
</div> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
<hr |
|
|
|
css={{ |
|
|
|
height: 1, |
|
|
|
marginBottom: -1, |
|
|
|
border: 'none', |
|
|
|
borderBottom: `1 solid ${colors.divider}`, |
|
|
|
}} |
|
|
|
/> |
|
|
|
<section css={sectionStyles}> |
|
|
|
<div id="examples"> |
|
|
|
{examples.map((example, index) => ( |
|
|
|
<div |
|
|
|
key={index} |
|
|
|
css={{ |
|
|
|
marginTop: 40, |
|
|
|
|
|
|
|
'&:first-child': { |
|
|
|
marginTop: 0, |
|
|
|
}, |
|
|
|
|
|
|
|
[media.greaterThan('xlarge')]: { |
|
|
|
marginTop: 80, |
|
|
|
}, |
|
|
|
}}> |
|
|
|
<h3 css={headingStyles}>{example.title}</h3> |
|
|
|
<div |
|
|
|
dangerouslySetInnerHTML={{__html: example.content}} |
|
|
|
/> |
|
|
|
<div id={example.id} /> |
|
|
|
</div> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
</Container> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
|
|
|
|
<section |
|
|
|
css={{ |
|
|
|
background: colors.dark, |
|
|
|
color: colors.white, |
|
|
|
paddingTop: 45, |
|
|
|
paddingBottom: 45, |
|
|
|
}}> |
|
|
|
<Container> |
|
|
|
<Flex valign="center"> |
|
|
|
<CtaItem> |
|
|
|
<ButtonLink to="/docs/getting-started.html" type="primary"> |
|
|
|
Get Started |
|
|
|
</ButtonLink> |
|
|
|
</CtaItem> |
|
|
|
<CtaItem> |
|
|
|
<ButtonLink to="/tutorial/tutorial.html" type="secondary"> |
|
|
|
Take the Tutorial |
|
|
|
</ButtonLink> |
|
|
|
</CtaItem> |
|
|
|
</Flex> |
|
|
|
</Container> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
</Layout> |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
@ -334,7 +343,6 @@ Home.propTypes = { |
|
|
|
examples: PropTypes.object.isRequired, |
|
|
|
marketing: PropTypes.object.isRequired, |
|
|
|
}).isRequired, |
|
|
|
location: PropTypes.object.isRequired, |
|
|
|
}; |
|
|
|
|
|
|
|
function renderExamplePlaceholder(containerId) { |
|
|
|
@ -372,7 +380,6 @@ const CtaItem = ({children, primary = false}) => ( |
|
|
|
</div> |
|
|
|
); |
|
|
|
|
|
|
|
// eslint-disable-next-line no-undef
|
|
|
|
export const pageQuery = graphql` |
|
|
|
query IndexMarkdown { |
|
|
|
code: allExampleCode { |
|
|
|
@ -386,7 +393,7 @@ export const pageQuery = graphql` |
|
|
|
} |
|
|
|
} |
|
|
|
examples: allMarkdownRemark( |
|
|
|
filter: {id: {regex: "//home/examples//"}} |
|
|
|
filter: {fileAbsolutePath: {regex: "//home/examples//"}} |
|
|
|
sort: {fields: [frontmatter___order], order: ASC} |
|
|
|
) { |
|
|
|
edges { |
|
|
|
@ -402,7 +409,7 @@ export const pageQuery = graphql` |
|
|
|
} |
|
|
|
} |
|
|
|
marketing: allMarkdownRemark( |
|
|
|
filter: {id: {regex: "//home/marketing//"}} |
|
|
|
filter: {fileAbsolutePath: {regex: "//home/marketing//"}} |
|
|
|
sort: {fields: [frontmatter___order], order: ASC} |
|
|
|
) { |
|
|
|
edges { |
|
|
|
|
Alexander Nanberg
7 years ago
Dan Abramov