Skip to content

Commit d5abcfa

Browse files
jjmax75jjmax75
authored
Merge branch 'master' into buffersAndStreams
2 parents ebed17b + 9f86f93 commit d5abcfa

File tree

8 files changed

+193
-17
lines changed

8 files changed

+193
-17
lines changed

‎.eleventy.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
module.exports = function(eleventyConfig) {
22
eleventyConfig.addPassthroughCopy("css");
3+
eleventyConfig.addPassthroughCopy("js");
34
eleventyConfig.addPassthroughCopy("CNAME");
45
eleventyConfig.addLayoutAlias("default", "default.njk");
56
return {

‎_data/topics.json

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
[
2+
{
3+
"title": "Buffer and Streams",
4+
"url": "/buffer-and-streams/"
5+
},
6+
{
7+
"title": "Control flow",
8+
"url": "/control-flow/"
9+
},
10+
{
11+
"title": "Child Processes",
12+
"url": "/child-processes/"
13+
},
14+
{
15+
"title": "Diagnostics",
16+
"url": "/diagnostics/"
17+
},
18+
{
19+
"title": "Error Handling",
20+
"url": "/error-handling/"
21+
},
22+
{
23+
"title": "Node.js CLI",
24+
"url": "/nodejs-cli/"
25+
},
26+
{
27+
"title": "Events",
28+
"url": "/events/"
29+
},
30+
{
31+
"title": "File System",
32+
"url": "/file-system/"
33+
},
34+
{
35+
"title": "JavaScript Prerequisites",
36+
"url": "/javascript-prerequisites/"
37+
},
38+
{
39+
"title": "Module system",
40+
"url": "/module-system/"
41+
},
42+
{
43+
"title": "Process/Operating System",
44+
"url": "/process-operating-system/"
45+
},
46+
{
47+
"title": "Package.json",
48+
"url": "/package-json/"
49+
},
50+
{
51+
"title": "Unit Testing",
52+
"url": "/unit-testing/"
53+
}
54+
]

‎_includes/default.njk

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ title: OpenJS NodeJS Application Developer Study Guide
1515
href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/default.min.css">
1616
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/highlight.min.js"></script>
1717
<script>hljs.initHighlightingOnLoad();</script>
18+
<script src="{{ "/js/main.js" | url }}"></script>
1819
</head>
1920
<body>
2021
<header class="container">
@@ -33,26 +34,18 @@ title: OpenJS NodeJS Application Developer Study Guide
3334
<div class="row">
3435
<div class="sidebar column">
3536
<nav>
36-
<ul>
37-
<li><a href="{{ "/buffers-and-streams" | url }}" {% if page.url === '/buffers-and-streams/' %} 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>
37+
38+
<ul class="topics">
39+
{% for topic in topics %}
40+
<li data-topic="{{topic.url}}">
41+
<a href="{{ topic.url | url }}" {% if page.url === topic.url %} class="current" {% endif %}>{{topic.title}}</a>
42+
</li>
43+
{% endfor %}
5044
</ul>
5145
</nav>
5246
</div>
5347
<div class="main-content column column-75">
5448
<h1>{{ title }}</h1>
55-
5649
{{ content | safe }}
5750
</div>
5851
</div>

‎_includes/post.njk

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
layout: default.njk
3+
templateClass: tmpl-post
4+
---
5+
6+
{{ content | safe }}
7+
8+
<h3>Ready to mark {{title}} as completed?</h3>
9+
10+
<button onClick="toggleCompletedTopic('{{page.url}}')" data-topic="{{page.url}}" class="completed-button">Mark as completed</button>

‎control-flow/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: default.njk
2+
layout: post.njk
33
title: Control Flow
44
---
55

‎css/main.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ main h1 {
1212
a {
1313
color: #80bd01;
1414
font-weight: bold;
15+
transition: all 200ms ease-out;
1516
}
1617

1718
a:hover {
@@ -60,12 +61,41 @@ a:hover {
6061
.sidebar a {
6162
color: #888;
6263
font-weight: normal;
64+
position: relative;
65+
transition: opacity 0.5s ease-out, padding 0.5s cubic-bezier(0, 1, 0.5, 1);
6366
}
6467

6568
.sidebar a.current {
6669
color: #80bd01;
70+
opacity: 1 !important;
71+
}
72+
73+
.sidebar .completed a {
74+
opacity: 0.5;
75+
padding-left: 20px;
76+
transition: opacity 0.5s ease-out;
77+
}
78+
79+
.sidebar a:before {
80+
content: "✔️";
81+
color: #80bd01;
82+
left: 0;
83+
position: absolute;
84+
transform: scale(0) translateX(-40px);
85+
transition: transform 0.5s cubic-bezier(0.5, -0.5, 0.5, 1.5);
86+
}
87+
88+
.sidebar .completed a:before {
89+
transform: scale(1);
6790
}
6891

6992
.sidebar a:hover {
7093
color: #80bd01;
94+
opacity: 1;
95+
}
96+
97+
.completed-button.completed {
98+
background-color: #fff;
99+
border-color: #80bd01;
100+
color: #333;
71101
}

‎events/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: default.njk
2+
layout: post.njk
33
title: Events
44
url: events
55
---

‎js/main.js

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
window.addEventListener("DOMContentLoaded", event => {
2+
if (window.localStorage) {
3+
window.topicsCompleted = getTopicsFromLocalStorage();
4+
updateUI();
5+
}
6+
});
7+
8+
function updateUI() {
9+
checkForCompletedButtons();
10+
checkSideBar();
11+
}
12+
13+
function checkForCompletedButtons() {
14+
[...getButtons()].forEach(button => {
15+
const topic = button.dataset.topic;
16+
if (isCompleted(topic)) {
17+
markButtonAsCompleted(button);
18+
} else {
19+
markButtonAsNotCompleted(button);
20+
}
21+
});
22+
}
23+
24+
function getButtons() {
25+
return document.querySelectorAll(".completed-button");
26+
}
27+
28+
function toggleCompletedTopic(topic) {
29+
if (isCompleted(topic)) {
30+
removeCompletedTopic(topic);
31+
updateUI();
32+
} else {
33+
addCompletedTopic(topic);
34+
updateUI();
35+
}
36+
}
37+
38+
function isCompleted(topic) {
39+
return window.topicsCompleted && window.topicsCompleted.includes(topic);
40+
}
41+
42+
function markButtonAsCompleted(button) {
43+
button.classList.add("completed");
44+
button.innerText = "Completed!";
45+
}
46+
47+
function markButtonAsNotCompleted(button) {
48+
button.classList.remove("completed");
49+
button.innerText = "Mark as completed";
50+
}
51+
52+
function getTopicsFromLocalStorage() {
53+
return JSON.parse(window.localStorage.getItem("topicsCompleted"));
54+
}
55+
56+
function addCompletedTopic(topic) {
57+
let topics = getTopicsFromLocalStorage();
58+
if (!topics) {
59+
topics = [];
60+
}
61+
topics.push(topic);
62+
save(topics);
63+
}
64+
65+
function save(topics) {
66+
window.topicsCompleted = topics;
67+
window.localStorage.setItem("topicsCompleted", JSON.stringify(topics));
68+
}
69+
70+
function removeCompletedTopic(topic) {
71+
const topics = getTopicsFromLocalStorage();
72+
save(topics.filter(t => t !== topic));
73+
}
74+
75+
function getSidebarItems() {
76+
return document.querySelectorAll(".topics li");
77+
}
78+
79+
function checkSideBar() {
80+
[...getSidebarItems()].forEach(item => {
81+
const topic = item.dataset.topic;
82+
if (isCompleted(topic)) {
83+
item.classList.add("completed");
84+
} else {
85+
item.classList.remove("completed");
86+
}
87+
});
88+
}

0 commit comments

Comments
 (0)