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
Connor McSheffrey committed
Sep 24, 2013 at 22:13 UTC
5f296768a52cc7ea9e1304f1e913e2f0a98bde1b
7 files changed
+44
-19
docs/README.md
+1
@@ -21,6 +21,7 @@ Once you have RubyGems and installed Bundler (via `gem install bundler`), use it
21
```sh
22
$ cd react/docs
23
$ bundle install # Might need sudo.
24
+$ npm install # Might need sudo.
25
```
26
27
### Instructions
docs/_config.yml
+7
-6
@@ -55,12 +55,6 @@ nav_docs_sections:
55
title: Add-ons
56
- id: examples
57
title: Examples
58
-- title: Cookbook
59
- items:
60
- - id: introduction
61
- title: Introduction
62
- - id: inline-styles
63
- title: Inline Styles
58
- title: Reference
59
items:
60
- id: top-level-api
@@ -75,3 +69,10 @@ nav_docs_sections:
69
title: Event System
70
- id: dom-differences
71
title: DOM Differences
72
+nav_cookbook:
73
+- title: Cookbook
74
+ items:
75
+ - id: introduction
76
+ title: Introduction
77
+ - id: inline-styles
78
+ title: Inline Styles
docs/_includes/nav_docs.html
+16
-1
@@ -1,4 +1,5 @@
1
<div class="nav-docs">
2
+ <!-- Docs Nav -->
3
{% for section in site.nav_docs_sections %}
4
<div class="nav-docs-section">
5
<h3>{{ section.title }}</h3>
@@ -24,4 +25,18 @@
25
</ul>
26
</div>
27
{% endfor %}
27
-</div>
28
+
29
+ <!-- Cookbook Nav -->
30
+ {% for section in site.nav_cookbook %}
31
+ <div class="nav-docs-section">
32
+ <h3>{{ section.title }}</h3>
33
+ <ul>
34
+ {% for item in section.items %}
35
+ <li>
36
+ <a href="/react/cookbook/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>{{ item.title }}</a>
37
+ </li>
38
+ {% endfor %}
39
+ </ul>
40
+ </div>
41
+ {% endfor %}
42
+</div>
\ No newline at end of file
docs/_js/cookbook/inline-styles.js
new
+10
@@ -0,0 +1,10 @@
1
+/**
2
+ * @jsx React.DOM
3
+ */
4
+
5
+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);";
6
+
7
+React.renderComponent(
8
+ ReactPlayground( {codeText:INLINE_STYLES_COMPONENT} ),
9
+ document.getElementById('inlineStylesExample')
10
+);
docs/_layouts/default.html
+3
@@ -74,6 +74,9 @@
74
</footer>
75
</div>
76
<div id="fb-root"></div>
77
+ {% if page.script %}
78
+ <script type="text/javascript" src="/react/js/{{page.script}}"></script>
79
+ {% endif %}
80
<script>
81
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
82
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
docs/cookbook/cb-01-introduction.md
renamed
docs/cookbook/cb-02-inline-styles.md
renamed
+7
-12
@@ -3,25 +3,20 @@ id: inline-styles
3
title: Inline Styles
4
layout: docs
5
permalink: inline-styles.html
6
+script: "cookbook/inline-styles.js"
7
---
8
9
### Problem
9
-You want to put inline style to an element.
10
+You want to apply inline style to an element.
11
12
### Solution
13
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:
14
14
-```html
15
-/** @jsx React.DOM */
16
-
17
-var divStyle = {
18
- color: 'white',
19
- backgroundColor: 'lightblue',
20
- WebkitTransition: 'all' // note the capital 'W' here
21
-};
22
-
23
-React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
24
-```
15
+<div id="examples">
16
+ <div class="example">
17
+ <div id="inlineStylesExample"></div>
18
+ </div>
19
+</div>
20
21
### Discussion
22
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