Add WebPlayer component. Use with markdown ```ReactNativeWebPlayer in…

… .md

website/core/Marked.js

@@ -8,6 +8,7 @@
 
 var React = require('React');
 var Prism = require('Prism');
+var WebPlayer = require('WebPlayer');
 var Header = require('Header');
 
 /**
@@ -827,7 +828,16 @@ Parser.prototype.tok = function() {
       );
     }
     case 'code': {
-      return <Prism>{this.token.text}</Prism>;
+      var lang = this.token.lang
+        , text = this.token.text;
+
+      if (lang && lang.indexOf('ReactNativeWebPlayer') === 0) {
+        return (
+          <WebPlayer params={lang.split('?')[1]}>{text}</WebPlayer>
+        );
+      }
+
+      return <Prism>{text}</Prism>;
     }
     case 'table': {
       var table = []

website/core/WebPlayer.js

@@ -0,0 +1,68 @@
+/**
+ * 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 WebPlayer
+ */
+
+var React = require('React');
+var Prism = require('Prism');
+
+/**
+ * Use the WebPlayer by including a ```ReactNativeWebPlayer``` block in markdown.
+ *
+ * Optionally, include url parameters directly after the block's language. For
+ * the complete list of url parameters, see: https://github.com/dabbott/react-native-web-player
+ *
+ * E.g.
+ * ```ReactNativeWebPlayer?platform=android
+ * import React from 'react';
+ * import { AppRegistry, Text } from 'react-native';
+ *
+ * const App = () => <Text>Hello World!</Text>;
+ *
+ * AppRegistry.registerComponent('MyApp', () => App);
+ * ```
+ */
+var WebPlayer = React.createClass({
+  parseParams: function(paramString) {
+    var params = {};
+
+    if (paramString) {
+      var pairs = paramString.split('&');
+      for (var i = 0; i < pairs.length; i++) {
+        var pair = pairs[i].split('=');
+        params[pair[0]] = pair[1];
+      }
+    }
+
+    return params;
+  },
+
+  render: function() {
+    var hash = `#code=${encodeURIComponent(this.props.children)}&runApp=AwesomeProject`;
+
+    if (this.props.params) {
+      hash += `&${this.props.params}`;
+    }
+
+    return (
+      <div className={'web-player'}>
+        <Prism>{this.props.children}</Prism>
+        <iframe
+          style={{marginTop: 4}}
+          width='880'
+          height={this.parseParams(this.props.params).platform === 'android' ? '425' : '420'}
+          data-src={`//cdn.rawgit.com/dabbott/react-native-web-player/v0.1.2/index.html${hash}`}
+          frameBorder='0'
+        />
+      </div>
+    );
+  },
+});
+
+module.exports = WebPlayer;

website/src/react-native/css/react-native.css

@@ -1557,3 +1557,18 @@ input#algolia-doc-search:focus {
     margin-bottom: 0;
     padding-bottom: 0;
 }
+
+
+/** Web player **/
+
+.web-player > iframe, .web-player > .prism {
+  display: none;
+}
+
+.web-player.desktop > iframe {
+  display: block;
+}
+
+.web-player.mobile > .prism {
+  display: block;
+}

website/src/react-native/js/scripts.js

@@ -7,10 +7,29 @@
   document.addEventListener('DOMContentLoaded', init);
 
   function init() {
-    if (isMobile()) {
+    var mobile = isMobile();
+
+    if (mobile) {
       document.querySelector('.nav-site-wrapper a[data-target]').addEventListener('click', toggleTarget);
     }
 
+    var webPlayerList = document.querySelectorAll('.web-player');
+
+    // Either show interactive or static code block, depending on desktop or mobile
+    for (var i = 0; i < webPlayerList.length; ++i) {
+      webPlayerList[i].classList.add(mobile ? 'mobile' : 'desktop');
+
+      if (! mobile) {
+
+        // Determine location to look up required assets
+        var assetRoot = encodeURIComponent(document.location.origin + '/react-native');
+
+        // Set iframe src. Do this dynamically so the iframe never loads on mobile.
+        var iframe = webPlayerList[i].querySelector('iframe');
+        iframe.src = iframe.getAttribute('data-src') + '&assetRoot=' + assetRoot;
+      }
+    }
+
     var backdrop = document.querySelector('.modal-backdrop');
     if (!backdrop) return;