Ability to change route name using pageTitle, navTitle

package.json

@@ -33,11 +33,12 @@
     "@blackbaud/skyux": "2.0.0-beta.27",
     "@blackbaud/skyux-builder-plugin-stache-code-block": "1.0.0",
     "@blackbaud/skyux-builder-plugin-stache-include": "1.0.0",
+    "@blackbaud/skyux-builder-plugin-stache-route-metadata": "blackbaud/skyux-builder-plugin-stache-route-metadata#unit-tests",
     "prismjs": "1.6.0",
     "smoothscroll-polyfill": "0.3.5"
   },
   "devDependencies": {
-    "@blackbaud/skyux-builder": "1.0.0-beta.25",
+    "@blackbaud/skyux-builder": "blackbaud/skyux-builder#plugin-config",
     "codelyzer": "2.0.0-beta.1",
     "fs-extra": "3.0.1",
     "glob": "7.1.1",

skyuxconfig.json

@@ -4,7 +4,9 @@
   "compileMode": "aot",
   "plugins": [
     "@blackbaud/skyux-builder-plugin-stache-code-block",
-    "@blackbaud/skyux-builder-plugin-stache-include"
+    "@blackbaud/skyux-builder-plugin-stache-include",
+    "@blackbaud/skyux-builder-plugin-stache-route-metadata/src/collector",
+    "@blackbaud/skyux-builder-plugin-stache-route-metadata/src/generator"
   ],
   "app": {
     "title": "Stache 2"

src/app/app-extras.module.ts

@@ -8,10 +8,13 @@ import { SkyAppConfig } from '@blackbaud/skyux-builder/runtime';
 // Stache's components. If we imported the StacheModule, each component would have two
 // declared modules, which Angular does not allow.
 
-import { StacheConfigService } from './public/src/modules/shared';
+import {
+  StacheConfigService,
+  StacheRouteMetadataService,
+  StacheWindowRef
+} from './public/src/modules/shared';
 import { StacheTitleService } from './public/src/modules/wrapper/title.service';
 import { StacheNavService } from './public/src/modules/nav/nav.service';
-import { StacheWindowRef } from './public/src/modules/shared';
 
 require('smoothscroll-polyfill').polyfill();
 require('style-loader!prismjs/themes/prism.css');
@@ -28,7 +31,8 @@ require('style-loader!prismjs/themes/prism.css');
     // These services would normally be provided in the StacheModule:
     StacheTitleService,
     StacheNavService,
-    StacheWindowRef
+    StacheWindowRef,
+    StacheRouteMetadataService
   ]
 })
 export class AppExtrasModule { }

src/app/learn/getting-started/index.html

@@ -0,0 +1,4 @@
+<!-- Sidebar route name will use the directory name -->
+<stache>
+
+</stache>

src/app/learn/index.html

@@ -0,0 +1,4 @@
+<!-- Sidebar route name will use the directory name -->
+<stache>
+
+</stache>

src/app/learn/tutorials/index.html

@@ -0,0 +1,4 @@
+<!-- Sidebar route name will be pageTitle -->
+<stache pageTitle="Advanced">
+
+</stache>

src/app/public/src/modules/nav/nav.service.ts

@@ -1,17 +1,17 @@
 import { Injectable } from '@angular/core';
 import { Router, NavigationStart } from '@angular/router';
 
-import { StacheConfigService } from '../shared';
+import { StacheConfigService, StacheRouteMetadataService } from '../shared';
 import { StacheNavLink } from './nav-link';
 
 @Injectable()
 export class StacheNavService {
   private activeRoutes: StacheNavLink[];
 
   public constructor(
+    private router: Router,
     private configService: StacheConfigService,
-    private router: Router
-  ) {
+    private routeMetadataService: StacheRouteMetadataService) {
     router.events.subscribe((val: any) => {
       if (val instanceof NavigationStart) {
         this.clearActiveRoutes();
@@ -76,8 +76,14 @@ export class StacheNavService {
 
   private formatRoutes(routes: any[]): StacheNavLink[] {
     let formatted = routes.map(route => {
+      let name = this.getPreferredName(route.path);
+
+      if (name === '') {
+        name = this.getNameFromPath(route.segments[route.segments.length - 1]);
+      }
+
       return {
-        name: this.getNameFromPath(route.segments[route.segments.length - 1]),
+        name: name,
         path: `/${route.path}`,
         children: this.formatRoutes(route.children)
       } as any;
@@ -86,6 +92,22 @@ export class StacheNavService {
     return formatted as StacheNavLink[];
   }
 
+  private getPreferredName(path: string): string {
+    const routeMetadata = this.routeMetadataService.routes;
+
+    if (routeMetadata) {
+      let foundRoute = routeMetadata.filter((route: any) => {
+        return route.path === path;
+      })[0];
+
+      if (foundRoute) {
+        return foundRoute.name;
+      }
+    }
+
+    return '';
+  }
+
   private getNameFromPath(path: string): string {
     path = path.replace(/-/g, ' ');
     return this.toTitleCase(path);

src/app/public/src/modules/shared/index.ts

@@ -2,3 +2,4 @@ export { StacheConfigService } from './config.service';
 export { InputConverter } from './input-converter';
 export { TestUtility } from './testing/test-utility';
 export { StacheWindowRef } from './window-ref';
+export { StacheRouteMetadataService } from './route-metadata.service';

src/app/public/src/modules/shared/route-metadata.service.ts

@@ -0,0 +1,5 @@
+// The contents of this file are automatically generated by
+// https://github.com/blackbaud/skyux-builder-plugin-stache-route-metadata
+export class StacheRouteMetadataService {
+  public routes: any[];
+}

src/app/public/src/stache.module.ts

@@ -21,7 +21,7 @@ import { StacheWrapperModule } from './modules/wrapper/wrapper.module';
 import { StachePageHeaderModule } from './modules/page-header/page-header.module';
 import { StachePageSummaryModule } from './modules/page-summary/page-summary.module';
 import { StacheVideoModule } from './modules/video/video.module';
-import { StacheWindowRef } from './modules/shared';
+import { StacheWindowRef, StacheRouteMetadataService } from './modules/shared';
 
 export { StacheConfigService } from './modules/shared';
 
@@ -47,7 +47,8 @@ export { StacheConfigService } from './modules/shared';
     StacheWrapperModule
   ],
   providers: [
-    StacheWindowRef
+    StacheWindowRef,
+    StacheRouteMetadataService
   ]
 })
 export class StacheModule { }

src/app/shared/app-nav/app-nav.component.ts

@@ -9,6 +9,10 @@ export class AppNavComponent {
     {
       name: 'Home',
       path: '/'
+    },
+    {
+      name: 'Learn',
+      path: '/learn'
     }
   ];
 }