feathersjs · daffl · Jul 21, 2015 · Jul 12, 2015 · Jul 13, 2015 · Jul 14, 2015
diff --git a/404.md b/404.md
@@ -0,0 +1,15 @@
+---
+layout: not-found
+title: Not Found
+description: Oh no
+permalink: /404.html
+---
+
+## Oh no, something went wrong
+
+Here are some links that can help you find what you were looking for:
+
+- [Feathers homepage](/)
+- [Feathers GitHub](https://github.com/feathersjs/feathers)
+- [Quick-start guide](/quick-start)
+- [API documentation](/docs)
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,4 +1,4 @@
-<footer>
+<footer class="footer">
   <div class="container">
     <div class="row center-text">
       <p>&copy; 2015 Feathers. Another project made with <i class="fa fa-heart"></i> + <i class="fa fa-beer"></i> by

diff --git a/_includes/navbar.html b/_includes/navbar.html
@@ -4,20 +4,22 @@
       {% for weight in (1..5) %}
         {% for p in site.pages %}
           {% if p.weight == weight %}
+            {% unless p.hide %}
             <li>
               {% if p.url == '/' %}
                 <a class="logo" href="{{ '/' | prepend: site.baseurl }}">
                   <img src="/images/logo.png" alt="Feathers Logo">
-                </a>       
+                </a>
               {% else %}
                 <a class="{% if p.url == page.url %}normal{% endif %}" href="{{ p.url | prepend: site.baseurl}}#{{p.anchor}}">
                   {{ p.title }}
                 </a>
               {% endif %}
             </li>
+            {% endunless %}
           {% endif %}
         {% endfor %}
       {% endfor %}
     </ul>
   </div>
-</nav>
+</nav>
diff --git a/_layouts/index.html b/_layouts/index.html
@@ -37,26 +37,40 @@ <h2 class="thin">Build Better APIs, Faster Than Ever</h2>
 
 <section id="ship">
   <div class="container">
-    <!-- <div class="row">
-      <h1 class="center-text">Ship Better Code, Faster Than Ever</h1>
-    </div> -->
     <div class="row clear">
       <div class="col col-6 mobile-full">
         <h3>Feathers is built for developers that need to ship maintainable code, <span class="normal">fast</span>.</h3>
-        <p>
-          With our light-weight code base and rich plug-in ecosystem you can <span class="normal">get prototypes out in a matter of minutes and production ready in days. Seriously.</span>
-        </p>
-        <p>
-          How is that even possible? We believe that less is more. So we built a razor thin wrapper (a few hundred lines of code) over top of <a class="primary normal" href="http://expressjs.com/" target="_blank" title="Express">Express</a> and <a class="primary normal" href="http://socket.io/" target="_blank" title="Socket.io">Socket.io</a>, the defacto technologies for building real-time web applications using NodeJS.
-        </p>
-        <p>
-          At its core Feathers is a real-time, micro-service web framework that gives you control over your data via RESTful resources, sockets and flexible plug-ins.
-        </p>
+
+        <ul>
+          <li>
+            <p>
+              Get prototypes out in a matter of minutes and production ready in days. Seriously.
+            </p>
+          </li>
+
+          <li>
+            <p>
+              Only worry about your data and application logic. We take out the boilerplate with lightweight services and flexible plug-ins.
+            </p>
+          </li>
+          <li>
+            <p>
+              Less is more! Feathers is a razor thin wrapper <a class="primary normal" href="http://expressjs.com/" target="_blank" title="Express">Express</a> and <a class="primary normal" href="http://socket.io/" target="_blank" title="Socket.io">Socket.io</a>, the defacto technologies for building real-time web applications using NodeJS.
+            </p>
+          </li>
+        </ul>
       </div>
       <div class="col col-6 mobile-full">
         <img src="/images/ship-it.png" alt="Ship It" class="ship-it block">
       </div>
     </div>
+    <div class="row clear">
+      <div class="col col-12 mobile-full">
+        <h5 class="center-text">
+          At its core Feathers is a real-time, micro-service web framework that gives you control over your data via RESTful resources, sockets and flexible plug-ins.
+        </h5>
+      </div>
+    </div>
   </div>
 </section>
 
@@ -70,27 +84,28 @@ <h4 class="thin">We have plug-ins or guides for the most popular clients.</h4>
       </p>
     </div>
     <div class="row clear">
-      <ul class="inline-list center-text">
+      <ul class="frameworks inline-list center-text">
         <li>
-          <a href="#" title="React">
-            <img src="/images/react.svg" alt="React">
+          <a href="http://feathersjs.github.io/todomvc/feathers/jquery/" target="_blank" title="jQuery">
+            <img src="/images/jquery.svg" alt="jQuery">
           </a>
         </li>
         <li>
-          <a href="#" title="Angular">
-            <img src="/images/angular.svg" alt="Angular">
+          <a href="http://feathersjs.github.io/todomvc/feathers/react/" target="_blank" title="React">
+            <img src="/images/react.svg" alt="React">
           </a>
         </li>
         <li>
-          <a href="#" title="jQuery">
-            <img src="/images/jquery.svg" alt="jQuery">
+          <a href="http://feathersjs.github.io/todomvc/feathers/angularjs/" target="_blank" title="Angular">
+            <img src="/images/angular.svg" alt="Angular">
           </a>
         </li>
         <li>
-          <a href="#" title="CanJS">
+          <a href="http://feathersjs.github.io/todomvc/feathers/canjs/" target="_blank" title="CanJS">
             <img src="/images/canjs.svg" alt="CanJS">
           </a>
         </li>
+            <!--
         <li>
           <a href="#" title="iOS">
             <img src="/images/apple.svg" alt="iOS">
@@ -101,50 +116,40 @@ <h4 class="thin">We have plug-ins or guides for the most popular clients.</h4>
             <img src="/images/android.svg" alt="Android">
           </a>
         </li>
+        -->
       </ul>
     </div>
   </div>
 </section>
 
 <section id="features">
   <div class="container">
-    <div class="row">
-      <h3 class="thin center-text">Here are just a few reasons why Feathers is quickly becoming the toolbox of choice for modern web applications.</h3>
-    </div>
     <div class="row clear">
-      <div class="col col-3 mobile-full">
+      <div class="col col-4 mobile-full">
         <h4 class="normal">Battle Tested Core</h4>
         <p>Feathers is a <a href="https://github.com/feathersjs/feathers" class="primary" target="_blank">very thin wrapper</a> over top of Express and Socket.io, both of which have been used in production by thousands of companies.</p>
       </div>
-      <div class="col col-3 mobile-full">
+      <div class="col col-4 mobile-full">
         <h4 class="normal">Uber Flexible</h4>
-        <p>Our <a href="https://www.npmjs.com/search?q=feathers-plugin" class="primary" target="_blank">plug-ins</a> are extremely flexible. Giving you only what you need and then getting out of your way.</p>
-      </div>
-      <div class="col col-3 mobile-full">
-        <h4 class="normal">Scaffold Real-time API's</h4>
-        <p>Instantly scaffold services from the command line, providing you with full CRUD via REST and websockets in just a few key strokes.</p>
+        <p>Our <a href="https://www.npmjs.com/search?q=feathers-plugin" class="primary" target="_blank">plug-ins</a> are small, easy to learn and extremely flexible. Giving you only what you need and then getting out of your way.</p>
       </div>
-      <div class="col col-3 mobile-full">
-        <h4 class="normal">Zero Lock In</h4>
-        <p>Feathers is totally open source, works with any Express middleware and node module out of the box, and can be easily removed if it's not for you.</p>
+      <div class="col col-4 mobile-full">
+        <h4 class="normal">Minimal Configuration</h4>
+        <p>Tired of massive JSON or YAML files? Feathers reduces complexity while staying explicit, not by hiding it behind generators and configuration files.</p>
       </div>
     </div>
     <div class="row clear">
-      <div class="col col-3 mobile-full">
-        <h4 class="normal">Minimal Configuration</h4>
-        <p>Tired of massive JSON or YAML files? No need for that here! We value convention over configuration so you can spend more time writing code.</p>
-      </div>
-      <div class="col col-3 mobile-full">
+      <div class="col col-4 mobile-full">
         <h4 class="normal">Multi-Database</h4>
-        <p>We support MongoDB, Postgres, and MySQL out of the box. If that's not for you, you can easily <a href="#" class="primary" target="_blank">write your own service adapters</a> and submit a PR.</p>
+        <p>We support MongoDB, Postgres, MySQL and NeDB out of the box. If that's not for you, you can easily <a href="/docs/#toc10" class="primary" target="_blank">write your own service adapters</a>.</p>
       </div>
-      <div class="col col-3 mobile-full">
+      <div class="col col-4 mobile-full">
         <h4 class="normal">Front End Agnostic</h4>
-        <p>Use whatever client you want; Angular, React, Swift/ObjC, Android, it doesn't matter. We only provide some <a href="#" class="primary" target="_blank">helpful guides</a> and <a href="https://www.npmjs.com/search?q=feathers-plugin" class="primary" target="_blank">plug-ins</a> to make things easier.</p>
+        <p>Use whatever client you want; Angular, React, Swift/ObjC, Android, it doesn't matter. We provide some <a href="/learn/#toc1" class="primary" target="_blank">helpful guides</a> and <a href="https://www.npmjs.com/search?q=feathers-plugin" class="primary" target="_blank">plug-ins</a> to make things easier.</p>
       </div>
-      <div class="col col-3 mobile-full">
+      <div class="col col-4 mobile-full">
         <h4 class="normal">Pure JavaScript</h4>
-        <p>Because Feathers is 100% vanilla JavaScript on the backend, you get to use the same language all the way through your web stack. Less context switching.</p>
+        <p>Because Feathers is 100% vanilla JavaScript on the backend, you get to use the same language all the way through your web stack. More productivity FTW!</p>
       </div>
     </div>
     <div class="row clear">
@@ -165,7 +170,7 @@ <h1 class="strong center-text">See How Feathers Is Different</h1>
         <h3>Feathers vs Meteor</h3>
         <h5 class="italic">"Once you go Meteor, you don't go back. And not in a good way."</h5>
         <p>
-          Meteor has amassed a large community and a lot of venture backed funding. Our biggest complaint is that because of this funding, there is some <span class="bold">serious lock in</span>. Meteor has it's own package system, how you use npm modules can be inconsistent, and there really is a lot of code for what it is doing. There is also the risk that when investors start pushing for a return on their investment, it could negatively impact the community.
+          Meteor has amassed a large community and a lot of venture backed funding. Our biggest complaint is that because of this funding, there is some <span class="bold">serious lock in</span>. Meteor has it's own package system, how you use npm modules can be inconsistent and it is a large codebase. There is also the risk that when investors start pushing for a return on their investment, it could negatively impact the community.
         </p>
         <p>
           From a feature standpoint Feathers is pretty similar to Meteor. You get real-time API's from both. However, we let you use the defacto npm for managing dependencies, we let you choose whether you want to use Webpack, Gulp, Grunt, or any other tool for managing assets, and Feathers is completely client agnostic without any additional overhead. Everything is open, flexible and pluggable. You use only what you need.
@@ -181,10 +186,10 @@ <h5 class="italic">"Once you go Meteor, you don't go back. And not in a good way
         <h3>Feathers vs Sails</h3>
         <h5 class="italic">"If you love JSON config files, Sails is for you."</h5>
         <p>
-          From a feature standpoint Feathers and Sails are probably the closest. Both provide real-time REST API's, multiple db support, and are client agnostic. Both frameworks also wrap Express, but Feathers supports Express 4, while Sails only supports Express 3.
+          From a feature standpoint Feathers and Sails are probably the closest. Both provide real-time REST API's, multiple db support, and are client agnostic. Both frameworks also use Express, but Feathers supports Express 4, while Sails only supports Express 3.
         </p>
         <p>
-          Even though they have feature parity, Feathers achieves this with MUCH less code, which means less stuff to break and maintain. We also don't assume how you want to manage your assets by letting you use your build tool of choice. Feathers provides lightweight services and hooks instead of a bulky ORM, and we let you write code instead of long config files to define relationships and security policies.
+          Even though the features are very similar, Feathers achieves this with MUCH less code, which means less stuff to break and maintain making it easy to continuously upgrade to the latest version of Express. We also don't assume how you want to manage your assets by letting you use your build tool of choice. Feathers provides lightweight services and hooks instead of a full-blown ORM, and we let you write code instead of long config files to define relationships and security policies.
         </p>
         <!-- <a class="button primary-button normal" href="#" title="Feathers vs. Sails" target="_blank">Read More</a> -->
       </div>
@@ -197,10 +202,10 @@ <h5 class="italic">"If you love JSON config files, Sails is for you."</h5>
         <h3>Feathers vs Express</h3>
         <h5 class="italic">"I like Express because I love flexibility and boilerplate!"</h5>
         <p>
-          Express is awesome! It does much of the heavy lifting behind Feathers; routing, content-negotiation, middleware support, etc. However, you still need to implement a lot yourself.
+          Express is awesome! It does much of the heavy lifting behind Feathers; routing, content-negotiation, middleware support, etc. In fact, you can simply replace Express with Feathers in any existing application and start adding new microservices.
         </p>
         <p>
-          Feathers eliminates a lot of the common boilerplate and gives you helpful plug-ins to make implementing common features easily, while also providing some convention. This includes stuff like managing permissions, CRUD for multiple databases, and real-time APIs using web sockets. We give you just enough to build your web app quickly but get out of your way when you need to customize something.
+          Feathers eliminates a lot of the common boilerplate and gives you helpful plug-ins to make implementing common features easier, while also providing some convention. This includes stuff like managing permissions, CRUD for multiple databases, and real-time APIs using web sockets. Just like Express, Feathers gives you just enough to build your web app quickly but gets out of your way when you need to customize something.
         </p>
         <!-- <a class="button primary-button normal" href="#" title="Feathers vs. Express" target="_blank">Read More</a> -->
       </div>

diff --git a/_layouts/not-found.html b/_layouts/not-found.html
@@ -0,0 +1,14 @@
+---
+layout: default
+---
+
+<section class="page">
+  <div class="container">
+    <div class="row clear">
+      <div class="col col-12 page-content not-found">
+        <h1>{{page.title}}</h1>
+        {{ content }}
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -9,6 +9,7 @@
         <div id="toc"></div>
       </div>
       <div class="col col-9 push-3 page-content">
+        <h1>{{page.title}}</h1>
         {{ content }}
       </div>
     </div>

diff --git a/_layouts/quick-start.html b/_layouts/quick-start.html
@@ -6,38 +6,30 @@
   <div class="container">
     <div class="row clear">
       <div class="col col-9 push-3 page-content">
-        <h2 class="page-header">Example</h2>
+        <h1>{{page.title}}</h1>
 
-        <p>
-          In the tradition of <a href="http://todomvc.com/" title="TODO MVC" target="_blank">TodoMVC</a> the below example shows a real-time Todo application with Feathers and an in-memory Todo service on the server and a jQuery HTML page for the browser. To get up and running with this example <a href="https://gist.github.com/daffl/6665992/download">download the Gist</a>, unpack and in the new folder run
-          <blockquote><pre>npm install feathers feathers-memory body-parser<br>node app.js</pre></blockquote>
-          Then go to <a href="http://localhost:8080" target="_blank">http://localhost:8080</a>. The REST API will be available at <a href="localhost:8080/todos" target="_blank">localhost:8080/todos</a> (check out the example application endpoint <a href="http://todos.feathersjs.com/todos" target="_blank">here</a>). <br>Next, read up on the <a href="#guide">Feathers guide</a>.
-        </p>
+        <p>In this guide we will go over the basic concepts of Feathers by building the following real-time Todo application (inspired by the great <a href="http://todomvc.com" target="_blank">TodoMVC</a>) using jQuery as the frontend:</p>
 
         <hr>
 
-        <div class="row clear">
-          <div class="col col-4">
-            <div id="todo-example">
-              <ul class="todos unstyled-list"></ul>
-              <form role="form" class="create-todo">
-                <div class="form-group">
-                  <input type="text" class="form-control" name="description" placeholder="Add a new Todo">
-                </div>
-                <button type="submit" class="button primary-button block">Add Todo</button>
-              </form>
-            </div>
-          </div>
-          <div class="col col-8">
-            <div class="row">
-              <div class="button-group" id="realtime-todos">
-                <a href="#" class="button" title="Todo Feathers Server">Server</a>
-                <a href="#" class="button" title="Real-time Todo web page">Client</a>
-              </div>
-              <script src="https://gist.github.com/daffl/6665992.js"></script>
+        <div id="todo-example" class="row clear">
+          <ul class="todos unstyled-list">
+            <li>Loading...</li>
+          </ul>
+          <form role="form" class="create-todo">
+            <div class="form-group">
+              <input type="text" class="form-control" name="description" placeholder="Add a new Todo">
             </div>
-          </div>
+            <button type="submit" class="button primary-button block">Add Todo</button>
+          </form>
         </div>
+
+        <p>
+          Eager to try it out yourself? <a href="https://gist.github.com/daffl/6665992/download">Download this Gist</a> (view the code <a href="https://gist.github.com/daffl/6665992" target="_blank">here</a>), unpack and in the new folder run
+          <blockquote><pre>npm install feathers feathers-memory body-parser<br>node app.js</pre></blockquote>
+          Then go to <a href="http://localhost:8080" target="_blank">http://localhost:8080</a>. The REST API will be available at <a href="localhost:8080/todos" target="_blank">localhost:8080/todos</a>.
+          <br> In this guide we will learn how it all works...
+        </p>
       </div>
     </div>
   </div>