Moved cookbook recipes into separate directory. Updated nav_docs to loop through cookbook yaml. Added cookbook directory to js/ to add live editing of code samples

README.md

@@ -21,6 +21,7 @@ Once you have RubyGems and installed Bundler (via `gem install bundler`), use it
 ```sh
 $ cd react/docs
 $ bundle install # Might need sudo.
+$ npm install # Might need sudo.
 ```
 
 ### Instructions

_config.yml

@@ -55,12 +55,6 @@ nav_docs_sections:
     title: Add-ons
   - id: examples
     title: Examples
-- title: Cookbook
-  items:
-  - id: introduction
-    title: Introduction
-  - id: inline-styles
-    title: Inline Styles
 - title: Reference
   items:
   - id: top-level-api
@@ -75,3 +69,10 @@ nav_docs_sections:
     title: Event System
   - id: dom-differences
     title: DOM Differences
+nav_cookbook:
+- title: Cookbook
+  items:
+  - id: introduction
+    title: Introduction
+  - id: inline-styles
+    title: Inline Styles

_includes/nav_docs.html

@@ -1,4 +1,5 @@
 <div class="nav-docs">
+  <!-- Docs Nav -->
   {% for section in site.nav_docs_sections %}
     <div class="nav-docs-section">
       <h3>{{ section.title }}</h3>
@@ -24,4 +25,18 @@
       </ul>
     </div>
   {% endfor %}
+
+  <!-- Cookbook Nav -->
+  {% for section in site.nav_cookbook %}
+    <div class="nav-docs-section">
+      <h3>{{ section.title }}</h3>
+      <ul>
+        {% for item in section.items %}
+          <li>
+            <a href="/react/cookbook/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>{{ item.title }}</a>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  {% endfor %}
 </div>

_js/cookbook/inline-styles.js

@@ -0,0 +1,10 @@
+/**
+ * @jsx React.DOM
+ */
+
+var INLINE_STYLES_COMPONENT = "\/** @jsx React.DOM *\/\r\n\r\nvar divStyle = {\r\n  color: \'white\',\r\n  backgroundColor: \'lightblue\',\r\n  WebkitTransition: \'all\' \/\/ note the capital \'W\' here\r\n};\r\n\r\nReact.renderComponent(<div style={divStyle}>Hello World!<\/div>, mountNode);";
+
+React.renderComponent(
+  ReactPlayground( {codeText:INLINE_STYLES_COMPONENT} ),
+  document.getElementById('inlineStylesExample')
+);

_layouts/default.html

@@ -74,6 +74,9 @@
     </footer>
   </div>
   <div id="fb-root"></div>
+  {% if page.script %}
+  <script type="text/javascript" src="/react/js/{{page.script}}"></script>
+  {% endif %}
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

docs/cb-02-inline-styles.md → cookbook/cb-02-inline-styles.md

@@ -3,25 +3,20 @@ id: inline-styles
 title: Inline Styles
 layout: docs
 permalink: inline-styles.html
+script: "cookbook/inline-styles.js"
 ---
 
 ### Problem
-You want to put inline style to an element.
+You want to apply inline style to an element.
 
 ### Solution
 Instead of writing a string, create an object whose key is the camelCased version of the style name, and whose value is the style's value, in string:
 
-```html
-/** @jsx React.DOM */
-
-var divStyle = {
-  color: 'white',
-  backgroundColor: 'lightblue',
-  WebkitTransition: 'all' // note the capital 'W' here
-};
-
-React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
-```
+<div id="examples">
+	<div class="example">
+		<div id="inlineStylesExample"></div>
+	</div>
+</div>
 
 ### Discussion
 Style keys are camelCased in order to be consistent with accessing the properties using `node.style.___` in DOM. This also explains why `WebkitTransition` has an uppercase 'W'.