Skip to content

Commit 57baeb1

Browse files
yangshunyangshun
committed
Shift out examples content
1 parent 7a44e5b commit 57baeb1

File tree

5 files changed

+96
-90
lines changed

5 files changed

+96
-90
lines changed

‎content/examples/a-component-using-external-plugins.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
title: A Component Using External Plugins
3+
order: 3
4+
example_name: markdownExample
5+
---
6+
7+
React is flexible and provides hooks that allow you to interface with other libraries and frameworks. This example uses **remarkable**, an external Markdown library, to convert the `<textarea>`'s value in real time.

‎content/examples/a-simple-component.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: A Simple Component
3+
order: 0
4+
example_name: helloExample
5+
---
6+
7+
React components implement a `render()` method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by `render()` via `this.props`.
8+
9+
**JSX is optional and not required to use React.** Try the [Babel REPL](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) to see the raw JavaScript code produced by the JSX compilation step.

‎content/examples/a-stateful-component.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
title: A Stateful Component
3+
order: 1
4+
example_name: timerExample
5+
---
6+
7+
In addition to taking input data (accessed via `this.props`), a component can maintain internal state data (accessed via `this.state`). When a component's state data changes, the rendered markup will be updated by re-invoking `render()`.

‎content/examples/an-application.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
title: An Application
3+
order: 2
4+
example_name: todoExample
5+
---
6+
7+
Using `props` and `state`, we can put together a small Todo application. This example uses `state` to track the current list of items as well as the text that the user has entered. Although event handlers appear to be rendered inline, they will be collected and implemented using event delegation.

‎src/pages/index.js

Lines changed: 66 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,15 @@ class Home extends Component {
4343
render() {
4444
const {data} = this.props;
4545
const title = 'React - A JavaScript library for building user interfaces';
46-
const marketingColumns = data.allMarkdownRemark.edges.map(edge => ({
46+
const marketingContent = data.marketing.edges.map(edge => ({
4747
title: edge.node.frontmatter.title,
4848
content: edge.node.html,
4949
}));
50+
const examplesContent = data.examples.edges.map(edge => ({
51+
title: edge.node.frontmatter.title,
52+
name: edge.node.frontmatter.example_name,
53+
content: edge.node.html,
54+
}));
5055

5156
return (
5257
<div css={{width: '100%'}}>
@@ -142,7 +147,7 @@ class Home extends Component {
142147
</header>
143148

144149
<Container>
145-
<div css={[sharedStyles.markdown, markdownStyles]}>
150+
<div css={sharedStyles.markdown}>
146151
<section
147152
css={[
148153
sectionStyles,
@@ -169,7 +174,7 @@ class Home extends Component {
169174
whiteSpace: 'nowrap',
170175
},
171176
}}>
172-
{marketingColumns.map((column, index) => (
177+
{marketingContent.map((column, index) => (
173178
<div
174179
key={index}
175180
css={{
@@ -199,27 +204,25 @@ class Home extends Component {
199204
marginTop: 0,
200205
},
201206
},
202-
203-
'& p': {
204-
lineHeight: 1.7,
205-
},
206207
}}>
207208
<h3
208-
css={{
209-
'&&': {
210-
// Make specificity higher than the site-wide h3 styles.
211-
color: colors.subtle,
212-
marginBottom: 20,
213-
paddingTop: 0,
214-
fontWeight: 300,
215-
fontSize: 20,
216-
217-
[media.greaterThan('xlarge')]: {
218-
fontSize: 24,
219-
fontWeight: 200,
209+
css={[
210+
headingStyles,
211+
{
212+
'&&': {
213+
// Make specificity higher than the site-wide h3 styles.
214+
color: colors.subtle,
215+
paddingTop: 0,
216+
fontWeight: 300,
217+
fontSize: 20,
218+
219+
[media.greaterThan('xlarge')]: {
220+
fontSize: 24,
221+
fontWeight: 200,
222+
},
220223
},
221224
},
222-
}}>
225+
]}>
223226
{column.title}
224227
</h3>
225228
<div dangerouslySetInnerHTML={{__html: column.content}} />
@@ -237,60 +240,25 @@ class Home extends Component {
237240
/>
238241
<section css={sectionStyles}>
239242
<div id="examples">
240-
<div className="example">
241-
<h3>A Simple Component</h3>
242-
<p>
243-
React components implement a `render()` method that takes
244-
input data and returns what to display. This example uses an
245-
XML-like syntax called JSX. Input data that is passed into
246-
the component can be accessed by `render()` via
247-
`this.props`.
248-
</p>
249-
<p>
250-
<strong>
251-
JSX is optional and not required to use React.
252-
</strong>{' '}
253-
Try the{' '}
254-
<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">
255-
Babel REPL
256-
</a>{' '}
257-
to see the raw JavaScript code produced by the JSX
258-
compilation step.
259-
</p>
260-
<div id="helloExample" />
261-
</div>
262-
<div className="example">
263-
<h3>A Stateful Component</h3>
264-
<p>
265-
In addition to taking input data (accessed via
266-
`this.props`), a component can maintain internal state data
267-
(accessed via `this.state`). When a component's state data
268-
changes, the rendered markup will be updated by re-invoking
269-
`render()`.
270-
</p>
271-
<div id="timerExample" />
272-
</div>
273-
<div className="example">
274-
<h3>An Application</h3>
275-
<p>
276-
Using `props` and `state`, we can put together a small Todo
277-
application. This example uses `state` to track the current
278-
list of items as well as the text that the user has entered.
279-
Although event handlers appear to be rendered inline, they
280-
will be collected and implemented using event delegation.
281-
</p>
282-
<div id="todoExample" />
283-
</div>
284-
<div className="example">
285-
<h3>A Component Using External Plugins</h3>
286-
<p>
287-
React is flexible and provides hooks that allow you to
288-
interface with other libraries and frameworks. This example
289-
uses <strong>remarkable</strong>, an external Markdown
290-
library, to convert the textarea's value in real time.
291-
</p>
292-
<div id="markdownExample" />
293-
</div>
243+
{examplesContent.map((example, index) => (
244+
<div
245+
key={index}
246+
css={{
247+
marginTop: 40,
248+
249+
'&:first-child': {
250+
marginTop: 0,
251+
},
252+
253+
[media.greaterThan('xlarge')]: {
254+
marginTop: 80,
255+
},
256+
}}>
257+
<h3 css={headingStyles}>{example.title}</h3>
258+
<div dangerouslySetInnerHTML={{__html: example.content}} />
259+
<div id={example.name} />
260+
</div>
261+
))}
294262
</div>
295263
</section>
296264
</div>
@@ -324,7 +292,10 @@ class Home extends Component {
324292
}
325293

326294
Home.propTypes = {
327-
data: PropTypes.object.isRequired,
295+
data: PropTypes.shape({
296+
marketing: PropTypes.object.isRequired,
297+
examples: PropTypes.object.isRequired,
298+
}).isRequired,
328299
location: PropTypes.object.isRequired,
329300
};
330301

@@ -368,15 +339,29 @@ const CtaItem = ({children, primary = false}) => (
368339

369340
// eslint-disable-next-line no-undef
370341
export const pageQuery = graphql`
371-
query MarketingMarkdown {
372-
allMarkdownRemark(
373-
filter: {id: {regex: "/marketing/"}}
342+
query IndexMarkdown {
343+
marketing: allMarkdownRemark(
344+
filter: {id: {regex: "//marketing//"}}
345+
sort: {fields: [frontmatter___order], order: ASC}
346+
) {
347+
edges {
348+
node {
349+
frontmatter {
350+
title
351+
}
352+
html
353+
}
354+
}
355+
}
356+
examples: allMarkdownRemark(
357+
filter: {id: {regex: "//examples//"}}
374358
sort: {fields: [frontmatter___order], order: ASC}
375359
) {
376360
edges {
377361
node {
378362
frontmatter {
379363
title
364+
example_name
380365
}
381366
html
382367
}
@@ -397,18 +382,9 @@ const sectionStyles = {
397382
},
398383
};
399384

400-
// TODO This nasty CSS is required because 'docs/index.md' defines hard-coded class names.
401-
const markdownStyles = {
402-
'& .example': {
403-
marginTop: 40,
404-
405-
'&:first-child': {
406-
marginTop: 0,
407-
},
408-
409-
[media.greaterThan('xlarge')]: {
410-
marginTop: 80,
411-
},
385+
const headingStyles = {
386+
'&&': {
387+
marginBottom: 20,
412388
},
413389
};
414390

0 commit comments

Comments
 (0)