Further Code-Cleanup

assets/css/new-challenge.css

@@ -125,16 +125,8 @@ gre7-border.border-box code {
    padding-right: 12px;
  }
 
- #directory-path:empty {
-   display: none;
- }
-
- #directory-path:before {
-   content: 'Verifying: ';
- }
-
  #path-required-warning,
- #directory-path {
+ #div-selected-dir{
    padding: 6px 12px 6px 10px;
    vertical-align: middle;
    margin-bottom: 0;
@@ -146,18 +138,6 @@ gre7-border.border-box code {
    color: #8cf;
  }
 
- #path-required-warning {
-   display: none;
- }
-
- #path-required-warning.show {
-   display: inline;
- }
-
- #path-required-warning.show + #directory-path {
-   display: none;
- }
-
  .verify-fail:before {
    content: '✗ ';
  }

docs.md

@@ -15,8 +15,7 @@ How does this thing work? Below are general descriptions of directories and cont
         - **partials** HTML bits that are shared between either challenges or non-challenges pages, to be used in order to generate full HTML for pages.
     - **i18n** The translation-json-files. Translations are managed on Transifex.
     - **layouts** Handlebars templates to compile pages.
-- **tests** App's test files.
-- **empty-data.json** The starter file that is duplicated and stored on the user's computer with their challenge completed statuses as they go through the lessons.
+- **empty-user-data.json** The starter file that is duplicated and stored on the user's computer with their challenge completed statuses as they go through the lessons.
 - **main.js** App's main process file which spins up the renderer view for the pages.
 - **package.json** App's details and dependencies.
 
@@ -33,4 +32,4 @@ The pages that the app displays are HTML, just like a website. The `assets` dire
 The `lib` directory contains scripts that each page uses. Inside of `lib/verify` are scripts for each challenge that tell it how to verify that challenge. The scripts `helpers.js` and `user-data.js` are shared between scripts.
 
 **Templating**
-There are scripts, templates and partials involved with generating the HTML pages. The main content for the challenges and non-challenge pages are within `resources/content/challenges` and `resources/content/pages`. The directory `resources/layouts` contains the templates, `resources/partials` the partials that are combined with the main content files according to the template. The scripts `lib/build-page.js` and `lib/build-challenges.js` put it all in motion to generate the final HTML output which is placed inside a `built`-folder. You can run these scripts from the command line.
+There are scripts, templates and partials involved with generating the HTML pages. The main content for the challenges and non-challenge pages are within `resources/content/challenges` and `resources/content/pages`. The directory `resources/layouts` contains the templates, `resources/partials` the partials that are combined with the main content files according to the template. The scripts `lib/build/build-pages.js` and `lib/build/build-challenges.js` put it all in motion to generate the final HTML output which is placed inside a `built`-folder. You can run these scripts from the command line.

empty-user-data.json

@@ -0,0 +1,46 @@
+{
+  "get_git": {
+    "challengeId": 1,
+    "completed": false
+  },
+  "repository": {
+    "challengeId": 2,
+    "completed": false
+  },
+  "commit_to_it": {
+    "challengeId": 3,
+    "completed": false
+  },
+  "githubbin": {
+    "challengeId": 4,
+    "completed": false
+  },
+  "remote_control": {
+    "challengeId": 5,
+    "completed": false
+  },
+  "forks_and_clones": {
+    "challengeId": 6,
+    "completed": false
+  },
+  "branches_arent_just_for_birds": {
+    "challengeId": 7,
+    "completed": false
+  },
+  "its_a_small_world": {
+    "challengeId": 8,
+    "completed": false
+  },
+  "pull_never_out_of_date": {
+    "challengeId": 9,
+    "completed": false
+  },
+  "requesting_you_pull_please": {
+    "challengeId": 10,
+    "completed": false
+  },
+  "merge_tada": {
+    "challengeId": 11,
+    "completed": false
+  }
+}

lib/build-challenges.js → lib/build/build-challenges.js

@@ -1,13 +1,14 @@
 /*
+ * Runs in: Node - Build Application
  * This file builds out the challenge web pages. A simple static site
  * generator. It uses `partials` and `layouts`.
  */
 const fs = require('fs')
 const path = require('path')
 const Handlebars = require('handlebars')
-const { getLocaleMenu } = require('./i18n-helpers.js')
+const { getLocaleMenu } = require('./build-helpers.js')
 
-const basepath = path.normalize(path.join(__dirname, '..'))
+const basepath = path.normalize(path.join(__dirname, '../..'))
 const inputFolder = path.join(basepath, 'resources', 'content', 'challenges')
 const outputFolder = path.join(basepath, 'built', 'challenges')
 const partialsFolder = path.join(basepath, 'resources', 'content', 'partials')

lib/i18n-helpers.js → lib/build/build-helpers.js

@@ -1,13 +1,14 @@
 /*
- * Some helper functions to be used where necessary
+ * Runs in: Node - Build Application
+ * Some helper functions to be used in builds
  */
 
 /**
  * Build locale menu
  * @return {string}
  */
-const getLocaleMenu = function () {
-  const { appLanguages } = require('../config/i18next.config')
+function getLocaleMenu () {
+  const { appLanguages } = require('../../config/i18next.config')
   let localeMenu = ''
 
   Object.entries(appLanguages).forEach(([languageKey, language]) => {

lib/build-pages.js → lib/build/build-pages.js

@@ -1,13 +1,14 @@
 /*
+ * Runs in: Node - Build Application
  * This file builds out the general web pages (like the about page). A simple
  * static site generator. It uses `partials` and `layouts`.
  */
 const fs = require('fs')
 const path = require('path')
 const Handlebars = require('handlebars')
-const { getLocaleMenu } = require('./i18n-helpers.js')
+const { getLocaleMenu } = require('./build-helpers.js')
 
-const basepath = path.normalize(path.join(__dirname, '..'))
+const basepath = path.normalize(path.join(__dirname, '../..'))
 const inputFolder = path.join(basepath, 'resources', 'content', 'pages')
 const outputFolder = path.join(basepath, 'built', 'pages')
 const partialsFolder = path.join(basepath, 'resources', 'content', 'partials')

lib/challenge-sidebar-handler.js

@@ -0,0 +1,30 @@
+/*
+ * Runs in: Renderer-Process
+ * Cares for the Challenge-Sidebar to be up-to-date with completed-status
+ */
+const path = require('path')
+const userData = require(path.normalize(path.join(__dirname, 'user-data.js')))
+
+// Execute after DOM loaded.
+document.addEventListener('DOMContentLoaded', () => {
+  const challengeUserData = userData.getChallengeData()
+
+  Object.keys(challengeUserData).forEach((challengeKey) => {
+    if (challengeUserData[challengeKey].completed) {
+      showChallengeCompleted(challengeKey, true)
+    }
+  })
+})
+
+/*
+ * Show a challenge as completed/incomplete in sidebar
+ */
+function showChallengeCompleted (challengeKey, completed) {
+  if (completed) {
+    document.getElementById('sidebar-' + challengeKey).classList.add('completed')
+  } else {
+    document.getElementById('sidebar-' + challengeKey).classList.remove('completed')
+  }
+}
+
+exports.showChallengeCompleted = showChallengeCompleted