diff --git a/blog/2016-03-24-introducing-hot-reloading.md b/blog/2016-03-24-introducing-hot-reloading.md
new file mode 100644
index 00000000000..369c616da8f
--- /dev/null
+++ b/blog/2016-03-24-introducing-hot-reloading.md
@@ -0,0 +1,209 @@
+---
+title: Introducing Hot Reloading
+author: Martín Bigio
+---
+
+React Native goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.
+
+We got close to this ideal via three main features:
+
+* Use JavaScript as the language doesn't have a long compilation cycle time.
+* Implement a tool called Packager that transforms es6/flow/jsx files into normal JavaScript that the VM can understand. It was designed as a server that keeps intermediate state in memory to enable fast incremental changes and uses multiple cores.
+* Build a feature called Live Reload that reloads the app on save.
+
+At this point, the bottleneck for developers is no longer the time it takes to reload the app but losing the state of your app. A common scenario is to work on a feature that is multiple screens away from the launch screen. Every time you reload, you've got to click on the same path again and again to get back to your feature, making the cycle multiple-seconds long.
+
+
+## Hot Reloading
+
+The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don't lose any of your state which is especially useful if you are tweaking the UI.
+
+A video is worth a thousand words. Check out the difference between Live Reload (current) and Hot Reload (new).
+
+
+
+If you look closely, you can notice that it is possible to recover from a red box and you can also start importing modules that were not previously there without having to do a full reload.
+
+**Word of warning:** because JavaScript is a very stateful language, hot reloading cannot be perfectly implemented. In practice, we found out that the current setup is working well for a large amount of usual use cases and a full reload is always available in case something gets messed up.
+
+Hot reloading is available as of 0.22, you can enable it:
+
+* Open the developper menu
+* Tap on "Enable Hot Reloading"
+
+
+## Implementation in a nutshell
+
+Now that we've seen why we want it and how to use it, the fun part begins: how does it actually works.
+
+Hot Reloading is built on top of a feature [Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html), or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.
+
+In a nutshell, the HMR update contains the new code of the JS modules that changed. When the runtime receives them, it replaces the old modules' code with the new one:
+
+
+
+
+The HMR update contains a bit more than just the module's code we want to change because replacing it, it's not enough for the runtime to pick up the changes. The problem is that the module system may have already cached the *exports* of the module we want to update. For instance, say you have an app composed by these two modules:
+
+```
+// log.js
+function log(message) {
+ const time = require('./time');
+ console.log(`[${time()}] ${message}`);
+}
+
+module.exports = log;
+```
+
+```
+// time.js
+function time() {
+ return new Date().getTime();
+}
+
+module.exports = time;
+```
+
+The module `log`, prints out the provided message including the current date provided by the module `time`.
+
+When the app is bundled, React Native registers each module on the module system using the `__d` function. For this app, among many `__d` definitions, there will one for `foo`:
+
+```
+__d('log', function() {
+ ... // module's code
+});
+```
+
+This invocation wraps each module's code into an anonymous function which we generally refer to as the factory function. The module system runtime keeps track of each module's factory function, whether it has already been executed, and the result of such execution (exports). When a module is required, the module system either provides the already cached exports or executes the module's factory function for the first time and saves the result.
+
+So say you start your app and require `log`. At this point, neither `log` nor `time`'s factory functions have been executed so no exports have been cached. Then, the user modifies `time` to return the date in `MM/DD`:
+
+```
+// time.js
+function bar() {
+ var date = new Date();
+ return `${date.getMonth() + 1}/${date.getDate()}`;
+}
+
+module.exports = bar;
+```
+
+The Packager will send time's new code to the runtime (step 1), and when `log` gets eventually required the exported function gets executed it will do so with `time`'s changes (step 2):
+
+
+
+
+Now say the code of `log` requires `time` as a top level require:
+
+```
+const time = require('./time'); // top level require
+
+// log.js
+function log(message) {
+ console.log(`[${time()}] ${message}`);
+}
+
+module.exports = log;
+```
+
+When `log` is required, the runtime will cache its exports and `time`'s one. (step 1). Then, when `time` is modified, the HMR process cannot simply finish after replacing `time`'s code. If it did, when `log` gets executed, it would do so with a cached copy of `time` (old code).
+
+For `log` to pick up `time` changes, we'll need to clear its cached exports because one of the modules it depends on was hot swapped (step 3). Finally, when `log` gets required again, its factory function will get executed requiring `time` and getting its new code.
+
+
+
+
+## HMR API
+
+HMR in React Native extends the module system by introducing the `hot` object. This API is based on [Webpack](https://webpack.github.io/docs/hot-module-replacement.html)'s one. The `hot` object exposes a function called `accept` which allows you to define a callback that will be executed when the module needs to be hot swapped. For instance, if we would change `time`'s code as follows, every time we save time, we'll see “time changed” in the console:
+
+```
+// time.js
+function time() {
+ ... // new code
+}
+
+module.hot.accept(() => {
+ console.log('time changed');
+});
+
+module.exports = time;
+```
+
+Note that only in rare cases you would need to use this API manually. Hot Reloading should work out of the box for the most common use cases.
+
+## HMR Runtime
+
+As we've seen before, sometimes it's not enough only accepting the HMR update because a module that uses the one being hot swapped may have been already executed and its imports cached. For instance, suppose the dependency tree for the movies app example had a top-level `MovieRouter` that depended on the `MovieSearch` and `MovieScreen` views, which depended on the `log` and `time` modules from the previous examples:
+
+
+
+
+
+If the user access the movies' search view but not the other one, all the modules but `MovieScreen` would have cached exports. If a change is made to module `time`, the runtime will have to clear the exports of `log` for it to pick up `time`'s changes. The process wouldn't finish there: the runtime will repeat this process recursively up until all the parents have been accepted. So, it'll grab the modules that depend on `log` and try to accept them. For `MovieScreen` it can bail, as it hasn't been required yet. For `MovieSearch`, it will have to clear its exports and process its parents recursively. Finally, it will do the same thing for `MovieRouter` and finish there as no modules depends on it.
+
+In order to walk the dependency tree, the runtime receives the inverse dependency tree from the Packager on the HMR update. For this example the runtime will receive a JSON object like this one:
+
+```
+{
+ modules: [
+ {
+ name: 'time',
+ code: /* time's new code */
+ }
+ ],
+ inverseDependencies: {
+ MovieRouter: [],
+ MovieScreen: ['MovieRouter'],
+ MovieSearch: ['MovieRouter'],
+ log: ['MovieScreen', 'MovieSearch'],
+ time: ['log'],
+ }
+}
+```
+
+## React Components
+
+React components are a bit harder to get to work with Hot Reloading. The problem is that we can't simply replace the old code with the new one as we'd loose the component's state. For React web applications, [Dan Abramov](https://twitter.com/dan_abramov) implemented a babel [transform](http://gaearon.github.io/react-hot-loader/) that uses Webpack's HMR API to solve this issue. In a nutshell, his solution works by creating a proxy for every single React component on *transform time*. The proxies hold the component's state and delegate the lifecycle methods to the actual components, which are the ones we hot reload:
+
+
+
+Besides creating the proxy component, the transform also defines the `accept` function with a piece of code to force React to re-render the component. This way, we can hot reload rendering code without losing any of the app's state.
+
+The default [transformer](https://github.com/facebook/react-native/blob/master/packager/transformer.js#L92-L95) that comes with React Native uses the `babel-preset-react-native`, which is [configured](https://github.com/facebook/react-native/blob/master/babel-preset/configs/hmr.js#L24-L31) to use `react-transform` the same way you'd use it on a React web project that uses Webpack.
+
+## Redux Stores
+
+To enable Hot Reloading on [Redux](http://redux.js.org/) stores you will just need to use the HMR API similarly to what you'd do on a web project that uses Webpack:
+
+```
+// configureStore.js
+import { createStore, applyMiddleware, compose } from 'redux';
+import thunk from 'redux-thunk';
+import reducer from '../reducers';
+
+export default function configureStore(initialState) {
+ const store = createStore(
+ reducer,
+ initialState,
+ applyMiddleware(thunk),
+ );
+
+ if (module.hot) {
+ module.hot.accept(() => {
+ const nextRootReducer = require('../reducers/index').default;
+ store.replaceReducer(nextRootReducer);
+ });
+ }
+
+ return store;
+};
+```
+
+When you change a reducer, the code to accept that reducer will be sent to the client. Then the client will realize that the reducer doesn't know how to accept itself, so it will look for all the modules that refer it and try to accept them. Eventually, the flow will get to the single store, the `configureStore` module, which will accept the HMR update.
+
+## Conclusion
+
+If you are interested in helping making hot reloading better, I encourage you to read [Dan Abramov's post around the future of hot reloading](https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf#.jmivpvmz4) and to contribute. For example, Johny Days is going to [make it work with multiple connected clients](https://github.com/facebook/react-native/pull/6179). We're relying on you all to maintain and improve this feature.
+
+With React Native, we have the opportunity to rethink the way we build apps in order to make it a great developer experience. Hot reloading is only one piece of the puzzle, what other crazy hacks can we do to make it better?
diff --git a/docs/Newsletter.md b/docs/Newsletter.md
new file mode 100644
index 00000000000..800bf5408f6
--- /dev/null
+++ b/docs/Newsletter.md
@@ -0,0 +1,8 @@
+---
+id: newsletter
+title: Newsletter
+layout: docs
+category: Community Resources
+permalink: http://reactnative.cc/
+next: style
+---
diff --git a/docs/Videos.md b/docs/Videos.md
index aec0c770fe9..68537e11714 100644
--- a/docs/Videos.md
+++ b/docs/Videos.md
@@ -2,9 +2,9 @@
id: videos
title: Videos
layout: docs
-category: Quick Start
+category: Community Resources
permalink: docs/videos.html
-next: style
+next: newsletter
---
### React.js Conf 2016
@@ -34,7 +34,7 @@ next: style
-### React.js Conf 2015
+### React.js Conf 2015
diff --git a/website/.gitignore b/website/.gitignore
index 9ece2944657..555763f8a15 100644
--- a/website/.gitignore
+++ b/website/.gitignore
@@ -1,4 +1,5 @@
src/react-native/docs/**
-core/metadata.js
+src/react-native/blog/**
+core/metadata*
*.log
/build/
diff --git a/website/core/BlogPost.js b/website/core/BlogPost.js
new file mode 100644
index 00000000000..575bf8ec370
--- /dev/null
+++ b/website/core/BlogPost.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule BlogPost
+ */
+
+'use strict';
+
+var Marked = require('Marked');
+var React = require('React');
+
+var BlogPost = React.createClass({
+ render: function() {
+ var post = this.props.post;
+ var content = this.props.content;
+
+ var match = post.path.match(/([0-9]+)\/([0-9]+)\/([0-9]+)/);
+ // Because JavaScript sucks at date handling :(
+ var year = match[1];
+ var month = [
+ 'January', 'February', 'March', 'April', 'May', 'June', 'July',
+ 'August', 'September', 'October', 'November', 'December'
+ ][parseInt(match[2], 10) - 1];
+ var day = parseInt(match[3], 10);
+
+ return (
+
+ );
+ }
+});
+
+module.exports = BlogPost;
diff --git a/website/core/BlogSidebar.js b/website/core/BlogSidebar.js
new file mode 100644
index 00000000000..eda50310357
--- /dev/null
+++ b/website/core/BlogSidebar.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule BlogSidebar
+ */
+
+'use strict';
+
+var MetadataBlog = require('MetadataBlog');
+var React = require('React');
+
+var BlogSidebar = React.createClass({
+ render: function() {
+ return (
+
+ );
+ }
+});
+
+module.exports = BlogSidebar;
diff --git a/website/core/HeaderLinks.js b/website/core/HeaderLinks.js
index b1921be2a9b..b5dbffde942 100644
--- a/website/core/HeaderLinks.js
+++ b/website/core/HeaderLinks.js
@@ -16,8 +16,8 @@ var HeaderLinks = React.createClass({
linksInternal: [
{section: 'docs', href: 'docs/getting-started.html', text: 'Docs'},
{section: 'support', href: 'support.html', text: 'Support'},
- {section: 'newsletter', href: 'http://reactnative.cc', text: 'Newsletter'},
{section: 'showcase', href: 'showcase.html', text: 'Showcase'},
+ {section: 'blog', href: 'blog/', text: 'Blog'},
],
linksExternal: [
{section: 'github', href: 'https://github.com/facebook/react-native', text: 'GitHub'},
diff --git a/website/core/metadata-blog.js b/website/core/metadata-blog.js
new file mode 100644
index 00000000000..5518c0f888a
--- /dev/null
+++ b/website/core/metadata-blog.js
@@ -0,0 +1,14 @@
+/**
+ * @generated
+ * @providesModule MetadataBlog
+ */
+module.exports = {
+ "files": [
+ {
+ "path": "2016/03/24/introducing-hot-reloading.html",
+ "content": "\nReact Native goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.\n\nWe got close to this ideal via three main features:\n\n* Use JavaScript as the language doesn't have a long compilation cycle time.\n* Implement a tool called Packager that transforms es6/flow/jsx files into normal JavaScript that the VM can understand. It was designed as a server that keeps intermediate state in memory to enable fast incremental changes and uses multiple cores.\n* Build a feature called Live Reload that reloads the app on save.\n\nAt this point, the bottleneck for developers is no longer the time it takes to reload the app but losing the state of your app. A common scenario is to work on a feature that is multiple screens away from the launch screen. Every time you reload, you've got to click on the same path again and again to get back to your feature, making the cycle multiple-seconds long.\n\n\n## Hot Reloading\n\nThe idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don't lose any of your state which is especially useful if you are tweaking the UI.\n\nA video is worth a thousand words. Check out the difference between Live Reload (current) and Hot Reload (new).\n\n\n\nIf you look closely, you can notice that it is possible to recover from a red box and you can also start importing modules that were not previously there without having to do a full reload.\n\n**Word of warning:** because JavaScript is a very stateful language, hot reloading cannot be perfectly implemented. In practice, we found out that the current setup is working well for a large amount of usual use cases and a full reload is always available in case something gets messed up.\n\nHot reloading is available as of 0.22, you can enable it:\n\n* Open the developper menu\n* Tap on \"Enable Hot Reloading\"\n\n\n## Implementation in a nutshell\n\nNow that we've seen why we want it and how to use it, the fun part begins: how does it actually works.\n\nHot Reloading is built on top of a feature [Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html), or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.\n\nIn a nutshell, the HMR update contains the new code of the JS modules that changed. When the runtime receives them, it replaces the old modules' code with the new one:\n\n\n\n\nThe HMR update contains a bit more than just the module's code we want to change because replacing it, it's not enough for the runtime to pick up the changes. The problem is that the module system may have already cached the *exports* of the module we want to update. For instance, say you have an app composed by these two modules:\n\n```\n// log.js\nfunction log(message) {\n const time = require('./time');\n console.log(`[${time()}] ${message}`);\n}\n\nmodule.exports = log;\n```\n\n```\n// time.js\nfunction time() {\n return new Date().getTime();\n}\n\nmodule.exports = time;\n```\n\nThe module `log`, prints out the provided message including the current date provided by the module `time`.\n\nWhen the app is bundled, React Native registers each module on the module system using the `__d` function. For this app, among many `__d` definitions, there will one for `foo`:\n\n```\n__d('log', function() {\n ... // module's code\n});\n```\n\nThis invocation wraps each module's code into an anonymous function which we generally refer to as the factory function. The module system runtime keeps track of each module's factory function, whether it has already been executed, and the result of such execution (exports). When a module is required, the module system either provides the already cached exports or executes the module's factory function for the first time and saves the result.\n\nSo say you start your app and require `log`. At this point, neither `log` nor `time`'s factory functions have been executed so no exports have been cached. Then, the user modifies `time` to return the date in `MM/DD`:\n\n```\n// time.js\nfunction bar() {\n var date = new Date();\n return `${date.getMonth() + 1}/${date.getDate()}`;\n}\n\nmodule.exports = bar;\n```\n\nThe Packager will send time's new code to the runtime (step 1), and when `log` gets eventually required the exported function gets executed it will do so with `time`'s changes (step 2):\n\n\n\n\nNow say the code of `log` requires `time` as a top level require:\n\n```\nconst time = require('./time'); // top level require\n\n// log.js\nfunction log(message) {\n console.log(`[${time()}] ${message}`);\n}\n\nmodule.exports = log;\n```\n\nWhen `log` is required, the runtime will cache its exports and `time`'s one. (step 1). Then, when `time` is modified, the HMR process cannot simply finish after replacing `time`'s code. If it did, when `log` gets executed, it would do so with a cached copy of `time` (old code).\n\nFor `log` to pick up `time` changes, we'll need to clear its cached exports because one of the modules it depends on was hot swapped (step 3). Finally, when `log` gets required again, its factory function will get executed requiring `time` and getting its new code.\n\n\n\n\n## HMR API\n\nHMR in React Native extends the module system by introducing the `hot` object. This API is based on [Webpack](https://webpack.github.io/docs/hot-module-replacement.html)'s one. The `hot` object exposes a function called `accept` which allows you to define a callback that will be executed when the module needs to be hot swapped. For instance, if we would change `time`'s code as follows, every time we save time, we'll see “time changed” in the console:\n\n```\n// time.js\nfunction time() {\n ... // new code\n}\n\nmodule.hot.accept(() => {\n console.log('time changed');\n});\n\nmodule.exports = time;\n```\n\nNote that only in rare cases you would need to use this API manually. Hot Reloading should work out of the box for the most common use cases.\n\n## HMR Runtime\n\nAs we've seen before, sometimes it's not enough only accepting the HMR update because a module that uses the one being hot swapped may have been already executed and its imports cached. For instance, suppose the dependency tree for the movies app example had a top-level `MovieRouter` that depended on the `MovieSearch` and `MovieScreen` views, which depended on the `log` and `time` modules from the previous examples:\n\n\n\n\n\nIf the user access the movies' search view but not the other one, all the modules but `MovieScreen` would have cached exports. If a change is made to module `time`, the runtime will have to clear the exports of `log` for it to pick up `time`'s changes. The process wouldn't finish there: the runtime will repeat this process recursively up until all the parents have been accepted. So, it'll grab the modules that depend on `log` and try to accept them. For `MovieScreen` it can bail, as it hasn't been required yet. For `MovieSearch`, it will have to clear its exports and process its parents recursively. Finally, it will do the same thing for `MovieRouter` and finish there as no modules depends on it.\n\nIn order to walk the dependency tree, the runtime receives the inverse dependency tree from the Packager on the HMR update. For this example the runtime will receive a JSON object like this one:\n\n```\n{\n modules: [\n {\n name: 'time',\n code: /* time's new code */\n }\n ],\n inverseDependencies: {\n MovieRouter: [],\n MovieScreen: ['MovieRouter'],\n MovieSearch: ['MovieRouter'],\n log: ['MovieScreen', 'MovieSearch'],\n time: ['log'],\n }\n}\n```\n\n## React Components\n\nReact components are a bit harder to get to work with Hot Reloading. The problem is that we can't simply replace the old code with the new one as we'd loose the component's state. For React web applications, [Dan Abramov](https://twitter.com/dan_abramov) implemented a babel [transform](http://gaearon.github.io/react-hot-loader/) that uses Webpack's HMR API to solve this issue. In a nutshell, his solution works by creating a proxy for every single React component on *transform time*. The proxies hold the component's state and delegate the lifecycle methods to the actual components, which are the ones we hot reload:\n\n\n\nBesides creating the proxy component, the transform also defines the `accept` function with a piece of code to force React to re-render the component. This way, we can hot reload rendering code without losing any of the app's state.\n\nThe default [transformer](https://github.com/facebook/react-native/blob/master/packager/transformer.js#L92-L95) that comes with React Native uses the `babel-preset-react-native`, which is [configured](https://github.com/facebook/react-native/blob/master/babel-preset/configs/hmr.js#L24-L31) to use `react-transform` the same way you'd use it on a React web project that uses Webpack.\n\n## Redux Stores\n\nTo enable Hot Reloading on [Redux](http://redux.js.org/) stores you will just need to use the HMR API similarly to what you'd do on a web project that uses Webpack:\n\n```\n// configureStore.js\nimport { createStore, applyMiddleware, compose } from 'redux';\nimport thunk from 'redux-thunk';\nimport reducer from '../reducers';\n\nexport default function configureStore(initialState) {\n const store = createStore(\n reducer,\n initialState,\n applyMiddleware(thunk),\n );\n\n if (module.hot) {\n module.hot.accept(() => {\n const nextRootReducer = require('../reducers/index').default;\n store.replaceReducer(nextRootReducer);\n });\n }\n\n return store;\n};\n```\n\nWhen you change a reducer, the code to accept that reducer will be sent to the client. Then the client will realize that the reducer doesn't know how to accept itself, so it will look for all the modules that refer it and try to accept them. Eventually, the flow will get to the single store, the `configureStore` module, which will accept the HMR update.\n\n## Conclusion\n\nIf you are interested in helping making hot reloading better, I encourage you to read [Dan Abramov's post around the future of hot reloading](https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf#.jmivpvmz4) and to contribute. For example, Johny Days is going to [make it work with multiple connected clients](https://github.com/facebook/react-native/pull/6179). We're relying on you all to maintain and improve this feature.\n\nWith React Native, we have the opportunity to rethink the way we build apps in order to make it a great developer experience. Hot reloading is only one piece of the puzzle, what other crazy hacks can we do to make it better?\n",
+ "title": "Introducing Hot Reloading",
+ "author": "Martín Bigio"
+ }
+ ]
+};
\ No newline at end of file
diff --git a/website/layout/BlogPageLayout.js b/website/layout/BlogPageLayout.js
new file mode 100644
index 00000000000..b8c02a86a54
--- /dev/null
+++ b/website/layout/BlogPageLayout.js
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule BlogPageLayout
+ */
+
+'use strict';
+
+var BlogPost = require('BlogPost');
+var BlogSidebar = require('BlogSidebar');
+var MetadataBlog = require('MetadataBlog');
+var React = require('React');
+var Site = require('Site');
+
+var BlogPageLayout = React.createClass({
+ getPageURL: function(page) {
+ var url = '/jest/blog/';
+ if (page > 0) {
+ url += 'page' + (page + 1) + '/';
+ }
+ return url + '#content';
+ },
+
+ render: function() {
+ var perPage = this.props.metadata.perPage;
+ var page = this.props.metadata.page;
+ return (
+
+
+
+
+
+
+ );
+ }
+});
+
+module.exports = BlogPageLayout;
diff --git a/website/layout/BlogPostLayout.js b/website/layout/BlogPostLayout.js
new file mode 100644
index 00000000000..c6b6377a6a3
--- /dev/null
+++ b/website/layout/BlogPostLayout.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule BlogPostLayout
+ */
+
+'use strict';
+
+var BlogPost = require('BlogPost');
+var BlogSidebar = require('BlogSidebar');
+var Marked = require('Marked');
+var MetadataBlog = require('MetadataBlog');
+var React = require('React');
+var Site = require('Site');
+
+var BlogPostLayout = React.createClass({
+ render: function() {
+ return (
+
+
+
+
+
+
+
+
+ );
+ }
+});
+
+module.exports = BlogPostLayout;
diff --git a/website/server/convert.js b/website/server/convert.js
index c1096758c53..60239aabd11 100644
--- a/website/server/convert.js
+++ b/website/server/convert.js
@@ -7,6 +7,8 @@
* of patent rights can be found in the PATENTS file in the same directory.
*/
+'use strict';
+
var fs = require('fs')
var glob = require('glob');
var mkdirp = require('mkdirp');
@@ -29,6 +31,14 @@ function splitHeader(content) {
};
}
+function rmFile(file) {
+ try {
+ fs.unlinkSync(file);
+ } catch(e) {
+ /* seriously, unlink throws when the file doesn't exist :( */
+ }
+}
+
function backtickify(str) {
var escaped = '`' + str.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/{/g, '\\{') + '`';
// Replace require( with require\( so node-haste doesn't replace example
@@ -36,39 +46,68 @@ function backtickify(str) {
return escaped.replace(/require\(/g, 'require\\(');
}
-function execute() {
- var MD_DIR = '../docs/';
+function writeFileAndCreateFolder(file, content) {
+ mkdirp.sync(file.replace(new RegExp('/[^/]*$'), ''));
+ fs.writeFileSync(file, content);
+}
- var files = glob.sync('src/react-native/docs/*.*');
- files.forEach(function(file) {
- try {
- fs.unlinkSync(file);
- } catch(e) {
- /* seriously, unlink throws when the file doesn't exist :( */
- }
- });
+// Extract markdown metadata header
+function extractMetadata(content) {
+ var metadata = {};
+ var both = splitHeader(content);
+ var lines = both.header.split('\n');
+ for (var i = 0; i < lines.length - 1; ++i) {
+ var keyvalue = lines[i].split(':');
+ var key = keyvalue[0].trim();
+ var value = keyvalue.slice(1).join(':').trim();
+ // Handle the case where you have "Community #10"
+ try { value = JSON.parse(value); } catch(e) { }
+ metadata[key] = value;
+ }
+ return {metadata: metadata, rawContent: both.content};
+}
+
+function buildFile(layout, metadata, rawContent) {
+ return [
+ '/**',
+ ' * @generated',
+ ' */',
+ 'var React = require("React");',
+ 'var Layout = require("' + layout + '");',
+ rawContent && 'var content = ' + backtickify(rawContent) + ';',
+ 'var Post = React.createClass({',
+ rawContent && ' statics: { content: content },',
+ ' render: function() {',
+ ' return (',
+ ' ',
+ rawContent && ' {content}',
+ ' ',
+ ' );',
+ ' }',
+ '});',
+ 'module.exports = Post;'
+ ].filter(e => e).join('\n');
+}
+
+function execute() {
+ var DOCS_MD_DIR = '../docs/';
+ var BLOG_MD_DIR = '../blog/';
+
+ glob.sync('src/react-native/docs/*.*').forEach(rmFile);
+ glob.sync('src/react-native/blog/*.*').forEach(rmFile);
var metadatas = {
files: [],
};
function handleMarkdown(content, filename) {
- var metadata = {};
-
- // Extract markdown metadata header
- var both = splitHeader(content);
- if (!both.header) {
+ if (content.slice(0, 3) !== '---') {
return;
}
- var lines = both.header.split('\n');
- for (var i = 0; i < lines.length - 1; ++i) {
- var keyvalue = lines[i].split(':');
- var key = keyvalue[0].trim();
- var value = keyvalue.slice(1).join(':').trim();
- // Handle the case where you have "Community #10"
- try { value = JSON.parse(value); } catch(e) { }
- metadata[key] = value;
- }
+
+ const res = extractMetadata(content);
+ const metadata = res.metadata;
+ const rawContent = res.rawContent;
if (metadata.sidebar !== false) {
metadatas.files.push(metadata);
@@ -83,35 +122,17 @@ function execute() {
// Create a dummy .js version that just calls the associated layout
var layout = metadata.layout[0].toUpperCase() + metadata.layout.substr(1) + 'Layout';
- var content = (
- '/**\n' +
- ' * @generated\n' +
- ' * @jsx React.DOM\n' +
- ' */\n' +
- 'var React = require("React");\n' +
- 'var Layout = require("' + layout + '");\n' +
- 'var content = ' + backtickify(both.content) + '\n' +
- 'var Post = React.createClass({\n' +
- ' statics: {\n' +
- ' content: content\n' +
- ' },\n' +
- ' render: function() {\n' +
- ' return {content};\n' +
- ' }\n' +
- '});\n' +
- 'module.exports = Post;\n'
+ writeFileAndCreateFolder(
+ 'src/react-native/' + metadata.permalink.replace(/\.html$/, '.js'),
+ buildFile(layout, metadata, rawContent)
);
-
- var targetFile = 'src/react-native/' + metadata.permalink.replace(/\.html$/, '.js');
- mkdirp.sync(targetFile.replace(new RegExp('/[^/]*$'), ''));
- fs.writeFileSync(targetFile, content);
}
extractDocs().forEach(function(content) {
handleMarkdown(content, null);
});
- var files = glob.sync(MD_DIR + '**/*.*');
+ var files = glob.sync(DOCS_MD_DIR + '**/*.*');
files.forEach(function(file) {
var extension = path.extname(file);
if (extension === '.md' || extension === '.markdown') {
@@ -144,6 +165,54 @@ function execute() {
' */\n' +
'module.exports = ' + JSON.stringify(metadatas, null, 2) + ';'
);
+
+
+ files = glob.sync(BLOG_MD_DIR + '**/*.*');
+ const metadatasBlog = {
+ files: [],
+ };
+
+ files.sort().reverse().forEach(file => {
+ // Transform
+ // 2015-08-13-blog-post-name-0.5.md
+ // into
+ // 2015/08/13/blog-post-name-0-5.html
+ var filePath = path.basename(file)
+ .replace('-', '/')
+ .replace('-', '/')
+ .replace('-', '/')
+ // react-middleware is broken with files that contains multiple . like react-0.14.js
+ .replace(/\./g, '-')
+ .replace(/\-md$/, '.html');
+
+ var res = extractMetadata(fs.readFileSync(file, {encoding: 'utf8'}));
+ var rawContent = res.rawContent;
+ var metadata = Object.assign({path: filePath, content: rawContent}, res.metadata);
+
+ metadatasBlog.files.push(metadata);
+
+ writeFileAndCreateFolder(
+ 'src/react-native/blog/' + filePath.replace(/\.html$/, '.js'),
+ buildFile('BlogPostLayout', metadata, rawContent)
+ );
+ });
+
+ var perPage = 5;
+ for (var page = 0; page < Math.ceil(metadatasBlog.files.length / perPage); ++page) {
+ writeFileAndCreateFolder(
+ 'src/react-native/blog' + (page > 0 ? '/page' + (page + 1) : '') + '/index.js',
+ buildFile('BlogPageLayout', { page: page, perPage: perPage })
+ );
+ }
+
+ fs.writeFileSync(
+ 'core/metadata-blog.js',
+ '/**\n' +
+ ' * @generated\n' +
+ ' * @providesModule MetadataBlog\n' +
+ ' */\n' +
+ 'module.exports = ' + JSON.stringify(metadatasBlog, null, 2) + ';'
+ );
}
if (argv.convert) {
diff --git a/website/server/server.js b/website/server/server.js
index 69dd30a8bef..79e7fcede04 100644
--- a/website/server/server.js
+++ b/website/server/server.js
@@ -45,7 +45,7 @@ var app = connect()
.use(function(req, res, next) {
// convert all the md files on every request. This is not optimal
// but fast enough that we don't really need to care right now.
- if (!server.noconvert && req.url.match(/\.html$/)) {
+ if (!server.noconvert && req.url.match(/\.html|\/$/)) {
convert();
}
next();
diff --git a/website/src/react-native/img/blog/hmr-architecture.png b/website/src/react-native/img/blog/hmr-architecture.png
new file mode 100644
index 00000000000..2b19d78c82e
Binary files /dev/null and b/website/src/react-native/img/blog/hmr-architecture.png differ
diff --git a/website/src/react-native/img/blog/hmr-diamond.png b/website/src/react-native/img/blog/hmr-diamond.png
new file mode 100644
index 00000000000..bb70c8805dd
Binary files /dev/null and b/website/src/react-native/img/blog/hmr-diamond.png differ
diff --git a/website/src/react-native/img/blog/hmr-log.png b/website/src/react-native/img/blog/hmr-log.png
new file mode 100644
index 00000000000..af6b5ef886a
Binary files /dev/null and b/website/src/react-native/img/blog/hmr-log.png differ
diff --git a/website/src/react-native/img/blog/hmr-proxy.png b/website/src/react-native/img/blog/hmr-proxy.png
new file mode 100644
index 00000000000..86b74f858a4
Binary files /dev/null and b/website/src/react-native/img/blog/hmr-proxy.png differ
diff --git a/website/src/react-native/img/blog/hmr-step.png b/website/src/react-native/img/blog/hmr-step.png
new file mode 100644
index 00000000000..963b571736a
Binary files /dev/null and b/website/src/react-native/img/blog/hmr-step.png differ