From 837b2d2590059e1303e79c1011c3afec30090148 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Tue, 3 Oct 2017 01:57:50 +0800
Subject: [PATCH] react@0.14: add deprecation warning

---
 ansible-modules.md | 106 ++++++++++++++++++++++++++++-----------------
 react@0.14.md      |  91 ++++++++++++++++++++++----------------
 2 files changed, 120 insertions(+), 77 deletions(-)

diff --git a/ansible-modules.md b/ansible-modules.md
index 62a4be15..776b370d 100644
--- a/ansible-modules.md
+++ b/ansible-modules.md
@@ -1,71 +1,99 @@
 ---
 title: Ansible modules
 category: Ansible
+layout: 2017/s##heet
 ---
 
 ### Aptitude
 
-    - apt_key: id=AC40B2F7 url="http://..."
-        state=present
+```yml
+- apt_key: id=AC40B2F7 url="http://..."
+    state=present
+```
 
-    - apt: pkg=nodejs state=present
-        state=present # absent | latest
-        update_cache=yes
-        force=no
+```yml
+- apt: pkg=nodejs state=present
+    state=present # absent | latest
+    update_cache=yes
+    force=no
+```
 
-   - apt: deb=https://packages.erlang-solutions.com/erlang-solutions_1.0_all.deb
+```yml
+- apt: deb=https://packages.erlang-solutions.com/erlang-solutions_1.0_all.deb
+```
 
-    - apt_repository: repo='deb https://... raring main'
-        state=present
+```yml
+- apt_repository: repo='deb https://... raring main'
+    state=present
+```
 
 ### file
 
-    - file:
-        state=directory # file | link | hard | touch | absent
-        path=/etc/dir
-        owner=bin
-        group=wheel
-        mode=0644
-        recurse=yes  # mkdir -p
-        force=yes    # ln -nfs
+```yml
+- file:
+    state=directory # file | link | hard | touch | absent
+    path=/etc/dir
+    owner=bin
+    group=wheel
+    mode=0644
+    recurse=yes  # mkdir -p
+    force=yes    # ln -nfs
+```
 
-    - copy:
-        src=/app/config/nginx.conf
-        dest=/etc/nginx/nginx.conf
+```yml
+- copy:
+    src=/app/config/nginx.conf
+    dest=/etc/nginx/nginx.conf
+```
 
-    - template:
-        src=config/redis.j2
-        dest=/etc/redis.conf
+```yml
+- template:
+    src=config/redis.j2
+    dest=/etc/redis.conf
+```
 
 ### git
 
-    - git: repo=git://github.com/
-        dest=/srv/checkout
-        version=master
-        depth=10
-        bare=yes
+```yml
+- git: repo=git://github.com/
+    dest=/srv/checkout
+    version=master
+    depth=10
+    bare=yes
+```
 
 ### user
-    - user: state=present name=git
-        system=yes
-        shell=/bin/sh
-        comment="Git Version Control"
+```yml
+- user: state=present name=git
+    system=yes
+    shell=/bin/sh
+    groups=admin
+    comment="Git Version Control"
+```
 
 ### service
 
-    - service: name=nginx state=started [enabled=yes]
+```yml
+- service: name=nginx state=started [enabled=yes]
+```
 
 ### shell
 
-    - shell: apt-get install nginx -y
-    - script: /x/y/script.sh
+```yml
+- shell: apt-get install nginx -y
+- script: /x/y/script.sh
+```
 
 ### local_action
 
-    - name: do something locally
-      local_action: shell echo hello
+```yml
+- name: do something locally
+  local_action: shell echo hello
+```
 
 ### debug
 
-    - debug:
-        msg: "Hello {{ var }}"
+```yml
+- debug:
+    msg: "Hello {{ var }}"
+```
diff --git a/react@0.14.md b/react@0.14.md
index 8c57dc34..52878122 100644
--- a/react@0.14.md
+++ b/react@0.14.md
@@ -1,14 +1,15 @@
 ---
 title: React.js (v0.14)
 category: React
-layout: default-ad
+layout: 2017/sheet
 deprecated: true
+intro: |
+  **Deprecated:** this guide targets an old version of React (v0.14). See the [updated React cheatsheet](react) for new versions.
 ---
 
 {%raw%}
 
-Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output))
-{:.brief-intro.center}
+### Components
 
 ```js
 var Component = React.createClass({
@@ -23,9 +24,9 @@ ReactDOM.render(<Component name="John" />, document.body);
 ```
 {:.light}
 
-## Nesting
-Nest components to separate concerns. See [multiple components](http://facebook.github.io/react/docs/multiple-components.html).
-{:.center}
+Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output))
+
+### Nesting
 
 ```js
 var UserAvatar  = React.createClass({...});
@@ -44,11 +45,13 @@ var Info = React.createClass({
 });
 ```
 
+Nest components to separate concerns. See [multiple components](http://facebook.github.io/react/docs/multiple-components.html).
+
 ## States & Properties
-Use [props](https://facebook.github.io/react/docs/tutorial.html#using-props) (`this.props`) to access parameters passed from the parent.
-Use [states](https://facebook.github.io/react/docs/tutorial.html#reactive-state) (`this.state`) to manage dynamic data.
 {:.center}
 
+### States and props
+
 ```html
 <MyComponent fullscreen={true} />
 ```
@@ -72,8 +75,10 @@ render: function () {
 }
 ```
 
+Use [props](https://facebook.github.io/react/docs/tutorial.html#using-props) (`this.props`) to access parameters passed from the parent.
+Use [states](https://facebook.github.io/react/docs/tutorial.html#reactive-state) (`this.state`) to manage dynamic data.
+
 ### Setting defaults
-Pre-populates `this.state.comments` and `this.props.name`.
 
 ```js
 React.createClass({
@@ -87,10 +92,11 @@ React.createClass({
 );
 ```
 
-## Component API
+Pre-populates `this.state.comments` and `this.props.name`.
 
-These are methods available for `Component` instances. See [Component API](http://facebook.github.io/react/docs/component-api.html).
-{:.center}
+## Components
+
+### Component API
 
 ```js
 ReactDOM.findDOMNode(c)  // 0.14+
@@ -115,8 +121,9 @@ c.replaceProps({ ... })   // for deprecation
 c.refs
 ```
 
+These are methods available for `Component` instances. See [Component API](http://facebook.github.io/react/docs/component-api.html).
+
 ### Component specs
-Methods and properties you can override. See [component specs](http://facebook.github.io/react/docs/component-specs.html).
 
 | Method | What |
 | ---- | ---- |
@@ -131,19 +138,19 @@ Methods and properties you can override. See [component specs](http://facebook.g
 | [`displayName: "..."`](http://facebook.github.io/react/docs/component-specs.html#displayname) | Automatically filled by JSX |
 {:.greycode.no-head}
 
+Methods and properties you can override. See [component specs](http://facebook.github.io/react/docs/component-specs.html).
+
 ## Lifecycle
 
 ### Mounting
-Before initial rendering occurs. Add your DOM stuff on didMount (events, timers, etc). See [reference](http://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount).
 
 | `componentWillMount()` | Before rendering (no DOM yet) |
 | `componentDidMount()` | After rendering |
 {:.greycode.no-head.lc}
 
-<br>
+Before initial rendering occurs. Add your DOM stuff on didMount (events, timers, etc). See [reference](http://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount).
 
 ### Updating
-Called when parents change properties and `.setState()`. These are not called for initial renders. See [reference](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops).
 
 | `componentWillReceiveProps`*(newProps={})* | Use `setState()` here |
 | `shouldComponentUpdate`*(newProps={}, newState={})* | Skips `render()` if returns false |
@@ -151,24 +158,18 @@ Called when parents change properties and `.setState()`. These are not called fo
 | `componentDidUpdate`*(prevProps={}, prevState={})* | Operate on the DOM here |
 {:.greycode.no-head.lc}
 
-<br>
+Called when parents change properties and `.setState()`. These are not called for initial renders. See [reference](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops).
 
 ### Unmounting
-Clear your DOM stuff here (probably done on didMount). See [reference](http://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount).
 
 | `componentWillUnmount()` | Invoked before DOM removal |
 {:.greycode.no-head.lc}
 
-<style>
-table.lc { table-layout: fixed; }
-table.lc tr>:nth-child(1) { width: 50%; }
-table.lc tr>:nth-child(2) { text-align: right; }
-</style>
+Clear your DOM stuff here (probably done on didMount). See [reference](http://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount).
 
-<br>
+## Examples
 
 ### Example: loading data
-See [initial AJAX data](http://facebook.github.io/react/tips/initial-ajax.html).
 
 ```js
 React.createClass({
@@ -184,10 +185,11 @@ React.createClass({
 });
 ```
 
+See [initial AJAX data](http://facebook.github.io/react/tips/initial-ajax.html).
+
 ## DOM nodes
 
 ### References
-Allows access to DOM nodes. See [References](http://facebook.github.io/react/docs/more-about-refs.html).
 
 ```html
 <input ref="myInput">
@@ -216,8 +218,9 @@ handleChange: function(event) {
 }
 ```
 
+Allows access to DOM nodes. See [References](http://facebook.github.io/react/docs/more-about-refs.html).
+
 ### Two-way binding
-Use [LinkedStateMixin](http://facebook.github.io/react/docs/two-way-binding-helpers.html) for easier two-way binding.
 
 ```html
 Email: <input type="text" valueLink={this.linkState('email')} />
@@ -234,10 +237,11 @@ React.createClass({
 this.state.email
 ```
 
+Use [LinkedStateMixin](http://facebook.github.io/react/docs/two-way-binding-helpers.html) for easier two-way binding.
+
 ## Property validation
 
 ### Basic types
-Primitive types: `.string`, `.number`, `.func`, and `.bool`. See [propTypes](http://facebook.github.io/react/docs/reusable-components.html#prop-validation).
 
 ```js
 React.createClass({
@@ -251,9 +255,9 @@ React.createClass({
   }
 });
 ```
+Primitive types: `.string`, `.number`, `.func`, and `.bool`. See [propTypes](http://facebook.github.io/react/docs/reusable-components.html#prop-validation).
 
 ### Required types
-Add `.isRequired`.
 
 ```js
 propTypes: {
@@ -261,8 +265,9 @@ propTypes: {
   requiredAny:   React.PropTypes.any.isRequired,
 ```
 
+Add `.isRequired`.
+
 ### React elements
-Use `.element`, `.node`.
 
 ```js
 propTypes: {
@@ -271,8 +276,9 @@ propTypes: {
                                       // ...or array of those
 ```
 
+Use `.element`, `.node`.
+
 ### Enumerables
-Use `.oneOf`, `.oneOfType`.
 
 ```
 propTypes: {
@@ -282,8 +288,9 @@ propTypes: {
               React.PropTypes.number ]),
 ```
 
+Use `.oneOf`, `.oneOfType`.
+
 ### Arrays and objects
-Use `.array[Of]`, `.object[Of]`, `.instanceOf`, `.shape`.
 
 ```js
 propTypes: {
@@ -300,8 +307,9 @@ propTypes: {
   }),
 ```
 
+Use `.array[Of]`, `.object[Of]`, `.instanceOf`, `.shape`.
+
 ### Custom validation
-Supply your own function.
 
 ```js
 propTypes: {
@@ -313,10 +321,11 @@ propTypes: {
 }
 ```
 
+Supply your own function.
+
 ## Other features
 
 ### Class set
-Manipulate DOM classes with [classnames](https://www.npmjs.org/package/classnames), previously known as `React.addons.classSet`. See [Class set](http://facebook.github.io/react/docs/class-name-manipulation.html).
 
 ```js
 var cx = require('classnames');
@@ -332,8 +341,9 @@ render: function() {
 }
 ```
 
+Manipulate DOM classes with [classnames](https://www.npmjs.org/package/classnames), previously known as `React.addons.classSet`. See [Class set](http://facebook.github.io/react/docs/class-name-manipulation.html).
+
 ### Propagating properties
-See [Transferring props](http://facebook.github.io/react/docs/transferring-props.html).
 
 ```html
 <VideoPlayer src="video.mp4" />
@@ -349,8 +359,9 @@ var VideoPlayer = React.createClass({
 });
 ```
 
+See [Transferring props](http://facebook.github.io/react/docs/transferring-props.html).
+
 ### Mixins
-See [addons](https://facebook.github.io/react/docs/addons.html) for some built-in mixins.
 
 ```js
 var SetIntervalMixin = {
@@ -365,6 +376,8 @@ var TickTock = React.createClass({
 }
 ```
 
+See [addons](https://facebook.github.io/react/docs/addons.html) for some built-in mixins.
+
 ## [Top level API](https://facebook.github.io/react/docs/top-level-api.html)
 
 ```js
@@ -383,21 +396,23 @@ ReactDOMServer.renderToStaticMarkup(<Component />) // 0.14+
 ## JSX patterns
 
 ### Style shorthand
-See [inline styles](https://facebook.github.io/react/tips/inline-styles.html).
 
 ```js
 var style = { backgroundImage: 'url(x.jpg)', height: 10 };
 return <div style={style}></div>;
 ```
 
+See [inline styles](https://facebook.github.io/react/tips/inline-styles.html).
+
 ### InnerHTML
-See [dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html).
 
 ```js
 function markdownify() { return "<p>...</p>"; }
 <div dangerouslySetInnerHTML={{__html: markdownify()}} />
 ```
 
+See [dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html).
+
 ### Lists
 
 ```js