From 33232007f76a5ddc68b7966ee7e2b7dcb3e66585 Mon Sep 17 00:00:00 2001
From: Connor McSheffrey <connor.mcsheffrey@gmail.com>
Date: Tue, 24 Sep 2013 22:13:26 -0700
Subject: [PATCH] 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                                 |  1 +
 _config.yml                               | 13 +++++++------
 _includes/nav_docs.html                   | 17 ++++++++++++++++-
 _js/cookbook/inline-styles.js             | 10 ++++++++++
 _layouts/default.html                     |  3 +++
 {docs => cookbook}/cb-01-introduction.md  |  0
 {docs => cookbook}/cb-02-inline-styles.md | 19 +++++++------------
 7 files changed, 44 insertions(+), 19 deletions(-)
 create mode 100644 _js/cookbook/inline-styles.js
 rename {docs => cookbook}/cb-01-introduction.md (100%)
 rename {docs => cookbook}/cb-02-inline-styles.md (55%)

diff --git a/README.md b/README.md
index 4db50f03..3d14a9bf 100644
--- a/README.md
+++ b/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
diff --git a/_config.yml b/_config.yml
index 1220ae0a..3f3cc434 100644
--- a/_config.yml
+++ b/_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
diff --git a/_includes/nav_docs.html b/_includes/nav_docs.html
index e71ece3c..c8359518 100644
--- a/_includes/nav_docs.html
+++ b/_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 %}
-</div>
+
+  <!-- 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>
\ No newline at end of file
diff --git a/_js/cookbook/inline-styles.js b/_js/cookbook/inline-styles.js
new file mode 100644
index 00000000..1167637b
--- /dev/null
+++ b/_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')
+);
diff --git a/_layouts/default.html b/_layouts/default.html
index 61b06b8a..b565498b 100644
--- a/_layouts/default.html
+++ b/_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),
diff --git a/docs/cb-01-introduction.md b/cookbook/cb-01-introduction.md
similarity index 100%
rename from docs/cb-01-introduction.md
rename to cookbook/cb-01-introduction.md
diff --git a/docs/cb-02-inline-styles.md b/cookbook/cb-02-inline-styles.md
similarity index 55%
rename from docs/cb-02-inline-styles.md
rename to cookbook/cb-02-inline-styles.md
index 4d3e9973..3fd77965 100644
--- a/docs/cb-02-inline-styles.md
+++ b/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'.
\ No newline at end of file