Use docs-content from NPM package (#565)

Author: devversion

.gitignore

@@ -3,11 +3,7 @@
 # compiled output
 /dist
 /tmp
-/src/assets/documents
-/src/assets/examples
-/src/assets/stackblitz/examples
 /src/assets/*.css
-/src/assets/*.html
 
 # dependencies
 /node_modules

angular.json

@@ -21,6 +21,11 @@
                 "input": "src/assets",
                 "output": "/assets"
               },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@angular/material-examples/docs-content",
+                "output": "/docs-content"
+              },
               {
                 "glob": "favicon.ico",
                 "input": "src",

karma.conf.js

@@ -11,19 +11,11 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-firefox-launcher'),
       require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
       require('@angular-devkit/build-angular/plugins/karma'),
-      require('karma-browserstack-launcher'),
-      require('karma-sauce-launcher'),
     ],
     client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, 'coverage'),
-      reports: ['html', 'lcovonly'],
-      fixWebpackSourcePaths: true
-    },
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,

package.json

@@ -10,57 +10,52 @@
     "test": "npm run build-themes && ng test",
     "pree2e": "webdriver-manager update",
     "e2e": "protractor",
-    "fetch-local": "bash ./tools/fetch-assets-local.sh",
     "build-themes": "bash ./tools/build-themes.sh",
     "prod-build": "npm run build-themes && ng build --aot --prod",
-    "postinstall": "webdriver-manager update && bash ./tools/build-themes.sh",
+    "postinstall": "webdriver-manager update --gecko false && bash ./tools/build-themes.sh",
     "publish-prod": "bash ./tools/deploy.sh stable prod",
     "publish-dev": "bash ./tools/deploy.sh",
     "publish-beta": "bash ./tools/deploy.sh stable beta"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^7.0.0",
+    "@angular/animations": "^7.1.4",
     "@angular/cdk": "^7.2.1",
-    "@angular/common": "^7.0.0",
-    "@angular/compiler": "^7.0.0",
-    "@angular/core": "^7.0.0",
-    "@angular/forms": "^7.0.0",
-    "@angular/http": "^7.0.0",
+    "@angular/common": "^7.1.4",
+    "@angular/compiler": "^7.1.4",
+    "@angular/core": "^7.1.4",
+    "@angular/forms": "^7.1.4",
+    "@angular/http": "^7.1.4",
     "@angular/material": "^7.2.1",
+    "@angular/material-examples": "https://github.com/angular/material2-docs-content.git",
     "@angular/material-moment-adapter": "^7.2.1",
-    "@angular/platform-browser": "^7.0.0",
-    "@angular/platform-browser-dynamic": "^7.0.0",
-    "@angular/router": "^7.0.0",
-    "core-js": "^2.5.6",
+    "@angular/platform-browser": "^7.1.4",
+    "@angular/platform-browser-dynamic": "^7.1.4",
+    "@angular/router": "^7.1.4",
+    "core-js": "^2.6.1",
     "hammerjs": "^2.0.8",
-    "moment": "^2.22.1",
-    "rxjs": "^6.1.0",
+    "moment": "^2.23.0",
+    "rxjs": "^6.3.3",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.10.1",
-    "@angular/cli": "^7.0.1",
-    "@angular/compiler-cli": "^7.0.0",
-    "@types/jasmine": "^2.8.9",
-    "@types/node": "^10.0.9",
-    "firebase-tools": "^6.0.0",
-    "highlight.js": "^9.9.0",
+    "@angular-devkit/build-angular": "^0.11.4",
+    "@angular/cli": "^7.1.4",
+    "@angular/compiler-cli": "^7.1.4",
+    "@types/jasmine": "^3.3.5",
+    "@types/node": "^10.12.18",
+    "firebase-tools": "^6.2.2",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~1.7.1",
-    "karma-browserstack-launcher": "^1.3.0",
+    "karma": "^3.1.4",
     "karma-chrome-launcher": "^2.2.0",
-    "karma-coverage-istanbul-reporter": "~1.4.2",
     "karma-firefox-launcher": "^1.1.0",
     "karma-jasmine": "^1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-sauce-launcher": "^1.2.0",
-    "natives": "^1.1.6",
-    "node-sass": "^4.5.3",
+    "node-sass": "^4.11.0",
     "protractor": "~5.3.0",
     "ts-node": "^6.0.3",
     "tslint": "^5.10.0",
-    "typescript": "^3.1.3"
+    "typescript": "~3.1.3"
   }
 }

scripts/ci/build-and-test.sh

@@ -12,10 +12,8 @@ source ./scripts/ci/travis-mode.sh
 if is_lint; then
   npm run lint
 elif is_e2e; then
-  bash ./tools/fetch-assets.sh
   npm run e2e
 elif is_test; then
-  bash ./tools/fetch-assets.sh
   npm run build-themes
   npm run test -- --watch false --progress=false
 fi

src/app/pages/component-viewer/component-api.html

@@ -3,7 +3,7 @@
 </span>
 
 <doc-viewer
-    documentUrl="/assets/documents/api/{{componentViewer.componentDocItem.packageName}}-{{componentViewer.componentDocItem.id}}.html"
+    documentUrl="/docs-content/api-docs/{{componentViewer.componentDocItem.packageName}}-{{componentViewer.componentDocItem.id}}.html"
     class="docs-component-view-text-content docs-component-api"
     (contentRendered)="scrollToSelectedContentSection()">
 </doc-viewer>

src/app/pages/component-viewer/component-overview.html

@@ -2,7 +2,7 @@
   Overview for {{componentViewer.componentDocItem.id}}
 </span>
 <doc-viewer
-    documentUrl="/assets/documents/overview/{{componentViewer.componentDocItem.packageName}}-{{componentViewer.componentDocItem.id}}.html"
+    documentUrl="/docs-content/overviews/{{componentViewer.componentDocItem.packageName}}/{{componentViewer.componentDocItem.id}}.html"
     class="docs-component-view-text-content docs-component-overview"
     (contentRendered)="scrollToSelectedContentSection()">
 </doc-viewer>

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

@@ -69,14 +69,14 @@ describe('ExampleViewer', () => {
     expect(console.error).toHaveBeenCalledWith('Could not find example: foobar');
   }));
 
-  it('should return assets path for example based on extension', async(() => {
+  it('should return docs-content path for example based on extension', async(() => {
     // set example
     component.example = exampleKey;
     fixture.detectChanges();
 
     // get example file path for each extension
     const extensions = ['ts', 'css', 'html'];
-    const basePath = '/assets/examples/';
+    const basePath = '/docs-content/examples-highlighted/';
 
     extensions.forEach(extension => {
       const expected = `${basePath}${exampleKey}-example-${extension}.html`;
@@ -178,10 +178,10 @@ class TestExampleModule { }
 
 
 const FAKE_DOCS = {
-  '/assets/examples/autocomplete-overview-example-html.html':
+  '/docs-content/examples-highlighted/autocomplete-overview-example-html.html':
       '<div>my docs page</div>',
-  '/assets/examples/autocomplete-overview-example-ts.html':
+  '/docs-content/examples-highlighted/autocomplete-overview-example-ts.html':
       '<span>const a = 1;</span>',
-  '/assets/examples/autocomplete-overview-example-css.html':
+  '/docs-content/examples-highlighted/autocomplete-overview-example-css.html':
       '<pre>.class { color: black; }</pre>',
 };

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

@@ -59,15 +59,15 @@ export class ExampleViewer {
     return Object.keys(this.exampleTabs);
   }
 
-  private resolveExampleFile(fileName: string) {
-    return `/assets/examples/${fileName}`;
+  private resolveHighlightedExampleFile(fileName: string) {
+    return `/docs-content/examples-highlighted/${fileName}`;
   }
 
   private _generateExampleTabs() {
     this.exampleTabs = {
-      HTML: this.resolveExampleFile(`${this.example}-example-html.html`),
-      TS: this.resolveExampleFile(`${this.example}-example-ts.html`),
-      CSS: this.resolveExampleFile(`${this.example}-example-css.html`),
+      HTML: this.resolveHighlightedExampleFile(`${this.example}-example-html.html`),
+      TS: this.resolveHighlightedExampleFile(`${this.example}-example-ts.html`),
+      CSS: this.resolveHighlightedExampleFile(`${this.example}-example-css.html`),
     };
 
     const additionalFiles = this.exampleData.additionalFiles || [];
@@ -76,7 +76,7 @@ export class ExampleViewer {
       // Since the additional files refer to the original file name, we need to transform
       // the file name to match the highlighted HTML file that displays the source.
       const fileSourceName = fileName.replace(fileExtensionRegex, '$1-$2.html');
-      this.exampleTabs[fileName] = this.resolveExampleFile(fileSourceName);
+      this.exampleTabs[fileName] = this.resolveHighlightedExampleFile(fileSourceName);
     });
   }
 }

src/app/shared/guide-items/guide-items.ts

@@ -10,42 +10,42 @@ const GUIDES = [
   {
     id: 'getting-started',
     name: 'Getting started',
-    document: '/assets/documents/guides/material-getting-started.html',
+    document: '/docs-content/guides/getting-started.html',
   },
   {
     id: 'schematics',
     name: 'Schematics',
-    document: '/assets/documents/guides/material-schematics.html'
+    document: '/docs-content/guides/schematics.html'
   },
   {
     id: 'theming',
     name: 'Theming Angular Material',
-    document: '/assets/documents/guides/material-theming.html',
+    document: '/docs-content/guides/theming.html',
   },
   {
     id: 'theming-your-components',
     name: 'Theming your own components',
-    document: '/assets/documents/guides/material-theming-your-components.html',
+    document: '/docs-content/guides/theming-your-components.html',
   },
   {
     id: 'typography',
     name: `Using Angular Material's Typography`,
-    document: '/assets/documents/guides/material-typography.html',
+    document: '/docs-content/guides/typography.html',
   },
   {
     id: 'customizing-component-styles',
     name: 'Customizing component styles',
-    document: '/assets/documents/guides/material-customizing-component-styles.html'
+    document: '/docs-content/guides/customizing-component-styles.html'
   },
   {
     id: 'creating-a-custom-form-field-control',
     name: 'Creating a custom form field control',
-    document: '/assets/documents/guides/material-creating-a-custom-form-field-control.html'
+    document: '/docs-content/guides/creating-a-custom-form-field-control.html'
   },
   {
     id: 'elevation',
     name: 'Using elevation helpers',
-    document: '/assets/documents/guides/material-elevation.html'
+    document: '/docs-content/guides/elevation.html'
   },
 ];
 

src/app/shared/stackblitz/stackblitz-writer.spec.ts

@@ -26,7 +26,6 @@ describe('StackblitzWriter', () => {
   beforeEach(() => {
     stackblitzWriter = TestBed.get(StackblitzWriter);
     data = new ExampleData('');
-    data.examplePath = 'http://material.angular.io/';
     data.exampleFiles = ['test.ts', 'test.html', 'src/detail.ts'];
   });
 
@@ -104,10 +103,9 @@ describe('StackblitzWriter', () => {
 });
 
 const FAKE_DOCS = {
-  'http://material.angular.io/test.ts': 'ExampleComponent',
-  'http://material.angular.io/test.html': `
-      <example></example>`,
-  'http://material.angular.io/src/detail.ts': 'DetailComponent',
+  '/docs-content/examples-source/test.ts': 'ExampleComponent',
+  '/docs-content/examples-source/test.html': `<example></example>`,
+  '/docs-content/examples-source/src/detail.ts': 'DetailComponent',
 };
 
 const TEST_URLS = [
@@ -117,7 +115,7 @@ const TEST_URLS = [
   '/assets/stackblitz/.angular-cli.json',
   '/assets/stackblitz/main.ts',
   '/assets/stackblitz/material-module.ts',
-  'http://material.angular.io/test.ts',
-  'http://material.angular.io/test.html',
-  'http://material.angular.io/src/detail.ts',
+  '/docs-content/examples-source/test.ts',
+  '/docs-content/examples-source/test.html',
+  '/docs-content/examples-source/src/detail.ts',
 ];

src/app/shared/stackblitz/stackblitz-writer.ts

@@ -12,6 +12,13 @@ const COPYRIGHT =
     Use of this source code is governed by an MIT-style license that
     can be found in the LICENSE file at http://angular.io/license`;
 
+/**
+ * Path that refers to the docs-content from the "@angular/material-examples" package. The
+ * structure is defined in the Material repository, but we include the docs-content as assets in
+ * in the CLI configuration.
+ */
+const DOCS_CONTENT_PATH = '/docs-content/examples-source/';
+
 const TEMPLATE_PATH = '/assets/stackblitz/';
 const TEMPLATE_FILES = [
   'index.html',
@@ -88,7 +95,7 @@ export class StackblitzWriter {
           .map(file => this._readFile(form, data, file, TEMPLATE_PATH));
 
       let exampleContents = data.exampleFiles
-          .map(file => this._readFile(form, data, file, data.examplePath));
+          .map(file => this._readFile(form, data, file, DOCS_CONTENT_PATH));
 
       // TODO(josephperrott): Prevent including assets to be manually checked.
       if (data.selectorName === 'icon-svg-example') {

src/app/shared/table-of-contents/table-of-contents.ts

@@ -31,7 +31,7 @@ export class TableOfContents implements OnInit {
 
   @Input() links: Link[] = [];
   @Input() container: string;
-  @Input() headerSelectors = '.docs-markdown-h3,.docs-markdown-h4';
+  @Input() headerSelectors = '.docs-markdown h3, .docs-markdown h4';
 
   _rootUrl = this._router.url.split('#')[0];
   private _scrollContainer: any;

src/styles/_general.scss

@@ -15,22 +15,13 @@ h1, h2 {
   padding-left: 20px;
 
   h1 {
-    font-size: 30px;
     font-weight: 300;
     margin: 0;
     padding: 28px 8px;
     font-size: 20px;
   }
 }
 
-code {
-  font-size: 90%;
-}
-
-.docs-markdown-pre code {
-  font-size: 100%;
-}
-
 // These styles are for controlling SVGs without using the /deep/ selector
 
 .docs-component-category-list-card-image svg {
@@ -53,3 +44,14 @@ code {
   vertical-align: middle;
 }
 
+code, pre {
+  font-family: 'Roboto Mono', monospace;
+}
+
+code {
+  font-size: 90%;
+}
+
+pre {
+  font-size: 14px;
+}