From dbb36a255803a2c49bfd9e4fc97f1b216a91266f Mon Sep 17 00:00:00 2001 From: Jimmy Jia Date: Mon, 18 May 2015 17:48:14 -0400 Subject: [PATCH] Improve code appearance and copyediting on docs Fixes #94 --- docs/client.js | 2 + docs/src/CodeExample.js | 25 ++++++ docs/src/CodeMirrorWrapper.client.js | 11 --- docs/src/CodeMirrorWrapper.js | 4 - docs/src/GettingStartedPage.js | 125 ++++++++++++++++----------- docs/src/IntroductionPage.js | 65 +++++++++----- docs/src/ReactPlayground.js | 19 ++-- 7 files changed, 155 insertions(+), 96 deletions(-) create mode 100644 docs/src/CodeExample.js delete mode 100644 docs/src/CodeMirrorWrapper.client.js delete mode 100644 docs/src/CodeMirrorWrapper.js diff --git a/docs/client.js b/docs/client.js index ab68372e11..c48d2b1628 100644 --- a/docs/client.js +++ b/docs/client.js @@ -8,6 +8,7 @@ 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'; @@ -15,6 +16,7 @@ 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 new file mode 100644 index 0000000000..a5f4c15709 --- /dev/null +++ b/docs/src/CodeExample.js @@ -0,0 +1,25 @@ +import React from 'react'; + +export default class CodeExample extends React.Component { + render() { + return ( + 
+        
+          {this.props.codeText}
+        
+
+ ); + } + + 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 deleted file mode 100644 index 7bca46333a..0000000000 --- a/docs/src/CodeMirrorWrapper.client.js +++ /dev/null @@ -1,11 +0,0 @@ -import CodeMirror from 'codemirror'; -import 'codemirror/mode/javascript/javascript'; - -import 'codemirror/theme/solarized.css'; -import 'codemirror/lib/codemirror.css'; -import './CodeMirrorWrapper.css'; - -export default { - IS_NODE: false, - CodeMirror -}; diff --git a/docs/src/CodeMirrorWrapper.js b/docs/src/CodeMirrorWrapper.js deleted file mode 100644 index 1639c02d51..0000000000 --- a/docs/src/CodeMirrorWrapper.js +++ /dev/null @@ -1,4 +0,0 @@ -export default { - IS_NODE: true, - CodeMirror: {} -}; diff --git a/docs/src/GettingStartedPage.js b/docs/src/GettingStartedPage.js index 1d2852450d..f19af4f741 100644 --- 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 (
@@ -23,57 +24,75 @@ const Page = React.createClass({

First add the Bootstrap CSS to your project; check here if you have not already done that. Note that:

Then:

CommonJS

- 
{`
-  $ npm install react
-  $ npm install react-bootstrap
-                    `}
- 
{`
-  var Alert = require('react-bootstrap/lib/Alert');
-  // or
-  var Alert = require('react-bootstrap').Alert;
-                    `}
+ +
+

AMD

- 
{`
-  $ bower install react
-  $ bower install react-bootstrap
-                    `}
- 
{`
-  define(['react-bootstrap/lib/Alert'], function(Alert) { ... });
-  // or
-  define(['react-bootstrap'], function(ReactBootstrap) { var Alert = ReactBootstrap.Alert; ... });
-                    `}
+ +
+

Browser globals

The bower repo contains react-bootstrap.js and react-bootstrap.min.js with all components exported in the window.ReactBootstrap object.

- 
{`
-  
-  
-  
-                    `}
+ + +` + } + />

Without JSX

If you do not use JSX and just call components as functions, you must explicitly create a factory before calling it. React-bootstrap provides factories for you in lib/factories:

- 
{`
-  var Alert = require('react-bootstrap/lib/factories').Alert;
-  // or
-  var Alert = require('react-bootstrap/lib/factories/Alert');
-                    `}
+
@@ -85,21 +104,25 @@ const Page = React.createClass({

jQuery is currently required only for IE8 support for components which require reading element positions from the DOM: Popover and Tooltip when launched with OverlayTrigger. We would like to remove this dependency in future versions but for now, including the following snippet in your page should have you covered:

- 
{`
-  
-                    `}
+ + + + + + + +` + } + />
@@ -109,11 +132,9 @@ const Page = React.createClass({ ); - }, + } shouldComponentUpdate() { return false; } -}); - -export default Page; +} diff --git a/docs/src/IntroductionPage.js b/docs/src/IntroductionPage.js index 206c3eecea..dceb4a1e56 100644 --- 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({

- 
{`
-button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)
-                  `}
+

@@ -43,11 +47,14 @@ button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)

- 
{`
-
-                  `}
+` + } + />

@@ -65,11 +72,14 @@ button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)

- 
{`
-
-                  `}
+` + } + />

@@ -101,14 +111,17 @@ button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)

- 
{`
-var button = React.DOM.button({
+
+React.render(button, mountNode);` + } + />

@@ -117,15 +130,18 @@ React.render(button, mountNode);

- 
{`
-var button = ReactBootstrap.Button({
+
+React.render(button, mountNode);` + } + />

@@ -144,8 +160,10 @@ React.render(button, mountNode);

- 
{`
-var buttonGroupInstance = (
+                  
     
       Dropdown link
@@ -156,8 +174,9 @@ var buttonGroupInstance = (
   
 );
 
-React.render(buttonGroupInstance, mountNode);
-                  `}
+React.render(buttonGroupInstance, mountNode);` + } + />

diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js index 4a4983b048..6beada4323 100644 --- a/docs/src/ReactPlayground.js +++ b/docs/src/ReactPlayground.js @@ -46,6 +46,8 @@ import * as modWell from '../../src/Well'; import babel from 'babel-core/browser'; +import CodeExample from './CodeExample'; + const classNames = modClassNames.default; /* eslint-disable */ const React = modReact.default; @@ -104,7 +106,7 @@ const IS_MOBILE = typeof navigator !== 'undefined' && ( || navigator.userAgent.match(/Windows Phone/i) ); -const CodeMirrorEditor = React.createClass({ +class CodeMirrorEditor extends React.Component { componentDidMount() { if (IS_MOBILE || CodeMirror === undefined) { return; @@ -120,19 +122,19 @@ const CodeMirrorEditor = React.createClass({ readOnly: this.props.readOnly }); this.editor.on('change', this.handleChange); - }, + } componentDidUpdate() { if (this.props.readOnly) { this.editor.setValue(this.props.codeText); } - }, + } handleChange() { if (!this.props.readOnly && this.props.onChange) { this.props.onChange(this.editor.getValue()); } - }, + } render() { // wrap in a div to fully contain CodeMirror @@ -140,7 +142,12 @@ const CodeMirrorEditor = React.createClass({ if (IS_MOBILE) { let preStyles = {overflow: 'scroll'}; - editor = 

{this.props.codeText}
; + editor = ( + + ); } else { editor =