Autogen the docs nav

This is still the same amount of duplication, except way easier to
parse. Docs nav now lives in `_config.yml` and you must restart jekyll
to see changes to that list (since config is only read at jekyll launch)

_config.yml

@@ -16,3 +16,39 @@ markdown: redcarpet
 react_version: 0.4.0a
 description: A JavaScript library for building user interfaces
 relative_permalinks: true
+
+nav_docs_sections:
+- title: Quick Start
+  items:
+  - id: getting-started
+    title: Getting Started
+  - id: tutorial
+    title: Tutorial
+- title: Guides
+  items:
+    - id: why-react
+      title: Why React?
+    - id: displaying-data
+      title: Displaying Data
+      subitems:
+      - id: jsx-in-depth
+        title: JSX in Depth
+      - id: jsx-gotchas
+        title: JSX Gotchas
+    - id: interactivity-and-dynamic-uis
+      title: Interactivity and Dynamic UIs
+    - id: multiple-components
+      title: Multiple Components
+    - id: reusable-components
+      title: Reusable Components
+    - id: forms
+      title: Forms
+    - id: working-with-the-browser
+      title: Working With the Browser
+      subitems:
+      - id: more-about-refs
+        title: More About Refs
+    - id: tooling-integration
+      title: Tooling integration
+    - id: reference
+      title: Reference

_css/react.scss

@@ -206,6 +206,9 @@ li {
     list-style: none;
     margin: 0;
   }
+  ul ul {
+    margin-left: 20px;
+  }
   li {
     margin: 0;
   }

_includes/nav_docs.html

@@ -1,24 +1,27 @@
 <div class="nav-docs">
+  {% for section in site.nav_docs_sections %}
     <div class="nav-docs-section">
-    <h3>Quick start</h3>
+      <h3>{{ section.title }}</h3>
       <ul>
-      <li><a href="/react/docs/getting-started.html"{% if page.id == 'getting-started' %} class="active"{% endif %}>Getting Started</a></li>
+        {% for item in section.items %}
-      <li><a href="/react/docs/tutorial.html"{% if page.id == 'tutorial' %} class="active"{% endif %}>Tutorial</a></li>
+          <li>
-    </ul>
+            <a href="/react/docs/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>
-  </div>
+              {{ item.title }}
-  <div class="nav-docs-section">
+            </a>
-    <h3>Guides</h3>
+            {% if item.subitems %}
               <ul>
-        <li><a href="/react/docs/01-why-react.html"{% if page.id == '01-why-react' %} class="active"{% endif %}>Why React?</a></li>
+                {% for subitem in item.subitems %}
-        <li><a href="/react/docs/02-displaying-data.html"{% if page.id == '02-displaying-data' %} class="active"{% endif %}>Displaying Data</a></li>
+                  <li>
-        <li><a href="/react/docs/03-interactivity-and-dynamic-uis.html"{% if page.id == '03-interactivity-and-dynamic-uis' %} class="active"{% endif %}>Interactivity and Dynamic UIs</a></li>
+                    <a href="/react/docs/{{ subitem.id }}.html"{% if page.id == subitem.id %} class="active"{% endif %}>
-        <li><a href="/react/docs/04-multiple-components.html"{% if page.id == '04-multiple-components' %} class="active"{% endif %}>Multiple Components</a></li>
+                      {{ subitem.title }}
-        <li><a href="/react/docs/05-reusable-components.html"{% if page.id == '05-reusable-components' %} class="active"{% endif %}>Reusable Components</a></li>
+                    </a>
-        <li><a href="/react/docs/06-forms.html"{% if page.id == '06-forms' %} class="active"{% endif %}>Forms</a></li>
+                  </li>
-        <li><a href="/react/docs/07-working-with-the-browser.html"{% if page.id == '07-working-with-the-browser' %} class="active"{% endif %}>Working With the Browser</a></li>
+                {% endfor %}
-        <li><a href="/react/docs/08-tooling-integration.html"{% if page.id == '08-tooling-integration' %} class="active"{% endif %}>Tooling Integration</a></li>
+              </ul>
-        <li><a href="/react/docs/09-reference.html"{% if page.id == '09-reference' %} class="active"{% endif %}>Reference</a></li>
+            {% endif %}
-
+          </li>
+        {% endfor %}
       </ul>
     </div>
+  {% endfor %}
 </div>