docs(quickstart): fix broken file-listings and reveal some systemjs when not verbose

Closes PRs #1304 and #1324 and issues #1303 and #1321

public/docs/ts/latest/quickstart.jade

@@ -345,15 +345,23 @@ code-example(format="").
     become more concerned about production qualities such as
     load times and memory footprint.
 
-  a(id="systemjs")
-  :marked
-    ### SystemJS Configuration
+a(id="systemjs")
+.l-main-section
+:marked
+  ### SystemJS Configuration
 
-    The QuickStart uses <a href="https://github.com/systemjs/systemjs" target="_blank">SystemJS</a>
-      to load application and library modules. 
+  The QuickStart uses <a href="https://github.com/systemjs/systemjs" target="_blank">SystemJS</a>
+  to load application and library modules.
+  
+  Add this `systemjs.config.js` file to the project root.
++makeExample('quickstart/ts/systemjs.config.1.js', null, 'systemjs.config.js')(format=".")
+
+.l-verbose-section
+  :marked
     There are alternatives that work just fine including the well-regarded 
     <a href="https://webpack.github.io/" target="_blank">webpack</a>.
-    SystemJS happens to be a good choice but we want to be clear that it was a choice and not a preference.
+    SystemJS happens to be a good choice. 
+    But we want to be clear that it was a *choice* and not a *preference*.
     
     All module loaders require configuration and all loader configuration 
     becomes complicated rather quickly as soon as the file structure diversifies and
@@ -364,19 +372,18 @@ code-example(format="").
     <a href="https://github.com/systemjs/systemjs/blob/master/docs/config-api.md" target="_blank">here</a>.
 
     With those cautions in mind, what are we doing in this QuickStart configuration?
-  +makeExample('quickstart/ts/systemjs.config.1.js', null, 'systemjs.config.js')(format=".")
-  :marked
+
     First, we create a map to tell SystemJS where to look when we import some module.
-    
-    Then, we give all our packages to SystemJS. That means all the project dependencies and our application package, `app`.
+    Then, we register all our packages to SystemJS: 
+    all the project dependencies and our application package, `app`.
     
   .l-sub-section
     :marked
-      Our QuickStart doesn't use the Reactive Extensions 
-      but any substantial application will want them
-      when working with observables.
-      We added the library here in QuickStart so we don't forget later.
+      Our QuickStart doesn't use all of the listed packages 
+      but any substantial application will want many of them
+      and all of the listed packages are required by at least one of the documentation samples.
       
+      There is no runtime harm in listing packages that we don't need as they will only be loaded when requested.
   :marked
     The `app` package tells SystemJS what to do when it sees a request for a 
     module from the `app/` folder. 
@@ -390,7 +397,7 @@ code-example(format="").
     
     That makes sense because we transpile TypeScript to JavaScript
     <i>before</i> running the application</a>.
-  
+
   .l-sub-section
     :marked
       #### Transpiling in the browser
@@ -489,12 +496,12 @@ figure.image-display
     .file index.html
     .file package.json
     .file styles.css
-    .file system.config.js
+    .file systemjs.config.js
     .file tsconfig.json
     .file typings.json
 :marked
-  And here are the files:,
-    quickstart/ts/typings/typings.d.1.ts
+  And here are the files:
+
 +makeTabs(`
     quickstart/ts/app/app.component.ts,
     quickstart/ts/app/main.ts,
@@ -503,7 +510,7 @@ figure.image-display
     quickstart/ts/tsconfig.1.json,
     quickstart/ts/typings.1.json,
     quickstart/ts/styles.1.css,
-    quickstart/ts/system.config.1.js`
+    quickstart/ts/systemjs.config.1.js`
   ,null,
   `app/app.component.ts, 
   app/main.ts, 
@@ -512,7 +519,7 @@ figure.image-display
   tsconfig.json, 
   typings.json,
   styles.css,
-  system.config.js`)
+  systemjs.config.js`)
 :marked
 
 .l-main-section