From 89e01daa5578bbc7b1d55f7a81a350488afb3735 Mon Sep 17 00:00:00 2001
From: Donovan Hutchinson <donovanh@gmail.com>
Date: Mon, 11 Nov 2019 19:15:07 +0000
Subject: [PATCH 1/2] Adding initial version

---
 .eleventy.js          |  1 +
 _data/topics.json     | 54 ++++++++++++++++++++++++++
 _includes/default.njk | 22 ++++-------
 control-flow/index.md |  4 ++
 css/main.css          | 30 +++++++++++++++
 js/main.js            | 88 +++++++++++++++++++++++++++++++++++++++++++
 6 files changed, 184 insertions(+), 15 deletions(-)
 create mode 100644 _data/topics.json
 create mode 100644 js/main.js
diff --git a/.eleventy.js b/.eleventy.js
index ce33f9b..e5b51e5 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,5 +1,6 @@
 module.exports = function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy("css");
+  eleventyConfig.addPassthroughCopy("js");
   eleventyConfig.addPassthroughCopy("CNAME");
   eleventyConfig.addLayoutAlias("default", "default.njk");
   return {
diff --git a/_data/topics.json b/_data/topics.json
new file mode 100644
index 0000000..adba5c4
--- /dev/null
+++ b/_data/topics.json
@@ -0,0 +1,54 @@
+[
+  {
+    "title": "Buffer and Streams",
+    "url": "/buffer-and-streams/"
+  },
+  {
+    "title": "Control flow",
+    "url": "/control-flow/"
+  },
+  {
+    "title": "Child Processes",
+    "url": "/child-processes/"
+  },
+  {
+    "title": "Diagnostics",
+    "url": "/diagnostics/"
+  },
+  {
+    "title": "Error Handling",
+    "url": "/error-handling/"
+  },
+  {
+    "title": "Node.js CLI",
+    "url": "/nodejs-cli/"
+  },
+  {
+    "title": "Events",
+    "url": "/events/"
+  },
+  {
+    "title": "File System",
+    "url": "/file-system/"
+  },
+  {
+    "title": "JavaScript Prerequisites",
+    "url": "/javascript-prerequisites/"
+  },
+  {
+    "title": "Module system",
+    "url": "/module-system/"
+  },
+  {
+    "title": "Process/Operating System",
+    "url": "/process-operating-system/"
+  },
+  {
+    "title": "Package.json",
+    "url": "/package-json/"
+  },
+  {
+    "title": "Unit Testing",
+    "url": "/unit-testing/"
+  }
+]
diff --git a/_includes/default.njk b/_includes/default.njk
index 6ab6386..5624a43 100644
--- a/_includes/default.njk
+++ b/_includes/default.njk
@@ -15,6 +15,7 @@ title: OpenJS NodeJS Application Developer Study Guide
       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>
+    <script src="{{ "/js/main.js" | url }}"></script>
   </head>
   <body>
     <header class="container">
@@ -33,26 +34,17 @@ title: OpenJS NodeJS Application Developer Study Guide
       <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" | url }}" {% 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 class="topics">
+              {% for topic in topics %}
+                <li data-topic="{{topic.url}}">
+                  <a href="{{ topic.url | url }}" {% if page.url === topic.url %} class="current" {% endif %}>{{topic.title}}</a>
+                </li>
+              {% endfor %}
             </ul>
           </nav>
         </div>
         <div class="main-content column column-75">
           <h1>{{ title }}</h1>
-
           {{ content | safe }}
         </div>
       </div>
diff --git a/control-flow/index.md b/control-flow/index.md
index 15c760b..3eab327 100644
--- a/control-flow/index.md
+++ b/control-flow/index.md
@@ -3,4 +3,8 @@ layout: default.njk
 title: Control Flow
 ---
 
+<button onClick="toggleCompletedTopic('{{page.url}}')" data-topic="{{page.url}}" class="completed-button">Mark as completed</button>
+
 I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams glitter in the dark near the Tannhäuser Gate. All those moments will be lost in time, like control flow.
+
+<button onClick="toggleCompletedTopic('{{page.url}}')" data-topic="{{page.url}}" class="completed-button">Mark as completed</button>
diff --git a/css/main.css b/css/main.css
index ba72201..1c82e66 100644
--- a/css/main.css
+++ b/css/main.css
@@ -12,6 +12,7 @@ main h1 {
 a {
   color: #80bd01;
   font-weight: bold;
+  transition: all 200ms ease-out;
 }
 
 a:hover {
@@ -60,12 +61,41 @@ a:hover {
 .sidebar a {
   color: #888;
   font-weight: normal;
+  position: relative;
+  transition: opacity 0.5s ease-out, padding 0.5s cubic-bezier(0, 1, 0.5, 1);
 }
 
 .sidebar a.current {
   color: #80bd01;
+  opacity: 1 !important;
+}
+
+.sidebar .completed a {
+  opacity: 0.5;
+  padding-left: 20px;
+  transition: opacity 0.5s ease-out;
+}
+
+.sidebar a:before {
+  content: "✔️";
+  color: #80bd01;
+  left: 0;
+  position: absolute;
+  transform: scale(0) translateX(-40px);
+  transition: transform 0.5s cubic-bezier(0.5, -0.5, 0.5, 1.5);
+}
+
+.sidebar .completed a:before {
+  transform: scale(1);
 }
 
 .sidebar a:hover {
   color: #80bd01;
+  opacity: 1;
+}
+
+.completed-button.completed {
+  background-color: #fff;
+  border-color: #80bd01;
+  color: #333;
 }
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..547c4d7
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,88 @@
+window.addEventListener("DOMContentLoaded", event => {
+  if (window.localStorage) {
+    window.topicsCompleted = getTopicsFromLocalStorage();
+    updateUI();
+  }
+});
+
+function updateUI() {
+  checkForCompletedButtons();
+  checkSideBar();
+}
+
+function checkForCompletedButtons() {
+  [...getButtons()].forEach(button => {
+    const topic = button.dataset.topic;
+    if (isCompleted(topic)) {
+      markButtonAsCompleted(button);
+    } else {
+      markButtonAsNotCompleted(button);
+    }
+  });
+}
+
+function getButtons() {
+  return document.querySelectorAll(".completed-button");
+}
+
+function toggleCompletedTopic(topic) {
+  if (isCompleted(topic)) {
+    removeCompletedTopic(topic);
+    updateUI();
+  } else {
+    addCompletedTopic(topic);
+    updateUI();
+  }
+}
+
+function isCompleted(topic) {
+  return window.topicsCompleted && window.topicsCompleted.includes(topic);
+}
+
+function markButtonAsCompleted(button) {
+  button.classList.add("completed");
+  button.innerText = "Completed!";
+}
+
+function markButtonAsNotCompleted(button) {
+  button.classList.remove("completed");
+  button.innerText = "Mark as completed";
+}
+
+function getTopicsFromLocalStorage() {
+  return JSON.parse(window.localStorage.getItem("topicsCompleted"));
+}
+
+function addCompletedTopic(topic) {
+  let topics = getTopicsFromLocalStorage();
+  if (!topics) {
+    topics = [];
+  }
+  topics.push(topic);
+  save(topics);
+}
+
+function save(topics) {
+  window.topicsCompleted = topics;
+  window.localStorage.setItem("topicsCompleted", JSON.stringify(topics));
+}
+
+function removeCompletedTopic(topic) {
+  const topics = getTopicsFromLocalStorage();
+  save(topics.filter(t => t !== topic));
+}
+
+function getSidebarItems() {
+  return document.querySelectorAll(".topics li");
+}
+
+function checkSideBar() {
+  [...getSidebarItems()].forEach(item => {
+    const topic = item.dataset.topic;
+    if (isCompleted(topic)) {
+      item.classList.add("completed");
+    } else {
+      item.classList.remove("completed");
+    }
+  });
+}

From 821c5b473ea7b42ec9d8a0bd89c4495848c85b15 Mon Sep 17 00:00:00 2001
From: Donovan Hutchinson <donovanh@gmail.com>
Date: Mon, 11 Nov 2019 19:34:17 +0000
Subject: [PATCH 2/2] Using reusable button with no further config needed on
 all posts

---
 _includes/post.njk    | 10 ++++++++++
 control-flow/index.md |  6 +-----
 events/index.md       |  2 +-
 3 files changed, 12 insertions(+), 6 deletions(-)
 create mode 100644 _includes/post.njk

diff --git a/_includes/post.njk b/_includes/post.njk
new file mode 100644
index 0000000..a88dfa9
--- /dev/null
+++ b/_includes/post.njk
@@ -0,0 +1,10 @@
+---
+layout: default.njk
+templateClass: tmpl-post
+---
+
+{{ content | safe }}
+
+<h3>Ready to mark {{title}} as completed?</h3>
+
+<button onClick="toggleCompletedTopic('{{page.url}}')" data-topic="{{page.url}}" class="completed-button">Mark as completed</button>
\ No newline at end of file
diff --git a/control-flow/index.md b/control-flow/index.md
index 3eab327..d872151 100644
--- a/control-flow/index.md
+++ b/control-flow/index.md
@@ -1,10 +1,6 @@
 ---
-layout: default.njk
+layout: post.njk
 title: Control Flow
 ---
 
-<button onClick="toggleCompletedTopic('{{page.url}}')" data-topic="{{page.url}}" class="completed-button">Mark as completed</button>
-
 I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams glitter in the dark near the Tannhäuser Gate. All those moments will be lost in time, like control flow.
-
-<button onClick="toggleCompletedTopic('{{page.url}}')" data-topic="{{page.url}}" class="completed-button">Mark as completed</button>
diff --git a/events/index.md b/events/index.md
index b6d944f..cc16e8a 100644
--- a/events/index.md
+++ b/events/index.md
@@ -1,5 +1,5 @@
 ---
-layout: default.njk
+layout: post.njk
 title: Events
 url: events
 ---
