From d0467822e4747a9dbe928d5cb5752d3f1d74ad8d Mon Sep 17 00:00:00 2001 From: Connor McSheffrey Date: Thu, 10 Oct 2013 09:03:08 -0700 Subject: [PATCH] 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 | 2 ++ _layouts/cookbook.html | 25 +++++++++++++++++++ cookbook/cb-01-introduction-tip.md | 3 ++- cookbook/cb-01-introduction.md | 5 ++-- cookbook/cb-02-inline-styles tip.md | 4 ++- cookbook/cb-02-inline-styles.md | 4 ++- cookbook/cb-03-if-else-in-JSX tip.md | 4 ++- cookbook/cb-03-if-else-in-JSX.md | 4 ++- cookbook/cb-04-self-closing-tag tip.md | 4 ++- cookbook/cb-04-self-closing-tag.md | 4 ++- cookbook/cb-05-jsx-root-node-count tip.md | 4 ++- cookbook/cb-05-jsx-root-node-count.md | 4 ++- cookbook/cb-06-style-prop-value-px tip.md | 4 ++- cookbook/cb-06-style-prop-value-px.md | 4 ++- cookbook/cb-07-children-prop-type tip.md | 4 ++- cookbook/cb-07-children-prop-type.md | 4 ++- .../cb-08-controlled-input-null-value tip.md | 4 ++- cookbook/cb-08-controlled-input-null-value.md | 4 ++- ...eProps-not-triggered-after-mounting-tip.md | 4 ++- ...ceiveProps-not-triggered-after-mounting.md | 4 ++- ...s-in-getInitialSate-as-anti-pattern-tip.md | 4 ++- ...props-in-getInitialSate-as-anti-pattern.md | 4 ++- cookbook/cb-11-dom-event-listeners tip.md | 4 ++- cookbook/cb-11-dom-event-listeners.md | 4 ++- cookbook/cb-12-initial-ajax tip.md | 3 ++- cookbook/cb-12-initial-ajax.md | 3 ++- 26 files changed, 96 insertions(+), 25 deletions(-) create mode 100644 _layouts/cookbook.html diff --git a/_config.yml b/_config.yml index 2c1c09eb..daddf3b3 100644 --- a/_config.yml +++ b/_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 diff --git a/_layouts/cookbook.html b/_layouts/cookbook.html new file mode 100644 index 00000000..bc1cd4f4 --- /dev/null +++ b/_layouts/cookbook.html @@ -0,0 +1,25 @@ +--- +layout: default +sectionid: cookbook +--- + +
+ {% include nav_docs.html %} + +
+

{{ page.title }}

+
{{ page.description }}
+ {{ content }} + +
+ {% if page.prev %} + ← Prev + {% endif %} + {% if page.next %} + Next → + {% endif %} +
+ +
+
+
diff --git a/cookbook/cb-01-introduction-tip.md b/cookbook/cb-01-introduction-tip.md index 2b5e3b47..af249dc8 100644 --- a/cookbook/cb-01-introduction-tip.md +++ b/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. diff --git a/cookbook/cb-01-introduction.md b/cookbook/cb-01-introduction.md index bccc0b94..312677bb 100644 --- a/cookbook/cb-01-introduction.md +++ b/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 diff --git a/cookbook/cb-02-inline-styles tip.md b/cookbook/cb-02-inline-styles tip.md index 39d6f72d..5f3f71c1 100644 --- a/cookbook/cb-02-inline-styles tip.md +++ b/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: diff --git a/cookbook/cb-02-inline-styles.md b/cookbook/cb-02-inline-styles.md index 4dd44d05..9f323330 100644 --- a/cookbook/cb-02-inline-styles.md +++ b/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 diff --git a/cookbook/cb-03-if-else-in-JSX tip.md b/cookbook/cb-03-if-else-in-JSX tip.md index 39bf4d64..24ecfb6a 100644 --- a/cookbook/cb-03-if-else-in-JSX tip.md +++ b/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: diff --git a/cookbook/cb-03-if-else-in-JSX.md b/cookbook/cb-03-if-else-in-JSX.md index c5cfc448..089184db 100644 --- a/cookbook/cb-03-if-else-in-JSX.md +++ b/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 diff --git a/cookbook/cb-04-self-closing-tag tip.md b/cookbook/cb-04-self-closing-tag tip.md index 3f321312..ff47be3b 100644 --- a/cookbook/cb-04-self-closing-tag tip.md +++ b/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, `` alone is valid while `` isn't. diff --git a/cookbook/cb-04-self-closing-tag.md b/cookbook/cb-04-self-closing-tag.md index 2accb951..bfb8c346 100644 --- a/cookbook/cb-04-self-closing-tag.md +++ b/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 diff --git a/cookbook/cb-05-jsx-root-node-count tip.md b/cookbook/cb-05-jsx-root-node-count tip.md index 830c9503..814ae943 100644 --- a/cookbook/cb-05-jsx-root-node-count tip.md +++ b/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. diff --git a/cookbook/cb-05-jsx-root-node-count.md b/cookbook/cb-05-jsx-root-node-count.md index a1af505d..dd0fd8ce 100644 --- a/cookbook/cb-05-jsx-root-node-count.md +++ b/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 diff --git a/cookbook/cb-06-style-prop-value-px tip.md b/cookbook/cb-06-style-prop-value-px tip.md index 0639fc3a..6ef2b3ee 100644 --- a/cookbook/cb-06-style-prop-value-px tip.md +++ b/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: diff --git a/cookbook/cb-06-style-prop-value-px.md b/cookbook/cb-06-style-prop-value-px.md index 96a90680..5ee26917 100644 --- a/cookbook/cb-06-style-prop-value-px.md +++ b/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 diff --git a/cookbook/cb-07-children-prop-type tip.md b/cookbook/cb-07-children-prop-type tip.md index 107322ab..0781d975 100644 --- a/cookbook/cb-07-children-prop-type tip.md +++ b/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. diff --git a/cookbook/cb-07-children-prop-type.md b/cookbook/cb-07-children-prop-type.md index 7097f25c..72458d62 100644 --- a/cookbook/cb-07-children-prop-type.md +++ b/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 diff --git a/cookbook/cb-08-controlled-input-null-value tip.md b/cookbook/cb-08-controlled-input-null-value tip.md index ec95044a..2a3d55b0 100644 --- a/cookbook/cb-08-controlled-input-null-value tip.md +++ b/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. diff --git a/cookbook/cb-08-controlled-input-null-value.md b/cookbook/cb-08-controlled-input-null-value.md index dd1413ba..fcd1ee6c 100644 --- a/cookbook/cb-08-controlled-input-null-value.md +++ b/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 diff --git a/cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting-tip.md b/cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting-tip.md index 765b5fea..2eb6ad0b 100644 --- a/cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting-tip.md +++ b/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. diff --git a/cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting.md b/cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting.md index 827d6530..4c73adbf 100644 --- a/cookbook/cb-09-componentWillReceiveProps-not-triggered-after-mounting.md +++ b/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 diff --git a/cookbook/cb-10-props-in-getInitialSate-as-anti-pattern-tip.md b/cookbook/cb-10-props-in-getInitialSate-as-anti-pattern-tip.md index 6d8b89c3..60c15934 100644 --- a/cookbook/cb-10-props-in-getInitialSate-as-anti-pattern-tip.md +++ b/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: diff --git a/cookbook/cb-10-props-in-getInitialSate-as-anti-pattern.md b/cookbook/cb-10-props-in-getInitialSate-as-anti-pattern.md index b26027aa..8fd1347b 100644 --- a/cookbook/cb-10-props-in-getInitialSate-as-anti-pattern.md +++ b/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 diff --git a/cookbook/cb-11-dom-event-listeners tip.md b/cookbook/cb-11-dom-event-listeners tip.md index fb4bdf90..f83798a4 100644 --- a/cookbook/cb-11-dom-event-listeners tip.md +++ b/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: diff --git a/cookbook/cb-11-dom-event-listeners.md b/cookbook/cb-11-dom-event-listeners.md index aedc98f4..3de316cc 100644 --- a/cookbook/cb-11-dom-event-listeners.md +++ b/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 diff --git a/cookbook/cb-12-initial-ajax tip.md b/cookbook/cb-12-initial-ajax tip.md index 555e7b9f..600d9e8a 100644 --- a/cookbook/cb-12-initial-ajax tip.md +++ b/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. diff --git a/cookbook/cb-12-initial-ajax.md b/cookbook/cb-12-initial-ajax.md index 3e10a1ca..1adaca5f 100644 --- a/cookbook/cb-12-initial-ajax.md +++ b/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