added seperate cookbook layout (since URL base of next/prev is hardcoded in layout), added next/prev yaml meta to each cookbook entry until I can find a way of generating them dynamically

_config.yml

@@ -84,6 +84,8 @@ nav_cookbook:
     title: JSX root node count
   - id: style-prop-value-px
     title: Style prop value px
+  - id: children-prop-type
+    title: Children prop type
   - id: controlled-input-null-value
     title: Controlled input null value
   - id: componentWillReceiveProps-not-triggered-after-mounting

_layouts/cookbook.html

@@ -0,0 +1,25 @@
+---
+layout: default
+sectionid: cookbook
+---
+
+<section class="content wrap documentationContent">
+  {% include nav_docs.html %}
+
+  <div class="inner-content">
+    <h1>{{ page.title }}</h1>
+    <div class="subHeader">{{ page.description }}</div>
+    {{ content }}
+
+    <div class="docs-prevnext">
+      {% if page.prev %}
+        <a class="docs-prev" href="/react/cookbook/{{ page.prev }}">&larr; Prev</a>
+      {% endif %}
+      {% if page.next %}
+        <a class="docs-next" href="/react/cookbook/{{ page.next }}">Next &rarr;</a>
+      {% endif %}
+    </div>
+
+    <div class="fb-comments" data-width="650" data-num-posts="10" data-href="{{ site.url }}{{ site.baseurl }}{{ page.url }}"></div>
+  </div>
+</section>

cookbook/cb-01-introduction-tip.md

@@ -1,8 +1,9 @@
 ---
 id: introduction-tip
 title: Cookbook Introduction
-layout: docs
+layout: cookbook
 permalink: introduction-tip.html
+next: inline-styles.html
 ---
 
 The React.js cookbook provides common React tips, bite-sized information that can surprisingly answer lots of questions you might have had and warn you against common pitfalls.

cookbook/cb-01-introduction.md

@@ -1,11 +1,12 @@
 ---
 id: introduction
 title: Cookbook Introduction
-layout: docs
+layout: cookbook
 permalink: introduction.html
+next: inline-styles.html
 ---
 
-The React.js cookbook provides solutions for common questions asked when working with the React framework. It's written in the [cookbook format](http://shop.oreilly.com/category/series/cookbooks.do) commonly used by O'Reilly Media. See [Inline Styles](/react/docs/cookbook/inline-styles.html) recipe as an example.
+The React.js cookbook provides solutions for common questions asked when working with the React framework. It's written in the [cookbook format](http://shop.oreilly.com/category/series/cookbooks.do) commonly used by O'Reilly Media. See [Inline Styles](/react/cookbook/inline-styles.html) recipe as an example.
 
 ### Contributing
 

cookbook/cb-02-inline-styles tip.md

@@ -1,8 +1,10 @@
 ---
 id: inline-styles-tip
 title: Inline Styles
-layout: docs
+layout: cookbook
 permalink: inline-styles-tip.html
+next: if-else-in-JSX.html
+prev: introduction.html
 ---
 
 In React, inline styles are not specified as a string, but as an object whose key is the camelCased version of the style name, and whose value is the style's value in string:

cookbook/cb-02-inline-styles.md

@@ -1,8 +1,10 @@
 ---
 id: inline-styles
 title: Inline Styles
-layout: docs
+layout: cookbook
 permalink: inline-styles.html
+next: if-else-in-JSX.html
+prev: introduction.html
 ---
 
 ### Problem

cookbook/cb-03-if-else-in-JSX tip.md

@@ -1,8 +1,10 @@
 ---
 id: if-else-in-JSX-tip
 title: If-Else in JSX
-layout: docs
+layout: cookbook
 permalink: if-else-in-JSX-tip.html
+prev: inline-styles.html
+next: self-closing-tag.html
 ---
 
 `if-else` statements don't work inside JSX, since JSX is really just sugar for functions:

cookbook/cb-03-if-else-in-JSX.md

@@ -1,8 +1,10 @@
 ---
 id: if-else-in-JSX
 title: If-Else in JSX
-layout: docs
+layout: cookbook
 permalink: if-else-in-JSX.html
+prev: inline-styles.html
+next: self-closing-tag.html
 ---
 
 ### Problem

cookbook/cb-04-self-closing-tag tip.md

@@ -1,8 +1,10 @@
 ---
 id: self-closing-tag-tip
 title: Self-Closing Tag
-layout: docs
+layout: cookbook
 permalink: self-closing-tag-tip.html
+prev: if-else-in-JSX.html
+next: jsx-root-node-count.html
 ---
 
 In JSX, `<MyComponent />` alone is valid while `<MyComponent>` isn't.

cookbook/cb-04-self-closing-tag.md

@@ -1,8 +1,10 @@
 ---
 id: self-closing-tag
 title: Self-Closing Tag
-layout: docs
+layout: cookbook
 permalink: self-closing-tag.html
+prev: if-else-in-JSX.html
+next: jsx-root-node-count.html
 ---
 
 ### Problem

cookbook/cb-05-jsx-root-node-count tip.md

@@ -1,8 +1,10 @@
 ---
 id: jsx-root-node-count-tip
 title: Maximum number of JSX root nodes
-layout: docs
+layout: cookbook
 permalink: jsx-root-node-count-tip.html
+prev: self-closing-tag.html
+next: style-prop-value-px.html
 ---
 
 Currently, in a component's `render`, you can only return one node; if you have, say, a list of `div`s to return, you must wrap your components within a `div`, `span` or any other component.

cookbook/cb-05-jsx-root-node-count.md

@@ -1,8 +1,10 @@
 ---
 id: jsx-root-node-count
 title: Maximum number of JSX root nodes
-layout: docs
+layout: cookbook
 permalink: jsx-root-node-count.html
+prev: self-closing-tag.html
+next: style-prop-value-px.html
 ---
 
 ### Problem

cookbook/cb-06-style-prop-value-px tip.md

@@ -1,8 +1,10 @@
 ---
 id: style-prop-value-px-tip
 title: Shorthand for specifying pixel values in style prop
-layout: docs
+layout: cookbook
 permalink: style-prop-value-px-tip.html
+prev: jsx-root-node-count.html
+next: children-prop-type.html
 ---
 
 When specifying a pixel value for your inline `style` prop, React automatically appends the string "px" for you after your number value, so this works:

cookbook/cb-06-style-prop-value-px.md

@@ -1,8 +1,10 @@
 ---
 id: style-prop-value-px
 title: Shorthand for specifying pixel values in style prop
-layout: docs
+layout: cookbook
 permalink: style-prop-value-px.html
+prev: jsx-root-node-count.html
+next: children-prop-type.html
 ---
 
 ### Problem

cookbook/cb-07-children-prop-type tip.md

@@ -1,8 +1,10 @@
 ---
 id: children-prop-type-tip
 title: Type of the children prop
-layout: docs
+layout: cookbook
 permalink: children-prop-type-tip.html
+prev: style-prop-value-px.html
+next: controlled-input-null-value.html
 ---
 
 Usually, a component's `this.props.children` is an array of components. To save an extra array allocation, it returns the component itself when there's only one.

cookbook/cb-07-children-prop-type.md

@@ -1,8 +1,10 @@
 ---
 id: children-prop-type
 title: Type of the children prop
-layout: docs
+layout: cookbook
 permalink: children-prop-type.html
+prev: style-prop-value-px.html
+next: controlled-input-null-value.html
 ---
 
 ### Problem

cookbook/cb-08-controlled-input-null-value tip.md

@@ -1,8 +1,10 @@
 ---
 id: controlled-input-null-value-tip
 title: Value of null for controlled input
-layout: docs
+layout: cookbook
 permalink: controlled-input-null-value-tip.html
+prev: children-prop-type.html
+next: componentWillReceiveProps-not-triggered-after-mounting.html
 ---
 
 Specifying the `value` prop on a [controlled component](/react/docs/cookbook/forms.html) prevents the user from changing the input unless you desire so.

cookbook/cb-08-controlled-input-null-value.md

@@ -1,8 +1,10 @@
 ---
 id: controlled-input-null-value
 title: Value of null for controlled input
-layout: docs
+layout: cookbook
 permalink: controlled-input-null-value.html
+prev: children-prop-type.html
+next: componentWillReceiveProps-not-triggered-after-mounting.html
 ---
 
 ### Problem

cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting-tip.md

@@ -1,8 +1,10 @@
 ---
 id: componentWillReceiveProps-not-triggered-after-mounting-tip
 title: componentWillReceiveProps not triggered after mounting
-layout: docs
+layout: cookbook
 permalink: componentWillReceiveProps-not-triggered-after-mounting-tip.html
+prev: controlled-input-null-value.html
+next: props-in-getInitialSate-as-anti-pattern.html
 ---
 
 `componentWillReceiveProps` isn't triggered after the node is put on scene. This is by design. Check out [other lifecycle methods](/react/docs/cookbook/component-specs.html) for the one that suits your needs.

cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting.md

@@ -1,8 +1,10 @@
 ---
 id: componentWillReceiveProps-not-triggered-after-mounting
 title: componentWillReceiveProps not triggered after mounting
-layout: docs
+layout: cookbook
 permalink: componentWillReceiveProps-not-triggered-after-mounting.html
+prev: controlled-input-null-value.html
+next: props-in-getInitialSate-as-anti-pattern.html
 ---
 
 ### Problem

cookbook/cb-10-props-in-getInitialSate-as-anti-pattern-tip.md

@@ -1,8 +1,10 @@
 ---
 id: props-in-getInitialSate-as-anti-pattern-tip
 title: props in getInitialState is an anti-pattern
-layout: docs
+layout: cookbook
 permalink: props-in-getInitialSate-as-anti-pattern-tip.html
+prev: componentWillReceiveProps-not-triggered-after-mounting.html
+next: dom-event-listeners.html
 ---
 
 > Note:

cookbook/cb-10-props-in-getInitialSate-as-anti-pattern.md

@@ -1,8 +1,10 @@
 ---
 id: props-in-getInitialSate-as-anti-pattern
 title: props in getInitialState is an anti-pattern
-layout: docs
+layout: cookbook
 permalink: props-in-getInitialSate-as-anti-pattern.html
+prev: componentWillReceiveProps-not-triggered-after-mounting.html
+next: dom-event-listeners.html
 ---
 
 ### Problem

cookbook/cb-11-dom-event-listeners tip.md

@@ -1,8 +1,10 @@
 ---
 id: dom-event-listeners-tip
 title: DOM event listeners in a component
-layout: docs
+layout: cookbook
 permalink: dom-event-listeners-tip.html
+prev: props-in-getInitialSate-as-anti-pattern.html
+next: initial-ajax.html
 ---
 
 > Note:

cookbook/cb-11-dom-event-listeners.md

@@ -1,8 +1,10 @@
 ---
 id: dom-event-listeners
 title: DOM event listeners in a component
-layout: docs
+layout: cookbook
 permalink: dom-event-listeners.html
+prev: props-in-getInitialSate-as-anti-pattern.html
+next: initial-ajax.html
 ---
 
 ### Problem

cookbook/cb-12-initial-ajax tip.md

@@ -1,8 +1,9 @@
 ---
 id: initial-ajax-tip
 title: Load initial data via AJAX
-layout: docs
+layout: cookbook
 permalink: initial-ajax-tip.html
+prev: dom-event-listeners.html
 ---
 
 Fetch data in `componentDidMount`. When they arrive, put them inside your state then render them.

cookbook/cb-12-initial-ajax.md

@@ -1,8 +1,9 @@
 ---
 id: initial-ajax
 title: Load initial data via AJAX
-layout: docs
+layout: cookbook
 permalink: initial-ajax.html
+prev: dom-event-listeners.html
 ---
 
 ### Problem