group utility methods/objects while sorting stuff for the side bar

docs/collect.js

@@ -31,7 +31,24 @@ var work = callback.chain(function () {
 }).onError(function(err){
   console.log('ERROR:', err.stack || err);
 }).onDone(function(){
-  keywordPages.sort(function(a,b){ return a.name == b.name ? 0:(a.name < b.name ? -1 : 1);});
+  keywordPages.sort(function(a,b){
+    // supper ugly comparator that orders all utility methods and objects before all the other stuff
+    // like widgets, directives, services, etc.
+    // Mother of all beatiful code please forgive me for the sin that this code certainly is.
+
+    if (a.name === b.name) return 0;
+    if (a.name === 'angular') return -1;
+    if (b.name === 'angular') return 1;
+
+    function namespacedName(page) {
+      return (page.name.match(/\./g).length === 1 && page.type !== 'overview' ? '0' : '1') + page.name;
+    }
+
+    var namespacedA = namespacedName(a),
+        namespacedB = namespacedName(b);
+
+    return namespacedA < namespacedB ? -1 : 1;
+  });
   writeDoc(documentation.pages);
   mergeTemplate('docs-data.js', 'docs-data.js', {JSON:JSON.stringify(keywordPages)}, callback.chain());
   mergeTemplate('docs-scenario.js', 'docs-scenario.js', documentation, callback.chain());
@@ -347,6 +364,7 @@ function processNgDoc(documentation, doc) {
     documentation.pages.push(doc);
     keywordPages.push({
       name:doc.name,
+      type: doc.ngdoc,
       keywords:keywords(doc.raw.text)
     });
   }

docs/docs.css

@@ -67,7 +67,7 @@ a {
 }
 
 #sidebar {
-  padding: 10px;
+  padding: 10px 10px 20px 10px;
   background-color: #EEE;
   border-right: 1px solid #DDD;
 }
@@ -114,6 +114,14 @@ a {
   font-size: 1.2em;
 }
 
+#sidebar ul li.level-1.level-angular {
+  font-family: monospace;
+  font-weight: normal;
+  font-size: 1em;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 #sidebar ul li.level-1 {
   margin-left: 1em;
   margin-top: 5px;

docs/docs.js

@@ -22,9 +22,12 @@ function DocsController($location, $browser, $window) {
   };
   
   this.getClass = function(page) {
-    var depth = page.name.split(/\./).length - 1;
+    var depth = page.name.split(/\./).length - 1,
-    return 'level-' + depth + 
+        cssClass = 'level-' + depth + (page.name == this.getTitle() ? ' selected' : '');
-     (page.name == this.getTitle() ? ' selected' : '');
+
+    if (depth == 1 && page.type !== 'overview') cssClass += ' level-angular';
+
+    return cssClass;
   };
 
   this.afterPartialLoaded = function() {