Refactor docs navigation logic (scullyio#900)

* docs(monorepo): first update docs
* docs(docsWeb): move to a new navigation structure
* docs(docsWeb): refactor navigation, automated next/prev
* docs(docsWeb): revert a couple of search&replace mistakes
* refactor(docsWeb): improve readability of code and css

ISSUES CLOSED: scullyio#890

apps/sample-blog/src/app/blog/blog-holder.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ScullyRoute, ScullyRoutesService } from '@scullyio/ng-lib';
+import { ScullyRoute, ScullyRoutesService, TransferStateService } from '@scullyio/ng-lib';
 import { map } from 'rxjs/operators';
 
 @Component({
@@ -20,10 +20,13 @@ import { map } from 'rxjs/operators';
   `,
 })
 export class BlogHolderComponent {
-  blogs$ = this.srs.available$.pipe(
-    map((routeList) => routeList.filter((route: ScullyRoute) => route.route.startsWith(`/blog/`))),
-    map((blogs) => blogs.sort((a, b) => (a.date < b.date ? -1 : 1)))
+  blogs$ = this.sts.useScullyTransferState(
+    'blogRotues',
+    this.srs.available$.pipe(
+      map((routeList) => routeList.filter((route: ScullyRoute) => route.route.startsWith(`/blog/`))),
+      map((blogs) => blogs.sort((a, b) => (a.date < b.date ? -1 : 1)))
+    )
   );
 
-  constructor(private srs: ScullyRoutesService) {}
+  constructor(private srs: ScullyRoutesService, private sts: TransferStateService) {}
 }

apps/scully-docs/src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 import { Router } from '@angular/router';
+import { NavListService } from './components/nav-list/nav-list.service';
 
 @Component({
   selector: 'app-root',
@@ -10,7 +11,10 @@ import { Router } from '@angular/router';
     <div class="page-content">
       <section class="nav-container" *ngIf="showNavlist">
         <div class="scullyio-lang-select"></div>
-        <ul class="scullyio-nav-list"></ul>
+        <!-- <ul class="scullyio-nav-list"></ul> -->
+        <nav>
+          <ul class="sideMenu" [navItem]="nl.docTree$ | async"></ul>
+        </nav>
       </section>
 
       <section class="router-container">
@@ -20,7 +24,7 @@ import { Router } from '@angular/router';
   `,
 })
 export class AppComponent {
-  constructor(private router: Router) {}
+  constructor(private router: Router, public nl: NavListService) {}
   get showNavlist() {
     return this.router.url !== '/';
   }

apps/scully-docs/src/app/app.module.ts

@@ -6,7 +6,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HeaderModule } from './components/header';
 import { LangSelectModule } from './components/lang-select';
-import { NavListModule } from './components/nav-list';
+import { NavListModule } from './components/nav-list/nav-list.module';
 
 @NgModule({
   declarations: [AppComponent],

apps/scully-docs/src/app/components/lang-select/services/lang-select/lang-select.service.ts

@@ -3,7 +3,6 @@ import { Observable, forkJoin } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 import { ScullyRoute, ScullyRoutesService } from '@scullyio/ng-lib';
 import { AllLanguages, CurrentPageLanguageData, LanguageDefaults, PageLanguageData } from '../../models';
-import { NavUtilService } from '../../../nav-list/services/nav-util';
 
 @Injectable({ providedIn: 'root' })
 export class LangSelectService {
@@ -24,7 +23,7 @@ export class LangSelectService {
   private pageLangs$: Observable<PageLanguageData> = this.scully.available$.pipe(
     map((availableRoutes: ScullyRoute[]) => {
       // add stripped, array version of routes
-      const postsArray = this.util.simplifyRootRoutes(availableRoutes);
+      const postsArray = this.simplifyRootRoutes(availableRoutes);
       // find counterpart languages for each route
       const pageLanguages = this.createNavListLanguages(postsArray);
       return pageLanguages;
@@ -81,7 +80,7 @@ export class LangSelectService {
     })
   );
 
-  constructor(private scully: ScullyRoutesService, private util: NavUtilService) {}
+  constructor(private scully: ScullyRoutesService) {}
 
   /**
    * Finds all the language "versions" of a page and constructs a list
@@ -122,6 +121,28 @@ export class LangSelectService {
     return pageAvailableLangs;
   }
 
+  /**
+   * Remove redundant route paths from scully.available$
+   * and return simplified, array version of each path.
+   *
+   * @param availablePosts ScullyRoute[] directly from scully.available$
+   */
+  public simplifyRootRoutes(availablePosts: ScullyRoute[]): ScullyRoute[] {
+    return availablePosts
+      .map((post) => {
+        // remove default path /docs/ to accommodate scully's need
+        // for a dedicated route to display rendered md files.
+        const routeArray = post.route.split('/');
+        routeArray.splice(0, 2);
+        // combine with existing post data
+        if (routeArray.length > 0) {
+          return { ...post, routeArray };
+        }
+        // only include path after /docs/
+      })
+      .filter((post) => !!post);
+  }
+
   /**
    * Determines which route to use for a given language link.
    *