Use Sass for CSS, Visual Refresh

website/core/DocsSidebar.js

@@ -83,8 +83,8 @@ var DocsSidebar = React.createClass({
               {category.links.map((metadata) =>
                 <li key={metadata.id}>
                   <a
+                    style={{marginLeft: 10}}
                     target={metadata.permalink.match(/^https?:/) && '_blank'}
-                    style={{marginLeft: metadata.indent ? 20 : 0}}
                     className={metadata.id === this.props.metadata.id ? 'active' : ''}
                     href={this.getLink(metadata)}>
                     {metadata.title}

website/core/Hero.js

@@ -17,7 +17,7 @@ var Hero = React.createClass({
     return (
       <div className="hero">
         <div className="wrap">
-          <div className="text"><strong>{this.props.title}</strong></div>
+          <div className="text">{this.props.title}</div>
           <div className="minitext">
             {this.props.subtitle}
           </div>

website/package.json

@@ -16,18 +16,19 @@
     "deep-assign": "^2.0.0",
     "feed": "^0.3.0",
     "flow-parser": "^0.32.0",
-    "fs.extra": "1.3.2",
+    "fs.extra": "*",
     "glob": "6.0.4",
     "jsdoc-api": "^1.1.0",
     "jstransform": "11.0.3",
     "memory-cache": "^0.1.6",
-    "mkdirp": "^0.5.1",
+    "mkdirp": "*",
+    "node-sass-middleware": "^0.11.0",
     "optimist": "0.6.0",
-    "react": "~0.13.0",
+    "react": "0.13.2",
     "react-docgen": "^2.9.0",
     "react-page-middleware": "git://github.com/facebook/react-page-middleware.git",
     "remove-markdown": "^0.1.0",
-    "request": "^2.69.0",
+    "request": "*",
     "semver-compare": "^1.0.0"
   },
   "devDependencies": {

website/server/extractDocs.js

@@ -200,8 +200,11 @@ function componentsToMarkdown(type, json, filepath, idx, styles) {
     json.methods = json.methods.filter(filterMethods);
   }
 
+  if (type === 'api') {
+    type = 'API';
+  }
   // Put styles (e.g. Flexbox) into the API category
-  const category = (type === 'style' ? 'apis' : type + 's');
+  const category = (type === 'style' ? 'APIs' : type + 's');
   const next = getNextComponent(idx);
   const previous = getPreviousComponent(idx);
 

website/server/server.js

@@ -7,27 +7,27 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
-"use strict";
-var connect = require('connect');
-var http = require('http');
-var optimist = require('optimist');
-var path = require('path');
-var reactMiddleware = require('react-page-middleware');
-var convert = require('./convert.js');
+'use strict';
+const connect = require('connect');
+const convert = require('./convert.js');
+const http = require('http');
+const optimist = require('optimist');
+const path = require('path');
+const reactMiddleware = require('react-page-middleware');
+const sassMiddleware = require('node-sass-middleware');
 
-var argv = optimist.argv;
+const argv = optimist.argv;
 
-var PROJECT_ROOT = path.resolve(__dirname, '..');
-var FILE_SERVE_ROOT = path.join(PROJECT_ROOT, 'src');
-
-var port = argv.port;
-if (argv.$0 === 'node ./server/generate.js') {
+const PROJECT_ROOT = path.resolve(__dirname, '..');
+const FILE_SERVE_ROOT = path.join(PROJECT_ROOT, 'src');
+let port = argv.port;
+if (argv.$0.indexOf('node ./server/generate.js') !== -1) {
   // Using a different port so that you can publish the website
   // and keeping the server up at the same time.
   port = 8079;
 }
 
-var buildOptions = {
+const buildOptions = {
   projectRoot: PROJECT_ROOT,
   pageRouteRoot: FILE_SERVE_ROOT,
   useBrowserBuiltins: false,
@@ -41,7 +41,15 @@ var buildOptions = {
   static: true
 };
 
-var app = connect()
+const app = connect()
+  .use(sassMiddleware({
+    /* Options */
+    src: path.join(PROJECT_ROOT,'styles'),
+    dest: path.join(FILE_SERVE_ROOT,'react-native','css'),
+    response: false,
+    outputStyle: 'extended',
+    prefix: '/react-native/css',
+  }))
   .use(function(req, res, next) {
     // convert all the md files on every request. This is not optimal
     // but fast enough that we don't really need to care right now.
@@ -52,14 +60,14 @@ var app = connect()
     next();
   })
   .use(reactMiddleware.provide(buildOptions))
-  .use(connect['static'](FILE_SERVE_ROOT))
+  .use(connect.static(FILE_SERVE_ROOT))
   .use(connect.favicon(path.join(FILE_SERVE_ROOT, 'react-native', 'img', 'favicon.png')))
   .use(connect.logger())
   .use(connect.compress())
   .use(connect.errorHandler());
 
-var portToUse = port || 8079;
-var server = http.createServer(app);
+const portToUse = port || 8079;
+const server = http.createServer(app);
 server.listen(portToUse, function(){
   console.log('Open http://localhost:' + portToUse + '/react-native/index.html');
 });