revamp the style guide item order mechanism to prevent problems with …

…items that have no order set, use the property key "order" instead of "sort", remove the sort function from the original theme (fixes avalanchesass/avalanche#183)

index.js

@@ -30,24 +30,32 @@ module.exports = function (themeopts) {
         bodycss: 'background:none;border:0;clip:auto;display:block;height:auto;margin:0;padding:16px;position:static;width:auto'
     }, themeopts.examples);
 
-    var compareDocs = function (a, b) {
-        if (a.sort < b.sort)
-            return -1;
-        else if (a.sort > b.sort)
-            return 1;
-        else 
-            return 0;
-    };
-
-    var sortDocs = function (docs) {
-        docs.sort(compareDocs);
+    var orderDocs = function (docs) {
+        docs.forEach(function (value, index) {
+            // Make the source order the default order.
+            // Because there are problems when sorting values with a default
+            // order of 0 we set the index (=source order) as default order.
+            // That way items with a explicitly set order could be lower ranked
+            // than other items with no order (default 0) so we add a big
+            // numnber to the explicitly set order to ensure it is higher than
+            // the source order index.
+            value.order = value.order ? value.order + 999999 : index;
+        });
+        docs.sort(function (a, b) {
+            if (a.order < b.order)
+                return -1;
+            else if (a.order > b.order)
+                return 1;
+            else
+                return 0;
+        });
     };
 
-    var sortDocsRecursive = function (docs) {
-        sortDocs(docs);
+    var orderDocsRecursive = function (docs) {
+        orderDocs(docs);
         docs.forEach(function (doc) {
             if (doc.children) {
-                sortDocsRecursive(doc.children);
+                orderDocsRecursive(doc.children);
             }
         });
     };
@@ -70,7 +78,7 @@ module.exports = function (themeopts) {
                 else {
                     // set examples options
                     docs.opts = ext({}, docs.opts, docs.themeopts);
-                    sortDocsRecursive(docs.list);
+                    orderDocsRecursive(docs.list);
                     // set compiled template
                     docs.template = ejs.compile(contents)(docs);
 

template.ejs

@@ -30,7 +30,7 @@
         function menu(children, depth) {
           if (depth < 3) { %>
             <ul class="c-main-menu c-main-menu--<%= depth %>">
-              <% children.sort(sort).forEach(function (child) {
+              <% children.forEach(function (child) {
                 if (child.name) { %>
                   <li class="c-main-menu__item c-main-menu__item--<%= depth %>">
                     <a href="#<%- child.name %>" class="c-main-menu__link c-main-menu__link--<%= depth %>"><%= child.title %></a>
@@ -45,7 +45,7 @@
         function sections(children, depth) {
           depth = Math.max(Math.min(depth, 6), 1);
 
-          children.sort(sort).forEach(function (child) { %>
+          children.forEach(function (child) { %>
             <section<% if (child.name) { %> id="<%= child.name %>"<% } %> class="c-section">
               <% if (child.title) { %><%- '<h' + depth + '>' %><%= child.title %><%- '</h' + depth + '>' %><% } %>
               <div class="c-section__inner">
@@ -56,10 +56,6 @@
           <% });
         }
 
-        function sort(childA, childB) {
-          return (childA.order || 0) - (childB.order || 0);
-        }
-
       %>
     <script src="prism.js"></script>
     <script src="examples.js"></script>