fix snippet headers in toh1/2

Author: filipesilva

public/docs/ts/latest/tutorial/toh-pt1.jade

@@ -12,7 +12,7 @@ include ../_util-fns
   .file angular-tour-of-heroes
   .children
     .file src
-      .children
+    .children
       .file app
       .children
         .file app.component.ts
@@ -47,7 +47,7 @@ code-example(language="sh" class="code-shell").
     Update the `AppComponent` so it has two properties:   a `title` property for the application name and a `hero` property
     for a hero named "Windstorm".
 
-  +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'app-component-1', 'app.component.ts (AppComponent class)')(format=".")
+  +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'app-component-1', 'src/app/app.component.ts (AppComponent class)')(format=".")
 
   :marked
     Now update the template in the `@Component` decoration with data bindings to these new properties.
@@ -71,13 +71,13 @@ code-example(language="sh" class="code-shell").
   Create a `Hero` class with `id` and `name` properties.
   For now put this near the top of the `app.component.ts` file, just below the import statement.
 
-+makeExample('toh-1/ts/src/app/app.component.ts', 'hero-class-1', 'app.component.ts (Hero class)')(format=".")
++makeExample('toh-1/ts/src/app/app.component.ts', 'hero-class-1', 'src/app/app.component.ts (Hero class)')(format=".")
 
 :marked
   Now that we have a `Hero` class, let’s refactor our component’s `hero` property to be of type `Hero`.
   Then initialize it with an id of `1` and the name, "Windstorm".
 
-+makeExample('toh-1/ts/src/app/app.component.ts', 'hero-property-1', 'app.component.ts (hero property)')(format=".")
++makeExample('toh-1/ts/src/app/app.component.ts', 'hero-property-1', 'src/app/app.component.ts (hero property)')(format=".")
 
 :marked
   Because we changed the hero from a string to an object,
@@ -106,7 +106,7 @@ code-example(language="sh" class="code-shell").
   Change the quotes around the template to back-ticks and
   put the `<h1>`, `<h2>` and `<div>` elements on their own lines.
 
-+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'multi-line-strings', 'app.component.ts (AppComponent\'s template)')
++makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'multi-line-strings', 'src/app/app.component.ts (AppComponent\'s template)')
 
   .callout.is-important
     header A back-tick is not a single quote
@@ -126,7 +126,7 @@ code-example(language="sh" class="code-shell").
 
   Refactor the hero name `<label>` with `<label>` and `<input>` elements as shown below:
 
-+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'editing-Hero', 'app.component.ts (input element)')
++makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'editing-Hero', 'src/appapp.component.ts (input element)')
 :marked
   We see in the browser that the hero’s name does appear in the `<input>` textbox.
   But something doesn’t feel right.
@@ -145,7 +145,7 @@ code-example(language="sh" class="code-shell").
   of external modules used by our application.
   Now we have included the forms package which includes `ngModel`.
 
-+makeExample('toh-1/ts/src/app/app.module.ts', '', 'app.module.ts (FormsModule import)')
++makeExample('toh-1/ts/src/app/app.module.ts', '', 'src/app/app.module.ts (FormsModule import)')
 
 .l-sub-section
   :marked
@@ -181,7 +181,7 @@ code-example(language="html").
 
   Here's the complete `app.component.ts` as it stands now:
 
-+makeExample('toh-1/ts/src/app/app.component.ts', 'pt1', 'app.component.ts')
++makeExample('toh-1/ts/src/app/app.component.ts', 'pt1', 'src/app/app.component.ts')
 
 .l-main-section
 :marked

public/docs/ts/latest/tutorial/toh-pt2.jade

@@ -50,7 +50,7 @@ code-example(language="sh" class="code-shell").
   ### Creating heroes
   Let’s create an array of ten heroes.
 
-+makeExample('toh-2/ts/src/app/app.component.ts', 'hero-array', 'app.component.ts (hero array)')
++makeExample('toh-2/ts/src/app/app.component.ts', 'hero-array', 'src/app/app.component.ts (hero array)')
 
 :marked
   The `HEROES` array is of type `Hero`, the class defined in part one, 
@@ -61,7 +61,7 @@ code-example(language="sh" class="code-shell").
   ### Exposing heroes
   Let’s create a public property in `AppComponent` that exposes the heroes for binding.
 
-+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'hero-array-1', 'app.component.ts (hero array property)')
++makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'hero-array-1', 'src/app/app.component.ts (hero array property)')
 
 :marked
   We did not have to define the `heroes` type.  TypeScript can infer it from the `HEROES` array.
@@ -76,7 +76,7 @@ code-example(language="sh" class="code-shell").
   Our component has `heroes`. Let’s create an unordered list in our template to display them.
   We’ll insert the following chunk of HTML below the title and above the hero details.
 
-+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-template-1', 'app.component.ts (heroes template)')
++makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-template-1', 'src/app/app.component.ts (heroes template)')
 
 :marked
   Now we have a template that we can fill with our heroes.
@@ -89,7 +89,7 @@ code-example(language="sh" class="code-shell").
 
   First modify the `<li>` tag by adding the built-in directive `*ngFor`.
 
-+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-ngfor-1', 'app.component.ts (ngFor)')
++makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-ngfor-1', 'src/app/app.component.ts (ngFor)')
 
 .alert.is-critical
   :marked
@@ -118,7 +118,7 @@ code-example(language="sh" class="code-shell").
   Now we insert some content between the `<li>` tags
   that uses the `hero` template variable to display the hero’s properties.
 
-+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'ng-for', 'app.component.ts (ngFor template)')(format=".")
++makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'ng-for', 'src/app/app.component.ts (ngFor template)')(format=".")
 
 :marked
   When the browser refreshes, we see a list of heroes!
@@ -130,7 +130,7 @@ code-example(language="sh" class="code-shell").
   Let’s add some styles to our component by setting the `styles` property on the `@Component` decorator
   to the following CSS classes:
 
-+makeExample('toh-2/ts/src/app/app.component.ts', 'styles', 'app.component.ts (styles)')(format=".")
++makeExample('toh-2/ts/src/app/app.component.ts', 'styles', 'src/app/app.component.ts (styles)')(format=".")
 
 :marked
   Notice that we again use the back-tick notation for multi-line strings.
@@ -143,7 +143,7 @@ code-example(language="sh" class="code-shell").
 
   Our template for displaying the heroes should now look like this:
 
-+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (styled heroes)')
++makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'src/app/app.component.ts (styled heroes)')
 
 .l-main-section
   :marked
@@ -159,7 +159,7 @@ code-example(language="sh" class="code-shell").
     ### Click event
     We modify the `<li>` by inserting an Angular event binding to its click event.
 
-  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-click', 'app.component.ts (template excerpt)')
+  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-click', 'src/app/app.component.ts (template excerpt)')
 
   :marked
     Focus on the event binding
@@ -189,21 +189,21 @@ code-example(language="sh" class="code-shell").
     We no longer need the static `hero` property of the `AppComponent`.
     **Replace** it with this simple `selectedHero` property:
 
-  +makeExample('toh-2/ts/src/app/app.component.ts', 'selected-hero', 'app.component.ts (selectedHero)')
+  +makeExample('toh-2/ts/src/app/app.component.ts', 'selected-hero', 'src/app/app.component.ts (selectedHero)')
 
   :marked
     We’ve decided that none of the heroes should be selected before the user picks a hero so
     we won’t initialize the `selectedHero` as we were doing with `hero`.
 
     Now **add an `onSelect` method** that sets the `selectedHero` property to the `hero` the user clicked.
-  +makeExample('toh-2/ts/src/app/app.component.ts', 'on-select', 'app.component.ts (onSelect)')
+  +makeExample('toh-2/ts/src/app/app.component.ts', 'on-select', 'src/app/app.component.ts (onSelect)')
 
   :marked
     We will be showing the selected hero's details in our template.
     At the moment, it is still referring to the old `hero` property.
     Let’s fix the template to bind to the new `selectedHero` property.
 
-  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-details', 'app.component.ts (template excerpt)')
+  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-details', 'src/app/app.component.ts (template excerpt)')
   :marked
     ### Hide the empty detail with ngIf
 
@@ -223,7 +223,7 @@ code-example(language="sh" class="code-shell").
     We wrap the HTML hero detail content of our template with a `<div>`.
     Then we add the `ngIf` built-in directive and set it to the `selectedHero` property of our component.
 
-  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'ng-if', 'app.component.ts (ngIf)')
+  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'ng-if', 'src/app/app.component.ts (ngIf)')
 
   .alert.is-critical
     :marked
@@ -265,12 +265,12 @@ code-example(language="sh" class="code-shell").
 
     The key is the name of the CSS class (`selected`). The value is `true` if the two heroes match and `false` otherwise.
     We’re saying “*apply the `selected` class if the heroes match, remove it if they don’t*”.
-  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-1', 'app.component.ts (setting the CSS class)')(format=".")
+  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-1', 'src/app/app.component.ts (setting the CSS class)')(format=".")
   :marked
     Notice in the template that the `class.selected` is surrounded in square brackets (`[]`).
     This is the syntax for a **property binding**, a binding in which data flows one way
     from the data source (the expression `hero === selectedHero`) to a property of `class`.
-  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-2', 'app.component.ts (styling each hero)')(format=".")
+  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-2', 'src/app/app.component.ts (styling each hero)')(format=".")
 
   .l-sub-section
     :marked
@@ -289,7 +289,7 @@ code-example(language="sh" class="code-shell").
 
     Here's the complete `app.component.ts` as it stands now:
 
-  +makeExample('toh-2/ts/src/app/app.component.ts', '', 'app.component.ts')
+  +makeExample('toh-2/ts/src/app/app.component.ts', '', 'src/app/app.component.ts')
 
 .l-main-section
 :marked