Skip to content

Commit 5f6b5b5

Browse files
donovanhdonovanh
committed
Adding repl
1 parent 7db5a78 commit 5f6b5b5

3 files changed

Lines changed: 124 additions & 43 deletions

File tree

‎_includes/default.njk‎

Lines changed: 82 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -13,57 +13,96 @@ title: OpenJS NodeJS Application Developer Study Guide
1313
<link rel="stylesheet" href="{{ "/css/main.css" | url }}">
1414
<link rel="stylesheet"
1515
href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/default.min.css">
16-
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/highlight.min.js"></script>
17-
<script>hljs.initHighlightingOnLoad();</script>
16+
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/highlight.min.js"></script>
17+
<script>
18+
hljs.initHighlightingOnLoad();
19+
</script>
1820
</head>
1921
<body>
2022
<header class="container">
21-
<div class="row">
22-
<div class="column column-50">
23-
<h1 class="logo"><a href="/">ONAD Study Guide</a></h1>
24-
</div>
25-
<div class="top-links column column-50">
26-
<ul>
27-
<li><a href="https://training.linuxfoundation.org/certification/jsnad/" target="_blank" title="OpenJS Node.js Application Developer (JSNAD)">JSNAD Certification</a></li>
28-
</ul>
29-
</div>
23+
<div class="row">
24+
<div class="column column-50">
25+
<h1 class="logo">
26+
<a href="/">ONAD Study Guide</a>
27+
</h1>
3028
</div>
29+
<div class="top-links column column-50">
30+
<ul>
31+
<li>
32+
<a href="https://training.linuxfoundation.org/certification/jsnad/" target="_blank" title="OpenJS Node.js Application Developer (JSNAD)">JSNAD Certification</a>
33+
</li>
34+
</ul>
35+
</div>
36+
</div>
3137
</header>
3238
<main class="container">
3339
<div class="row">
3440
<div class="sidebar column">
3541
<nav>
3642
<ul>
37-
<li><a href="#" {% if page.url === '/buffer/' %} class="current" {% endif %}>Buffer and Streams</a></li>
38-
<li><a href="#">Control flow</a></li>
39-
<li><a href="#">Child Processes</a></li>
40-
<li><a href="#">Diagnostics</li>
41-
<li><a href="#">Error Handling</a></li>
42-
<li><a href="#">Node.js CLI</a></li>
43-
<li><a href="{{ "/events" | url }}" {% if page.url === '/events/' %} class="current" {% endif %}>Events</li>
44-
<li><a href="#">File System</a></li>
45-
<li><a href="#">JavaScript Prerequisites</a></li>
46-
<li><a href="#">Module system</a></li>
47-
<li><a href="#">Process/Operating System</a></li>
48-
<li><a href="#">Package.json</a></li>
49-
<li><a href="#">Unit Testing</a></li>
50-
</ul>
51-
</nav>
52-
</div>
53-
<div class="main-content column column-75">
54-
<h1>{{ title }}</h1>
43+
<li>
44+
<a href="#" {% if page.url === '/buffer/' %} class="current" {% endif %}>Buffer and Streams</a>
45+
</li>
46+
<li>
47+
<a href="#">Control flow</a>
48+
</li>
49+
<li>
50+
<a href="#">Child Processes</a>
51+
</li>
52+
<li>
53+
<a href="#">Diagnostics</li>
54+
<li>
55+
<a href="#">Error Handling</a>
56+
</li>
57+
<li>
58+
<a href="#">Node.js CLI</a>
59+
</li>
60+
<li>
61+
<a href="{{ "/events" | url }}" {% if page.url === '/events/' %} class="current" {% endif %}>Events</li>
62+
<li>
63+
<a href="#">File System</a>
64+
</li>
65+
<li>
66+
<a href="#">JavaScript Prerequisites</a>
67+
</li>
68+
<li>
69+
<a href="#">Module system</a>
70+
</li>
71+
<li>
72+
<a href="#">Process/Operating System</a>
73+
</li>
74+
<li>
75+
<a href="#">Package.json</a>
76+
</li>
77+
<li>
78+
<a href="#">Unit Testing</a>
79+
</li>
80+
</ul>
81+
</nav>
82+
<nav class="secondary">
83+
<ul>
84+
<li>
85+
<a href="{{ "/repl/" | url }}" {% if page.url === '/repl/' %} class="current" {% endif %}>Node.js REPL</a>
86+
</li>
87+
</ul>
88+
</nav>
89+
</div>
90+
<div class="main-content column column-75">
91+
<h1>{{ title }}</h1>
5592

56-
{{ content | safe }}
57-
</div>
58-
</div>
59-
</main>
60-
<footer class="container">
61-
<div class="row">
62-
<div class="column column-75 column-offset-25">
63-
<p><a href="https://github.com/Node-Study-Guide/openjs-nodejs-application-developer-study-guide/tree/master/{{ page.inputPath }}">Edit this page on GitHub</a></p>
64-
</div>
65-
</div>
66-
67-
</footer>
68-
</body>
69-
</html>
93+
{{ content | safe }}
94+
</div>
95+
</div>
96+
</main>
97+
<footer class="container">
98+
<div class="row">
99+
<div class="column column-75 column-offset-25">
100+
<p>
101+
<a href="https://github.com/Node-Study-Guide/openjs-nodejs-application-developer-study-guide/tree/master/{{ page.inputPath }}">Edit this page on GitHub</a>
102+
</p>
103+
</div>
104+
</div>
105+
106+
</footer>
107+
</body>
108+
</html>

‎events/index.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ When the EventEmitter object emits an event, all of the functions attached to th
1414

1515
This example creates an event listener for `foo` events, and an event emitter to fire these events.
1616

17+
<div class="repl-code">
18+
1719
```javascript
1820
const { EventEmitter } = require("events");
1921

@@ -33,6 +35,23 @@ eventEmitter.on("foo", foo);
3335
eventEmitter.emit("foo");
3436
```
3537

38+
</div>
39+
40+
<script>
41+
// TODO - move to main.js when other PRs merged
42+
const replCode = document.querySelectorAll('.repl-code');
43+
[...replCode].forEach(code => {
44+
const codeText = encodeURI(code.innerText);
45+
const link = document.createElement('a');
46+
link.title = "Run this code in the REPL";
47+
link.innerText = "Run this code in the REPL";
48+
link.href = "/repl/?code=" + codeText;
49+
const paragraph = document.createElement('p');
50+
paragraph.appendChild(link);
51+
code.appendChild(paragraph);
52+
});
53+
</script>
54+
3655
## Passing parameters
3756

3857
When an event is emitted using the `emit` method, the subsequent arguments are passed through to the listeners.

‎repl/index.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
layout: default.njk
3+
title: Node.js REPL
4+
---
5+
6+
Use this space to try out code from the examples!
7+
8+
<script src="https://embed.runkit.com"></script>
9+
10+
<div id="repl"></div>
11+
12+
<script>
13+
14+
const urlParams = new URLSearchParams(window.location.search);
15+
const code = urlParams.get('code');
16+
17+
const notebook = RunKit.createNotebook({
18+
element: document.getElementById("repl"),
19+
source: code || "// Your JavaScript code goes here",
20+
minHeight: "500px",
21+
});
22+
23+
</script>

0 commit comments

Comments
 (0)