feat: switch to angular-routing library

package.json

@@ -31,6 +31,7 @@
     "@scullyio/init": "1.0.1",
     "@scullyio/ng-lib": "1.0.0",
     "@scullyio/scully": "1.0.2",
+    "angular-routing": "0.3.1",
     "core-js": "^3.6.5",
     "ngx-markdown": "^10.1.1",
     "path-to-regexp": "^6.1.0",

scully.blog.config.ts

@@ -1,5 +1,30 @@
 require('./scully-plugins/post-info.plugin.js');
-import { ScullyConfig } from '@scullyio/scully';
+import { HandledRoute, registerPlugin, ScullyConfig } from '@scullyio/scully';
+import { readdirSync } from 'fs';
+
+// registerPlugin('router', 'posts', async(route: string, config) => {
+//   const posts: HandledRoute[] = readdirSync('./content/posts').map(post => ({
+//     route: `/blog/posts/${post.split('.md')[0]}`
+//   }));console.log(posts);
+
+//   return posts;
+// });
+
+// registerPlugin('router', 'pages', async(route: string, config) => {
+//   const pages: HandledRoute[] = readdirSync('./content/pages').map(page => ({
+//     route: `/${page.split('.md')[0]}`
+//   }));console.log(pages);
+
+//   return pages;
+// });
+
+const getRoutes = new Promise<string[]>((res) => {
+  const posts = readdirSync('./content/posts').map(post => `/blog/posts/${post.split('.md')[0]}`);
+  const pages = readdirSync('./content/pages').map(page => `/${page.split('.md')[0]}`);
+  const otherPages = ['/live'];
+
+  res([...posts, ...pages, ...otherPages]);
+});
 
 export const config: ScullyConfig = {
   projectRoot: './src',
@@ -10,13 +35,17 @@ export const config: ScullyConfig = {
       type: 'contentFolder',
       id: {
         folder: './content/posts',
-      },
+      }
     },
     '/:pageId': {
       type: 'contentFolder',
       pageId: {
         folder: './content/pages',
-      },
-    },
+      }
+    }
   },
+  extraRoutes: [
+    '/blog',
+    '/live'
+  ]
 };

src/app/app.component.ts

@@ -17,13 +17,13 @@ import { map } from 'rxjs/operators';
       >
         <mat-toolbar>Menu</mat-toolbar>
         <mat-nav-list>
-          <a mat-list-item routerLink="/" (click)="drawer.close()">Home</a>
-          <a mat-list-item routerLink="/blog" (click)="drawer.close()">Posts</a>
-          <a mat-list-item routerLink="/live" (click)="drawer.close()">Live Stream</a>
-          <a mat-list-item routerLink="/about" (click)="drawer.close()"
+          <a mat-list-item linkTo="/" (click)="drawer.close()">Home</a>
+          <a mat-list-item linkTo="/blog" (click)="drawer.close()">Posts</a>
+          <a mat-list-item linkTo="/live" (click)="drawer.close()">Live Stream</a>
+          <a mat-list-item linkTo="/about" (click)="drawer.close()"
             >About</a
           >
-          <a mat-list-item routerLink="/talks" (click)="drawer.close()"
+          <a mat-list-item linkTo="/talks" (click)="drawer.close()"
             >Talks</a
           >
         </mat-nav-list>
@@ -40,16 +40,16 @@ import { map } from 'rxjs/operators';
             <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
           </button>
 
-          <a routerLink="/">Brandon Roberts</a>
+          <a linkTo="/">Brandon Roberts</a>
 
           <div class="social">
-            <a *ngIf="!(isHandset$ | async)" routerLink="/blog">Posts</a>
+            <a *ngIf="!(isHandset$ | async)" linkTo="/blog">Posts</a>
 
-            <a *ngIf="!(isHandset$ | async)" routerLink="/live">Live Stream</a>
+            <a *ngIf="!(isHandset$ | async)" linkTo="/live">Live Stream</a>
 
-            <a *ngIf="!(isHandset$ | async)" routerLink="/talks">Talks</a>
+            <a *ngIf="!(isHandset$ | async)" linkTo="/talks">Talks</a>
 
-            <a *ngIf="!(isHandset$ | async)" routerLink="/about">About</a>
+            <a *ngIf="!(isHandset$ | async)" linkTo="/about">About</a>
 
             <a href="https://twitter.com/brandontroberts" title="Twitter">
               <img src="assets/images/logos/twitter-icon.svg" />
@@ -62,7 +62,14 @@ import { map } from 'rxjs/operators';
         </mat-toolbar>
 
         <div class="content" [class.container]="!(isHandset$ | async)">
-          <router-outlet></router-outlet>
+          <router>
+            <route path="/blog" [exact]="false" [load]="components.blog"></route>
+            <route path="/live" [load]="components.live"></route>
+            <route path="/:pageId">
+              <app-page *routeComponent></app-page>
+            </route>
+            <route path="/" redirectTo="/blog"></route>
+          </router>
         </div>
 
         <app-footer></app-footer>
@@ -125,6 +132,10 @@ import { map } from 'rxjs/operators';
   ],
 })
 export class AppComponent {
+  components = {
+    blog: () => import('./blog/blog.module').then((m) => m.BlogModule),
+    live: () => import('./live/live.component').then((m) => m.LiveComponent),
+  }
   isHandset$: Observable<boolean> = this.breakpointObserver
     .observe(Breakpoints.Handset)
     .pipe(map((result) => result.matches));

src/app/app.module.ts

@@ -1,24 +1,35 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule } from '@angular/core';
+import { NgModule, Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
 import { LayoutModule } from '@angular/cdk/layout';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { RoutingModule } from 'angular-routing';
+import { ScullyLibModule } from '@scullyio/ng-lib';
 
 import { AppComponent } from './app.component';
-import { AppRoutingModule } from './app-routing.module';
 import { FooterComponentModule } from './footer.component';
 import { PageComponentModule } from './pages/page.component';
 
+@Component({
+  template: '<scully-content></scully-content>'
+})
+export class ContentComponent {}
+
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, ContentComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    AppRoutingModule,
+    RoutingModule.forRoot(),
+    RouterModule.forRoot([
+      { path: 'blog/posts/:id', component: ContentComponent },
+      { path: ':pageId', component: ContentComponent }
+    ], { initialNavigation: false }),
     LayoutModule,
     MatToolbarModule,
     MatButtonModule,
@@ -27,8 +38,8 @@ import { PageComponentModule } from './pages/page.component';
     MatListModule,
     FooterComponentModule,
     PageComponentModule,
+    ScullyLibModule
   ],
-  providers: [],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/blog/blog.component.ts

@@ -1,7 +1,7 @@
 import { Component, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatListModule } from '@angular/material/list';
-import { RouterModule } from '@angular/router';
+import { RoutingModule } from 'angular-routing';
 
 import { ScullyRoutesService, ScullyRoute } from '@scullyio/ng-lib';
 import { map } from 'rxjs/operators';
@@ -14,7 +14,7 @@ import { map } from 'rxjs/operators';
     <mat-list>
       <mat-list-item *ngFor="let post of posts$ | async">
         <h2 mat-line>
-          <a routerLink="{{ post.route }}">{{ post.title }}</a>
+          <a linkTo="{{ post.route }}">{{ post.title }}</a>
         </h2>
 
         <p mat-line>{{ post.publishedDate | date:'longDate' }} - {{ post.readingTime }} min read</p>
@@ -64,6 +64,7 @@ export class BlogComponent {
 
 @NgModule({
   declarations: [BlogComponent],
-  imports: [CommonModule, MatListModule, RouterModule],
+  exports: [BlogComponent],
+  imports: [CommonModule, MatListModule, RoutingModule],
 })
 export class BlogComponentModule {}

src/app/blog/blog.module.ts

@@ -1,16 +1,33 @@
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { NgModule, Component } from '@angular/core';
+import { RoutingModule, ModuleWithRoute } from 'angular-routing';
 
-import { BlogRoutingModule } from './blog-routing.module';
 import { BlogComponentModule } from './blog.component';
 import { PostComponentModule } from './post.component';
 
+@Component({
+  template: `
+    <router>
+      <route path="/posts/:id">
+        <app-post *routeComponent></app-post>
+      </route>
+      <route path="/">
+        <app-posts *routeComponent></app-posts>
+      </route>
+    </router>
+  `
+})
+export class PostsComponent { }
+
 @NgModule({
+  declarations: [PostsComponent],
   imports: [
     CommonModule,
-    BlogRoutingModule,
     BlogComponentModule,
     PostComponentModule,
+    RoutingModule
   ],
 })
-export class BlogModule {}
+export class BlogModule implements ModuleWithRoute {
+  routeComponent = PostsComponent;
+}

src/app/blog/post.component.ts

@@ -43,6 +43,7 @@ export class PostComponent implements AfterViewChecked {
 
 @NgModule({
   declarations: [PostComponent],
+  exports: [PostComponent],
   imports: [CommonModule, ScullyLibModule, PostCommentsComponentModule],
 })
 export class PostComponentModule {}

src/app/live/live.component.ts

@@ -1,20 +1,21 @@
 import { Component, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatListModule } from '@angular/material/list';
-import { RouterModule } from '@angular/router';
+import { RoutingModule } from 'angular-routing';
 
 import { ScullyRoutesService, ScullyRoute } from '@scullyio/ng-lib';
 import { map } from 'rxjs/operators';
 
+
 @Component({
-  selector: 'app-posts',
+  selector: 'app-live',
   template: `
     <h2>Live Stream</h2>
 
     <mat-list>
       <mat-list-item *ngFor="let post of posts$ | async">
         <h2 mat-line>
-          <a routerLink="{{ post.route }}">{{ post.title }}</a>
+          <a linkTo="{{ post.route }}">{{ post.title }}</a>
         </h2>
 
         <p mat-line>{{ post.publishedDate | date:'longDate' }}</p>
@@ -64,6 +65,6 @@ export class LiveComponent {
 
 @NgModule({
   declarations: [LiveComponent],
-  imports: [CommonModule, MatListModule, RouterModule],
+  imports: [CommonModule, MatListModule, RoutingModule],
 })
 export class LiveComponentModule {}

yarn.lock

@@ -2307,6 +2307,14 @@ alphanum-sort@^1.0.0:
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
   integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
 
+angular-routing@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/angular-routing/-/angular-routing-0.3.1.tgz#5557177611b01a9c348acc1069fa09eb3a820a05"
+  integrity sha512-yEQ19GncjAwqUHTSsiiO77pq3osohrfstiRQiFJobbY4dO0YlkBD9v6PsbTXZwkzwlVfvmF/Z6HuPaUOtZRqFw==
+  dependencies:
+    query-string "^6.13.1"
+    tslib "^1.10.0"
+
 ansi-align@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"
@@ -9682,6 +9690,15 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+query-string@^6.13.1:
+  version "6.13.7"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.13.7.tgz#af53802ff6ed56f3345f92d40a056f93681026ee"
+  integrity sha512-CsGs8ZYb39zu0WLkeOhe0NMePqgYdAuCqxOYKDR5LVCytDZYMGx3Bb+xypvQvPHVPijRXB0HZNFllCzHRe4gEA==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
 query-string@^6.13.2:
   version "6.13.2"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.13.2.tgz#3585aa9412c957cbd358fd5eaca7466f05586dda"