Initial version of the website and docs.

website/core/DocsSidebar.js

@@ -0,0 +1,96 @@
+/**
+ * @providesModule DocsSidebar
+ * @jsx React.DOM
+ */
+
+var React = require('React');
+var Metadata = require('Metadata');
+
+var DocsSidebar = React.createClass({
+  getCategories: function() {
+    var metadatas = Metadata.files.filter(function(metadata) {
+      return metadata.layout === 'docs';
+    });
+
+    // Build a hashmap of article_id -> metadata
+    var articles = {};
+    for (var i = 0; i < metadatas.length; ++i) {
+      var metadata = metadatas[i];
+      articles[metadata.id] = metadata;
+    }
+
+    // Build a hashmap of article_id -> previous_id
+    var previous = {};
+    for (var i = 0; i < metadatas.length; ++i) {
+      var metadata = metadatas[i];
+      if (metadata.next) {
+        if (!articles[metadata.next]) {
+          throw '`next: ' + metadata.next + '` in ' + metadata.id + ' doesn\'t exist';
+        }
+        previous[articles[metadata.next].id] = metadata.id;
+      }
+    }
+
+    // Find the first element which doesn't have any previous
+    var first = null;
+    for (var i = 0; i < metadatas.length; ++i) {
+      var metadata = metadatas[i];
+      if (!previous[metadata.id]) {
+        first = metadata;
+        break;
+      }
+    }
+
+    var categories = [];
+    var currentCategory = null;
+
+    var metadata = first;
+    var i = 0;
+    while (metadata && i++ < 1000) {
+      if (!currentCategory || metadata.category !== currentCategory.name) {
+        currentCategory && categories.push(currentCategory);
+        currentCategory = {
+          name: metadata.category,
+          links: []
+        };
+      }
+      currentCategory.links.push(metadata);
+      metadata = articles[metadata.next];
+    }
+    categories.push(currentCategory);
+
+    return categories;
+  },
+
+  getLink: function(metadata) {
+    if (metadata.permalink.match(/^https?:/)) {
+      return metadata.permalink;
+    }
+    return '/react-native/' + metadata.permalink + '#content';
+  },
+
+  render: function() {
+    return <div className="nav-docs">
+      {this.getCategories().map((category) =>
+        <div className="nav-docs-section" key={category.name}>
+          <h3>{category.name}</h3>
+          <ul>
+            {category.links.map((metadata) =>
+              <li key={metadata.id}>
+                <a
+                  target={metadata.permalink.match(/^https?:/) && '_blank'}
+                  style={{marginLeft: metadata.indent ? 20 : 0}}
+                  className={metadata.id === this.props.metadata.id ? 'active' : ''}
+                  href={this.getLink(metadata)}>
+                  {metadata.title}
+                </a>
+              </li>
+            )}
+          </ul>
+        </div>
+      )}
+    </div>;
+  }
+});
+
+module.exports = DocsSidebar;

website/core/H2.js

@@ -0,0 +1,17 @@
+/**
+ * @providesModule H2
+ * @jsx React.DOM
+ */
+
+var React = require('React');
+var Header = require('Header');
+
+var H2 = React.createClass({
+  render: function() {
+    return this.transferPropsTo(
+      <Header level={2}>{this.props.children}</Header>
+    );
+  }
+});
+
+module.exports = H2;

website/core/Header.js

@@ -0,0 +1,53 @@
+/**
+ * @providesModule Header
+ * @jsx React.DOM
+ */
+
+var React = require('React');
+
+var Header = React.createClass({
+  slug: function(string) {
+    //  var accents = 'àáäâèéëêìíïîòóöôùúüûñç';
+    var accents = '\u00e0\u00e1\u00e4\u00e2\u00e8' +
+      '\u00e9\u00eb\u00ea\u00ec\u00ed\u00ef' +
+      '\u00ee\u00f2\u00f3\u00f6\u00f4\u00f9' +
+      '\u00fa\u00fc\u00fb\u00f1\u00e7';
+
+    var without = 'aaaaeeeeiiiioooouuuunc';
+
+    return string
+      .toString()
+
+      // Handle uppercase characters
+      .toLowerCase()
+
+      // Handle accentuated characters
+      .replace(
+        new RegExp('[' + accents + ']', 'g'),
+        function (c) { return without.charAt(accents.indexOf(c)); })
+
+      // Dash special characters
+      .replace(/[^a-z0-9]/g, '-')
+
+      // Compress multiple dash
+      .replace(/-+/g, '-')
+
+      // Trim dashes
+      .replace(/^-|-$/g, '');
+  },
+
+  render: function() {
+    var slug = this.slug(this.props.toSlug || this.props.children);
+    var H = React.DOM['h' + this.props.level];
+
+    return this.transferPropsTo(
+      <H>
+        <a className="anchor" name={slug}></a>
+        {this.props.children}
+        {' '}<a className="hash-link" href={'#' + slug}>#</a>
+      </H>
+    );
+  }
+});
+
+module.exports = Header;

website/core/HeaderLinks.js

@@ -0,0 +1,34 @@
+/**
+ * @providesModule HeaderLinks
+ * @jsx React.DOM
+ */
+
+var React = require('React');
+
+var HeaderLinks = React.createClass({
+  links: [
+    {section: 'docs', href: '/react-native/docs/getting-started.html#content', text: 'docs'},
+    {section: 'support', href: '/react-native/support.html', text: 'support'},
+    {section: 'github', href: 'http://github.com/facebook/react-native', text: 'github'},
+  ],
+
+  render: function() {
+    return (
+      <ul className="nav-site">
+        {this.links.map(function(link) {
+          return (
+            <li key={link.section}>
+              <a
+                href={link.href}
+                className={link.section === this.props.section ? 'active' : ''}>
+                {link.text}
+              </a>
+            </li>
+          );
+        }, this)}
+      </ul>
+    );
+  }
+});
+
+module.exports = HeaderLinks;

website/core/Prism.js

@@ -0,0 +1,357 @@
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ * MIT license http://www.opensource.org/licenses/mit-license.php/
+ * @author Lea Verou http://lea.verou.me
+ *
+ * @providesModule Prism
+ * @jsx React.DOM
+ */
+
+var React = require('React');
+
+var _ = {
+  util: {
+    type: function (o) {
+      return Object.prototype.toString.call(o).match(/\[object (\w+)\]/)[1];
+    },
+
+    // Deep clone a language definition (e.g. to extend it)
+    clone: function (o) {
+      var type = _.util.type(o);
+
+      switch (type) {
+        case 'Object':
+          var clone = {};
+
+          for (var key in o) {
+            if (o.hasOwnProperty(key)) {
+              clone[key] = _.util.clone(o[key]);
+            }
+          }
+
+          return clone;
+
+        case 'Array':
+          return o.slice();
+      }
+
+      return o;
+    }
+  },
+
+  languages: {
+    extend: function (id, redef) {
+      var lang = _.util.clone(_.languages[id]);
+
+      for (var key in redef) {
+        lang[key] = redef[key];
+      }
+
+      return lang;
+    },
+
+    // Insert a token before another token in a language literal
+    insertBefore: function (inside, before, insert, root) {
+      root = root || _.languages;
+      var grammar = root[inside];
+      var ret = {};
+
+      for (var token in grammar) {
+
+        if (grammar.hasOwnProperty(token)) {
+
+          if (token == before) {
+
+            for (var newToken in insert) {
+
+              if (insert.hasOwnProperty(newToken)) {
+                ret[newToken] = insert[newToken];
+              }
+            }
+          }
+
+          ret[token] = grammar[token];
+        }
+      }
+
+      return root[inside] = ret;
+    },
+
+    // Traverse a language definition with Depth First Search
+    DFS: function(o, callback) {
+      for (var i in o) {
+        callback.call(o, i, o[i]);
+
+        if (_.util.type(o) === 'Object') {
+          _.languages.DFS(o[i], callback);
+        }
+      }
+    }
+  },
+
+  tokenize: function(text, grammar) {
+    var Token = _.Token;
+
+    var strarr = [text];
+
+    var rest = grammar.rest;
+
+    if (rest) {
+      for (var token in rest) {
+        grammar[token] = rest[token];
+      }
+
+      delete grammar.rest;
+    }
+
+    tokenloop: for (var token in grammar) {
+      if(!grammar.hasOwnProperty(token) || !grammar[token]) {
+        continue;
+      }
+
+      var pattern = grammar[token],
+        inside = pattern.inside,
+        lookbehind = !!pattern.lookbehind,
+        lookbehindLength = 0;
+
+      pattern = pattern.pattern || pattern;
+
+      for (var i=0; i<strarr.length; i++) { // Don’t cache length as it changes during the loop
+
+        var str = strarr[i];
+
+        if (strarr.length > text.length) {
+          // Something went terribly wrong, ABORT, ABORT!
+          break tokenloop;
+        }
+
+        if (str instanceof Token) {
+          continue;
+        }
+
+        pattern.lastIndex = 0;
+
+        var match = pattern.exec(str);
+
+        if (match) {
+          if(lookbehind) {
+            lookbehindLength = match[1].length;
+          }
+
+          var from = match.index - 1 + lookbehindLength,
+              match = match[0].slice(lookbehindLength),
+              len = match.length,
+              to = from + len,
+            before = str.slice(0, from + 1),
+            after = str.slice(to + 1);
+
+          var args = [i, 1];
+
+          if (before) {
+            args.push(before);
+          }
+
+          var wrapped = new Token(token, inside? _.tokenize(match, inside) : match);
+
+          args.push(wrapped);
+
+          if (after) {
+            args.push(after);
+          }
+
+          Array.prototype.splice.apply(strarr, args);
+        }
+      }
+    }
+
+    return strarr;
+  },
+
+  hooks: {
+    all: {},
+
+    add: function (name, callback) {
+      var hooks = _.hooks.all;
+
+      hooks[name] = hooks[name] || [];
+
+      hooks[name].push(callback);
+    },
+
+    run: function (name, env) {
+      var callbacks = _.hooks.all[name];
+
+      if (!callbacks || !callbacks.length) {
+        return;
+      }
+
+      for (var i=0, callback; callback = callbacks[i++];) {
+        callback(env);
+      }
+    }
+  }
+};
+
+var Token = _.Token = function(type, content) {
+  this.type = type;
+  this.content = content;
+};
+
+Token.reactify = function(o, key) {
+  if (typeof o == 'string') {
+    return o;
+  }
+
+  if (Array.isArray(o)) {
+    return o.map(function(element, i) {
+      return Token.reactify(element, i);
+    });
+  }
+
+  var attributes = {
+    className: 'token ' + o.type,
+    key: key
+  };
+  if (o.type == 'comment') {
+    attributes.spellCheck = true;
+  }
+
+  return React.DOM.span(attributes, Token.reactify(o.content));
+};
+
+_.languages.markup = {
+  'comment': /&lt;!--[\w\W]*?-->/g,
+  'prolog': /&lt;\?.+?\?>/,
+  'doctype': /&lt;!DOCTYPE.+?>/,
+  'cdata': /&lt;!\[CDATA\[[\w\W]*?]]>/i,
+  'tag': {
+    pattern: /&lt;\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,
+    inside: {
+      'tag': {
+        pattern: /^&lt;\/?[\w:-]+/i,
+        inside: {
+          'punctuation': /^&lt;\/?/,
+          'namespace': /^[\w-]+?:/
+        }
+      },
+      'attr-value': {
+        pattern: /=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,
+        inside: {
+          'punctuation': /=|>|"/g
+        }
+      },
+      'punctuation': /\/?>/g,
+      'attr-name': {
+        pattern: /[\w:-]+/g,
+        inside: {
+          'namespace': /^[\w-]+?:/
+        }
+      }
+
+    }
+  },
+  'entity': /&amp;#?[\da-z]{1,8};/gi
+};
+
+_.languages.css = {
+  'comment': /\/\*[\w\W]*?\*\//g,
+  'atrule': {
+    pattern: /@[\w-]+?.*?(;|(?=\s*{))/gi,
+    inside: {
+      'punctuation': /[;:]/g
+    }
+  },
+  'url': /url\((["']?).*?\1\)/gi,
+  'selector': /[^\{\}\s][^\{\};]*(?=\s*\{)/g,
+  'property': /(\b|\B)[\w-]+(?=\s*:)/ig,
+  'string': /("|')(\\?.)*?\1/g,
+  'important': /\B!important\b/gi,
+  'ignore': /&(lt|gt|amp);/gi,
+  'punctuation': /[\{\};:]/g
+};
+
+_.languages.insertBefore('markup', 'tag', {
+  'style': {
+    pattern: /(&lt;|<)style[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/style(>|&gt;)/ig,
+    inside: {
+      'tag': {
+        pattern: /(&lt;|<)style[\w\W]*?(>|&gt;)|(&lt;|<)\/style(>|&gt;)/ig,
+        inside: _.languages.markup.tag.inside
+      },
+      rest: _.languages.css
+    }
+  }
+});
+
+_.languages.clike = {
+  'comment': {
+    pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,
+    lookbehind: true
+  },
+  'string': /("|')(\\?.)*?\1/g,
+  'class-name': {
+    pattern: /((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,
+    lookbehind: true,
+    inside: {
+      punctuation: /(\.|\\)/
+    }
+  },
+  'keyword': /\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,
+  'boolean': /\b(true|false)\b/g,
+  'function': {
+    pattern: /[a-z0-9_]+\(/ig,
+    inside: {
+      punctuation: /\(/
+    }
+  },
+  'number': /\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,
+  'operator': /[-+]{1,2}|!|&lt;=?|>=?|={1,3}|(&amp;){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,
+  'ignore': /&(lt|gt|amp);/gi,
+  'punctuation': /[{}[\];(),.:]/g
+};
+
+_.languages.javascript = _.languages.extend('clike', {
+  'keyword': /\b(var|let|if|else|while|do|for|return|in|instanceof|function|get|set|new|with|typeof|try|throw|catch|finally|null|break|continue|this)\b/g,
+  'number': /\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g
+});
+
+_.languages.insertBefore('javascript', 'keyword', {
+  'regex': {
+    pattern: /(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,
+    lookbehind: true
+  }
+});
+
+_.languages.insertBefore('markup', 'tag', {
+  'script': {
+    pattern: /(&lt;|<)script[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/script(>|&gt;)/ig,
+    inside: {
+      'tag': {
+        pattern: /(&lt;|<)script[\w\W]*?(>|&gt;)|(&lt;|<)\/script(>|&gt;)/ig,
+        inside: _.languages.markup.tag.inside
+      },
+      rest: _.languages.javascript
+    }
+  }
+});
+
+var Prism = React.createClass({
+  statics: {
+    _: _
+  },
+  getDefaultProps: function() {
+    return {
+      language: 'javascript'
+    };
+  },
+  render: function() {
+    var grammar = _.languages[this.props.language];
+    return (
+      <div className={'prism language-' + this.props.language}>
+        {Token.reactify(_.tokenize(this.props.children, grammar))}
+      </div>
+    );
+  }
+});
+
+module.exports = Prism;

website/core/Site.js

@@ -0,0 +1,69 @@
+/**
+ * @providesModule Site
+ * @jsx React.DOM
+ */
+
+var React = require('React');
+var HeaderLinks = require('HeaderLinks');
+
+var Site = React.createClass({
+  render: function() {
+    return (
+      <html>
+        <head>
+          <meta charSet="utf-8" />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+          <title>React Native | Build Native Apps Using React</title>
+          <meta name="viewport" content="width=device-width" />
+          <meta property="og:title" content="React Native | Build Native Apps Using React" />
+          <meta property="og:type" content="website" />
+          <meta property="og:url" content="http://facebook.github.io/react-native/index.html" />
+          <meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png" />
+          <meta property="og:description" content="Build Native Apps Using React" />
+
+          <link rel="shortcut icon" href="/react-native/img/favicon.png" />
+          <link rel="stylesheet" href="/react-native/css/react-native.css" />
+
+          <script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
+          <script type="text/javascript">{'try{Typekit.load();}catch(e){}'}</script>
+        </head>
+        <body>
+
+          <div className="container">
+            <div className="nav-main">
+              <div className="wrap">
+                <a className="nav-home" href="/react-native/">
+                  <img src="/react-native/img/logo.png" />
+                  React Native
+                </a>
+                <HeaderLinks section={this.props.section} />
+              </div>
+            </div>
+
+            {this.props.children}
+
+            <footer className="wrap">
+              <div className="right">© 2014 Facebook Inc.</div>
+            </footer>
+          </div>
+
+          <div id="fb-root" />
+          <script dangerouslySetInnerHTML={{__html: `
+            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+            ga('create', 'UA-387204-10', 'facebook.github.io');
+            ga('send', 'pageview');
+
+            !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
+            ){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
+            fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
+          `}} />
+        </body>
+      </html>
+    );
+  }
+});
+
+module.exports = Site;

website/core/center.js

@@ -0,0 +1,16 @@
+/**
+ * @providesModule center
+ * @jsx React.DOM
+ */
+
+var React = require('React');
+
+var center = React.createClass({
+  render: function() {
+    return this.transferPropsTo(
+      <div style={{textAlign: 'center'}}>{this.props.children}</div>
+    );
+  }
+});
+
+module.exports = center;

website/core/metadata.js

@@ -0,0 +1,15 @@
+/**
+ * @generated
+ * @providesModule Metadata
+ */
+module.exports = {
+  "files": [
+    {
+      "id": "getting-started",
+      "title": "Getting Started",
+      "layout": "docs",
+      "category": "Quick Start",
+      "permalink": "docs/getting-started.html"
+    }
+  ]
+};

website/core/unindent.js

@@ -0,0 +1,22 @@
+/**
+ * @providesModule unindent
+ */
+
+// Remove the indentation introduced by JSX
+function unindent(code) {
+  var lines = code.split('\n');
+  if (lines[0] === '') {
+    lines.shift();
+  }
+  if (lines.length <= 1) {
+    return code;
+  }
+
+  var indent = lines[0].match(/^\s*/)[0];
+  for (var i = 0; i < lines.length; ++i) {
+   lines[i] = lines[i].replace(new RegExp('^' + indent), '');
+  }
+  return lines.join('\n');
+}
+
+module.exports = unindent;