Signal and mark progress

assets/javascript/app.js

@@ -1,10 +1,11 @@
 require([
     "jQuery",
-    "progress"
-], function($, progress){
+    "core/state",
+    "core/progress"
+], function($, _state, progress){
     $(document).ready(function() {
-        var $book = $(".book");
-        var githubId = $book.data("github");
+        var state = _state();
+        var $book = state.$book;
 
         // Toggle summary
         $book.find(".book-header .toggle-summary").click(function(e) {
@@ -13,7 +14,7 @@ require([
         });
 
         // Star and watch count
-        $.getJSON("https://api.github.com/repos/"+githubId)
+        $.getJSON("https://api.github.com/repos/"+state.githubId)
         .done(function(repo) {
             $book.find(".count-star span").text(repo.stargazers_count);
             $book.find(".count-watch span").text(repo.subscribers_count);

assets/javascript/core/progress.js

@@ -1,11 +1,12 @@
 define([
     "lodash",
     "jQuery",
-    "utils/storage"
-], function(_, $, storage) {
+    "utils/storage",
+    "core/state"
+], function(_, $, storage, state) {
     // Get current level
     var getCurrentLevel = function() {
-        return $(".book").data("level");
+        return state().level;
     };
 
     // Return all levels
@@ -43,6 +44,10 @@ define([
 
     // Show progress
     var showProgress = function() {
+        // Mark current progress
+        markProgress(getCurrentLevel(), true);
+        
+        // Update progress
         var progress = getProgress();
         var $summary = $(".book-summary");
 

assets/javascript/core/state.js

@@ -0,0 +1,14 @@
+define([
+    "jQuery"
+], function() {
+    return function() {
+        var $book = $(".book");
+
+        return {
+            '$book': $book,
+
+            'githubId': $book.data("github"),
+            'level': $book.data("level")
+        };
+    };
+});

assets/stylesheets/book/summary.less

@@ -29,9 +29,17 @@
                     background: #35393b;
                 }
 
+                i.fa-check {
+                    display: none;
+                }
+
                 &.done {
                     > a {
-                        color: green;
+                        color: @brand-success;
+
+                        i {
+                            display: inline;
+                        }
                     }
                 }
                 

templates/includes/book/summary.html

@@ -1,25 +1,32 @@
 <div class="book-summary">
     <ul class="summary">
-    <li data-level="0">
-        <a href="{{ basePath }}/README.html">Introduction</a>
-    </li>
-    <li>
-        <a href="https://github.com/{{ githubAuthor }}" target="blank">About the author</a>
-    </li>
-    <li class="divider"></li>
-    {% for item in summary.chapters %}
-        <li {% if item._path == _input %}class="active"{% endif %} data-level="{{ item.level }}">
-            <a href="{{ basePath }}/{{ item.path }}">{{ item.title }}</a>
-            {% if item.articles.length > 0 %}
-            <ul class="articles">
-            {% for article in item.articles %}
-                <li {% if article._path == _input %}class="active"{% endif %} data-level="{{ article.level }}">
-                    <a href="{{ basePath }}/{{ article.path }}">{{ article.title }}</a>
-                </li>
-            {% endfor %}
-            </ul>
-            {% endif %}
+        <li>
+            <a href="https://github.com/{{ githubAuthor }}" target="blank">About the author</a>
         </li>
-    {% endfor %}
+        <li>
+            <a href="https://github.com/{{ githubAuthor }}/issues" target="blank">Questions and Issues</a>
+        </li>
+        <li class="divider"></li>
+        <li data-level="0">
+            <a href="{{ basePath }}/README.html"><i class="fa fa-check"></i> Introduction</a>
+        </li>
+        {% for item in summary.chapters %}
+            <li {% if item._path == _input %}class="active"{% endif %} data-level="{{ item.level }}">
+                <a href="{{ basePath }}/{{ item.path }}">
+                    <i class="fa fa-check"></i> {{ item.title }}
+                </a>
+                {% if item.articles.length > 0 %}
+                <ul class="articles">
+                    {% for article in item.articles %}
+                        <li {% if article._path == _input %}class="active"{% endif %} data-level="{{ article.level }}">
+                            <a href="{{ basePath }}/{{ article.path }}">
+                                <i class="fa fa-check"></i> {{ article.title }}
+                            </a>
+                        </li>
+                    {% endfor %}
+                </ul>
+                {% endif %}
+            </li>
+        {% endfor %}
     </ul>
 </div>

templates/page.html

@@ -4,7 +4,7 @@
 {% block description %}{% endblock %}
 {% block robots %}index, follow{% endblock %}
 {% block content %}
-<div class="book {% if _input == "README.md" %}with-summary{% endif %}" data-github="{{ githubId }}">
+<div class="book {% if _input == "README.md" %}with-summary{% endif %}" data-github="{{ githubId }}" data-level="{{ navigation.level }}">
     {% include "includes/book/header.html" %}
     {% include "includes/book/summary.html" %}