Disambiguate between material and cdk docs

Author: jelbourn

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

@@ -2,9 +2,9 @@
   API for {{componentViewer.componentDocItem.id}}
 </span>
 <doc-viewer
-  documentUrl="/assets/documents/api/{{componentViewer.componentDocItem.id}}.html"
+  documentUrl="/assets/documents/api/{{componentViewer.componentDocItem.packageName}}-{{componentViewer.componentDocItem.id}}.html"
   class="docs-component-view-text-content docs-component-api"
   (contentLoaded)="toc.updateScrollPosition()"></doc-viewer>
-<table-of-contents #toc 
-    headerSelectors=".docs-api-h3,.docs-api-h4" 
+<table-of-contents #toc
+    headerSelectors=".docs-api-h3,.docs-api-h4"
     container=".mat-drawer-content"></table-of-contents>

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.id}}.html"
+    documentUrl="/assets/documents/overview/{{componentViewer.componentDocItem.packageName}}-{{componentViewer.componentDocItem.id}}.html"
     class="docs-component-view-text-content docs-component-overview"
     (contentLoaded)="toc.updateScrollPosition()">
 </doc-viewer>

src/app/pages/component-viewer/component-viewer.spec.ts

@@ -42,7 +42,7 @@ describe('ComponentViewer', () => {
   it('should set page title correctly', () => {
     const component = fixture.componentInstance;
     fixture.detectChanges();
-    const expected = `${component.docItems.getItemById(docItemsId).name}`;
+    const expected = `${component.docItems.getItemById(docItemsId, 'material').name}`;
     expect(component._componentPageTitle.title).toEqual(expected);
   });
 });

src/app/pages/component-viewer/component-viewer.ts

@@ -23,7 +23,9 @@ export class ComponentViewer {
               public _componentPageTitle: ComponentPageTitle,
               public docItems: DocumentationItems) {
     this._route.params.subscribe(params => {
-      this.componentDocItem = docItems.getItemById(params['id']);
+      this.componentDocItem = docItems.getItemById(
+          params['id'],
+          this._route.parent.snapshot.params['section']);
 
       if (this.componentDocItem) {
         this._componentPageTitle.title = `${this.componentDocItem.name}`;

src/app/shared/documentation-items/documentation-items.spec.ts

@@ -37,6 +37,6 @@ describe('DocViewer', () => {
   });
 
   it('should get a doc item by id', () => {
-    expect(docsItems.getItemById('button')).toBeDefined();
+    expect(docsItems.getItemById('button', 'material')).toBeDefined();
   });
 });

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

@@ -3,6 +3,7 @@ import {Injectable} from '@angular/core';
 export interface DocItem {
   id: string;
   name: string;
+  packageName?: string;
   examples?: string[];
 }
 
@@ -107,52 +108,47 @@ const DOCS: {[key: string]: DocCategory[]} = {
     }
   ],
   [CDK] : [
-    {
-      id: 'components',
-      name: 'Components',
-      items: [
-        {id: 'table', name: 'Table', examples: []},
-        {id: 'stepper', name: 'Stepper', examples: []},
-
-      ]
-    },
     {
       id: 'component-composition',
-      name: 'Component Composition',
+      name: 'Common Behaviors',
       items: [
+        {id: 'a11y', name: 'Accessibility', examples: []},
         {id: 'observers', name: 'Observers', examples: []},
         {id: 'layout', name: 'Layout', examples: []},
         {id: 'overlay', name: 'Overlay', examples: []},
         {id: 'portal', name: 'Portal', examples: []},
         {id: 'bidi', name: 'Bidirectionality', examples: []},
         {id: 'scrolling', name: 'Scrolling', examples: []},
-        {id: 'viewport', name: 'Viewport', examples: []},
-      ]
-    },
-    {
-      id: 'utilities',
-      name: 'Utilities',
-      items: [
-        {id: 'coercion', name: 'Coercion', examples: []},
-        {id: 'collections', name: 'Collections', examples: []},
-        {id: 'keycodes', name: 'Keycodes', examples: []},
-        {id: 'platform', name: 'Platform', examples: []},
-        {id: 'rxjs', name: 'RxJS', examples: []},
       ]
     },
     {
-      id: 'accessibility',
-      name: 'Accessibility',
+      id: 'components',
+      name: 'Components',
       items: [
-        {id: 'focus-key-manager', name: 'Focus Key Manager', examples: []},
-        {id: 'focus-trap', name: 'Focus Trap', examples: []},
-        {id: 'interactivity-checker', name: 'Interactivity Checker', examples: []},
-        {id: 'list-key-manager', name: 'List Key Manager', examples: []},
-        {id: 'live-announcer', name: 'Live Announcer', examples: []},
+        {id: 'table', name: 'Table', examples: []},
+        {id: 'stepper', name: 'Stepper', examples: []},
+
       ]
     },
+    // TODO(jelbourn): re-add utilities and a11y as top-level categories once we can generate
+    // their API docs with dgeni. Currently our setup doesn't generate API docs for constants
+    // and standalone functions (much of the utilities) and we have no way of generating API
+    // docs more granularly than directory-level (within a11y) (same for viewport).
   ]
 };
+
+for (let category of DOCS[COMPONENTS]) {
+  for (let doc of category.items) {
+    doc.packageName = 'material';
+  }
+}
+
+for (let category of DOCS[CDK]) {
+  for (let doc of category.items) {
+    doc.packageName = 'cdk';
+  }
+}
+
 const ALL_COMPONENTS = DOCS[COMPONENTS].reduce(
   (result, category) => result.concat(category.items), []);
 const ALL_CDK = DOCS[CDK].reduce((result, cdk) => result.concat(cdk.items), []);
@@ -175,8 +171,9 @@ export class DocumentationItems {
     return [];
   }
 
-  getItemById(id: string): DocItem {
-    return ALL_DOCS.find(i => i.id === id);
+  getItemById(id: string, section: string): DocItem {
+    const sectionLookup = section == 'cdk' ? 'cdk' : 'material';
+    return ALL_DOCS.find(doc => doc.id === id && doc.packageName == sectionLookup);
   }
 
   getCategoryById(id: string): DocCategory {

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

@@ -81,9 +81,9 @@ export class TableOfContents implements OnInit {
   }
 
   ngOnDestroy(): void {
-    this._routeSubscription.unsubscribe();
-    this._scrollSubscription.unsubscribe();
-    this._fragmentSubscription.unsubscribe();
+    this._routeSubscription && this._routeSubscription.unsubscribe();
+    this._scrollSubscription && this._scrollSubscription.unsubscribe();
+    this._fragmentSubscription && this._fragmentSubscription.unsubscribe();
   }
 
   updateScrollPosition(): void {