Merge pull request #18 from Node-Study-Guide/repl

Adding repl

Author: jjmax75

_includes/default.njk

@@ -1,6 +1,5 @@
 ---
 layout: base.njk
-templateClass: tmpl-post
 ---
 
 <h1>{{ title }}</h1>

events/index.md

@@ -16,6 +16,8 @@ When the EventEmitter object emits an event, all of the functions attached to th
 
 This example creates an event listener for `foo` events, and an event emitter to fire these events.
 
+<div class="repl-code">
+
 ```javascript
 const { EventEmitter } = require('events');
 
@@ -35,24 +37,35 @@ eventEmitter.on('foo', foo);
 eventEmitter.emit('foo');
 ```
 
+</div>
+
 ## Passing parameters
 
 When an event is emitted using the `emit` method, the subsequent arguments are passed through to the listeners.
 
 For example:
 
-```
+<div class="repl-code">
+
+```javascript
+const { EventEmitter } = require('events');
+
+// create an emitter and bind some events to it
+const eventEmitter = new EventEmitter();
+
 const foo = function foo(bar) {
-  console.log(`foo has been passed ${bar}`)
-}
+  console.log(`foo has been passed ${bar}`);
+};
 
 // Bind the connection event with the listner1 function
-eventEmitter.on('foo', foo)
+eventEmitter.on('foo', foo);
 
 // fire the event
-eventEmitter.emit('foo', 'bar')
+eventEmitter.emit('foo', 'bar');
 ```
 
+</div>
+
 ## Summary
 
 Listeners _listen_ for events, that are _emitted_ from emitters.

js/main.js

@@ -1,8 +1,40 @@
+/* Add an edit in repl link to code blocks */
+
+function checkForReplLinks() {
+  // const replCode = document.querySelectorAll('pre');
+  // [...replCode].forEach(pre => {
+  //   console.log(pre);
+  //   const text = encodeURI(pre.innerText);
+  //   const link = document.createElement('a');
+  //   link.title = 'Run this code in the REPL';
+  //   link.innerText = 'Run this code in the REPL';
+  //   link.href = '/repl/?code=' + text;
+  //   const paragraph = document.createElement('p');
+  //   paragraph.appendChild(link);
+  //   const wrapper = document.createElement('div');
+  //   pre.parentNode.insertBefore(wrapper, pre);
+  //   wrapper.appendChild(pre);
+  //   wrapper.appendChild(paragraph);
+  // });
+  const replCode = document.querySelectorAll('.repl-code');
+  [...replCode].forEach(code => {
+    const codeText = encodeURI(code.innerText);
+    const link = document.createElement('a');
+    link.title = 'Run this code in the REPL';
+    link.innerText = 'Run this code in the REPL';
+    link.href = '/repl/?code=' + codeText;
+    const paragraph = document.createElement('p');
+    paragraph.appendChild(link);
+    code.appendChild(paragraph);
+  });
+}
+
 window.addEventListener('DOMContentLoaded', event => {
   if (window.localStorage) {
     window.topicsCompleted = getTopicsFromLocalStorage();
     updateUI();
   }
+  checkForReplLinks();
 });
 
 function updateUI() {

repl/index.md

@@ -0,0 +1,23 @@
+---
+layout: default
+title: Node.js REPL
+---
+
+Use this space to try out code from the examples!
+
+<script src="https://embed.runkit.com"></script>
+
+<div id="repl"></div>
+
+<script>
+
+const urlParams = new URLSearchParams(window.location.search);
+const code = urlParams.get('code');
+
+const notebook = RunKit.createNotebook({
+    element: document.getElementById("repl"),
+    source: code || "// Your JavaScript code goes here",
+    minHeight: "500px",
+});
+
+</script>