Improve code appearance and copyediting on docs

Fixes react-bootstrap#94
martini-source · May 18, 2015 · dbb36a2 · dbb36a2
1 parent 122c9bc
commit dbb36a2
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 96 deletions.
diff --git a/docs/client.js b/docs/client.js
@@ -8,13 +8,15 @@ import './assets/favicon.ico';
 import './assets/thumbnail.png';
 import './assets/thumbnaildiv.png';
 
+import 'codemirror/mode/htmlmixed/htmlmixed';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/theme/solarized.css';
 import 'codemirror/lib/codemirror.css';
 import './assets/CodeMirror.css';
 
 import React from 'react';
 import CodeMirror from 'codemirror';
+import 'codemirror/addon/runmode/runmode';
 import Router from 'react-router';
 import routes from './src/Routes';
 

diff --git a/docs/src/CodeExample.js b/docs/src/CodeExample.js
@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default class CodeExample extends React.Component {
+  render() {
+    return (
+      <pre className="cm-s-solarized cm-s-light">
+        <code>
+          {this.props.codeText}
+        </code>
+      </pre>
+    );
+  }
+
+  componentDidMount() {
+    if (CodeMirror === undefined) {
+      return;
+    }
+
+    CodeMirror.runMode(
+      this.props.codeText,
+      this.props.mode,
+      React.findDOMNode(this).children[0]
+    );
+  }
+}
diff --git a/docs/src/CodeMirrorWrapper.client.js b/docs/src/CodeMirrorWrapper.client.js
diff --git a/docs/src/CodeMirrorWrapper.js b/docs/src/CodeMirrorWrapper.js
diff --git a/docs/src/GettingStartedPage.js b/docs/src/GettingStartedPage.js
@@ -1,10 +1,11 @@
 import React from 'react';
 
+import CodeExample from './CodeExample';
 import NavMain from './NavMain';
 import PageHeader from './PageHeader';
 import PageFooter from './PageFooter';
 
-const Page = React.createClass({
+export default class Page extends React.Component {
   render() {
     return (
         <div>
@@ -23,57 +24,75 @@ const Page = React.createClass({
 
                   <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>
                   <ul>
-                    <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>
-                    <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>
+                    <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>
+                    <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>
                   </ul>
                   <p>Then:</p>
 
                   <h3>CommonJS</h3>
                   <div className="highlight">
-                    <pre><code className="shell">{`
-  $ npm install react
-  $ npm install react-bootstrap
-                    `}</code></pre>
-                    <pre><code className="js">{`
-  var Alert = require('react-bootstrap/lib/Alert');
-  // or
-  var Alert = require('react-bootstrap').Alert;
-                    `}</code></pre>
+                    <CodeExample
+                      codeText={
+`$ npm install react
+$ npm install react-bootstrap`
+                      }
+                    />
+                    <br />
+                    <CodeExample
+                      mode="javascript"
+                      codeText={
+`var Alert = require('react-bootstrap/lib/Alert');
+// or
+var Alert = require('react-bootstrap').Alert;`
+                      }
+                    />
                   </div>
 
                   <h3>AMD</h3>
                   <div className="highlight">
-                    <pre><code className="shell">{`
-  $ bower install react
-  $ bower install react-bootstrap
-                    `}</code></pre>
-                    <pre><code className="js">{`
-  define(['react-bootstrap/lib/Alert'], function(Alert) { ... });
-  // or
-  define(['react-bootstrap'], function(ReactBootstrap) { var Alert = ReactBootstrap.Alert; ... });
-                    `}</code></pre>
+                    <CodeExample
+                      codeText={
+`$ bower install react
+$ bower install react-bootstrap`
+                      }
+                    />
+                    <br />
+                    <CodeExample
+                      mode="javascript"
+                      codeText={
+`define(['react-bootstrap/lib/Alert'], function(Alert) { ... });
+// or
+define(['react-bootstrap'], function(ReactBootstrap) { var Alert = ReactBootstrap.Alert; ... });`
+                      }
+                    />
                   </div>
 
                   <h3>Browser globals</h3>
                   <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>
                   <div className="highlight">
-                    <pre><code className="html">{`
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react.js"></script>
-  <script src="path/to/react-bootstrap-bower/react-bootstrap.min.js"></script>
-  <script>
-    var Alert = ReactBootstrap.Alert;
-  </script>
-                    `}</code></pre>
+                    <CodeExample
+                      mode="htmlmixed"
+                      codeText={
+`<script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react.js"></script>
+<script src="path/to/react-bootstrap-bower/react-bootstrap.min.js"></script>
+<script>
+  var Alert = ReactBootstrap.Alert;
+</script>`
+                      }
+                    />
                   </div>
 
                   <h3>Without JSX</h3>
                   <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>
                   <div className="highlight">
-                    <pre><code className="js">{`
-  var Alert = require('react-bootstrap/lib/factories').Alert;
-  // or
-  var Alert = require('react-bootstrap/lib/factories/Alert');
-                    `}</code></pre>
+                    <CodeExample
+                      mode="javascript"
+                      codeText={
+`var Alert = require('react-bootstrap/lib/factories').Alert;
+// or
+var Alert = require('react-bootstrap/lib/factories/Alert');`
+                      }
+                    />
                   </div>
                 </div>
                 <div className="bs-docs-section">
@@ -85,21 +104,25 @@ const Page = React.createClass({
                   <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>
 
                   <div className="highlight">
-                    <pre><code className="html">{`
-  <!--[if lt IE 9]>
-    <script>
-      (function(){
-        var ef = function(){};
-        window.console = window.console || {log:ef,warn:ef,error:ef,dir:ef};
-      }());
-    </script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
-  <![endif]-->
-                    `}</code></pre>
+                    <CodeExample
+                      mode="htmlmixed"
+                      codeText={
+
+`<!--[if lt IE 9]>
+  <script>
+    (function(){
+      var ef = function(){};
+      window.console = window.console || {log:ef,warn:ef,error:ef,dir:ef};
+    }());
+  </script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
+<![endif]-->`
+                      }
+                    />
                   </div>
                 </div>
               </div>
@@ -109,11 +132,9 @@ const Page = React.createClass({
           <PageFooter />
         </div>
       );
-  },
+  }
 
   shouldComponentUpdate() {
     return false;
   }
-});
-
-export default Page;
+}
diff --git a/docs/src/IntroductionPage.js b/docs/src/IntroductionPage.js
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import CodeExample from './CodeExample';
 import NavMain from './NavMain';
 import PageHeader from './PageHeader';
 import PageFooter from './PageFooter';
@@ -32,9 +33,12 @@ const IntroductionPage = React.createClass({
                 </p>
 
                 <div className="highlight">
-                  <pre><code className="js">{`
-button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)
-                  `}</code></pre>
+                  <CodeExample
+                    mode="javascript"
+                    codeText={
+`button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)`
+                    }
+                  />
                 </div>
 
                 <p>
@@ -43,11 +47,14 @@ button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)
                 </p>
 
                 <div className="highlight">
-                  <pre><code className="js">{`
-<button id="something-btn" type="button" class="btn btn-success btn-sm">
+                  <CodeExample
+                    mode="htmlmixed"
+                    codeText={
+`<button id="something-btn" type="button" class="btn btn-success btn-sm">
   Something
-</button>
-                  `}</code></pre>
+</button>`
+                    }
+                  />
                 </div>
 
                 <p>
@@ -65,11 +72,14 @@ button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)
                 </p>
 
                 <div className="highlight">
-                  <pre><code className="js">{`
-<Button bsStyle="success" bsSize="small" onClick={someCallback}>
+                  <CodeExample
+                    mode="javascript"
+                    codeText={
+`<Button bsStyle="success" bsSize="small" onClick={someCallback}>
   Something
-</Button>
-                  `}</code></pre>
+</Button>`
+                    }
+                  />
                 </div>
 
                 <p>
@@ -101,14 +111,17 @@ button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)
                 </p>
 
                 <div className="highlight">
-                  <pre><code className="js">{`
-var button = React.DOM.button({
+                  <CodeExample
+                    mode="javascript"
+                    codeText={
+`var button = React.DOM.button({
   className: "btn btn-lg btn-success",
   children: "Register"
 });
 
-React.render(button, mountNode);
-                  `}</code></pre>
+React.render(button, mountNode);`
+                    }
+                  />
                 </div>
 
                 <p>
@@ -117,15 +130,18 @@ React.render(button, mountNode);
                 </p>
 
                 <div className="highlight">
-                  <pre><code className="js">{`
-var button = ReactBootstrap.Button({
+                  <CodeExample
+                    mode="javascript"
+                    codeText={
+`var button = ReactBootstrap.Button({
   bsStyle: "success",
   bsSize: "large",
   children: "Register"
 });
 
-React.render(button, mountNode);
-                  `}</code></pre>
+React.render(button, mountNode);`
+                    }
+                  />
                 </div>
 
                 <p>
@@ -144,8 +160,10 @@ React.render(button, mountNode);
                 </p>
 
                 <div className="highlight">
-                  <pre><code className="js">{`
-var buttonGroupInstance = (
+                  <CodeExample
+                    mode="javascript"
+                    codeText={
+`var buttonGroupInstance = (
   <ButtonGroup>
     <DropdownButton bsStyle="success" title="Dropdown">
       <MenuItem key="1">Dropdown link</MenuItem>
@@ -156,8 +174,9 @@ var buttonGroupInstance = (
   </ButtonGroup>
 );
 
-React.render(buttonGroupInstance, mountNode);
-                  `}</code></pre>
+React.render(buttonGroupInstance, mountNode);`
+                    }
+                  />
                 </div>
 
                 <p>