Styling of examples

example/package.json

@@ -18,6 +18,7 @@
     "babel-preset-blueflag": "^0.0.1",
     "babel-register": "^6.18.0",
     "css-loader": "^0.25.0",
+    "dotenv": "^2.0.0",
     "eslint": "^3.10.2",
     "eslint-config-blueflag": "^0.2.0",
     "extract-text-webpack-plugin": "^1.0.1",
@@ -26,16 +27,17 @@
     "node-sass": "^3.13.0",
     "postcss": "^5.2.5",
     "postcss-loader": "^1.1.1",
+    "raw-loader": "^0.5.1",
     "sass-loader": "^4.0.2",
     "style-loader": "^0.13.1",
     "webpack": "^1.13.3",
-    "webpack-dev-server": "^1.16.2",
-    "dotenv": "^2.0.0"
+    "webpack-dev-server": "^1.16.2"
   },
   "dependencies": {
     "immutable": "^3.8.1",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
+    "react-highlight": "^0.9.0",
     "react-router": "^3.0.0"
   }
 }

example/src/hock/Example.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import Highlight from 'react-highlight';
+
+export default (config) => {
+    return (ComposedComponent) => {
+        return (props) => {
+            return <div className='Example'>
+                <div className='Example_component'>
+                    <ComposedComponent {...props}/>
+                </div>
+                <div className='Example_source'>
+                    <Highlight>{config.source}</Highlight>
+                </div>
+            </div>;
+        }
+    }
+}

example/src/routes.jsx

@@ -1,30 +1,39 @@
 import React from 'react';
 import {Route, IndexRoute} from 'react-router';
 
-import AppHandler from 'components/AppHandler';
-import ErrorHandler from 'components/ErrorHandler';
-import ContentsPage from 'components/ContentsPage';
+import AppHandler from 'component/AppHandler';
+import ErrorHandler from 'component/ErrorHandler';
+import ContentsPage from 'component/ContentsPage';
+import Example from 'hock/Example';
 
-import ButtonExample from 'component/button/ButtonExample';
-import TableExample from 'component/table/TableExample';
-import ToggleExample from 'input/toggle/ToggleExample';
+import ButtonExampleComponent from 'example/component/button/ButtonExample';
+import ButtonExampleSource from '!raw!example/component/button/ButtonExample';
 
+import TableExampleComponent from 'example/component/table/TableExample';
+import TableExampleSource from '!raw!example/component/table/TableExample';
+
+import ToggleExampleComponent from 'example/input/toggle/ToggleExample';
+import ToggleExampleSource from '!raw!example/input/toggle/ToggleExample';
+
+import SpruceClassNameExampleComponent from 'example/util/SpruceClassNameExample';
+import SpruceClassNameExampleSource from '!raw!example/util/SpruceClassNameExample';
+
+import SpruceComponentExampleComponent from 'example/util/SpruceComponentExample';
+import SpruceComponentExampleSource from '!raw!example/util/SpruceComponentExample';
 
-import SpruceClassNameExample from 'util/SpruceClassNameExample';
-import SpruceComponentExample from 'util/SpruceComponentExample';
 
 const routes = <Route component={AppHandler} path="/">
     <IndexRoute component={ContentsPage} />
     <Route path="component">
-        <Route path="table" component={TableExample}/>
-        <Route path="button" component={ButtonExample}/>
+        <Route path="table" component={Example({source: TableExampleSource})(TableExampleComponent)}/>
+        <Route path="button" component={Example({source: ButtonExampleSource})(ButtonExampleComponent)}/>
     </Route>
     <Route path="input">
-        <Route path="toggle" component={ToggleExample}/>
+        <Route path="toggle" component={Example({source: ToggleExampleSource})(ToggleExampleComponent)}/>
     </Route>
     <Route path="util">
-        <Route path="SpruceClassName" component={SpruceClassNameExample}/>
-        <Route path="SpruceComponent" component={SpruceComponentExample}/>
+        <Route path="SpruceClassName" component={Example({source: SpruceClassNameExampleSource})(SpruceClassNameExampleComponent)}/>
+        <Route path="SpruceComponent" component={Example({source: SpruceComponentExampleSource})(SpruceComponentExampleComponent)}/>
     </Route>
 
     <Route path="*" component={ErrorHandler}/>

example/src/sass/base.scss

@@ -0,0 +1,8 @@
+html {
+    font-size: 16px;
+}
+
+body, html {
+    margin: 0;
+    padding: 0;
+}

example/src/sass/example.scss

@@ -0,0 +1,50 @@
+.Example_component,
+.Example_source {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50%;
+    height: 100%;
+}
+
+.Example_component {
+    padding: 1rem;
+}
+
+
+.Example_source {
+    left: 50%;
+
+    pre {
+        background-color: #333;
+        color: #e6e6e6;
+        overflow: auto;
+        padding: 1rem;
+        margin: 0;
+        tab-size: 4;
+        font-family: Menlo, monospace;
+        font-size: 0.875em;
+        height: 100%;
+    }
+
+    code {
+        font-family: inherit;
+    }
+
+
+    /* Red */
+    .hljs-keyword {color: #C55B4E;}
+
+    /* Yellow */
+    .hljs-tag {color: #E1AE69;}
+
+    /* Green */
+    .hljs-string {color: #86C797;}
+
+    /* Blue */
+    .hljs-number {color: #6CA6CE;}
+    .hljs-literal {color: #6CA6CE;}
+
+
+    .hljs-comment {color: #6D6D6D;}
+}

example/src/sass/style.scss

@@ -1,4 +1,2 @@
-body, html {
-    margin: 0;
-    padding: 0;
-}
+@import '~sass/base';
+@import '~sass/example';