Node-Study-Guide · readikus · Nov 8, 2019 · Nov 8, 2019
diff --git a/.eleventy.js b/.eleventy.js
@@ -0,0 +1,7 @@
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addPassthroughCopy("css");
+  eleventyConfig.addLayoutAlias("default", "default.njk");
+  return {
+    passthroughFileCopy: true
+  };
+};
diff --git a/_includes/default.njk b/_includes/default.njk
@@ -7,8 +7,64 @@ title: OpenJS NodeJS Application Developer Study Guide
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ title }}</title>
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.css">
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet"
+      href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/default.min.css">
+<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/highlight.min.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
   </head>
   <body>
-    {{ content | safe }}
+    <header class="container">
+        <div class="row">
+          <div class="column column-50">
+            <h1 class="logo"><a href="/">ONAD Study Guide</a></h1>
+          </div>
+          <div class="top-links column column-50">
+            <ul>
+              <li><a href="https://training.linuxfoundation.org/certification/jsnad/" target="_blank" title="OpenJS Node.js Application Developer (JSNAD)">JSNAD Certification</a></li>
+            </ul>
+          </div>
+        </div>
+    </header>
+    <main class="container">
+      <div class="row">
+        <div class="sidebar column">
+          <nav>
+            <ul>
+              <li><a href="#" {% if page.url === '/buffer/' %} class="current" {% endif %}>Buffer and Streams</a></li>
+              <li><a href="#">Control flow</a></li>
+              <li><a href="#">Child Processes</a></li>
+              <li><a href="#">Diagnostics</li>
+              <li><a href="#">Error Handling</a></li>
+              <li><a href="#">Node.js CLI</a></li>
+              <li><a href="/events" {% if page.url === '/events/' %} class="current" {% endif %}>Events</li>
+              <li><a href="#">File System</a></li>
+              <li><a href="#">JavaScript Prerequisites</a></li>
+              <li><a href="#">Module system</a></li>
+              <li><a href="#">Process/Operating System</a></li>
+              <li><a href="#">Package.json</a></li>
+              <li><a href="#">Unit Testing</a></li>
+            </ul>
+          </nav>
+        </div>
+        <div class="main-content column column-75">
+          <h1>{{ title }}</h1>
+
+          {{ content | safe }}
+        </div>
+      </div>
+    </main>
+    <footer class="container">
+      <div class="row">
+        <div class="column column-75 column-offset-25">
+          <p>&copy; NearForm Ltd.<p>
+          <p><a href="https://github.com/jjmax75/openjs-nodejs-application-developer-study-guide/tree/master/{{ page.inputPath }}">Edit this page on GitHub</a></p>
+        </div>
+      </div>
+
+      </footer>
   </body>
 </html>
diff --git a/cheatsheet/index.md b/cheatsheet/index.md
@@ -1,6 +1,9 @@
-# Node Cheat Sheet
+---
+layout: default.njk
+title: Node Cheat Sheet
+---
 
-# <a name="Events"></a>Events
+## [Events](#events)
 
 Class: events.EventEmitter
 

diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,71 @@
+body {
+  color: #333;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 18px;
+}
+
+main h1 {
+  color: #80bd01;
+}
+
+a {
+  color: #80bd01;
+  font-weight: bold;
+}
+
+a:hover {
+  color: #4d7000;
+  font-weight: bold;
+}
+
+.top-links {
+  text-align: right;
+}
+
+.top-links ul {
+  margin: 2rem 0;
+}
+
+.top-links li {
+  list-style: none;
+  display: inline-block;
+}
+
+.sidebar {
+  margin: 2rem;
+}
+
+.main-content {
+  margin: 2rem;
+}
+
+.logo {
+  font-size: 22px;
+  margin: 2rem 0;
+}
+
+.logo a {
+  color: #888;
+}
+
+.logo a:hover {
+  color: #80bd01;
+}
+
+.sidebar li {
+  list-style: none;
+}
+
+.sidebar a {
+  color: #888;
+  font-weight: normal;
+}
+
+.sidebar a.current {
+  color: #80bd01;
+}
+
+.sidebar a:hover {
+  color: #80bd01;
+}
diff --git a/events/index.md b/events/index.md
@@ -1,10 +1,9 @@
 ---
 layout: default.njk
 title: Events
+url: events
 ---
 
-# Events
-
 The Node.js core API is built around the idea of events being "emitted" and "listened" to. Objects called "emitters" emit _named_ events, that are picked up by "listener" functions.
 
 Objects that emit events extend the `EventEmitter` class. These objects expose an `on` method that allows one or more functions to be attached to named events emitted by the object.
@@ -15,23 +14,23 @@ 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.
 
-```
-const { EventEmitter } = require('events');
+```javascript
+const { EventEmitter } = require("events");
 
 // create a listener function. These can be arrow functions, but will
 // loose `this` refering to the EventEmitter object
 const foo = function foo() {
-  console.log('foo executed.', this)
-}
+  console.log("foo executed.", this);
+};
 
 // create an emitter and bind some events to it
-const eventEmitter = new EventEmitter()
+const eventEmitter = new EventEmitter();
 
 // Bind the connection event with the listner1 function
-eventEmitter.on('foo', foo)
+eventEmitter.on("foo", foo);
 
 // fire the event
-eventEmitter.emit('foo')
+eventEmitter.emit("foo");
 ```
 
 ## Passing parameters
@@ -64,4 +63,4 @@ Imagine we are building a SaaS that does a number of things when a user creates
 is created, we want to emit a `userCreated` event. One of the listeners for this will email a confirmation
 email to that user.
 
-Build an event emitter to simulate the `userCreated` event, and an event listener that sends a confirmation email. There is a mock emailer class in the folder that has a method `send`, which expects an email address and a message body as the parameters.
+Build an event emitter to simulate the `userCreated` event, and an event listener that sends a confirmation email. There is a mock emailer class in the folder that has a method `send`, which expects an email address and a message body as the parameters.
diff --git a/index.md b/index.md
@@ -3,12 +3,9 @@ layout: default.njk
 title: OpenJS NodeJS Application Developer Study Guide
 ---
 
-# {{title}}
-
 TODO:
 
 - Set out the purpose here and list the sections with links
 - Styling and update the default template
 
-
-[Events](/events)
+[Events](/events)
diff --git a/package.json b/package.json
@@ -3,8 +3,9 @@
   "version": "1.0.0",
   "description": "OpenJS Node application developer study guide",
   "scripts": {
-    "start": "eleventy --serve",
-    "deploy": "gh-pages -d _site"
+    "start": "eleventy --serve --input=. --output=_site",
+    "build": "eleventy --config=.eleventy-deploy.js",
+    "deploy": "npm run build && gh-pages -d _site/_eleventy_redirect"
   },
   "repository": {
     "type": "git",

diff --git a/readme.md b/readme.md
@@ -19,3 +19,7 @@ Then run `npm start`. You can access your site on [localhost:8080](http://localh
 TODO: Use Github pages deployment for 11ty (from the generated \_site folder)
 
 [Events](/events/events.md)
+
+## Styling
+
+The base theme for this site is provided by [Milligram](https://milligram.io) with custom theming.