chore(quickstart/dart): updated prose and example code

Recreated prose as extension of TS prose. Code was updated to conform
to the organization of the app given on the TS side. I.e., the app
component was factored out into its own file. E2e tests pass :).

Author: chalin

public/_includes/_util-fns.jade

@@ -4,15 +4,25 @@
 //- Should be one of: 'ts', 'dart' or 'js'. Set in lang specific _util-fns file.
 - var _docsFor = ''; 
 
+//- Should match `_docsFor`, but in this case provides the full capitalized
+//- name of the language.
+- var _Lang = 'TypeScript';
+
 //- Simple "macros" used via interpolation in text:
 //- e.g., the #{_priv}el variable has an `@Input` #{_decorator}.
 
 //- Use #{_decorator} whereever the word "decorator" is expected, provided it is not
 //- preceded by the article "a". (E.g., will be "annotation" for Dart)
 - var _decorator = 'decorator';
 
+//- Articles (which toggle between 'a' and 'an'). Used for, e.g.,
+//- array vs. list; decorator vs. annotation.
+- var _a = 'a';
+- var _an = 'an';
+
 //- TS arrays vs. Dart lists
 - var _array = 'array';
+//- Deprecate now that we have the articles _a and _an
 - var _an_array = 'an array';
 
 //- Promise vs. Future, etc
@@ -48,6 +58,7 @@ mixin makeExample(_filePath, region, _title, stylePatterns)
   - var frag = getFrag(filePath, region);
   - var defaultFormat = frag.split('\n').length > 2 ? "linenums" : "";
   - var format = attributes.format || defaultFormat;
+  - if (attributes.format === '.') format = '';
   - var avoid = !!attributes.avoid;
 
   if (title)
@@ -57,6 +68,13 @@ mixin makeExample(_filePath, region, _title, stylePatterns)
       .example-title #{title}
   code-example(language="#{language}" format="#{format}")
     != styleString(frag, stylePatterns)
+    
+//- Like makeExample, but doesn't show line numbers and
+//- title is appened with `(excerpt)` if it doesn't already
+//- end with a parenthetical remark.
+mixin makeExcerpt(_filePath, region, _title, stylePatterns)
+  - if (_title && !_title.match(/\([\w ]+\)$/)) _title = _title + ' (excerpt)';
+  +makeExample(_filePath, region, _title, stylePatterns)(format='')
 
 mixin makeTabs(filePaths, regions, tabNames, stylePatterns)
   - filePaths = strSplit(filePaths);

public/docs/_examples/quickstart/dart/lib/app_component.dart

@@ -0,0 +1,12 @@
+// #docregion
+// #docregion import
+import 'package:angular2/core.dart';
+// #enddocregion import
+
+// #docregion metadata
+@Component(
+    selector: 'my-app',
+    template: '<h1>My First Angular 2 App</h1>')
+// #enddocregion metadata
+// #docregion class
+class AppComponent {}

public/docs/_examples/quickstart/dart/web/main.dart

@@ -1,10 +1,8 @@
 // #docregion
-import 'package:angular2/core.dart';
 import 'package:angular2/platform/browser.dart';
 
-@Component(selector: 'my-app', template: '<h1>My First Angular 2 App</h1>')
-class AppComponent {}
+import 'package:angular2_getting_started/app_component.dart';
 
-main() {
+void main() {
   bootstrap(AppComponent);
 }

public/docs/_examples/quickstart/dart/web/styles_1.css

@@ -0,0 +1,9 @@
+/* #docregion */
+h1 {
+  color: #369; 
+  font-family: Arial, Helvetica, sans-serif;   
+  font-size: 250%;
+}
+body { 
+  margin: 2em; 
+}

public/docs/dart/latest/_util-fns.jade

@@ -4,18 +4,21 @@ include ../../../_includes/_util-fns
 - var _docsFor = 'dart';
 - var _decorator = 'annotation';
 - var _array = 'list';
-- var _an_array = 'a list';
+- var _an_array = 'a list'; //- Deprecate now that we have the articles
+- var _a = 'an';
+- var _an = 'a';
 - var _priv = '_';
+- var _Lang = 'Dart';
 - var _Promise = 'Future';
 - var _Observable = 'Stream';
 
 mixin liveExampleLink(linkText, exampleUrlPartName)
-  a(href='https://angular-examples.github.io/#{exampleUrlPartName}')= linkText
+  a(href='https://angular-examples.github.io/#{exampleUrlPartName}' target="_blank")= linkText
 
 mixin liveExampleLink2(linkText, exampleUrlPartName)
   - var liveExampleSourceLinkText = attributes.srcLinkText || 'view source'
   | #[+liveExampleLink(linkText, exampleUrlPartName)] 
-  | (#[a(href='https://github.com/angular-examples/#{exampleUrlPartName}') #{liveExampleSourceLinkText}])
+  | (#[a(href='https://github.com/angular-examples/#{exampleUrlPartName}' target="_blank") #{liveExampleSourceLinkText}])
 
 - var adjustExamplePath = function(_path) {
 -   if(!_path) return _path;
@@ -25,9 +28,11 @@ mixin liveExampleLink2(linkText, exampleUrlPartName)
 -   // if(extn == 'dart') return path;
 -   var baseName = getBaseFileName(path) || path; // TODO: have getBaseFileName() return path
 -   var baseNameNoExt = baseName.substr(0,baseName.length - (extn.length + 1));
--   var inWebFolder = baseNameNoExt.match(/^(main|index)$/);
+-   var inWebFolder = baseNameNoExt.match(/^(main|index(\.\d)?)$/);
 -   // Adjust the folder path, e.g., ts -> dart 
--   folder = folder.replace(/(^|\/)ts\//, '$1dart/').replace(/(^|\/)app($|\/)/, inWebFolder ? '$1web$2' : '$1lib$2');
+-   folder = folder.replace(/(^|\/)ts($|\/)/, '$1dart$2').replace(/(^|\/)app($|\/)/, inWebFolder ? '$1web$2' : '$1lib$2');
+-   // Special case not handled above: e.g., index.html -> web/index.html
+-   if(baseNameNoExt.match(/^(index|styles)(\.\d)?$/)) folder = (folder ? folder + '/' : '') + 'web';
 -   // In file name, replace special characters with underscore
 -   baseNameNoExt = baseNameNoExt.replace(/[\-\.]/g, '_');
 -   // Adjust the file extension
@@ -40,7 +45,7 @@ mixin liveExampleLink2(linkText, exampleUrlPartName)
 -   var title = _title.trim();
 -   // Assume title is a path if it ends with an extension like '.foo',
 -   // optionally followed by some comment in parentheses.
--   var matches = title.match(/(.*\.\w+)($|\s*\([\w ]+\)?$)/);
+-   var matches = title.match(/(.*\.\w+)($|\s*\([\w ]+\)$)/);
 -   if(matches && matches.length == 3) {
 -     // e.g. matches == ['abc.ts (excerpt)', 'abc.ts', ' (excerpt)']
 -     var path = adjustExamplePath(matches[1]);