lukechilds
/
react.dev
mirror of https://github.com/lukechilds/react.dev.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Minor formatting fixes

main
Yangshun Tay 8 years ago
committed by Tay Yang Shun
parent
a1cb7af47f
commit
137f0ffa0c
2 changed files with 120 additions and 106 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      gatsby-node.js
  2. 225
      src/pages/index.js

1
gatsby-node.js
View File

@ -32,7 +32,6 @@ exports.createPages = async ({graphql, boundActionCreators}) => {
const communityTemplate = resolve('./src/templates/community.js'); const communityTemplate = resolve('./src/templates/community.js');
const docsTemplate = resolve('./src/templates/docs.js'); const docsTemplate = resolve('./src/templates/docs.js');
const tutorialTemplate = resolve('./src/templates/tutorial.js'); const tutorialTemplate = resolve('./src/templates/tutorial.js');
const homeTemplate = resolve('./src/templates/home.js');
const allMarkdown = await graphql( const allMarkdown = await graphql(
` `

225
src/pages/index.js
View File

@ -50,10 +50,7 @@ class Home extends Component {
return ( return (
<div css={{width: '100%'}}> <div css={{width: '100%'}}>
<TitleAndMetaTags <TitleAndMetaTags title={title} ogUrl={createOgUrl('index.html')} />
title={title}
ogUrl={createOgUrl('index.html')}
/>
<header <header
css={{ css={{
backgroundColor: colors.dark, backgroundColor: colors.dark,
@ -146,132 +143,151 @@ class Home extends Component {
<Container> <Container>
<div css={[sharedStyles.markdown, markdownStyles]}> <div css={[sharedStyles.markdown, markdownStyles]}>
<section className="home-section" css={{ <section
[media.lessThan('medium')]: { className="home-section"
marginTop: 0, css={{
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')]: { [media.lessThan('medium')]: {
display: 'block', marginTop: 0,
whiteSpace: 'nowrap', marginBottom: 0,
overflowX: 'auto',
paddingTop: 30,
WebkitOverflowScrolling: 'touch',
position: 'relative',
maskImage:
'linear-gradient(to right, transparent, white 10px, white 90%, transparent)',
}, },
}}> }}>
{marketingColumns.map((column, index) => <div
<div key={index} css={{ css={{
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'row',
flex: '0 1 33%',
marginLeft: 40,
'&:first-of-type': { [media.lessThan('medium')]: {
marginLeft: 0, display: 'block',
whiteSpace: 'nowrap',
},
}}>
{marketingColumns.map((column, index) => (
<div
key={index}
css={{
display: 'flex',
flexDirection: 'column',
flex: '0 1 33%',
marginLeft: 40,
[media.lessThan('medium')]: { '&:first-of-type': {
marginLeft: 10, marginLeft: 0,
[media.lessThan('medium')]: {
marginLeft: 10,
},
}, },
},
[media.lessThan('medium')]: { [media.lessThan('medium')]: {
display: 'inline-block', display: 'inline-block',
verticalAlign: 'top', verticalAlign: 'top',
marginLeft: 0, marginLeft: 0,
whiteSpace: 'normal', whiteSpace: 'normal',
width: '75%', width: '75%',
marginRight: 20, marginRight: 20,
paddingBottom: 40, paddingBottom: 40,
'&:first-of-type': {
marginTop: 0,
},
},
'&:first-of-type': { '& p': {
marginTop: 0, lineHeight: 1.7,
}, },
}, }}>
<h3
'& p': { css={{
lineHeight: 1.7, '&&': {
}, // Make specificity higher than the site-wide h3 styles.
}}> color: colors.subtle,
<h3 css={{ marginBottom: 20,
'&&': { // Make specificity higher than the site-wide h3 styles. paddingTop: 0,
color: colors.subtle, fontWeight: 300,
marginBottom: 20, fontSize: 20,
paddingTop: 0,
fontWeight: 300, [media.greaterThan('xlarge')]: {
fontSize: 20, fontSize: 24,
fontWeight: 200,
[media.greaterThan('xlarge')]: { },
fontSize: 24,
fontWeight: 200,
}, },
}, }}>
}}>{column.title}</h3> {column.title}
</h3>
<div dangerouslySetInnerHTML={{__html: column.content}} /> <div dangerouslySetInnerHTML={{__html: column.content}} />
</div> </div>
)} ))}
</div> </div>
</section> </section>
<hr css={{ <hr
height: 1, css={{
marginBottom: -1, height: 1,
border: 'none', marginBottom: -1,
borderBottom: `1 solid ${colors.divider}`, border: 'none',
}} /> borderBottom: `1 solid ${colors.divider}`,
}}
/>
<section className="home-section"> <section className="home-section">
<div id="examples"> <div id="examples">
<div className="example"> <div className="example">
<h3>A Simple Component</h3> <h3>A Simple Component</h3>
<p> <p>
React components implement a `render()` method that takes input data and React components implement a `render()` method that takes
returns what to display. This example uses an XML-like syntax called input data and returns what to display. This example uses an
JSX. Input data that is passed into the component can be accessed by XML-like syntax called JSX. Input data that is passed into
`render()` via `this.props`. the component can be accessed by `render()` via
`this.props`.
</p> </p>
<p> <p>
<strong>JSX is optional and not required to use React.</strong> <strong>
Try the JSX is optional and not required to use React.
<a href="http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&code_lz=MYGwhgzhAEASCmIQHsCy8pgOb2vAHgC7wB2AJjAErxjCEB0AwsgLYAOyJph0A3gFABIAE6ky8YQAoAlHyEj4hAK7CS0ADxkAlgDcAfAiTI-hABZaI9NsORtLJMC3gBfdQHpt-gNxDn_P_zUtIQAIgDyqPSi5BKS6oYo6Jg40A5OALwARCHwOlokmdBuegA00CzISiSEAHLI4tJeQA&debug=false&circleciRepo=&evaluate=false&lineWrap=false&presets=react&prettier=true&targets=&version=6.26.0">Babel REPL</a> </strong>{' '}
to see the raw JavaScript code produced by the JSX compilation step. Try the{' '}
<a href="http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&code_lz=MYGwhgzhAEASCmIQHsCy8pgOb2vAHgC7wB2AJjAErxjCEB0AwsgLYAOyJph0A3gFABIAE6ky8YQAoAlHyEj4hAK7CS0ADxkAlgDcAfAiTI-hABZaI9NsORtLJMC3gBfdQHpt-gNxDn_P_zUtIQAIgDyqPSi5BKS6oYo6Jg40A5OALwARCHwOlokmdBuegA00CzISiSEAHLI4tJeQA&debug=false&circleciRepo=&evaluate=false&lineWrap=false&presets=react&prettier=true&targets=&version=6.26.0">
Babel REPL
</a>{' '}
to see the raw JavaScript code produced by the JSX
compilation step.
</p> </p>
<div id="helloExample"></div> <div id="helloExample" />
</div> </div>
<div className="example"> <div className="example">
<h3>A Stateful Component</h3> <h3>A Stateful Component</h3>
<p> <p>
In addition to taking input data (accessed via `this.props`), a In addition to taking input data (accessed via
component can maintain internal state data (accessed via `this.state`). `this.props`), a component can maintain internal state data
When a component's state data changes, the rendered markup will be (accessed via `this.state`). When a component's state data
updated by re-invoking `render()`. changes, the rendered markup will be updated by re-invoking
`render()`.
</p> </p>
<div id="timerExample"></div> <div id="timerExample" />
</div> </div>
<div className="example"> <div className="example">
<h3>An Application</h3> <h3>An Application</h3>
<p> <p>
Using `props` and `state`, we can put together a small Todo application. Using `props` and `state`, we can put together a small Todo
This example uses `state` to track the current list of items as well as application. This example uses `state` to track the current
the text that the user has entered. Although event handlers appear to be list of items as well as the text that the user has entered.
rendered inline, they will be collected and implemented using event Although event handlers appear to be rendered inline, they
delegation. will be collected and implemented using event delegation.
</p> </p>
<div id="todoExample"></div> <div id="todoExample" />
</div> </div>
<div className="example"> <div className="example">
<h3>A Component Using External Plugins</h3> <h3>A Component Using External Plugins</h3>
<p> <p>
React is flexible and provides hooks that allow you to interface with React is flexible and provides hooks that allow you to
other libraries and frameworks. This example uses <strong>remarkable</strong>, an interface with other libraries and frameworks. This example
external Markdown library, to convert the textarea's value in real time. uses <strong>remarkable</strong>, an external Markdown
library, to convert the textarea's value in real time.
</p> </p>
<div id="markdownExample"></div> <div id="markdownExample" />
</div> </div>
</div> </div>
</section> </section>
@ -350,22 +366,21 @@ const CtaItem = ({children, primary = false}) => (
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
export const pageQuery = graphql` export const pageQuery = graphql`
query MarketingMarkdown { query MarketingMarkdown {
allMarkdownRemark( allMarkdownRemark(
filter: {id: {regex: "/marketing/"}}, filter: {id: {regex: "/marketing/"}}
sort: {fields: [frontmatter___order], sort: {fields: [frontmatter___order], order: ASC}
order: ASC} ) {
) { edges {
edges { node {
node { frontmatter {
frontmatter { title
title }
html
} }
html
} }
} }
} }
}
`; `;
export default Home; export default Home;

Write Preview
Loading…
Cancel
Save