Made documentation better

bvaughn · bvaughn · commit 7398ca1d518b · 2015-11-02T15:06:26.000-08:00
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 Install this component using NPM like so:
 ```bash
-npm install react-deferred-component --save-dev
+npm install react-highlight.js --save
 ```
 
 # License
diff --git a/demo/Highlight.demo.jsx b/demo/Highlight.demo.jsx
@@ -51,28 +51,34 @@ export default class HighlightDemoDemo extends Component {
           To use this component simply <code>npm install react-highlight</code> and optionally choose a custom stylesheet from
           <a href="https://highlightjs.org/">highlight.js</a>.
         </p>
+        <h2>Demo</h2>
         <p>
           Try it yourself by specifying a language and content below:
         </p>
-        <p>
-          <label>Language</label>
-          <input
-            type='text'
-            name='language'
-            defaultValue={language}
-            onChange={event => this._debouncedSetState('language', event.target.value)}/>
-        </p>
-        <p>
-          <label>Content</label>
-          <textarea
-            type='text'
-            name='content'
-            defaultValue={content}
-            onChange={event => this._debouncedSetState('content', event.target.value)}/>
-        </p>
-        <Highlight language={language}>
-          {content}
-        </Highlight>
+        <form>
+          <div className='form-group'>
+            <label>Language</label>
+            <input
+              className='form-control'
+              type='text'
+              name='language'
+              defaultValue={language}
+              onChange={event => this._debouncedSetState('language', event.target.value)}/>
+          </div>
+          <div className='form-group'>
+            <label>Content</label>
+            <textarea
+              className='form-control'
+              type='text'
+              name='content'
+              defaultValue={content}
+              onChange={event => this._debouncedSetState('content', event.target.value)}/>
+          </div>
+          <label>Highlight</label>
+          <Highlight language={language}>
+            {content}
+          </Highlight>
+        </form>
       </div>
     )
   }
diff --git a/demo/index.js b/demo/index.js
@@ -1,7 +1,6 @@
 import 'purecss'
 import 'highlight.js/styles/github.css'
 import './highlight.css'
-import './main.css'
 
 import React from 'react'
 import ReactDOM from 'react-dom'
diff --git a/demo/main.css b/demo/main.css
diff --git a/lib/index_template.tpl b/lib/index_template.tpl
@@ -6,22 +6,18 @@
     {% if (o.htmlWebpackPlugin.files.favicon) { %}
     <link rel="shortcut icon" href="{%=o.htmlWebpackPlugin.files.favicon%}">
     {% } %}
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
     {% for (var css in o.htmlWebpackPlugin.files.css) { %}
     <link href="{%=o.htmlWebpackPlugin.files.css[css] %}" rel="stylesheet">
     {% } %}
   </head>
   <body>
-    <div class="pure-g">
-      <header class="pure-u-1">
-        <h1>%name%</h1>
+    <div class="container">
+      <h1 class='page-header'>%name%</h1>
+      <p class="lead">%description%</p>
 
-        <div class="description">%description%</div>
-      </header>
-
-      <article class="pure-u-1">
-        <section class="demonstration">%demo%</section>
-        <section class="documentation">%documentation%</section>
-      </article>
+      <div class="demonstration">%demo%</div>
+      <div class="documentation">%documentation%</div>
     </div>
 
     {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %}
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-highlight",
+  "name": "react-highlight.js",
   "description": "A lightweight React wrapper around the Highlight.js syntaxt highlighting library",
   "author": "Brian Vaughn",
   "user": "bvaughn",
@@ -106,11 +106,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/bvaughn/react-deferred-component.git"
+    "url": "https://github.com/bvaughn/react-highlight.js.git"
   },
-  "homepage": "https://github.com/bvaughn/react-deferred-component/",
+  "homepage": "https://github.com/bvaughn/react-highlight.js/",
   "bugs": {
-    "url": "https://github.com/bvaughn/react-deferred-component/issues"
+    "url": "https://github.com/bvaughn/react-highlight.js/issues"
   },
   "keywords": [
     "react",
