Skip to content

Commit dbb36a2

Browse files
author
Jimmy Jia
committed
Improve code appearance and copyediting on docs
Fixes react-bootstrap#94
1 parent 122c9bc commit dbb36a2

7 files changed

+155
-96
lines changed

‎docs/client.js

+2
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,15 @@ import './assets/favicon.ico';
88
import './assets/thumbnail.png';
99
import './assets/thumbnaildiv.png';
1010

11+
import 'codemirror/mode/htmlmixed/htmlmixed';
1112
import 'codemirror/mode/javascript/javascript';
1213
import 'codemirror/theme/solarized.css';
1314
import 'codemirror/lib/codemirror.css';
1415
import './assets/CodeMirror.css';
1516

1617
import React from 'react';
1718
import CodeMirror from 'codemirror';
19+
import 'codemirror/addon/runmode/runmode';
1820
import Router from 'react-router';
1921
import routes from './src/Routes';
2022

‎docs/src/CodeExample.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
3+
export default class CodeExample extends React.Component {
4+
render() {
5+
return (
6+
<pre className="cm-s-solarized cm-s-light">
7+
<code>
8+
{this.props.codeText}
9+
</code>
10+
</pre>
11+
);
12+
}
13+
14+
componentDidMount() {
15+
if (CodeMirror === undefined) {
16+
return;
17+
}
18+
19+
CodeMirror.runMode(
20+
this.props.codeText,
21+
this.props.mode,
22+
React.findDOMNode(this).children[0]
23+
);
24+
}
25+
}

‎docs/src/CodeMirrorWrapper.client.js

-11
This file was deleted.

‎docs/src/CodeMirrorWrapper.js

-4
This file was deleted.

‎docs/src/GettingStartedPage.js

+73-52
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React from 'react';
22

3+
import CodeExample from './CodeExample';
34
import NavMain from './NavMain';
45
import PageHeader from './PageHeader';
56
import PageFooter from './PageFooter';
67

7-
const Page = React.createClass({
8+
export default class Page extends React.Component {
89
render() {
910
return (
1011
<div>
@@ -23,57 +24,75 @@ const Page = React.createClass({
2324

2425
<p>First add the Bootstrap CSS to your project; check <a href="http://getbootstrap.com/getting-started/" name="Bootstrap Docs">here</a> if you have not already done that. Note that:</p>
2526
<ul>
26-
<li>Because many folks use custom bootstrap themes, we do not directly depend on Bootstrap. It is up to you to to determine how you get and link to the bootstrap css and fonts.</li>
27-
<li>React-Bootstrap doesn't depend on a very precise version of Bootstrap. Just pull the latest and, in case of trouble, take hints on the version used by this documentation page. Then, have bootstrap in your dependencies and ensure your build can read your less/sass/scss entry point.</li>
27+
<li>Because many folks use custom Bootstrap themes, we do not directly depend on Bootstrap. It is up to you to to determine how you get and link to the Bootstrap CSS and fonts.</li>
28+
<li>React-Bootstrap doesn't depend on a very precise version of Bootstrap. Just pull the latest and, in case of trouble, take hints on the version used by this documentation page. Then, have Bootstrap in your dependencies and ensure your build can read your Less/Sass/SCSS entry point.</li>
2829
</ul>
2930
<p>Then:</p>
3031

3132
<h3>CommonJS</h3>
3233
<div className="highlight">
33-
<pre><code className="shell">{`
34-
$ npm install react
35-
$ npm install react-bootstrap
36-
`}</code></pre>
37-
<pre><code className="js">{`
38-
var Alert = require('react-bootstrap/lib/Alert');
39-
// or
40-
var Alert = require('react-bootstrap').Alert;
41-
`}</code></pre>
34+
<CodeExample
35+
codeText={
36+
`$ npm install react
37+
$ npm install react-bootstrap`
38+
}
39+
/>
40+
<br />
41+
<CodeExample
42+
mode="javascript"
43+
codeText={
44+
`var Alert = require('react-bootstrap/lib/Alert');
45+
// or
46+
var Alert = require('react-bootstrap').Alert;`
47+
}
48+
/>
4249
</div>
4350

4451
<h3>AMD</h3>
4552
<div className="highlight">
46-
<pre><code className="shell">{`
47-
$ bower install react
48-
$ bower install react-bootstrap
49-
`}</code></pre>
50-
<pre><code className="js">{`
51-
define(['react-bootstrap/lib/Alert'], function(Alert) { ... });
52-
// or
53-
define(['react-bootstrap'], function(ReactBootstrap) { var Alert = ReactBootstrap.Alert; ... });
54-
`}</code></pre>
53+
<CodeExample
54+
codeText={
55+
`$ bower install react
56+
$ bower install react-bootstrap`
57+
}
58+
/>
59+
<br />
60+
<CodeExample
61+
mode="javascript"
62+
codeText={
63+
`define(['react-bootstrap/lib/Alert'], function(Alert) { ... });
64+
// or
65+
define(['react-bootstrap'], function(ReactBootstrap) { var Alert = ReactBootstrap.Alert; ... });`
66+
}
67+
/>
5568
</div>
5669

5770
<h3>Browser globals</h3>
5871
<p>The bower repo contains <code>react-bootstrap.js</code> and <code>react-bootstrap.min.js</code> with all components exported in the <code>window.ReactBootstrap</code> object.</p>
5972
<div className="highlight">
60-
<pre><code className="html">{`
61-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react.js"></script>
62-
<script src="path/to/react-bootstrap-bower/react-bootstrap.min.js"></script>
63-
<script>
64-
var Alert = ReactBootstrap.Alert;
65-
</script>
66-
`}</code></pre>
73+
<CodeExample
74+
mode="htmlmixed"
75+
codeText={
76+
`<script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react.js"></script>
77+
<script src="path/to/react-bootstrap-bower/react-bootstrap.min.js"></script>
78+
<script>
79+
var Alert = ReactBootstrap.Alert;
80+
</script>`
81+
}
82+
/>
6783
</div>
6884

6985
<h3>Without JSX</h3>
7086
<p>If you do not use JSX and just call components as functions, you must explicitly <a href="https://facebook.github.io/react/blog/2014/10/14/introducing-react-elements.html#deprecated-auto-generated-factories">create a factory before calling it</a>. React-bootstrap provides factories for you in <code>lib/factories</code>:</p>
7187
<div className="highlight">
72-
<pre><code className="js">{`
73-
var Alert = require('react-bootstrap/lib/factories').Alert;
74-
// or
75-
var Alert = require('react-bootstrap/lib/factories/Alert');
76-
`}</code></pre>
88+
<CodeExample
89+
mode="javascript"
90+
codeText={
91+
`var Alert = require('react-bootstrap/lib/factories').Alert;
92+
// or
93+
var Alert = require('react-bootstrap/lib/factories/Alert');`
94+
}
95+
/>
7796
</div>
7897
</div>
7998
<div className="bs-docs-section">
@@ -85,21 +104,25 @@ const Page = React.createClass({
85104
<p><a href="http://jquery.com">jQuery</a> is currently required only for IE8 support for components which require reading element positions from the DOM: <code>Popover</code> and <code>Tooltip</code> when launched with <code>OverlayTrigger</code>. We would like to remove this dependency in future versions but for now, including the following snippet in your page should have you covered:</p>
86105

87106
<div className="highlight">
88-
<pre><code className="html">{`
89-
<!--[if lt IE 9]>
90-
<script>
91-
(function(){
92-
var ef = function(){};
93-
window.console = window.console || {log:ef,warn:ef,error:ef,dir:ef};
94-
}());
95-
</script>
96-
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
97-
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
98-
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
99-
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
100-
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
101-
<![endif]-->
102-
`}</code></pre>
107+
<CodeExample
108+
mode="htmlmixed"
109+
codeText={
110+
111+
`<!--[if lt IE 9]>
112+
<script>
113+
(function(){
114+
var ef = function(){};
115+
window.console = window.console || {log:ef,warn:ef,error:ef,dir:ef};
116+
}());
117+
</script>
118+
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
119+
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
120+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
121+
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
122+
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
123+
<![endif]-->`
124+
}
125+
/>
103126
</div>
104127
</div>
105128
</div>
@@ -109,11 +132,9 @@ const Page = React.createClass({
109132
<PageFooter />
110133
</div>
111134
);
112-
},
135+
}
113136

114137
shouldComponentUpdate() {
115138
return false;
116139
}
117-
});
118-
119-
export default Page;
140+
}

‎docs/src/IntroductionPage.js

+42-23
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22

3+
import CodeExample from './CodeExample';
34
import NavMain from './NavMain';
45
import PageHeader from './PageHeader';
56
import PageFooter from './PageFooter';
@@ -32,9 +33,12 @@ const IntroductionPage = React.createClass({
3233
</p>
3334

3435
<div className="highlight">
35-
<pre><code className="js">{`
36-
button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)
37-
`}</code></pre>
36+
<CodeExample
37+
mode="javascript"
38+
codeText={
39+
`button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)`
40+
}
41+
/>
3842
</div>
3943

4044
<p>
@@ -43,11 +47,14 @@ button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)
4347
</p>
4448

4549
<div className="highlight">
46-
<pre><code className="js">{`
47-
<button id="something-btn" type="button" class="btn btn-success btn-sm">
50+
<CodeExample
51+
mode="htmlmixed"
52+
codeText={
53+
`<button id="something-btn" type="button" class="btn btn-success btn-sm">
4854
Something
49-
</button>
50-
`}</code></pre>
55+
</button>`
56+
}
57+
/>
5158
</div>
5259

5360
<p>
@@ -65,11 +72,14 @@ button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)
6572
</p>
6673

6774
<div className="highlight">
68-
<pre><code className="js">{`
69-
<Button bsStyle="success" bsSize="small" onClick={someCallback}>
75+
<CodeExample
76+
mode="javascript"
77+
codeText={
78+
`<Button bsStyle="success" bsSize="small" onClick={someCallback}>
7079
Something
71-
</Button>
72-
`}</code></pre>
80+
</Button>`
81+
}
82+
/>
7383
</div>
7484

7585
<p>
@@ -101,14 +111,17 @@ button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)
101111
</p>
102112

103113
<div className="highlight">
104-
<pre><code className="js">{`
105-
var button = React.DOM.button({
114+
<CodeExample
115+
mode="javascript"
116+
codeText={
117+
`var button = React.DOM.button({
106118
className: "btn btn-lg btn-success",
107119
children: "Register"
108120
});
109121
110-
React.render(button, mountNode);
111-
`}</code></pre>
122+
React.render(button, mountNode);`
123+
}
124+
/>
112125
</div>
113126

114127
<p>
@@ -117,15 +130,18 @@ React.render(button, mountNode);
117130
</p>
118131

119132
<div className="highlight">
120-
<pre><code className="js">{`
121-
var button = ReactBootstrap.Button({
133+
<CodeExample
134+
mode="javascript"
135+
codeText={
136+
`var button = ReactBootstrap.Button({
122137
bsStyle: "success",
123138
bsSize: "large",
124139
children: "Register"
125140
});
126141
127-
React.render(button, mountNode);
128-
`}</code></pre>
142+
React.render(button, mountNode);`
143+
}
144+
/>
129145
</div>
130146

131147
<p>
@@ -144,8 +160,10 @@ React.render(button, mountNode);
144160
</p>
145161

146162
<div className="highlight">
147-
<pre><code className="js">{`
148-
var buttonGroupInstance = (
163+
<CodeExample
164+
mode="javascript"
165+
codeText={
166+
`var buttonGroupInstance = (
149167
<ButtonGroup>
150168
<DropdownButton bsStyle="success" title="Dropdown">
151169
<MenuItem key="1">Dropdown link</MenuItem>
@@ -156,8 +174,9 @@ var buttonGroupInstance = (
156174
</ButtonGroup>
157175
);
158176
159-
React.render(buttonGroupInstance, mountNode);
160-
`}</code></pre>
177+
React.render(buttonGroupInstance, mountNode);`
178+
}
179+
/>
161180
</div>
162181

163182
<p>

0 commit comments

Comments
 (0)