Update development section of the docs

docs/html/_sources/index.txt

@@ -50,7 +50,7 @@ The *index.html* file inside the Converse.js folder serves as a nice usable
 example of this.
 
 These minified files provide the same demo-like functionality as is available
-on the `conversejs.org`_ website. Useful for testing or demoing, but not very
+on the `conversejs.org <http://conversejs.org>`_ website. Useful for testing or demoing, but not very
 practical.
 
 You'll most likely want to implement some kind of single-signon solution for
@@ -210,6 +210,12 @@ connection object.
 Development
 ===========
 
+If you want to work with the non-minified Javascript and CSS files you'll soon
+notice that there are references to a missing *components* folder. Please
+follow the instructions below to create this folder and fetch Converse's
+3rd-party dependencies.
+
+
 Install Node.js and development dependencies
 ============================================
 
@@ -219,27 +225,39 @@ which depend on Node.js and npm (the Node package manager).
 If you don't have Node.js installed, you can download and install the latest
 version `here <https://nodejs.org/download>`_.
 
-Once you have Node.js installed, run the following command in the Converse.js
+Once you have Node.js installed, run the following command inside the Converse.js
 directory:
 
 ::
 
     npm install
 
+This will install all the development dependencies for Converse.js. If you are
+curious to know what these are, take a look at whats under the *devDependencies* key in 
+`package.json <https://github.com/jcbrand/converse.js/blob/master/package.json>`.
+
 Install 3rd party dependencies
 ==============================
 
-Now that we have Grunt and Bower, you can install and configure Converse's
-3rd party dependencies with the following command:
+After running ``npm install``, you will now have Grunt and Bower installed.
+
+We use Bower to manage Converse's front-end dependencies (e.g. Javascript that
+should get loaded in the browser).
+
+To fetch these dependencies, run:
 
 ::
 
     grunt fetch
 
+This will call Bower in the background to fetch all the front-end
+dependencies (like backbone.js, strophe.js etc.) and then put them in the
+*components* folder.
+
 With AMD and require.js (recommended)
 =====================================
 
-Converse.js uses `require.js`_ to asynchronously load dependencies.
+Converse.js uses `require.js <http://requirejs.org>`_ to asynchronously load dependencies.
 
 If you want to develop or customize converse.js, you'll want to load the
 non-minified javascript files.
@@ -580,9 +598,6 @@ making sure to also paste the JSON data as value to the "locale_data" key.
 Congratulations, you've now succesfully added your translations. Sorry for all
 those hoops you had to jump through.
 
-
-.. _`conversejs.org`: http://conversejs.org
-.. _`require.js`: http://requirejs.org
 .. _`read more about require.js's optimizer here`: http://requirejs.org/docs/optimization.html
 .. _`HTTP`: https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
 .. _`XMPP`: https://en.wikipedia.org/wiki/Xmpp

docs/html/_static/stylesheet.css

@@ -7,6 +7,11 @@ by Jason Costello, @jsncostello
 @import url("../../../stylesheets/stylesheet.css");
 @import url(pygment_trac.css);
 
+div.body h1 {
+    margin-top: 1em;
+    font-size: 36px;
+}
+
 div.body,
 div.document {
     background-color: transparent;
@@ -28,4 +33,17 @@ h1#project_title a {
 
 h1 a {
     color: #0069ba;
-}
+}
+
+ul {
+    margin-bottom: 0;
+}
+
+
+tt.literal {
+    color: #222;
+    background-color: #fff;
+    font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
+    font-size: 14px;
+}
+

docs/html/index.html

@@ -262,23 +262,35 @@ connection object.</p>
 </div>
 <div class="section" id="development">
 <h1><a class="toc-backref" href="#id10">Development</a><a class="headerlink" href="#development" title="Permalink to this headline">¶</a></h1>
+<p>If you want to work with the non-minified Javascript and CSS files you&#8217;ll soon
+notice that there are references to a missing <em>components</em> folder. Please
+follow the instructions below to create this folder and fetch Converse&#8217;s
+3rd-party dependencies.</p>
 <div class="section" id="install-node-js-and-development-dependencies">
 <h2><a class="toc-backref" href="#id11">Install Node.js and development dependencies</a><a class="headerlink" href="#install-node-js-and-development-dependencies" title="Permalink to this headline">¶</a></h2>
 <p>We use development tools (<a class="reference external" href="http://gruntjs.com">Grunt</a> and <a class="reference external" href="http://bower.io">Bower</a>)
 which depend on Node.js and npm (the Node package manager).</p>
 <p>If you don&#8217;t have Node.js installed, you can download and install the latest
 version <a class="reference external" href="https://nodejs.org/download">here</a>.</p>
-<p>Once you have Node.js installed, run the following command in the Converse.js
+<p>Once you have Node.js installed, run the following command inside the Converse.js
 directory:</p>
 <div class="highlight-python"><pre>npm install</pre>
 </div>
+<p>This will install all the development dependencies for Converse.js. If you are
+curious to know what these are, take a look at whats under the <em>devDependencies</em> key in
+<cite>package.json &lt;https://github.com/jcbrand/converse.js/blob/master/package.json&gt;</cite>.</p>
 </div>
 <div class="section" id="install-3rd-party-dependencies">
 <h2><a class="toc-backref" href="#id12">Install 3rd party dependencies</a><a class="headerlink" href="#install-3rd-party-dependencies" title="Permalink to this headline">¶</a></h2>
-<p>Now that we have Grunt and Bower, you can install and configure Converse&#8217;s
-3rd party dependencies with the following command:</p>
+<p>After running <tt class="docutils literal"><span class="pre">npm</span> <span class="pre">install</span></tt>, you will now have Grunt and Bower installed.</p>
+<p>We use Bower to manage Converse&#8217;s front-end dependencies (e.g. Javascript that
+should get loaded in the browser).</p>
+<p>To fetch these dependencies, run:</p>
 <div class="highlight-python"><pre>grunt fetch</pre>
 </div>
+<p>This will call Bower in the background to fetch all the front-end
+dependencies (like backbone.js, strophe.js etc.) and then put them in the
+<em>components</em> folder.</p>
 </div>
 <div class="section" id="with-amd-and-require-js-recommended">
 <h2><a class="toc-backref" href="#id13">With AMD and require.js (recommended)</a><a class="headerlink" href="#with-amd-and-require-js-recommended" title="Permalink to this headline">¶</a></h2>

docs/html/static/stylesheet.css

@@ -33,3 +33,12 @@ h1 a {
 ul {
     margin-bottom: 0;
 }
+
+
+tt.literal {
+    color: #222;
+    background-color: #fff;
+    font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
+    font-size: 14px;
+}
+

docs/source/index.rst

@@ -50,7 +50,7 @@ The *index.html* file inside the Converse.js folder serves as a nice usable
 example of this.
 
 These minified files provide the same demo-like functionality as is available
-on the `conversejs.org`_ website. Useful for testing or demoing, but not very
+on the `conversejs.org <http://conversejs.org>`_ website. Useful for testing or demoing, but not very
 practical.
 
 You'll most likely want to implement some kind of single-signon solution for
@@ -210,6 +210,12 @@ connection object.
 Development
 ===========
 
+If you want to work with the non-minified Javascript and CSS files you'll soon
+notice that there are references to a missing *components* folder. Please
+follow the instructions below to create this folder and fetch Converse's
+3rd-party dependencies.
+
+
 Install Node.js and development dependencies
 ============================================
 
@@ -219,27 +225,39 @@ which depend on Node.js and npm (the Node package manager).
 If you don't have Node.js installed, you can download and install the latest
 version `here <https://nodejs.org/download>`_.
 
-Once you have Node.js installed, run the following command in the Converse.js
+Once you have Node.js installed, run the following command inside the Converse.js
 directory:
 
 ::
 
     npm install
 
+This will install all the development dependencies for Converse.js. If you are
+curious to know what these are, take a look at whats under the *devDependencies* key in 
+`package.json <https://github.com/jcbrand/converse.js/blob/master/package.json>`.
+
 Install 3rd party dependencies
 ==============================
 
-Now that we have Grunt and Bower, you can install and configure Converse's
-3rd party dependencies with the following command:
+After running ``npm install``, you will now have Grunt and Bower installed.
+
+We use Bower to manage Converse's front-end dependencies (e.g. Javascript that
+should get loaded in the browser).
+
+To fetch these dependencies, run:
 
 ::
 
     grunt fetch
 
+This will call Bower in the background to fetch all the front-end
+dependencies (like backbone.js, strophe.js etc.) and then put them in the
+*components* folder.
+
 With AMD and require.js (recommended)
 =====================================
 
-Converse.js uses `require.js`_ to asynchronously load dependencies.
+Converse.js uses `require.js <http://requirejs.org>`_ to asynchronously load dependencies.
 
 If you want to develop or customize converse.js, you'll want to load the
 non-minified javascript files.
@@ -580,9 +598,6 @@ making sure to also paste the JSON data as value to the "locale_data" key.
 Congratulations, you've now succesfully added your translations. Sorry for all
 those hoops you had to jump through.
 
-
-.. _`conversejs.org`: http://conversejs.org
-.. _`require.js`: http://requirejs.org
 .. _`read more about require.js's optimizer here`: http://requirejs.org/docs/optimization.html
 .. _`HTTP`: https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
 .. _`XMPP`: https://en.wikipedia.org/wiki/Xmpp