feat(ngdocs): adds image option to the navbar for custom image

This feature adds an image to the top navbar as well as an optional link
url for the title and image.

README.md

@@ -35,6 +35,9 @@ ngdocs: {
     html5Mode: true,
     startPage: '/api',
     title: "My Awesome Docs",
+    image: "path/to/my/image.png",
+    imageLink: "http://my-domain.com",
+    titleLink: "/api",
     analytics: {
           account: 'UA-08150815-0',
           domainName: 'my-domain.com'
@@ -96,6 +99,17 @@ Set first page to open.
 [default] 'true'  
 Whether or not to enable `html5Mode` in the docs application.  If true, then links will be absolute.  If false, they will be prefixed by `#/`.  
 
+####image
+A URL or relative path to an image file to use in the top navbar.
+
+####titleLink
+[default] no anchor tag is used
+Wraps the title text in an anchor tag with the provided URL.
+
+####imageLink
+[default] no anchor tag is used
+Wraps the navbar image in an anchor tag with the provided URL.
+
 ####animation
 [default] 'false' or 'true' for the included angularjs, angularjs 1.1.5+ from CDN or a folder like /vendor/angular-1.1.5/angular.js.  
 Set to 'true' to enable animations in the sidebar.

src/templates/css/docs.css

@@ -15,6 +15,15 @@ img.AngularJS-small {
   line-height: 18px
 }
 
+.header img {
+  max-height: 40px;
+  padding-right: 20px;
+}
+
+.header img+.brand {
+  padding: 10px 20px 10px 10px;
+}
+
 .clear-navbar {
   margin-top: 60px;
 }

src/templates/index.tmpl

@@ -82,8 +82,17 @@
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
-          <% if (title) { %>
-            <a class="brand"><%= title %></a>
+          <% if (image) { %>
+            <% if (imageLink) { %>
+              <a href="<%= imageLink %>">
+            <% } %>
+              <img class="pull-left" src="<%= image %>">
+            <% if (imageLink) { %>
+              </a>
+            <% } %>
+          <% } %>
+          <% if (title) {%>
+            <a <% if (titleLink) { %> href="<%= titleLink %>" <% } %> class="brand"><%= title %></a>
           <% } %>
           <ul class="nav">
             <li ng-repeat="(url, name) in sections" ng-class="{active: isActivePath(url)}">

tasks/grunt-ngdocs.js

@@ -59,6 +59,13 @@ module.exports = function(grunt) {
       }
     });
 
+    if (options.image) {
+      if (!/^((https?:)?\/\/|\.\.\/)/.test(options.image)) {
+        grunt.file.copy(options.image, path.join(options.dest, 'img', options.image));
+        options.image = "img/" + options.image;
+      }
+    }
+
     options.styles = _.map(options.styles, function(file) {
       if (/^((https?:)?\/\/|\.\.\/)/.test(file)) {
         return file;
@@ -137,6 +144,9 @@ module.exports = function(grunt) {
           analytics: options.analytics,
           navContent: options.navContent,
           title: options.title,
+          image: options.image,
+          titleLink: options.titleLink,
+          imageLink: options.imageLink,
           trackBy: function(id, animation) {
             return options.animation ? ' track by ' + id + (animation ? '" ng-animate="' + animation : '') : '';
           }