First pass at RunKit integration.

Author: tolmasky

docs/index.html.handlebars

@@ -160,5 +160,6 @@
     </main>
     <script src="dist/ramda.js"></script>
     <script src="main.js"></script>
+    <script src = "https://embed.runkit.com"></script>
 </body>
 </html>

docs/main.js

@@ -98,15 +98,43 @@
   }
 
   function tryInREPL(event) {
-    if (!event.target.matches('.try-repl')) {
+    var target = event.target;
+
+    if (!target.matches('.try-repl')) {
       return;
     }
-    var version = event.target.dataset && event.target.dataset.ramdaVersion;
-    var versionParam = version ? '?v=' + version : '';
-    var code = event.target.nextElementSibling.textContent;
-    var encoded = fixedEncodeURIComponent(code);
-    window.open(location.origin + '/repl/' +
-      versionParam + '#;' + encoded);
+
+    if (!window.RunKit) {
+        var version = event.target.dataset && event.target.dataset.ramdaVersion;
+        var versionParam = version ? '?v=' + version : '';
+        var code = event.target.nextElementSibling.textContent;
+        var encoded = fixedEncodeURIComponent(code);
+        window.open(location.origin + '/repl/' +
+          versionParam + '#;' + encoded);
+    }
+
+    var parent = target.parentNode;
+    var ramdaVersion = target.dataset && "@" + target.dataset.ramdaVersion || "";
+    var codeElement = target.nextElementSibling;
+
+    parent.removeChild(codeElement);
+    parent.removeChild(target);
+    parent.style.background = "transparent";
+
+    RunKit.createNotebook({
+        element: parent,
+        nodeVersion: '*',
+        preamble: 'var R = require("ramda' + ramdaVersion + '")',
+        source: codeElement.textContent,
+        syntaxTheme: 'atom-dark-syntax',
+        minHeight: "52px",
+        onLoad: function(notebook) {
+          var iframe = parent.lastElementChild;
+          iframe.style.cssText = 'height:' + iframe.style.height
+          iframe.classList.add('repl')
+          notebook.evaluate()
+        }
+    });
   }
 
 

less/ramda.less

@@ -41,3 +41,10 @@
 aside.gitter-chat-embed {
     z-index: 1040;
 }
+
+.repl {
+    background-color: transparent;
+    margin: 0 0 0 -75px;
+    padding: 0;
+    width: ~"calc(100% + 155px)";
+  }