feat: add page for live streams

src/app/app-routing.module.ts

@@ -7,6 +7,10 @@ const routes: Routes = [
     path: 'blog',
     loadChildren: () => import('./blog/blog.module').then((m) => m.BlogModule),
   },
+  {
+    path: 'live',
+    loadChildren: () => import('./live/live.module').then(m => m.LiveModule)
+  },
   { path: ':pageId', component: PageComponent },
   { path: '', redirectTo: '/blog', pathMatch: 'full' },
 ];

src/app/app.component.ts

@@ -18,6 +18,8 @@ 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()"
             >About</a
           >
@@ -41,6 +43,10 @@ import { map } from 'rxjs/operators';
           <a routerLink="/">Brandon Roberts</a>
 
           <div class="social">
+            <a *ngIf="!(isHandset$ | async)" routerLink="/blog">Posts</a>
+
+            <a *ngIf="!(isHandset$ | async)" routerLink="/live">Live Stream</a>
+
             <a *ngIf="!(isHandset$ | async)" routerLink="/talks">Talks</a>
 
             <a *ngIf="!(isHandset$ | async)" routerLink="/about">About</a>

src/app/blog/blog.component.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { MatListModule } from '@angular/material/list';
 import { RouterModule } from '@angular/router';
 
-import { ScullyRoutesService } from '@scullyio/ng-lib';
+import { ScullyRoutesService, ScullyRoute } from '@scullyio/ng-lib';
 import { map } from 'rxjs/operators';
 
 @Component({
@@ -42,7 +42,7 @@ import { map } from 'rxjs/operators';
 })
 export class BlogComponent {
   posts$ = this.routesService.available$.pipe(
-    map((routes) => routes.filter((route) => route.route.startsWith('/blog/posts'))),
+    map((routes) => routes.filter(route => this.isPost(route))),
     map((filteredRoutes) =>
       filteredRoutes
         .slice()
@@ -55,6 +55,10 @@ export class BlogComponent {
     )
   );
 
+  isPost(route: ScullyRoute) {
+    return route.route.startsWith('/blog/posts') && !route.route.includes('angular-unfiltered');
+  }
+
   constructor(private routesService: ScullyRoutesService) {}
 }
 

src/app/live/live-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { LiveComponent } from './live.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LiveComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class LiveRoutingModule {}

src/app/live/live.component.ts

@@ -0,0 +1,69 @@
+import { Component, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatListModule } from '@angular/material/list';
+import { RouterModule } from '@angular/router';
+
+import { ScullyRoutesService, ScullyRoute } from '@scullyio/ng-lib';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-posts',
+  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>
+        </h2>
+
+        <p mat-line>{{ post.publishedDate | date:'longDate' }}</p>
+      </mat-list-item>
+    </mat-list>
+  `,
+  styles: [
+    `
+      a {
+        color: black;
+        white-space: initial;
+      }
+
+      :host /deep/ .mat-list-item {
+        font-size: 24px;
+      }
+
+      @media screen and (max-width: 480px) {
+        :host /deep/ .mat-list-item {
+          font-size: 16px;
+        }
+      }
+    `,
+  ],
+})
+export class LiveComponent {
+  posts$ = this.routesService.available$.pipe(
+    map((routes) => routes.filter(route => this.isPost(route))),
+    map((filteredRoutes) =>
+      filteredRoutes
+        .slice()
+        .sort((a, b) =>
+          new Date(a.publishedDate).getTime() >
+          new Date(b.publishedDate).getTime()
+            ? -1
+            : 0
+        )
+    )
+  );
+
+  isPost(route: ScullyRoute) {
+    return route.route.includes('angular-unfiltered');
+  }
+
+  constructor(private routesService: ScullyRoutesService) {}
+}
+
+@NgModule({
+  declarations: [LiveComponent],
+  imports: [CommonModule, MatListModule, RouterModule],
+})
+export class LiveComponentModule {}

src/app/live/live.module.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { LiveRoutingModule } from './live-routing.module';
+import { LiveComponentModule } from './live.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    LiveRoutingModule,
+    LiveComponentModule
+  ],
+})
+export class LiveModule {}

src/assets/scully-routes.json

@@ -1 +1 @@
-[{"route":"/about","title":"About Me","description":"About Me","published":true,"slug":"about","sourceFile":"about.md"},{"route":"/talks","title":"Tech Talks and Appearances","description":"Stuff","published":true,"slug":"talks","sourceFile":"talks.md"},{"route":"/blog/posts/2019-03-04-handling-error-states-with-ngrx","title":"Handling Error States with NgRx","description":"Handling Error States with NgRx","published":true,"slug":"2019-03-04-handling-error-states-with-ngrx","publishedDate":"2019-03-04T00:00:00.000Z","sourceFile":"2019-03-04-handling-error-states-with-ngrx.md","readingTime":5},{"route":"/blog/posts/2019-03-27-custom-route-matching-angular-router","title":"Custom Route Matching with the Angular Router","description":"Custom Route Matching with the Angular Router","published":true,"slug":"2019-03-27-custom-route-matching-angular-router","publishedDate":"2019-03-27T00:00:00.000Z","sourceFile":"2019-03-27-custom-route-matching-angular-router.md","readingTime":3},{"route":"/blog/posts/2020-05-14-angular-unfiltered-001","title":"Angular Unfiltered Episode 001: Angular Forms w/Mike Ryan","description":"Chatting with Mike Ryan about Forms in Angular","published":true,"slug":"2020-05-14-angular-unfiltered-001","publishedDate":"2020-05-14 02:00 PM CST","sourceFile":"2020-05-14-angular-unfiltered-001.md","readingTime":1},{"route":"/blog/posts/2020-05-14-mixing-action-styles-ngrx","title":"Mixing Action Styles in NgRx State","description":"Mixing Action Styles in NgRx State","published":true,"slug":"2020-05-14-mixing-action-styles-ngrx","publishedDate":"2020-05-14 02:00 PM CST","sourceFile":"2020-05-14-mixing-action-styles-ngrx.md","readingTime":3},{"route":"/blog/posts/2020-05-15-angular-unfiltered-002","title":"Angular Unfiltered Episode 002: Angular Forms Pt. 2 w/Zack DeRose","description":"Chatting with Zack DeRose about Forms in Angular","published":true,"slug":"2020-05-15-angular-unfiltered-002","publishedDate":"2020-05-15 02:00 PM CST","sourceFile":"2020-05-15-angular-unfiltered-002.md","readingTime":1},{"route":"/blog/posts/2020-05-22-angular-unfiltered-003","title":"Angular Unfiltered Episode 003: Quick Chat w/Austin Akers","description":"Chatting with Austin Akers","published":true,"slug":"2020-05-22-angular-unfiltered-003","publishedDate":"2020-05-22 02:00 PM CST","sourceFile":"2020-05-22-angular-unfiltered-003.md","readingTime":1},{"route":"/blog/posts/2020-05-22-angular-unfiltered-004","title":"Angular Unfiltered Episode 004: Quick Chat w/Devin Shoemaker","description":"Chatting with Devin Shoemaker","published":true,"slug":"2020-05-22-angular-unfiltered-004","publishedDate":"2020-06-12 02:00 PM CST","sourceFile":"2020-06-12-angular-unfiltered-004.md","readingTime":1},{"route":"/blog/posts/2020-06-19-angular-unfiltered-005","title":"Angular Unfiltered Episode 005: Quick Chat w/Luke Howell","description":"Chatting with Luke Howell","published":true,"slug":"2020-06-19-angular-unfiltered-005","publishedDate":"2020-06-19 02:00 PM CST","sourceFile":"2020-06-19-angular-unfiltered-005.md","readingTime":1},{"route":"/blog/posts/2020-06-26-angular-unfiltered-006","title":"Angular Unfiltered Episode 006: Quick Chat w/Bryan Wilhite","description":"Chatting with Bryan Wilhite","published":true,"slug":"2020-06-26-angular-unfiltered-006","publishedDate":"2020-06-26 02:00 PM CST","sourceFile":"2020-06-26-angular-unfiltered-006.md","readingTime":1},{"route":"/blog/posts/2020-07-02-angular-unfiltered-007","title":"Angular Unfiltered Episode 007: RxJS Discussion w/Josh Van Allen & Nicholas Cunningham","description":"Chatting about the blog post by Ben Lesh about RxJS","published":true,"slug":"2020-07-02-angular-unfiltered-007","publishedDate":"2020-07-02 02:00 PM CST","sourceFile":"2020-07-02-angular-unfiltered-007.md","readingTime":1},{"route":"/blog/posts/2020-07-06-lazy-loading-routes-observable","title":"Lazy Loading Routes using an Observable with the Angular Router","description":"Describes how to use an Observable when lazy loading routes with the Angular Router","published":true,"slug":"2020-07-06-lazy-loading-routes-observable","publishedDate":"2020-07-06 02:00 PM CST","sourceFile":"2020-07-06-lazy-loading-routes-observable.md","readingTime":4},{"route":"/blog/posts/2020-07-10-angular-unfiltered-008","title":"Angular Unfiltered Episode 008: Quick Chat w/Kate Sky","description":"Chatting with Kate Sky","published":true,"slug":"2020-07-10-angular-unfiltered-008","publishedDate":"2020-07-10 02:00 PM CST","sourceFile":"2020-07-10-angular-unfiltered-008.md","readingTime":1},{"route":"/blog/posts/2020-07-17-angular-unfiltered-009","title":"Angular Unfiltered Episode 009: Angular Dev Twitter is on fire","description":"Chatting with Mike Hartington, and Lance Finney","published":true,"slug":"2020-07-17-angular-unfiltered-009","publishedDate":"2020-07-17 02:00 PM CST","sourceFile":"2020-07-17-angular-unfiltered-009.md","readingTime":1},{"route":"/blog"},{"route":"/"}]
+[{"route":"/about","title":"About Me","description":"About Me","published":true,"slug":"about","sourceFile":"about.md"},{"route":"/talks","title":"Tech Talks and Appearances","description":"Stuff","published":true,"slug":"talks","sourceFile":"talks.md"},{"route":"/blog/posts/2019-03-04-handling-error-states-with-ngrx","title":"Handling Error States with NgRx","description":"Handling Error States with NgRx","published":true,"slug":"2019-03-04-handling-error-states-with-ngrx","publishedDate":"2019-03-04T00:00:00.000Z","sourceFile":"2019-03-04-handling-error-states-with-ngrx.md","readingTime":5},{"route":"/blog/posts/2019-03-27-custom-route-matching-angular-router","title":"Custom Route Matching with the Angular Router","description":"Custom Route Matching with the Angular Router","published":true,"slug":"2019-03-27-custom-route-matching-angular-router","publishedDate":"2019-03-27T00:00:00.000Z","sourceFile":"2019-03-27-custom-route-matching-angular-router.md","readingTime":3},{"route":"/blog/posts/2020-05-14-angular-unfiltered-001","title":"Angular Unfiltered Episode 001: Angular Forms w/Mike Ryan","description":"Chatting with Mike Ryan about Forms in Angular","published":true,"slug":"2020-05-14-angular-unfiltered-001","publishedDate":"2020-05-14 02:00 PM CST","sourceFile":"2020-05-14-angular-unfiltered-001.md","readingTime":1},{"route":"/blog/posts/2020-05-14-mixing-action-styles-ngrx","title":"Mixing Action Styles in NgRx State","description":"Mixing Action Styles in NgRx State","published":true,"slug":"2020-05-14-mixing-action-styles-ngrx","publishedDate":"2020-05-14 02:00 PM CST","sourceFile":"2020-05-14-mixing-action-styles-ngrx.md","readingTime":3},{"route":"/blog/posts/2020-05-15-angular-unfiltered-002","title":"Angular Unfiltered Episode 002: Angular Forms Pt. 2 w/Zack DeRose","description":"Chatting with Zack DeRose about Forms in Angular","published":true,"slug":"2020-05-15-angular-unfiltered-002","publishedDate":"2020-05-15 02:00 PM CST","sourceFile":"2020-05-15-angular-unfiltered-002.md","readingTime":1},{"route":"/blog/posts/2020-05-22-angular-unfiltered-003","title":"Angular Unfiltered Episode 003: Quick Chat w/Austin Akers","description":"Chatting with Austin Akers","published":true,"slug":"2020-05-22-angular-unfiltered-003","publishedDate":"2020-05-22 02:00 PM CST","sourceFile":"2020-05-22-angular-unfiltered-003.md","readingTime":1},{"route":"/blog/posts/2020-05-22-angular-unfiltered-004","title":"Angular Unfiltered Episode 004: Quick Chat w/Devin Shoemaker","description":"Chatting with Devin Shoemaker","published":true,"slug":"2020-05-22-angular-unfiltered-004","publishedDate":"2020-06-12 02:00 PM CST","sourceFile":"2020-06-12-angular-unfiltered-004.md","readingTime":1},{"route":"/blog/posts/2020-06-19-angular-unfiltered-005","title":"Angular Unfiltered Episode 005: Quick Chat w/Luke Howell","description":"Chatting with Luke Howell","published":true,"slug":"2020-06-19-angular-unfiltered-005","publishedDate":"2020-06-19 02:00 PM CST","sourceFile":"2020-06-19-angular-unfiltered-005.md","readingTime":1},{"route":"/blog/posts/2020-06-26-angular-unfiltered-006","title":"Angular Unfiltered Episode 006: Quick Chat w/Bryan Wilhite","description":"Chatting with Bryan Wilhite","published":true,"slug":"2020-06-26-angular-unfiltered-006","publishedDate":"2020-06-26 02:00 PM CST","sourceFile":"2020-06-26-angular-unfiltered-006.md","readingTime":1},{"route":"/blog/posts/2020-07-02-angular-unfiltered-007","title":"Angular Unfiltered Episode 007: RxJS Discussion w/Josh Van Allen & Nicholas Cunningham","description":"Chatting about the blog post by Ben Lesh about RxJS","published":true,"slug":"2020-07-02-angular-unfiltered-007","publishedDate":"2020-07-02 02:00 PM CST","sourceFile":"2020-07-02-angular-unfiltered-007.md","readingTime":1},{"route":"/blog/posts/2020-07-06-lazy-loading-routes-observable","title":"Lazy Loading Routes using an Observable with the Angular Router","description":"Describes how to use an Observable when lazy loading routes with the Angular Router","published":true,"slug":"2020-07-06-lazy-loading-routes-observable","publishedDate":"2020-07-06 02:00 PM CST","sourceFile":"2020-07-06-lazy-loading-routes-observable.md","readingTime":4},{"route":"/blog/posts/2020-07-10-angular-unfiltered-008","title":"Angular Unfiltered Episode 008: Quick Chat w/Kate Sky","description":"Chatting with Kate Sky","published":true,"slug":"2020-07-10-angular-unfiltered-008","publishedDate":"2020-07-10 02:00 PM CST","sourceFile":"2020-07-10-angular-unfiltered-008.md","readingTime":1},{"route":"/blog/posts/2020-07-17-angular-unfiltered-009","title":"Angular Unfiltered Episode 009: Angular Dev Twitter is on fire","description":"Chatting with Mike Hartington, and Lance Finney","published":true,"slug":"2020-07-17-angular-unfiltered-009","publishedDate":"2020-07-17 02:00 PM CST","sourceFile":"2020-07-17-angular-unfiltered-009.md","readingTime":1},{"route":"/blog/posts/2020-07-24-angular-unfiltered-010","title":"Angular Unfiltered Episode 010: Quick Chat w/Ben Lesh","description":"Chatting with RxJS maintainer, Ben Lesh","published":true,"slug":"2020-07-24-angular-unfiltered-010","publishedDate":"2020-07-24 02:00 PM CST","sourceFile":"2020-07-24-angular-unfiltered-010.md","readingTime":1},{"route":"/blog/posts/2020-07-31-angular-unfiltered-011","title":"Angular Unfiltered Episode 011: Quick Chat w/Stephen & Jules","description":"Chatting with Stephen and Jules from the Angular team at Google","published":true,"slug":"2020-07-31-angular-unfiltered-011","publishedDate":"2020-07-31 02:00 PM CST","sourceFile":"2020-07-31-angular-unfiltered-011.md","readingTime":1},{"route":"/blog/posts/2020-08-07-angular-unfiltered-012","title":"Angular Unfiltered Episode 012: Quick Chat w/Bram Borggreve","description":"Chatting with Beeman","published":true,"slug":"2020-08-07-angular-unfiltered-012","publishedDate":"2020-08-07 02:00 PM CST","sourceFile":"2020-08-07-angular-unfiltered-012.md","readingTime":1},{"route":"/blog/posts/2020-08-12-angular-unfiltered-013","title":"Angular Unfiltered Episode 013: Roadmap Discussion w/Lars Gyrup Brink Nielsen","description":"NgRx team member Alex Okrushko joins me to talk about the latest release","published":true,"slug":"2020-08-12-angular-unfiltered-013","publishedDate":"2020-08-12 02:00 PM CST","sourceFile":"2020-08-12-angular-unfiltered-013.md","readingTime":1},{"route":"/blog/posts/2020-08-14-angular-unfiltered-014","title":"Angular Unfiltered Episode 014: NgRx V10 w/Alex Okrushko","description":"NgRx team member Alex Okrushko joins me to talk about the latest release","published":true,"slug":"2020-08-14-angular-unfiltered-014","publishedDate":"2020-08-14 02:00 PM CST","sourceFile":"2020-08-14-angular-unfiltered-014.md","readingTime":1},{"route":"/blog/posts/2020-08-21-angular-unfiltered-015","title":"Angular Unfiltered Episode 015: Quick Chat w/L.E. Nichols","description":"Chatting with L.E. Nichols","published":true,"slug":"2020-08-21-angular-unfiltered-015","publishedDate":"2020-08-21 02:00 PM CST","sourceFile":"2020-08-21-angular-unfiltered-015.md","readingTime":1},{"route":"/blog/posts/2020-08-24-angular-unfiltered-016","title":"Angular Unfiltered Episode 016: Quick Chat w/Shahar Kazaz","description":"Chatting with Shahar Kazaz","published":true,"slug":"2020-08-24-angular-unfiltered-016","publishedDate":"2020-08-24 02:00 PM CST","sourceFile":"2020-08-24-angular-unfiltered-016.md","readingTime":1},{"route":"/blog/posts/2020-09-11-angular-unfiltered-018","title":"Angular Unfiltered Episode 018: Quick Chat w/Jordan Powell","description":"Chatting with Jordan Powell","published":true,"slug":"2020-09-11-angular-unfiltered-018","publishedDate":"2020-09-11 02:00 PM CST","sourceFile":"2020-09-11-angular-unfiltered-017.md","readingTime":1},{"route":"/blog/posts/2020-09-25-angular-unfiltered-019","title":"Angular Unfiltered Episode 019: Quick Chat w/Santosh Yadav","description":"Chatting with Santosh Yadav","published":true,"slug":"2020-09-25-angular-unfiltered-019","publishedDate":"2020-09-25 02:00 PM CST","sourceFile":"2020-09-25-angular-unfiltered-018.md","readingTime":1},{"route":"/blog"},{"route":"/live"},{"route":"/"}]