chore(ngdoc): wrap all pages inside of a container tag for easy styling

5 files changed, 184 insertions, 151 deletions

diff --git a/docs/content/tutorial/index.ngdoc b/docs/content/tutorial/index.ngdoc
index 25390621..3c0eebf8 100644
--- a/docs/content/tutorial/index.ngdoc
+++ b/docs/content/tutorial/index.ngdoc
@@ -1,117 +1,115 @@
 @ngdoc overview
-@name Tutorial
+@name Tutorial: Index
 @description
 
-<div class="tutorial-page tutorial-page-no-nav">
-  A great way to get introduced to AngularJS is to work through this tutorial, which walks you through
-  the construction of an AngularJS web app. The app you will build is a catalog that displays a list
-  of Android devices, lets you filter the list to see only devices that interest you, and then view
-  details for any device.
-
-  <img class="diagram" src="img/tutorial/catalog_screen.png" width="488" height="413">
-
-  Work through the tutorial to see how Angular makes browsers smarter — without the use of extensions
-  or plug-ins. As you work through the tutorial, you will:
-
-  * See examples of how to use client-side data binding and dependency injection to build dynamic
-  views of data that change immediately in response to user actions.
-  * See how Angular creates listeners on your data without the need for DOM manipulation.
-  * Learn a better, easier way to test your web apps.
-  * Learn how to use Angular services to make common web tasks, such as getting data into your app,
-  easier.
-
-  And all of this works in any browser without modification to the browser!
-
-  When you finish the tutorial you will be able to:
-
-  * Create a dynamic application that works in any browser.
-  * Define the differences between Angular and common JavaScript frameworks.
-  * Understand how data binding works in AngularJS.
-  * Use the angular-seed project to quickly boot-strap your own projects.
-  * Create and run tests.
-  * Identify resources for learning more about AngularJS.
-
-  The tutorial guides you through the entire process of building a simple application, including
-  writing and running unit and end-to-end tests. Experiments at the end of each step provide
-  suggestions for you to learn more about AngularJS and the application you are building.
-
-  You can go through the whole tutorial in a couple of hours or you may want to spend a pleasant day
-  really digging into it. If you're looking for a shorter introduction to AngularJS, check out the
-  {@link misc/started Getting Started} document.
-
-
-
-
-
-
-
-  # Working with the code
-
-  You can follow this tutorial and hack on the code in either the Mac/Linux or the Windows
-  environment. The tutorial relies on the use of Git versioning system for source code management.
-  You don't need to know anything about Git to follow the tutorial. Select one of the tabs below
-  and follow the instructions for setting up your computer.
-
-  <div class="tabbable" show="true">
-    <div class="tab-pane well" id="git-mac" title="Git on Mac/Linux">
-      <ol>
-        <li><p>You will need Node.js and Karma to run unit tests, so please verify that you have
+A great way to get introduced to AngularJS is to work through this tutorial, which walks you through
+the construction of an AngularJS web app. The app you will build is a catalog that displays a list
+of Android devices, lets you filter the list to see only devices that interest you, and then view
+details for any device.
+
+<img class="diagram" src="img/tutorial/catalog_screen.png" width="488" height="413">
+
+Work through the tutorial to see how Angular makes browsers smarter — without the use of extensions
+or plug-ins. As you work through the tutorial, you will:
+
+* See examples of how to use client-side data binding and dependency injection to build dynamic
+views of data that change immediately in response to user actions.
+* See how Angular creates listeners on your data without the need for DOM manipulation.
+* Learn a better, easier way to test your web apps.
+* Learn how to use Angular services to make common web tasks, such as getting data into your app,
+easier.
+
+And all of this works in any browser without modification to the browser!
+
+When you finish the tutorial you will be able to:
+
+* Create a dynamic application that works in any browser.
+* Define the differences between Angular and common JavaScript frameworks.
+* Understand how data binding works in AngularJS.
+* Use the angular-seed project to quickly boot-strap your own projects.
+* Create and run tests.
+* Identify resources for learning more about AngularJS.
+
+The tutorial guides you through the entire process of building a simple application, including
+writing and running unit and end-to-end tests. Experiments at the end of each step provide
+suggestions for you to learn more about AngularJS and the application you are building.
+
+You can go through the whole tutorial in a couple of hours or you may want to spend a pleasant day
+really digging into it. If you're looking for a shorter introduction to AngularJS, check out the
+{@link misc/started Getting Started} document.
+
+
+
+
+
+
+
+# Working with the code
+
+You can follow this tutorial and hack on the code in either the Mac/Linux or the Windows
+environment. The tutorial relies on the use of Git versioning system for source code management.
+You don't need to know anything about Git to follow the tutorial. Select one of the tabs below
+and follow the instructions for setting up your computer.
+
+<div class="tabbable" show="true">
+  <div class="tab-pane well" id="git-mac" title="Git on Mac/Linux">
+    <ol>
+      <li><p>You will need Node.js and Karma to run unit tests, so please verify that you have
+      <a href="http://nodejs.org/">Node.js</a> v0.8 or better installed
+      and that the <code>node</code> executable is on your <code>PATH</code> by running the following
+      command in a terminal window:</p>
+      <pre>node --version</pre>
+      <p>Additionally install <a href="http://karma-runner.github.io/">Karma</a> if you
+      don't have it already:</p>
+      <pre>npm install -g karma</pre>
+      <li><p>You'll also need Git, which you can get from
+         <a href="http://git-scm.com/download">the Git site</a>.</p></li>
+      <li><p>Clone the angular-phonecat repository located at <a
+href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
+      <pre>git clone git://github.com/angular/angular-phonecat.git</pre>
+      <p>This command creates the <code>angular-phonecat</code> directory in your current
+directory.</p></li>
+      <li><p>Change your current directory to <code>angular-phonecat</code>:</p>
+      <pre>cd angular-phonecat</pre>
+      <p>The tutorial instructions assume you are running all commands from the <code>angular-phonecat</code>
+directory.</p></li>
+      <li><p>You will need an http server running on your system. Mac and Linux machines typically
+have Apache pre-installed, but If you don't already have one installed, you can use <code>node</code>
+to run <code>scripts/web-server.js</code>,  a simple bundled http server.</p></li>
+    </ol>
+  </div>
+
+  <div class="tab-pane well" id="git-win" title="Git on Windows">
+    <ol>
+      <li><p>You will need Node.js and Karma to run unit tests, so please verify that you have
         <a href="http://nodejs.org/">Node.js</a> v0.8 or better installed
         and that the <code>node</code> executable is on your <code>PATH</code> by running the following
         command in a terminal window:</p>
         <pre>node --version</pre>
         <p>Additionally install <a href="http://karma-runner.github.io/">Karma</a> if you
-        don't have it already:</p>
+           don't have it already:</p>
         <pre>npm install -g karma</pre>
-        <li><p>You'll also need Git, which you can get from
-           <a href="http://git-scm.com/download">the Git site</a>.</p></li>
-        <li><p>Clone the angular-phonecat repository located at <a
-  href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
-        <pre>git clone git://github.com/angular/angular-phonecat.git</pre>
-        <p>This command creates the <code>angular-phonecat</code> directory in your current
-  directory.</p></li>
-        <li><p>Change your current directory to <code>angular-phonecat</code>:</p>
-        <pre>cd angular-phonecat</pre>
-        <p>The tutorial instructions assume you are running all commands from the <code>angular-phonecat</code>
-  directory.</p></li>
-        <li><p>You will need an http server running on your system. Mac and Linux machines typically
-  have Apache pre-installed, but If you don't already have one installed, you can use <code>node</code>
-  to run <code>scripts/web-server.js</code>,  a simple bundled http server.</p></li>
-      </ol>
-    </div>
-
-    <div class="tab-pane well" id="git-win" title="Git on Windows">
-      <ol>
-        <li><p>You will need Node.js and Karma to run unit tests, so please verify that you have
-          <a href="http://nodejs.org/">Node.js</a> v0.8 or better installed
-          and that the <code>node</code> executable is on your <code>PATH</code> by running the following
-          command in a terminal window:</p>
-          <pre>node --version</pre>
-          <p>Additionally install <a href="http://karma-runner.github.io/">Karma</a> if you
-             don't have it already:</p>
-          <pre>npm install -g karma</pre>
-        </li>
-        <li><p>You'll also need Git, which you can get from
-                 <a href="http://git-scm.com/download">the Git site</a>.</p></li>
-        <li><p>Clone the angular-phonecat repository located at <a
-        href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
-        <pre>git clone git://github.com/angular/angular-phonecat.git</pre>
-        <p>This command creates the <code>angular-phonecat</code> directory in your current directory.</p></li>
-        <li><p>Change your current directory to <code>angular-phonecat</code>:</p>
-        <pre>cd angular-phonecat</pre>
-        <p>The tutorial instructions assume you are running all commands from the <code>angular-phonecat</code>
-  directory.</p>
-        <p>You should run all <code>git</code> commands from Git bash.</p>
-        <p>Other commands like <code>test.bat</code> or <code>e2e-test.bat</code> should be
-  executed from the Windows command line.</li>
-        <li><p>You need an http server running on your system, but if you don't already have one
-  already installed, you can use <code>node</code> to run <code>scripts\web-server.js</code>, a simple
-  bundled http server.</p></li>
-      </ol>
-    </div>
-
-  The last thing to do is to make sure your computer has a web browser and a good text editor
-  installed. Now, let's get some cool stuff done!
-
-  {@link step_00 <span class="btn btn-primary">Get Started!</span>}
-</div>
+      </li>
+      <li><p>You'll also need Git, which you can get from
+               <a href="http://git-scm.com/download">the Git site</a>.</p></li>
+      <li><p>Clone the angular-phonecat repository located at <a
+      href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
+      <pre>git clone git://github.com/angular/angular-phonecat.git</pre>
+      <p>This command creates the <code>angular-phonecat</code> directory in your current directory.</p></li>
+      <li><p>Change your current directory to <code>angular-phonecat</code>:</p>
+      <pre>cd angular-phonecat</pre>
+      <p>The tutorial instructions assume you are running all commands from the <code>angular-phonecat</code>
+directory.</p>
+      <p>You should run all <code>git</code> commands from Git bash.</p>
+      <p>Other commands like <code>test.bat</code> or <code>e2e-test.bat</code> should be
+executed from the Windows command line.</li>
+      <li><p>You need an http server running on your system, but if you don't already have one
+already installed, you can use <code>node</code> to run <code>scripts\web-server.js</code>, a simple
+bundled http server.</p></li>
+    </ol>
+  </div>
+
+The last thing to do is to make sure your computer has a web browser and a good text editor
+installed. Now, let's get some cool stuff done!
+
+{@link step_00 <span class="btn btn-primary">Get Started!</span>}
diff --git a/docs/content/tutorial/the_end.ngdoc b/docs/content/tutorial/the_end.ngdoc
index 142fb2b8..a4fd72a3 100644
--- a/docs/content/tutorial/the_end.ngdoc
+++ b/docs/content/tutorial/the_end.ngdoc
@@ -2,22 +2,20 @@
 @name Tutorial: The End
 @description
 
-<div class="tutorial-page tutorial-page-no-nav">
-  Our application is now complete. Feel free to experiment with the code further, and jump back to
-  previous steps using the `git checkout` command.
+Our application is now complete. Feel free to experiment with the code further, and jump back to
+previous steps using the `git checkout` command.
 
-  For more details and examples of the Angular concepts we touched on in this tutorial, see the
-  {@link guide/ Developer Guide}.
+For more details and examples of the Angular concepts we touched on in this tutorial, see the
+{@link guide/ Developer Guide}.
 
-  For several more examples of code, see the {@link cookbook/ Cookbook}.
+For several more examples of code, see the {@link cookbook/ Cookbook}.
 
-  When you are ready to start developing a project using Angular, we recommend that you bootstrap
-  your development with the {@link https://github.com/angular/angular-seed angular-seed} project.
+When you are ready to start developing a project using Angular, we recommend that you bootstrap
+your development with the {@link https://github.com/angular/angular-seed angular-seed} project.
 
-  We hope this tutorial was useful to you and that you learned enough about Angular to make you want
-  to learn more. We especially hope you are inspired to go out and develop Angular web apps of your
-  own, and that you might be interested in {@link misc/contribute contributing} to Angular.
+We hope this tutorial was useful to you and that you learned enough about Angular to make you want
+to learn more. We especially hope you are inspired to go out and develop Angular web apps of your
+own, and that you might be interested in {@link misc/contribute contributing} to Angular.
 
-  If you have questions or feedback or just want to say "hi", please post a message at {@link
-  https://groups.google.com/forum/#!forum/angular}.
-</div>
+If you have questions or feedback or just want to say "hi", please post a message at {@link
+https://groups.google.com/forum/#!forum/angular}.
diff --git a/docs/spec/ngdocSpec.js b/docs/spec/ngdocSpec.js
index 7a038e89..128e0106 100644
--- a/docs/spec/ngdocSpec.js
+++ b/docs/spec/ngdocSpec.js
@@ -59,10 +59,10 @@ describe('ngdoc', function() {
             '@param {function(number, string=)} d fn with optional arguments');
         doc.parse();
         expect(doc.param).toEqual([
-           {name:'a', description:'<p>short</p>', type:'*', optional:false, 'default':undefined},
-           {name:'b', description:'<p>med</p>', type:'Type', optional:false, 'default':undefined},
-           {name:'c', description:'<p>long\nline</p>', type:'Class', optional:true, 'default':'2'},
-           {name:'d', description:'<p>fn with optional arguments</p>',
+           {name:'a', description:'<div class="a-page"><p>short</p></div>', type:'*', optional:false, 'default':undefined},
+           {name:'b', description:'<div class="a-page"><p>med</p></div>', type:'Type', optional:false, 'default':undefined},
+           {name:'c', description:'<div class="a-page"><p>long\nline</p></div>', type:'Class', optional:true, 'default':'2'},
+           {name:'d', description:'<div class="a-page"><p>fn with optional arguments</p></div>',
              type: 'function(number, string=)', optional: false, 'default':undefined}
          ]);
       });
@@ -72,7 +72,7 @@ describe('ngdoc', function() {
         doc.parse();
         expect(doc.returns).toEqual({
           type: 'Type',
-          description: '<p>text <em>bold</em>.</p>'
+          description: '<div class="a-page"><p>text <em>bold</em>.</p></div>'
         });
       });
 
@@ -138,11 +138,25 @@ describe('ngdoc', function() {
     it('should not replace anything in <pre>, but escape the html escape the content', function() {
       expect(new Doc().markdown('bah x\n<pre>\n<b>angular</b>.k\n</pre>\n asdf x')).
         toEqual(
-            '<p>bah x\n' +
+            '<div class="docs-page"><p>bah x\n' +
             '<pre class="prettyprint linenums">\n' +
             '&lt;b&gt;angular&lt;/b&gt;.k\n' +
             '</pre>\n' +
-            ' asdf x</p>');
+            ' asdf x</p></div>');
+    });
+
+    it('should wrap everything inside a container tag', function() {
+      var doc = new Doc('@name superman').parse();
+      var content = doc.markdown('hello');
+
+      expect(content).toMatch('<div class="superman-page"><p>hello</p></div>');
+    });
+
+    it('should use the content before a colon as the name prefix for the className of the tag container', function() {
+      var doc = new Doc('@name super: man').parse();
+      var content = doc.markdown('hello');
+
+      expect(content).toMatch('<div class="super-page super-man-page"><p>hello</p></div>');
     });
 
     it('should replace text between two <pre></pre> tags', function() {
@@ -162,11 +176,11 @@ describe('ngdoc', function() {
           '\ngit bla bla\n</doc:tutorial-instruction>\n' +
         '</doc:tutorial-instructions>')).toEqual(
 
-        '<p>before<div class="tabbable">\n' +
+        '<div class="docs-page"><p>before<div class="tabbable">\n' +
           '<div class="tab-pane well" id="git-mac" ng:model="Git on Mac/Linux">\n' +
           'git bla bla\n' +
           '</doc:tutorial-instruction>\n' +
-        '</doc:tutorial-instructions></p>');
+        '</doc:tutorial-instructions></p></div>');
       });
 
     it('should unindent text before processing based on the second line', function() {
@@ -290,7 +304,7 @@ describe('ngdoc', function() {
           name : 'number',
           optional: false,
           'default' : undefined,
-          description : '<p>Number \nto format.</p>' }]);
+          description : '<div class="a-page"><p>Number \nto format.</p></div>' }]);
       });
 
       it('should parse with default and optional', function() {
@@ -301,7 +315,7 @@ describe('ngdoc', function() {
           name : 'fractionSize',
           optional: true,
           'default' : '2',
-          description : '<p>desc</p>' }]);
+          description : '<div class="a-page"><p>desc</p></div>' }]);
       });
     });
 
@@ -311,8 +325,8 @@ describe('ngdoc', function() {
         doc.ngdoc = 'service';
         doc.parse();
         expect(doc.requires).toEqual([
-          {name:'$service', text:'<p>for \n<code>A</code></p>'},
-          {name:'$another', text:'<p>for <code>B</code></p>'}]);
+          {name:'$service', text:'<div class="a-page"><p>for \n<code>A</code></p></div>'},
+          {name:'$another', text:'<div class="a-page"><p>for <code>B</code></p></div>'}]);
         expect(doc.html()).toContain('<a href="api/ng.$service">$service</a>');
         expect(doc.html()).toContain('<a href="api/ng.$another">$another</a>');
         expect(doc.html()).toContain('<p>for \n<code>A</code></p>');
@@ -364,7 +378,7 @@ describe('ngdoc', function() {
         var doc = new Doc("@name a\n@property {string} name desc rip tion");
         doc.parse();
         expect(doc.properties[0].name).toEqual('name');
-        expect(doc.properties[0].description).toEqual('<p>desc rip tion</p>');
+        expect(doc.properties[0].description).toEqual('<div class="a-page"><p>desc rip tion</p></div>');
       });
 
       it('should parse @property with type and description both', function() {
@@ -372,7 +386,7 @@ describe('ngdoc', function() {
         doc.parse();
         expect(doc.properties[0].name).toEqual('name');
         expect(doc.properties[0].type).toEqual('bool');
-        expect(doc.properties[0].description).toEqual('<p>desc rip tion</p>');
+        expect(doc.properties[0].description).toEqual('<div class="a-page"><p>desc rip tion</p></div>');
       });
 
     });
@@ -395,26 +409,26 @@ describe('ngdoc', function() {
       it('should parse @returns with type and description', function() {
         var doc = new Doc("@name a\n@returns {string} descrip tion");
         doc.parse();
-        expect(doc.returns).toEqual({type: 'string', description: '<p>descrip tion</p>'});
+        expect(doc.returns).toEqual({type: 'string', description: '<div class="a-page"><p>descrip tion</p></div>'});
       });
 
       it('should parse @returns with complex type and description', function() {
         var doc = new Doc("@name a\n@returns {function(string, number=)} description");
         doc.parse();
-        expect(doc.returns).toEqual({type: 'function(string, number=)', description: '<p>description</p>'});
+        expect(doc.returns).toEqual({type: 'function(string, number=)', description: '<div class="a-page"><p>description</p></div>'});
       });
 
       it('should transform description of @returns with markdown', function() {
         var doc = new Doc("@name a\n@returns {string} descrip *tion*");
         doc.parse();
-        expect(doc.returns).toEqual({type: 'string', description: '<p>descrip <em>tion</em></p>'});
+        expect(doc.returns).toEqual({type: 'string', description: '<div class="a-page"><p>descrip <em>tion</em></p></div>'});
       });
 
       it('should support multiline content', function() {
         var doc = new Doc("@name a\n@returns {string} description\n new line\n another line");
         doc.parse();
         expect(doc.returns).
-          toEqual({type: 'string', description: '<p>description\nnew line\nanother line</p>'});
+          toEqual({type: 'string', description: '<div class="a-page"><p>description\nnew line\nanother line</p></div>'});
       });
     });
 
@@ -423,18 +437,18 @@ describe('ngdoc', function() {
         var doc = new Doc("@name a\n@description <pre><b>abc</b></pre>");
         doc.parse();
         expect(doc.description).
-          toBe('<pre class="prettyprint linenums">&lt;b&gt;abc&lt;/b&gt;</pre>');
+          toBe('<div class="a-page"><pre class="prettyprint linenums">&lt;b&gt;abc&lt;/b&gt;</pre></div>');
       });
 
       it('should support multiple pre blocks', function() {
         var doc = new Doc("@name a\n@description foo \n<pre>abc</pre>\n#bah\nfoo \n<pre>cba</pre>");
         doc.parse();
         expect(doc.description).
-          toBe('<p>foo \n' +
+          toBe('<div class="a-page"><p>foo \n' +
                '<pre class="prettyprint linenums">abc</pre>\n\n' +
                '<h1 id="bah">bah</h1>\n\n' +
                '<p>foo \n' +
-               '<pre class="prettyprint linenums">cba</pre>');
+               '<pre class="prettyprint linenums">cba</pre></div>');
 
       });
 
@@ -477,7 +491,7 @@ describe('ngdoc', function() {
       it('should not remove {{}}', function() {
         var doc = new Doc('@name a\n@example text {{ abc }}');
         doc.parse();
-        expect(doc.example).toEqual('<p>text {{ abc }}</p>');
+        expect(doc.example).toEqual('<div class="a-page"><p>text {{ abc }}</p></div>');
       });
     });
 
@@ -496,10 +510,12 @@ describe('ngdoc', function() {
         doc.parse();
         expect(doc.html()).toContain('<h3>Method\'s <code>this</code></h3>\n' +
             '<div>' +
+            '<div class="a-page">' +
             '<p>I am self.</p>' +
+            '</div>' +
             '</div>\n');
         expect(doc.html()).toContain('<h3>Method\'s <code>this</code></h3>\n' +
-            '<div><p>I am self.</p></div>');
+            '<div><div class="a-page"><p>I am self.</p></div></div>');
       });
     });
 
diff --git a/docs/src/ngdoc.js b/docs/src/ngdoc.js
index dc75d5cb..f5f22ee8 100644
--- a/docs/src/ngdoc.js
+++ b/docs/src/ngdoc.js
@@ -240,7 +240,25 @@ Doc.prototype = {
         });
     });
     text = parts.join('');
-    text = markdown.makeHtml(text);
+
+    function prepareClassName(text) {
+      return text.toLowerCase().replace(/[_\W]+/g, '-');
+    };
+
+    var pageClassName, suffix = '-page';
+    if(this.name) {
+      var split = this.name.match(/^\s*(.+?)\s*:\s*(.+)/);
+      if(split && split.length > 1) {
+        var before = prepareClassName(split[1]);
+        var after = prepareClassName(split[2]);
+        pageClassName = before + suffix + ' ' + before + '-' + after + suffix;
+      }
+    }
+    pageClassName = pageClassName || prepareClassName(this.name || 'docs') + suffix;
+
+    text = '<div class="' + pageClassName + '">' + 
+             markdown.makeHtml(text) +
+           '</div>';
     text = text.replace(/(?:<p>)?(REPLACEME\d+)(?:<\/p>)?/g, function(_, id) {
       return placeholderMap[id];
     });
diff --git a/docs/src/templates/css/docs.css b/docs/src/templates/css/docs.css
index 01aa2376..a34a197f 100644
--- a/docs/src/templates/css/docs.css
+++ b/docs/src/templates/css/docs.css
@@ -293,13 +293,16 @@ ul.events > li > h3 {
   z-index:1031;
 }
 
+.tutorial-index-page,
+.tutorial-the-end-page {
+  padding-top:50px;
+}
+
 .tutorial-page {
   position:relative;
 }
-.tutorial-page-no-nav {
-  padding-top:50px;
-}
-.tutorial-page-no-nav .improve-docs {
+
+.tutorial-page .improve-docs {
   position:absolute;
   top:0;
   right:0;