Fix example sources not loading on firebase

src/app/shared/example-viewer/example-viewer.ts

@@ -48,6 +48,6 @@ export class ExampleViewer {
   }
 
   exampleFileUrl(extension: string) {
-    return `/assets/examples/${this.example}-example.${extension.toLowerCase()}.html`;
+    return `/assets/examples/${this.example}-example-${extension.toLowerCase()}.html`;
   }
 }

src/assets/documents/overview/icon.html

@@ -1,6 +1,6 @@
 <p><code>md-icon</code> makes it easier to use <em>vector-based</em> icons in your app.  This directive supports both
 icon fonts and SVG icons, but not bitmap-based formats (png, jpg, etc.).</p>
-<div material-docs-example="icon-example"></div>
+<div material-docs-example="icon-overview"></div>
 <h3 id="registering-icons">Registering icons</h3>
 <p><code>MdIconRegistry</code> is an injectable service that allows you to associate icon names with SVG URLs and
 define aliases for CSS font classes. Its methods are discussed below and listed in the API summary.</p>

src/assets/examples/radio-ngmodel-example.ts.html → src/assets/examples/radio-ng-model-example-ts.html

@@ -2,9 +2,9 @@
 
 
 <span class="hljs-meta">@Component</span>({
-  selector: <span class="hljs-string">'radio-ngmodel-example'</span>,
-  templateUrl: <span class="hljs-string">'./radio-ngmodel-example.html'</span>,
-  styleUrls: [<span class="hljs-string">'./radio-ngmodel-example.css'</span>],
+  selector: <span class="hljs-string">'radio-ng-model-example'</span>,
+  templateUrl: <span class="hljs-string">'./radio-ng-model-example.html'</span>,
+  styleUrls: [<span class="hljs-string">'./radio-ng-model-example.css'</span>],
 })
 <span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> RadioNgModelExample {
   favoriteSeason: <span class="hljs-built_in">string</span>;

src/assets/examples/snack-bar-component-example-html.html

@@ -0,0 +1,3 @@
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">md-button</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"openSnackBar()"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Show an example snack-bar"</span>&gt;</span>
+  Pizza party
+<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>

src/assets/examples/snack-bar-component-example-snack-css.html

@@ -0,0 +1,3 @@
+<span class="hljs-selector-class">.example-pizza-party</span> {
+  <span class="hljs-attribute">color</span>: hotpink;
+}

src/assets/examples/snack-bar-component-example-snack-html.html

@@ -0,0 +1,3 @@
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-pizza-party"</span>&gt;</span>
+  🍕🍕🍕🍕🍕 Pizza party!!! 🍕🍕🍕🍕🍕
+<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>

src/assets/examples/snack-bar-component-example.ts.html → src/assets/examples/snack-bar-component-example-ts.html

@@ -1,14 +1,18 @@
-<span class="hljs-keyword">import</span> {Component, ViewEncapsulation} from <span class="hljs-string">'@angular/core'</span>;
+<span class="hljs-keyword">import</span> {Component} from <span class="hljs-string">'@angular/core'</span>;
 <span class="hljs-keyword">import</span> {MdSnackBar} from <span class="hljs-string">'@angular/material'</span>;
 
 
 <span class="hljs-meta">@Component</span>({
   selector: <span class="hljs-string">'snack-bar-component-example'</span>,
-  template: <span class="hljs-string">''</span>,
+  templateUrl: <span class="hljs-string">'./snack-bar-component-example.html'</span>,
 })
 <span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> SnackBarComponentExample {
-  <span class="hljs-keyword">constructor</span>(<span class="hljs-params">snackBar: MdSnackBar</span>) {
-    snackBar.openFromComponent(SnackBarComponentExampleSnack);
+  <span class="hljs-keyword">constructor</span>(<span class="hljs-params"><span class="hljs-keyword">public</span> snackBar: MdSnackBar</span>) {}
+
+  openSnackBar() {
+    <span class="hljs-keyword">this</span>.snackBar.openFromComponent(PizzaPartyComponent, {
+      duration: <span class="hljs-number">500</span>,
+    });
   }
 }
 
@@ -17,9 +21,5 @@
   selector: <span class="hljs-string">'snack-bar-component-example-snack'</span>,
   templateUrl: <span class="hljs-string">'./snack-bar-component-example-snack.html'</span>,
   styleUrls: [<span class="hljs-string">'./snack-bar-component-example-snack.css'</span>],
-  host: {
-    <span class="hljs-string">'class'</span>: <span class="hljs-string">'example-snack'</span>,
-  },
-  encapsulation: ViewEncapsulation.None,
 })
-<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> SnackBarComponentExampleSnack {}
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> PizzaPartyComponent {}

src/assets/examples/snack-bar-overview-example.ts.html → src/assets/examples/snack-bar-overview-example-ts.html

@@ -10,6 +10,8 @@
   <span class="hljs-keyword">constructor</span>(<span class="hljs-params"><span class="hljs-keyword">public</span> snackBar: MdSnackBar</span>) {}
 
   openSnackBar(message: <span class="hljs-built_in">string</span>, action: <span class="hljs-built_in">string</span>) {
-    <span class="hljs-keyword">this</span>.snackBar.open(message, action);
+    <span class="hljs-keyword">this</span>.snackBar.open(message, action, {
+      duration: <span class="hljs-number">2000</span>,
+    });
   }
 }

tools/highlight-examples.sh

@@ -1,3 +1,3 @@
 #!/usr/bin/env bash
 echo "Highlighting example sources. This may take 15 - 20 seconds..."
-find ./src/app/examples/ -mindepth 2 -type f \( -iname "*.css" -or -iname "*.ts" -or -iname "*.html" \) -exec sh -c './tools/syntax-highlight.js {} ./src/assets/examples/$(basename {}).html' \;
+find ./src/app/examples/ -mindepth 2 -type f \( -iname "*.css" -or -iname "*.ts" -or -iname "*.html" \) -exec sh -c './tools/syntax-highlight.js {} ./src/assets/examples/' \;

tools/syntax-highlight.js

@@ -5,17 +5,18 @@
  * Creates a syntax highlighted HTML file from a source file using highlight.js.
  *
  * Use:
- * syntax-highlight path/to/input/file path/to/output/file
+ * syntax-highlight path/to/input/file path/to/output/dir/
  */
 
 const fs = require('fs');
 const path = require('path');
 const hljs = require('highlight.js');
 
 const inputFile = process.argv[2];
-const outputFile = process.argv[3];
+const outputPath = process.argv[3];
 
-let language = path.extname(inputFile).toLowerCase().slice(1);
+let extension = path.extname(inputFile).toLowerCase().slice(1);
+let language = extension;
 
 // Highlight.js expects 'typescript' written out instead of 'ts'.
 if (language == 'ts') {
@@ -30,5 +31,10 @@ fs.readFile(inputFile, 'utf8', (error, content) => {
   }
 
   let highlighted = hljs.highlight(language, content);
+
+  let filename = path.basename(inputFile);
+  filename = filename.slice(0, filename.lastIndexOf('.')) + '-' + extension + '.html';
+  let outputFile = path.join(outputPath, filename);
+
   fs.writeFile(outputFile, highlighted.value, {encoding: 'utf8'});
 });