tweak the source

docs/refactor/01-motivation.md → docs/refactor/01-why-react.md

@@ -1,4 +1,4 @@
-# Motivation / Why React?
+# Why React?
 
 React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the **V** in **[MVC](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)**.
 

docs/refactor/04-scaling-up.md → docs/refactor/04-multiple-components.md

@@ -1,4 +1,4 @@
-# Scaling Up and Using Multiple Components
+# Multiple components
 
 So far, we've looked at how to write a single component to display data and handle user input. Next let's examine one of React's finest features: composability.
 

docs/refactor/05-building-effective-reusable-components.md → docs/refactor/05-reusable-components.md

@@ -1,4 +1,4 @@
-## Build reusable component libraries!
+## Reusable components
 
 When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc) into reusable components with well-defined interfaces. That way, the next time you need to build some UI you can write much less code, which means faster development time, less bugs, and less bytes down the wire.
 

docs/refactor/07-working-with-the-browser.md

@@ -107,7 +107,7 @@ In addition to that philosphy, we've also taken the stance that we, as authors o
 * `Date.now`
 * `Array.prototype.some` (also in `es5-shim.js`)
 
-All of these can be polyfilled using `es5-shim.js` from https://github.com/kriskowal/es5-shim.
+All of these can be polyfilled using `es5-shim.js` from [https://github.com/kriskowal/es5-shim](https://github.com/kriskowal/es5-shim).
 
-* `console.*` - https://github.com/paulmillr/console-polyfill
-* `Object.create` - Provided in `es5-sham.js` @ https://github.com/kriskowal/es5-shim
+* `console.*` - [https://github.com/paulmillr/console-polyfill](https://github.com/paulmillr/console-polyfill)
+* `Object.create` - Provided in `es5-sham.js` @ [https://github.com/kriskowal/es5-shim](https://github.com/kriskowal/es5-shim)

docs/refactor/08-working-with-your-environment.md → docs/refactor/08-tooling-integration.md

@@ -1,4 +1,4 @@
-# Working with your environment
+# Tooling integration
 
 Every project uses a different system for building and deploying JavaScript. We've tried to make React as environment-agnostic as possible.
 

docs/refactor/09-reference.md

@@ -1,5 +1,22 @@
 # Reference
 
+## Examples
+
+### Production apps
+
+* All of [Instagram.com](http://instagram.com/) is built on React.
+* Many components on [Facebook.com](http://www.facebook.com/), including the commenting interface, ads creation flows, and page insights.
+* [Khan Academy](http://khanacademy.org/) is using React for its question editor.
+
+### Sample code
+
+* We've included **[a step-by-step comment box tutorial](./09.1-tutorial.md)**
+* There is also [a simple LikeButton tutorial](./likebutton/)
+* [The React starter kit](/react/downloads.md) includes several examples which you can [view online in our GitHub repo](https://github.com/facebook/react/tree/master/examples/)
+* [reactapp](https://github.com/jordwalke/reactapp) is a simple app template to get you up-and-running quickly with React.
+* [React one-hour email](https://github.com/petehunt/react-one-hour-email/commits/master) goes step-by-step from a static HTML mock to an interactive email reader (written in just one hour!)
+* [Rendr + React app template](https://github.com/petehunt/rendr-react-template/) demonstrates how to use React's server rendering capabilities.
+
 ## API
 
 ### React
@@ -154,12 +171,3 @@ React has implemented a browser-independent events and DOM system for performanc
 * All event objects conform to the W3C spec
 * All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style. We intentionally break with the spec here, since the spec is inconsistent.
 * `onChange` behaves as you would expect it to: whenever a form field is changed this event is fired rather than inconsistently on blur. We intentionally break from existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to react to user input in real time.
-
-## Examples
-
-* React powers all of Instagram.com and many components on Facebook.com, including the commenting interface, ads creation flows, and page insights.
-* We've included [a step-by-step tutorial](./09.1-tutorial.md) for creating a comment box widget with React
-* [The React starter kit](/react/downloads.md) includes several examples which you can [view online in our GitHub repo](https://github.com/facebook/react/tree/master/examples/)
-* [reactapp](https://github.com/jordwalke/reactapp) is a simple app template to get you up-and-running quickly with React.
-* [React one-hour email](https://github.com/petehunt/react-one-hour-email/commits/master) goes step-by-step from a static HTML mock to an interactive email reader (written in just one hour!)
-* [Rendr + React app template](https://github.com/petehunt/rendr-react-template/) demonstrates how to use React's server rendering capabilities.

docs/refactor/09.1-tutorial.md

@@ -1,10 +1,4 @@
----
-id: docs-tutorial
-title: Tutorial
-layout: docs
-prev: getting-started.html
-next: common-questions.html
----
+# Tutorial
 
 We'll be building a simple, but realistic comments box that you can drop into a blog, similar to Disqus, LiveFyre or Facebook comments.
 

docs/refactor/build.py

@@ -0,0 +1,63 @@
+import glob
+import os
+
+def build_header(id, title, prev, next):
+    prevtext = nexttext = ''
+    if prev:
+        prevtext = 'prev: ' + prev + '\n'
+    if next:
+        nexttext = 'next: ' + next + '\n'
+    return '''---
+id: %s
+title: %s
+layout: docs
+%s%s---''' % (id, title, prevtext, nexttext)
+
+def sanitize(content):
+    title,content = content.split('\n', 1)
+    title = title[2:].strip()
+    return title,content.replace('# ', '## ').strip()
+
+def get_dest(filename):
+    return os.path.join(os.path.dirname(filename), '..', os.path.basename(filename))
+
+def relative_html(filename):
+    if not filename:
+        return None
+    return os.path.splitext(os.path.basename(filename))[0] + '.html'
+
+def generate_nav_item(filename, title):
+    basename = os.path.splitext(os.path.basename(filename))[0]
+    return '        <li><a href="/react/docs/%s.html"{%% if page.id == \'%s\' %%} class="active"{%% endif %%}>%s</a></li>\n' % (basename, basename, title)
+
+def main():
+    docs = [None] + glob.glob(os.path.join(os.path.dirname(os.path.abspath(__file__)), '*.md'))[:-1] + [None]
+    nav = '''
+<div class="nav-docs">
+  <div class="nav-docs-section">
+    <h3>React documentation</h3>
+    <ul>
+%s
+    </ul>
+  </div>
+</div>'''
+    items = ''
+    for i in xrange(1, len(docs) - 1):
+        prev = relative_html(docs[i - 1])
+        next = relative_html(docs[i + 1])
+        with open(docs[i], 'r') as src, open(get_dest(docs[i]), 'w') as dest:
+            title,content = sanitize(src.read())
+            header = build_header(
+                os.path.splitext(os.path.basename(docs[i]))[0],
+                title,
+                prev,
+                next
+            )
+            dest.write(header + '\n' + content)
+            if docs[i].count('.') == 1:
+                items += generate_nav_item(docs[i], title)
+    with open(os.path.join(os.path.dirname(os.path.abspath(__file__)), '..', '..', '_includes', 'nav_docs.html'), 'w') as f:
+        f.write(nav % items)
+
+if __name__ == '__main__':
+    main()