From d67201b260be706f21ceade83e93db15e1f635f8 Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Wed, 25 Nov 2020 17:48:40 +0100
Subject: [PATCH 01/19] feat(series): add series page

---
 content/series/angular-scully-tailwind.md     | 20 ++++++++++
 content/series/nestjs-prisma.md               | 15 +++++++
 scully.notiz.config.ts                        | 11 ++++++
 src/app/app-routing.module.ts                 |  5 +++
 src/app/app.component.html                    |  7 ++++
 src/app/app.module.ts                         |  4 +-
 src/app/components/article/article.module.ts  |  2 -
 src/app/components/components.module.ts       |  3 +-
 .../series-details-routing.module.ts          | 12 ++++++
 .../series-details.component.css              |  2 +
 .../series-details.component.html             | 30 ++++++++++++++
 .../series-details.component.spec.ts          | 25 ++++++++++++
 .../series-details.component.ts               | 17 ++++++++
 .../series-details/series-details.module.ts   | 18 +++++++++
 src/app/pages/series/series-routing.module.ts | 31 +++++++++++++++
 src/app/pages/series/series.component.css     |  0
 src/app/pages/series/series.component.html    | 39 +++++++++++++++++++
 src/app/pages/series/series.component.spec.ts | 25 ++++++++++++
 src/app/pages/series/series.component.ts      | 18 +++++++++
 src/app/pages/series/series.module.ts         | 12 ++++++
 src/app/services/scully-content.service.ts    |  4 ++
 tailwind.config.js                            |  1 +
 22 files changed, 295 insertions(+), 6 deletions(-)
 create mode 100644 content/series/angular-scully-tailwind.md
 create mode 100644 content/series/nestjs-prisma.md
 create mode 100644 src/app/pages/series-details/series-details-routing.module.ts
 create mode 100644 src/app/pages/series-details/series-details.component.css
 create mode 100644 src/app/pages/series-details/series-details.component.html
 create mode 100644 src/app/pages/series-details/series-details.component.spec.ts
 create mode 100644 src/app/pages/series-details/series-details.component.ts
 create mode 100644 src/app/pages/series-details/series-details.module.ts
 create mode 100644 src/app/pages/series/series-routing.module.ts
 create mode 100644 src/app/pages/series/series.component.css
 create mode 100644 src/app/pages/series/series.component.html
 create mode 100644 src/app/pages/series/series.component.spec.ts
 create mode 100644 src/app/pages/series/series.component.ts
 create mode 100644 src/app/pages/series/series.module.ts

diff --git a/content/series/angular-scully-tailwind.md b/content/series/angular-scully-tailwind.md
new file mode 100644
index 00000000..abc3c69c
--- /dev/null
+++ b/content/series/angular-scully-tailwind.md
@@ -0,0 +1,20 @@
+---
+title: Angular + Scully + Tailwind CSS Series
+description: Build Angular Jamstack application with Scully styled by Tailwind CSS
+tags:
+  - Angular
+  - Scully
+  - Tailwind CSS
+---
+
+## What will you build?
+
+- Setting up Angular with Tailwind CSS
+- Jamstack with Scully
+- Deploy via GitHub Actions to firebase Hosting
+
+## Live Demo
+
+You are using right **now** a Scully application styled with Tailwind - notiz.dev uses the following stack: Angular, Scully, Tailwind CSS and Firebase Hosting. 
+
+Try another [Live Demo](https://angular-scully-tailwindcss.web.app) of a Scully blog styled with Tailwind CSS. Find the full [source code](https://github.com/notiz-dev/angular-scully-tailwindcss) on GitHub. 
diff --git a/content/series/nestjs-prisma.md b/content/series/nestjs-prisma.md
new file mode 100644
index 00000000..7a5b6d4d
--- /dev/null
+++ b/content/series/nestjs-prisma.md
@@ -0,0 +1,15 @@
+---
+title: NestJS + Prisma Series
+description: Build backend application with NestJS and access databases via Prisma
+tags:
+  - NestJs
+  - Prisma
+---
+
+## What is is all about?
+
+- Integrate Prisma with NestJS
+- Build GraphQL endpoit with NestJS
+- Deployment of NestJS and Prisma to Heroku
+- Dockerize NestJS and Prisma application
+- more to come
diff --git a/scully.notiz.config.ts b/scully.notiz.config.ts
index 144e0f38..611526c8 100644
--- a/scully.notiz.config.ts
+++ b/scully.notiz.config.ts
@@ -46,6 +46,11 @@ setPluginConfig(SitemapPlugin, {
       priority: '0.9',
       sitemapFilename: 'sitemap-links.xml',
     },
+    '/series/:slug': {
+      changeFreq: 'daily',
+      priority: '0.9',
+      sitemapFilename: 'sitemap-series.xml',
+    },
     '/tags/:slug': {
       changeFreq: 'daily',
       priority: '0.9',
@@ -80,6 +85,12 @@ export const config: ScullyConfig = {
         folder: './content/authors',
       },
     },
+    '/series/:slug': {
+      type: 'contentFolder',
+      slug: {
+        folder: './content/series',
+      },
+    },
     '/tags/:slug': {
       type: 'contentFolder',
       slug: {
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 77f9c9e0..f9dec847 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -27,6 +27,11 @@ const routes: Routes = [
     loadChildren: () =>
       import('./pages/tags/tags.module').then((m) => m.TagsModule),
   },
+  {
+    path: 'series',
+    loadChildren: () =>
+      import('./pages/series/series.module').then((m) => m.SeriesModule),
+  },
   {
     path: 'confirm-subscription',
     loadChildren: () =>
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 39bfb0fa..054168b1 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -20,6 +20,13 @@
         >
           Blog
         </a>
+        <a
+          class="router-link"
+          [routerLink]="['/series']"
+          routerLinkActive="router-link-active"
+        >
+          Series
+        </a>
         <button
           class="router-link"
           [attr.aria-label]="'Scroll to Newsletter'"
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b6320730..d968f30c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -35,7 +35,7 @@ import { NizFooterModule } from '@components/footer/footer.module';
     MarkdownModule.forRoot({ loader: HttpClient }),
     NizTabsModule,
     NizTabModule,
-    NizFooterModule, 
+    NizFooterModule,
     NizNavbarModule,
     NizToolbarModule,
     NizInlineSvgModule,
@@ -43,7 +43,7 @@ import { NizFooterModule } from '@components/footer/footer.module';
     NizSearchComponentModule,
     PipesModule,
     NizToastModule,
-    NizMenuModule
+    NizMenuModule,
   ],
   providers: [],
   bootstrap: [AppComponent],
diff --git a/src/app/components/article/article.module.ts b/src/app/components/article/article.module.ts
index 6c1007d8..83699e47 100644
--- a/src/app/components/article/article.module.ts
+++ b/src/app/components/article/article.module.ts
@@ -4,7 +4,6 @@ import { RouterModule } from '@angular/router';
 import { NizChipModule, NizInlineSvgModule } from '@notiz/ngx-design';
 import { ArticleComponent } from './article.component';
 import { PipesModule } from '@pipes/pipes.module';
-import { MarkdownModule } from 'ngx-markdown';
 
 @NgModule({
   declarations: [ArticleComponent],
@@ -13,7 +12,6 @@ import { MarkdownModule } from 'ngx-markdown';
     RouterModule,
     NizChipModule,
     PipesModule,
-    MarkdownModule.forChild(),
     NizInlineSvgModule,
   ],
   exports: [ArticleComponent],
diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts
index fa82c076..8d7cba3b 100644
--- a/src/app/components/components.module.ts
+++ b/src/app/components/components.module.ts
@@ -1,13 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CardStackComponent } from './card-stack/card-stack.component';
-import { MarkdownModule } from 'ngx-markdown';
 import { PipesModule } from '@pipes/pipes.module';
 import { RouterModule } from '@angular/router';
 
 @NgModule({
   declarations: [CardStackComponent],
-  imports: [CommonModule, PipesModule, MarkdownModule.forChild(), RouterModule],
+  imports: [CommonModule, PipesModule, RouterModule],
   exports: [CardStackComponent],
   providers: [],
 })
diff --git a/src/app/pages/series-details/series-details-routing.module.ts b/src/app/pages/series-details/series-details-routing.module.ts
new file mode 100644
index 00000000..136f9799
--- /dev/null
+++ b/src/app/pages/series-details/series-details-routing.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SeriesDetailsComponent } from './series-details.component';
+
+const routes: Routes = [{ path: '', component: SeriesDetailsComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SeriesDetailsRoutingModule { }
diff --git a/src/app/pages/series-details/series-details.component.css b/src/app/pages/series-details/series-details.component.css
new file mode 100644
index 00000000..e2c50cea
--- /dev/null
+++ b/src/app/pages/series-details/series-details.component.css
@@ -0,0 +1,2 @@
+.content {
+}
diff --git a/src/app/pages/series-details/series-details.component.html b/src/app/pages/series-details/series-details.component.html
new file mode 100644
index 00000000..d2546b56
--- /dev/null
+++ b/src/app/pages/series-details/series-details.component.html
@@ -0,0 +1,30 @@
+<niz-seo
+  *ngIf="page$ | async as page"
+  [title]="page.title"
+  [description]="'All posts of ' + page.title"
+  [route]="page.route"
+  [tags]="[page.title]"
+></niz-seo>
+
+<div class="responsive-container">
+  <div class="text-center py-8 space-y-2 md:space-y-5">
+    <h1
+      class="text-3xl leading-9 font-extrabold tracking-tight sm:text-4xl sm:leading-10 md:text-6xl md:leading-tight"
+    >
+      {{ (page$ | async)?.title }}
+    </h1>
+    <p
+      class="max-w-lg mx-auto text-lg sm:text-2xl sm:leading-10 font-medium mb-10 sm:mb-11"
+    >
+      {{ (page$ | async)?.description }}
+    </p>
+  </div>
+
+  <!-- TODO display tags from series or all posts in series  -->
+  <div class="post">
+    <scully-content></scully-content>
+  </div>
+
+  <!-- TODO loop over chapters -->
+  <h2 class="text-xl font-semibold sm:text-2xl md:text-4xl">Chapters</h2>
+</div>
diff --git a/src/app/pages/series-details/series-details.component.spec.ts b/src/app/pages/series-details/series-details.component.spec.ts
new file mode 100644
index 00000000..4e05ac25
--- /dev/null
+++ b/src/app/pages/series-details/series-details.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SeriesDetailsComponent } from './series-details.component';
+
+describe('SeriesDetailsComponent', () => {
+  let component: SeriesDetailsComponent;
+  let fixture: ComponentFixture<SeriesDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SeriesDetailsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SeriesDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/series-details/series-details.component.ts b/src/app/pages/series-details/series-details.component.ts
new file mode 100644
index 00000000..74700bff
--- /dev/null
+++ b/src/app/pages/series-details/series-details.component.ts
@@ -0,0 +1,17 @@
+import { ScullyContentService } from '@services/scully-content.service';
+import { Component, OnInit } from '@angular/core';
+import { ScullyRoute } from '@scullyio/ng-lib';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'niz-series-details',
+  templateUrl: './series-details.component.html',
+  styleUrls: ['./series-details.component.css'],
+})
+export class SeriesDetailsComponent implements OnInit {
+  page$: Observable<ScullyRoute> = this.scullyContent.getCurrent();
+
+  constructor(private scullyContent: ScullyContentService) {}
+
+  ngOnInit(): void {}
+}
diff --git a/src/app/pages/series-details/series-details.module.ts b/src/app/pages/series-details/series-details.module.ts
new file mode 100644
index 00000000..82ccd695
--- /dev/null
+++ b/src/app/pages/series-details/series-details.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SeriesDetailsRoutingModule } from './series-details-routing.module';
+import { SeriesDetailsComponent } from './series-details.component';
+import { SeoModule } from '@components/seo/seo.module';
+import { ScullyLibModule } from '@scullyio/ng-lib';
+
+@NgModule({
+  declarations: [SeriesDetailsComponent],
+  imports: [
+    CommonModule,
+    SeriesDetailsRoutingModule,
+    SeoModule,
+    ScullyLibModule,
+  ],
+})
+export class SeriesDetailsModule {}
diff --git a/src/app/pages/series/series-routing.module.ts b/src/app/pages/series/series-routing.module.ts
new file mode 100644
index 00000000..7fea5dc8
--- /dev/null
+++ b/src/app/pages/series/series-routing.module.ts
@@ -0,0 +1,31 @@
+import { IsAvailable } from './../../guards/available.guard';
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SeriesComponent } from './series.component';
+
+const routes: Routes = [
+  { path: '', component: SeriesComponent },
+  {
+    path: ':slug',
+    loadChildren: () =>
+      import('../series-details/series-details.module').then(
+        (m) => m.SeriesDetailsModule
+      ),
+    canActivate: [IsAvailable],
+  },
+  {
+    path: '**',
+    loadChildren: () =>
+      import('../series-details/series-details.module').then(
+        (m) => m.SeriesDetailsModule
+      ),
+    canActivate: [IsAvailable],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SeriesRoutingModule {}
diff --git a/src/app/pages/series/series.component.css b/src/app/pages/series/series.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/pages/series/series.component.html b/src/app/pages/series/series.component.html
new file mode 100644
index 00000000..3750ab64
--- /dev/null
+++ b/src/app/pages/series/series.component.html
@@ -0,0 +1,39 @@
+<niz-seo title="Series - notiz" description="All series on notiz.dev"></niz-seo>
+
+<div class="responsive-container">
+  <div class="text-center py-8 space-y-2 md:space-y-5">
+    <h1
+      class="text-3xl leading-9 font-extrabold tracking-tight sm:text-4xl sm:leading-10 md:text-6xl md:leading-14"
+    >
+      Series
+    </h1>
+    <p
+      class="max-w-lg mx-auto text-lg sm:text-2xl sm:leading-10 font-medium mb-10 sm:mb-11"
+    >
+      Collection of all our series covering the latest tech stack about web
+      technologies, devops and more.
+    </p>
+  </div>
+
+  <div
+    class="grid grid-cols-1 gap-y-4 md:grid-cols-2 md:gap-x-4 lg:grid-cols-3 lg:gap-x-6 lg:gap-y-4"
+  >
+    <a *ngFor="let s of series$ | async" class="group" [routerLink]="[s.route]">
+      <div class="bg-background-light rounded-xl overflow-hidden h-full">
+        <!-- TODO use series banner image  -->
+        <img
+          src="https://notiz.dev/assets/banners/blog/firebase-hosting-preview-deploy/twitter.png"
+          [alt]="s.title"
+        />
+        <div class="p-6 text-center">
+          <h2 class="text-2xl font-semibold group-hover:text-blue">
+            {{ s.title }}
+          </h2>
+          <p>
+            {{ s.description }}
+          </p>
+        </div>
+      </div>
+    </a>
+  </div>
+</div>
diff --git a/src/app/pages/series/series.component.spec.ts b/src/app/pages/series/series.component.spec.ts
new file mode 100644
index 00000000..a353aeef
--- /dev/null
+++ b/src/app/pages/series/series.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SeriesComponent } from './series.component';
+
+describe('SeriesComponent', () => {
+  let component: SeriesComponent;
+  let fixture: ComponentFixture<SeriesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SeriesComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SeriesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/series/series.component.ts b/src/app/pages/series/series.component.ts
new file mode 100644
index 00000000..d0ceecdb
--- /dev/null
+++ b/src/app/pages/series/series.component.ts
@@ -0,0 +1,18 @@
+import { ScullyRoute } from '@scullyio/ng-lib';
+import { Observable } from 'rxjs';
+import { ScullyContentService } from '@services/scully-content.service';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'niz-series',
+  templateUrl: './series.component.html',
+  styleUrls: ['./series.component.css'],
+})
+export class SeriesComponent implements OnInit {
+  series$: Observable<ScullyRoute[]>;
+  constructor(private scullyContent: ScullyContentService) {}
+
+  ngOnInit(): void {
+    this.series$ = this.scullyContent.series();
+  }
+}
diff --git a/src/app/pages/series/series.module.ts b/src/app/pages/series/series.module.ts
new file mode 100644
index 00000000..a187a982
--- /dev/null
+++ b/src/app/pages/series/series.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SeriesRoutingModule } from './series-routing.module';
+import { SeriesComponent } from './series.component';
+import { SeoModule } from '@components/seo/seo.module';
+
+@NgModule({
+  declarations: [SeriesComponent],
+  imports: [CommonModule, SeriesRoutingModule, SeoModule],
+})
+export class SeriesModule {}
diff --git a/src/app/services/scully-content.service.ts b/src/app/services/scully-content.service.ts
index 17d3de5a..dc51027f 100644
--- a/src/app/services/scully-content.service.ts
+++ b/src/app/services/scully-content.service.ts
@@ -83,6 +83,10 @@ export class ScullyContentService {
     return filterRoute(this.scully.available$, '/tags/');
   }
 
+  series(): Observable<ScullyRoute[]> {
+    return filterRoute(this.scully.available$, '/series/');
+  }
+
   authorTags(author: Observable<ScullyRoute>): Observable<ScullyRoute[]> {
     const authorPosts$ = this.authorPosts(author);
     const tags$ = this.tags();
diff --git a/tailwind.config.js b/tailwind.config.js
index da9b5087..7cb7a444 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -71,6 +71,7 @@ module.exports = {
   },
   variants: {
     borderWidth: ['responsive', 'hover'],
+    textColor: ['responsive', 'hover', 'focus', 'group-hover'],
   },
   future: {
     removeDeprecatedGapUtilities: true,

From e1d061aa25743c3e23849c704f2fa27e4186eaaf Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Thu, 26 Nov 2020 11:46:55 +0100
Subject: [PATCH 02/19] feat(series): map chapter items and sort by weight

* display chapter items and link to post
* display 3 tag icons
---
 content/blog/angular-10-with-tailwindcss.md   |  4 ++
 ...mponent-library-for-angular-and-the-web.md |  6 ++-
 .../deploy-nestjs-with-prisma-to-heroku.md    |  8 +++-
 ...izing-nestjs-with-prisma-and-postgresql.md |  4 ++
 .../blog/firebase-hosting-preview-deploy.md   |  4 ++
 .../blog/graphql-code-first-with-nestjs-7.md  |  4 ++
 .../blog/how-to-connect-nestjs-with-prisma.md |  6 ++-
 .../jamstack-angular-scully-tailwind-css.md   |  4 ++
 content/blog/nestjs-prisma-schematics.md      |  4 ++
 content/blog/prisma-dbml-generator.md         |  4 ++
 .../blog/simple-rxjs-keyboard-shortcuts.md    |  6 ++-
 content/series/angular-scully-tailwind.md     |  8 ++++
 content/series/nestjs-prisma.md               | 10 ++++-
 .../series-details.component.html             | 42 ++++++++++++++++++-
 .../series-details.component.ts               | 22 ++++++++--
 .../series-details/series-details.module.ts   |  4 ++
 src/app/pages/series/series.component.html    |  2 +-
 src/app/pipes/filter-chapter.pipe.ts          | 18 ++++++++
 src/app/pipes/pipes.module.ts                 | 17 +++++++-
 src/app/services/scully-content.service.ts    |  8 ++++
 tailwind.config.js                            |  1 +
 21 files changed, 171 insertions(+), 15 deletions(-)
 create mode 100644 src/app/pipes/filter-chapter.pipe.ts

diff --git a/content/blog/angular-10-with-tailwindcss.md b/content/blog/angular-10-with-tailwindcss.md
index cf082614..fbd4ac11 100644
--- a/content/blog/angular-10-with-tailwindcss.md
+++ b/content/blog/angular-10-with-tailwindcss.md
@@ -12,6 +12,10 @@ keywords:
   - Utility-First CSS
 authors:
   - Marc Stammerjohann
+series:
+  - slug: angular-scully-tailwind
+    chapterSlug: getting-started
+    weight: 10
 github: https://github.com/notiz-dev/angular-tailwindcss
 ---
 
diff --git a/content/blog/create-a-component-library-for-angular-and-the-web.md b/content/blog/create-a-component-library-for-angular-and-the-web.md
index 6c3ea0ca..d149a253 100644
--- a/content/blog/create-a-component-library-for-angular-and-the-web.md
+++ b/content/blog/create-a-component-library-for-angular-and-the-web.md
@@ -10,7 +10,11 @@ tags:
 keywords:
   - Custom Elements
 authors:
-  - 'Gary Großgarten'
+  - Gary Großgarten
+series:
+  - slug: angular-scully-tailwind
+    chapterSlug: getting-started
+    weight: 30
 github: 'https://github.com/notiz-dev/design'
 ---
 
diff --git a/content/blog/deploy-nestjs-with-prisma-to-heroku.md b/content/blog/deploy-nestjs-with-prisma-to-heroku.md
index 6246343f..c0085ab9 100644
--- a/content/blog/deploy-nestjs-with-prisma-to-heroku.md
+++ b/content/blog/deploy-nestjs-with-prisma-to-heroku.md
@@ -1,5 +1,5 @@
 ---
-title: 'Deploy NestJS with Prisma to Heroku'
+title: Deploy NestJS with Prisma to Heroku
 description: 'Deploy a NestJS application with Prisma 2.0 to Heroku and connect to a PostgreSQL database.'
 published: true
 publishedAt: 2020-03-12T09:11:00.000Z
@@ -11,7 +11,11 @@ tags:
 keywords:
   - PostgreSQL
 authors:
-  - 'Marc Stammerjohann'
+  - Marc Stammerjohann
+series:
+  - slug: nestjs-prisma
+    chapterSlug: hosting
+    weight: 10
 github: 'https://github.com/notiz-dev/deploy-nestjs-prisma-heroku'
 ---
 
diff --git a/content/blog/dockerizing-nestjs-with-prisma-and-postgresql.md b/content/blog/dockerizing-nestjs-with-prisma-and-postgresql.md
index 08823529..1ce474b5 100644
--- a/content/blog/dockerizing-nestjs-with-prisma-and-postgresql.md
+++ b/content/blog/dockerizing-nestjs-with-prisma-and-postgresql.md
@@ -12,6 +12,10 @@ keywords:
   - PostgreSQL
 authors:
   - Marc Stammerjohann
+series:
+  - slug: nestjs-prisma
+    chapterSlug: hosting
+    weight: 20
 github: https://github.com/notiz-dev/nestjs-prisma-docker
 ---
 
diff --git a/content/blog/firebase-hosting-preview-deploy.md b/content/blog/firebase-hosting-preview-deploy.md
index 22519a22..76c81ce6 100644
--- a/content/blog/firebase-hosting-preview-deploy.md
+++ b/content/blog/firebase-hosting-preview-deploy.md
@@ -16,6 +16,10 @@ keywords:
   - Tailwind CSS
 authors:
   - Marc Stammerjohann
+series:
+  - slug: angular-scully-tailwind
+    chapterSlug: hosting
+    weight: 10
 github: https://github.com/notiz-dev/angular-scully-tailwindcss
 ---
 
diff --git a/content/blog/graphql-code-first-with-nestjs-7.md b/content/blog/graphql-code-first-with-nestjs-7.md
index f2ca0aa9..34c2b809 100644
--- a/content/blog/graphql-code-first-with-nestjs-7.md
+++ b/content/blog/graphql-code-first-with-nestjs-7.md
@@ -12,6 +12,10 @@ keywords:
   - Code-First Approach
 authors:
   - Marc Stammerjohann
+series:
+  - slug: nestjs-prisma
+    chapterSlug: getting-started
+    weight: 30
 github: https://github.com/notiz-dev/nest-graphql-code-first
 ---
 
diff --git a/content/blog/how-to-connect-nestjs-with-prisma.md b/content/blog/how-to-connect-nestjs-with-prisma.md
index bb9daf8e..23e2640c 100644
--- a/content/blog/how-to-connect-nestjs-with-prisma.md
+++ b/content/blog/how-to-connect-nestjs-with-prisma.md
@@ -10,7 +10,11 @@ tags:
 keywords:
   - SQLite
 authors:
-  - 'Marc Stammerjohann'
+  - Marc Stammerjohann
+series:
+  - slug: nestjs-prisma
+    chapterSlug: getting-started
+    weight: 10
 github: 'https://github.com/notiz-dev/nestjs-prisma'
 versions:
   nestjs/cli: 7.1.2
diff --git a/content/blog/jamstack-angular-scully-tailwind-css.md b/content/blog/jamstack-angular-scully-tailwind-css.md
index b412cedc..37cfe68b 100644
--- a/content/blog/jamstack-angular-scully-tailwind-css.md
+++ b/content/blog/jamstack-angular-scully-tailwind-css.md
@@ -13,6 +13,10 @@ keywords:
   - Utility-First CSS
 authors:
   - Marc Stammerjohann
+series:
+  - slug: angular-scully-tailwind
+    chapterSlug: getting-started
+    weight: 20
 github: https://github.com/notiz-dev/angular-scully-tailwindcss
 ---
 
diff --git a/content/blog/nestjs-prisma-schematics.md b/content/blog/nestjs-prisma-schematics.md
index 8dd4d9f4..babacdac 100644
--- a/content/blog/nestjs-prisma-schematics.md
+++ b/content/blog/nestjs-prisma-schematics.md
@@ -11,6 +11,10 @@ keywords:
   - Schematics
 authors:
   - Marc Stammerjohann
+series:
+  - slug: nestjs-prisma
+    chapterSlug: getting-started
+    weight: 20
 github: https://github.com/marcjulian/nestjs-prisma
 ---
 
diff --git a/content/blog/prisma-dbml-generator.md b/content/blog/prisma-dbml-generator.md
index b7d8d4f3..c5ebd03d 100644
--- a/content/blog/prisma-dbml-generator.md
+++ b/content/blog/prisma-dbml-generator.md
@@ -11,6 +11,10 @@ keywords:
   - Entity-Relationship Diagram
 authors:
   - Marc Stammerjohann
+series:
+  - slug: nestjs-prisma
+    chapterSlug: prisma
+    weight: 10
 github: https://github.com/notiz-dev/prisma-dbml-generator
 ---
 
diff --git a/content/blog/simple-rxjs-keyboard-shortcuts.md b/content/blog/simple-rxjs-keyboard-shortcuts.md
index 2847fad4..6a28db97 100644
--- a/content/blog/simple-rxjs-keyboard-shortcuts.md
+++ b/content/blog/simple-rxjs-keyboard-shortcuts.md
@@ -11,7 +11,11 @@ keywords:
   - Shortcuts
   - Angular
 authors:
-  - 'Gary Großgarten'
+  - Gary Großgarten
+series:
+  - slug: angular-scully-tailwind
+    chapterSlug: rxjs-tips
+    weight: 10
 github: https://github.com/garygrossgarten/rxjs-shortcuts
 ---
 
diff --git a/content/series/angular-scully-tailwind.md b/content/series/angular-scully-tailwind.md
index abc3c69c..2a60ae37 100644
--- a/content/series/angular-scully-tailwind.md
+++ b/content/series/angular-scully-tailwind.md
@@ -1,10 +1,18 @@
 ---
 title: Angular + Scully + Tailwind CSS Series
 description: Build Angular Jamstack application with Scully styled by Tailwind CSS
+slug: angular-scully-tailwind
 tags:
   - Angular
   - Scully
   - Tailwind CSS
+chapters:
+  - title: Getting Started
+    slug: getting-started
+  - title: RxJS tips
+    slug: rxjs-tips
+  - title: Hosting
+    slug: hosting
 ---
 
 ## What will you build?
diff --git a/content/series/nestjs-prisma.md b/content/series/nestjs-prisma.md
index 7a5b6d4d..32b537e4 100644
--- a/content/series/nestjs-prisma.md
+++ b/content/series/nestjs-prisma.md
@@ -1,12 +1,20 @@
 ---
 title: NestJS + Prisma Series
 description: Build backend application with NestJS and access databases via Prisma
+slug: nestjs-prisma
 tags:
   - NestJs
   - Prisma
+chapters:
+  - title: Getting Started
+    slug: getting-started
+  - title: Prisma
+    slug: prisma
+  - title: Hosting
+    slug: hosting
 ---
 
-## What is is all about?
+## What is it all about?
 
 - Integrate Prisma with NestJS
 - Build GraphQL endpoit with NestJS
diff --git a/src/app/pages/series-details/series-details.component.html b/src/app/pages/series-details/series-details.component.html
index d2546b56..a8d4e86d 100644
--- a/src/app/pages/series-details/series-details.component.html
+++ b/src/app/pages/series-details/series-details.component.html
@@ -20,11 +20,49 @@
     </p>
   </div>
 
-  <!-- TODO display tags from series or all posts in series  -->
   <div class="post">
     <scully-content></scully-content>
   </div>
 
-  <!-- TODO loop over chapters -->
   <h2 class="text-xl font-semibold sm:text-2xl md:text-4xl">Chapters</h2>
+
+  <div *ngIf="page$ | async as page" class="space-y-5">
+    <div *ngFor="let chapter of page.chapters" class="space-y-2">
+      <h3
+        class="text-lg font-medium sm:text-xl md:text-2xl"
+        [id]="chapter.slug"
+      >
+        {{ chapter.title }}
+      </h3>
+
+      <div class="rounded-md overflow-hidden">
+        <a
+          *ngFor="
+            let post of seriesPosts$ | async | filterChapter: chapter.slug
+          "
+          class="flex flex-col p-4 bg-background-light space-y-2 md:space-y-0 md:flex-row md:items-center md:justify-between group hover:bg-background-shade"
+          [routerLink]="post.route"
+        >
+          <span>
+            <span
+              class="block text-base font-bold group-hover:text-blue sm:text-lg md:text-xl"
+            >
+              {{ post.title }}
+            </span>
+            <span class="text-sm sm:text-base md:text-lg">
+              {{ post.description }}
+            </span>
+          </span>
+
+          <div class="flex space-x-2">
+            <niz-inline-svg
+              *ngFor="let tag of post.tags | slice: 0:3"
+              class="h-6 w-6"
+              [svgSource]="'assets/stack/' + tag + '.svg' | lowercase | dash"
+            ></niz-inline-svg>
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/src/app/pages/series-details/series-details.component.ts b/src/app/pages/series-details/series-details.component.ts
index 74700bff..c5ac5c68 100644
--- a/src/app/pages/series-details/series-details.component.ts
+++ b/src/app/pages/series-details/series-details.component.ts
@@ -1,17 +1,31 @@
 import { ScullyContentService } from '@services/scully-content.service';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ScullyRoute } from '@scullyio/ng-lib';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
+import { takeUntil, switchMap } from 'rxjs/operators';
 
 @Component({
   selector: 'niz-series-details',
   templateUrl: './series-details.component.html',
   styleUrls: ['./series-details.component.css'],
 })
-export class SeriesDetailsComponent implements OnInit {
+export class SeriesDetailsComponent implements OnInit, OnDestroy {
   page$: Observable<ScullyRoute> = this.scullyContent.getCurrent();
 
+  seriesPosts$: Observable<ScullyRoute[]>;
+
+  private destroy$ = new Subject();
+
   constructor(private scullyContent: ScullyContentService) {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.seriesPosts$ = this.page$.pipe(
+      switchMap((page) => this.scullyContent.seriesPosts(page))
+    );
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }
diff --git a/src/app/pages/series-details/series-details.module.ts b/src/app/pages/series-details/series-details.module.ts
index 82ccd695..1b8d724e 100644
--- a/src/app/pages/series-details/series-details.module.ts
+++ b/src/app/pages/series-details/series-details.module.ts
@@ -1,3 +1,4 @@
+import { NizInlineSvgModule } from '@notiz/ngx-design';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
@@ -5,6 +6,7 @@ import { SeriesDetailsRoutingModule } from './series-details-routing.module';
 import { SeriesDetailsComponent } from './series-details.component';
 import { SeoModule } from '@components/seo/seo.module';
 import { ScullyLibModule } from '@scullyio/ng-lib';
+import { PipesModule } from '@pipes/pipes.module';
 
 @NgModule({
   declarations: [SeriesDetailsComponent],
@@ -13,6 +15,8 @@ import { ScullyLibModule } from '@scullyio/ng-lib';
     SeriesDetailsRoutingModule,
     SeoModule,
     ScullyLibModule,
+    PipesModule,
+    NizInlineSvgModule,
   ],
 })
 export class SeriesDetailsModule {}
diff --git a/src/app/pages/series/series.component.html b/src/app/pages/series/series.component.html
index 3750ab64..2eca4994 100644
--- a/src/app/pages/series/series.component.html
+++ b/src/app/pages/series/series.component.html
@@ -22,7 +22,7 @@
       <div class="bg-background-light rounded-xl overflow-hidden h-full">
         <!-- TODO use series banner image  -->
         <img
-          src="https://notiz.dev/assets/banners/blog/firebase-hosting-preview-deploy/twitter.png"
+          src="https://notiz.dev/assets/banners/blog/simple-rxjs-keyboard-shortcuts/twitter.png"
           [alt]="s.title"
         />
         <div class="p-6 text-center">
diff --git a/src/app/pipes/filter-chapter.pipe.ts b/src/app/pipes/filter-chapter.pipe.ts
new file mode 100644
index 00000000..5557379e
--- /dev/null
+++ b/src/app/pipes/filter-chapter.pipe.ts
@@ -0,0 +1,18 @@
+import { ScullyRoute } from '@scullyio/ng-lib';
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'filterChapter',
+})
+export class FilterChapterPipe implements PipeTransform {
+  transform(posts: ScullyRoute[], chapterSlug: string): ScullyRoute[] {
+    return posts
+      .filter((post) => post.series.find((s) => s.chapterSlug === chapterSlug))
+      .sort((p1, p2) => {
+        return (
+          p1.series.find((s) => s.chapterSlug === chapterSlug).weight -
+          p2.series.find((s) => s.chapterSlug === chapterSlug).weight
+        );
+      });
+  }
+}
diff --git a/src/app/pipes/pipes.module.ts b/src/app/pipes/pipes.module.ts
index 904d54d0..065db5e9 100644
--- a/src/app/pipes/pipes.module.ts
+++ b/src/app/pipes/pipes.module.ts
@@ -4,11 +4,24 @@ import { DashPipe } from './dash.pipe';
 import { SearchPipe } from './search.pipe';
 import { StartsWithPipe } from './startswith.pipe';
 import { MapPostAuthorsPipe } from './map-post-authors.pipe';
+import { FilterChapterPipe } from './filter-chapter.pipe';
 
 @NgModule({
-  declarations: [DashPipe, SearchPipe, StartsWithPipe, MapPostAuthorsPipe],
+  declarations: [
+    DashPipe,
+    SearchPipe,
+    StartsWithPipe,
+    MapPostAuthorsPipe,
+    FilterChapterPipe,
+  ],
   imports: [CommonModule],
-  exports: [DashPipe, SearchPipe, StartsWithPipe, MapPostAuthorsPipe],
+  exports: [
+    DashPipe,
+    SearchPipe,
+    StartsWithPipe,
+    MapPostAuthorsPipe,
+    FilterChapterPipe,
+  ],
   providers: [SearchPipe],
 })
 export class PipesModule {}
diff --git a/src/app/services/scully-content.service.ts b/src/app/services/scully-content.service.ts
index dc51027f..13ef2034 100644
--- a/src/app/services/scully-content.service.ts
+++ b/src/app/services/scully-content.service.ts
@@ -87,6 +87,14 @@ export class ScullyContentService {
     return filterRoute(this.scully.available$, '/series/');
   }
 
+  seriesPosts(series: ScullyRoute): Observable<ScullyRoute[]> {
+    return this.blogPosts().pipe(
+      map((posts) =>
+        posts.filter((post) => post.series?.find((s) => s.slug === series.slug))
+      )
+    );
+  }
+
   authorTags(author: Observable<ScullyRoute>): Observable<ScullyRoute[]> {
     const authorPosts$ = this.authorPosts(author);
     const tags$ = this.tags();
diff --git a/tailwind.config.js b/tailwind.config.js
index 7cb7a444..5d91600d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -76,6 +76,7 @@ module.exports = {
   future: {
     removeDeprecatedGapUtilities: true,
     purgeLayersByDefault: true,
+    standardFontWeights: true,
   },
   plugins: [],
 };

From b32c41a64d29be358e6bebcac17a66cdde628785 Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Thu, 26 Nov 2020 13:31:11 +0100
Subject: [PATCH 03/19] feat(tailwind): optin to future changes

---
 tailwind.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tailwind.config.js b/tailwind.config.js
index 5d91600d..8e2c80bb 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -77,6 +77,7 @@ module.exports = {
     removeDeprecatedGapUtilities: true,
     purgeLayersByDefault: true,
     standardFontWeights: true,
+    defaultLineHeights: true,
   },
   plugins: [],
 };

From ee2f90e9bd072d3aa71c0fed355d6a959dd31995 Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Fri, 18 Dec 2020 12:26:51 +0100
Subject: [PATCH 04/19] feat(series): add series to mobile menu

---
 src/app/app.component.html                 | 14 ++++++++++++++
 src/app/pages/series/series.component.html | 20 ++++++++------------
 src/app/services/scully-content.service.ts | 14 +++-----------
 3 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index bbedc77d..73bb943e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -23,6 +23,10 @@
         <a
           class="router-link"
           [routerLink]="['/series']"
+          [ngClass]="{
+            'router-link-active':
+              (current$ | async)?.route | startswith: '/series/'
+          }"
           routerLinkActive="router-link-active"
         >
           Series
@@ -109,6 +113,16 @@
     >
       Blog
     </a>
+    <a
+      class="router-link"
+      [routerLink]="['/series']"
+      [ngClass]="{
+        'router-link-active': (current$ | async)?.route | startswith: '/series/'
+      }"
+      routerLinkActive="router-link-active"
+    >
+      Series
+    </a>
     <button
       class="router-link"
       [attr.aria-label]="'Scroll to Newsletter'"
diff --git a/src/app/pages/series/series.component.html b/src/app/pages/series/series.component.html
index 2eca4994..c6c07e73 100644
--- a/src/app/pages/series/series.component.html
+++ b/src/app/pages/series/series.component.html
@@ -1,19 +1,15 @@
 <niz-seo title="Series - notiz" description="All series on notiz.dev"></niz-seo>
 
-<div class="responsive-container">
-  <div class="text-center py-8 space-y-2 md:space-y-5">
-    <h1
-      class="text-3xl leading-9 font-extrabold tracking-tight sm:text-4xl sm:leading-10 md:text-6xl md:leading-14"
-    >
-      Series
-    </h1>
-    <p
-      class="max-w-lg mx-auto text-lg sm:text-2xl sm:leading-10 font-medium mb-10 sm:mb-11"
-    >
+<article class="mt-10 max-w-container">
+  <header>
+    <h1 class="text-3xl font-extrabold sm:text-4xl md:text-5xl">Series</h1>
+    <p class="mt-1 text-lg text-color-light sm:text-xl md:text-2xl">
       Collection of all our series covering the latest tech stack about web
       technologies, devops and more.
     </p>
-  </div>
+  </header>
+
+  {{ series$ | async | json }}
 
   <div
     class="grid grid-cols-1 gap-y-4 md:grid-cols-2 md:gap-x-4 lg:grid-cols-3 lg:gap-x-6 lg:gap-y-4"
@@ -36,4 +32,4 @@ <h2 class="text-2xl font-semibold group-hover:text-blue">
       </div>
     </a>
   </div>
-</div>
+</article>
diff --git a/src/app/services/scully-content.service.ts b/src/app/services/scully-content.service.ts
index 13ef2034..e656ae2f 100644
--- a/src/app/services/scully-content.service.ts
+++ b/src/app/services/scully-content.service.ts
@@ -1,16 +1,8 @@
-import { Router, NavigationEnd, RouteConfigLoadEnd } from '@angular/router';
+import { Router, NavigationEnd } from '@angular/router';
 import { Injectable } from '@angular/core';
 import { ScullyRoutesService, ScullyRoute } from '@scullyio/ng-lib';
-import {
-  map,
-  switchMap,
-  tap,
-  reduce,
-  filter,
-  startWith,
-  share,
-} from 'rxjs/operators';
-import { Observable, zip, concat } from 'rxjs';
+import { map, switchMap, filter, startWith } from 'rxjs/operators';
+import { Observable, zip } from 'rxjs';
 import { TagWeight } from '../types/types';
 
 @Injectable({

From 1f7ba328754a1549894b987acd7d24923b8ab002 Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Fri, 18 Dec 2020 13:20:31 +0100
Subject: [PATCH 05/19] feat(series): update colors and add focus styles to
 chapter links

---
 ...s-purge-optimize-angular-for-production.md |  4 ++++
 content/series/angular-scully-tailwind.md     |  1 +
 content/series/nestjs-prisma.md               |  1 +
 .../series-details.component.html             | 22 ++++++++-----------
 src/app/pages/series/series.component.html    |  4 +---
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/content/blog/tailwindcss-purge-optimize-angular-for-production.md b/content/blog/tailwindcss-purge-optimize-angular-for-production.md
index 6e0948f7..de087d20 100644
--- a/content/blog/tailwindcss-purge-optimize-angular-for-production.md
+++ b/content/blog/tailwindcss-purge-optimize-angular-for-production.md
@@ -11,6 +11,10 @@ tags:
 keywords:
   - CSS
   - Utility-First CSS
+series:
+  - slug: angular-scully-tailwind
+    chapterSlug: getting-started
+    weight: 30
 authors:
   - Marc Stammerjohann
 github: https://github.com/notiz-dev/angular-scully-tailwindcss
diff --git a/content/series/angular-scully-tailwind.md b/content/series/angular-scully-tailwind.md
index 2a60ae37..76a11542 100644
--- a/content/series/angular-scully-tailwind.md
+++ b/content/series/angular-scully-tailwind.md
@@ -1,6 +1,7 @@
 ---
 title: Angular + Scully + Tailwind CSS Series
 description: Build Angular Jamstack application with Scully styled by Tailwind CSS
+published: true
 slug: angular-scully-tailwind
 tags:
   - Angular
diff --git a/content/series/nestjs-prisma.md b/content/series/nestjs-prisma.md
index 32b537e4..8fc90412 100644
--- a/content/series/nestjs-prisma.md
+++ b/content/series/nestjs-prisma.md
@@ -1,6 +1,7 @@
 ---
 title: NestJS + Prisma Series
 description: Build backend application with NestJS and access databases via Prisma
+published: true
 slug: nestjs-prisma
 tags:
   - NestJs
diff --git a/src/app/pages/series-details/series-details.component.html b/src/app/pages/series-details/series-details.component.html
index a8d4e86d..9769402e 100644
--- a/src/app/pages/series-details/series-details.component.html
+++ b/src/app/pages/series-details/series-details.component.html
@@ -6,21 +6,17 @@
   [tags]="[page.title]"
 ></niz-seo>
 
-<div class="responsive-container">
-  <div class="text-center py-8 space-y-2 md:space-y-5">
-    <h1
-      class="text-3xl leading-9 font-extrabold tracking-tight sm:text-4xl sm:leading-10 md:text-6xl md:leading-tight"
-    >
+<article class="max-w-container space-y-5 mt-10">
+  <header>
+    <h1 class="text-3xl font-extrabold sm:text-4xl md:text-5xl">
       {{ (page$ | async)?.title }}
     </h1>
-    <p
-      class="max-w-lg mx-auto text-lg sm:text-2xl sm:leading-10 font-medium mb-10 sm:mb-11"
-    >
+    <p class="mt-1 text-lg text-color-light sm:text-xl md:text-2xl">
       {{ (page$ | async)?.description }}
     </p>
-  </div>
+  </header>
 
-  <div class="post">
+  <div class="prose max-w-none md:prose-lg">
     <scully-content></scully-content>
   </div>
 
@@ -35,12 +31,12 @@ <h2 class="text-xl font-semibold sm:text-2xl md:text-4xl">Chapters</h2>
         {{ chapter.title }}
       </h3>
 
-      <div class="rounded-md overflow-hidden">
+      <div class="rounded-md shadow-md overflow-hidden">
         <a
           *ngFor="
             let post of seriesPosts$ | async | filterChapter: chapter.slug
           "
-          class="flex flex-col p-4 bg-background-light space-y-2 md:space-y-0 md:flex-row md:items-center md:justify-between group hover:bg-background-shade"
+          class="flex flex-col p-4 bg-canvas-light space-y-2 md:space-y-0 md:flex-row md:items-center md:justify-between group hover:bg-canvas-shade focus:outline-none focus:ring focus:ring-primary focus:ring-inset"
           [routerLink]="post.route"
         >
           <span>
@@ -65,4 +61,4 @@ <h2 class="text-xl font-semibold sm:text-2xl md:text-4xl">Chapters</h2>
       </div>
     </div>
   </div>
-</div>
+</article>
diff --git a/src/app/pages/series/series.component.html b/src/app/pages/series/series.component.html
index c6c07e73..83259edf 100644
--- a/src/app/pages/series/series.component.html
+++ b/src/app/pages/series/series.component.html
@@ -9,13 +9,11 @@ <h1 class="text-3xl font-extrabold sm:text-4xl md:text-5xl">Series</h1>
     </p>
   </header>
 
-  {{ series$ | async | json }}
-
   <div
     class="grid grid-cols-1 gap-y-4 md:grid-cols-2 md:gap-x-4 lg:grid-cols-3 lg:gap-x-6 lg:gap-y-4"
   >
     <a *ngFor="let s of series$ | async" class="group" [routerLink]="[s.route]">
-      <div class="bg-background-light rounded-xl overflow-hidden h-full">
+      <div class="bg-canvas-light rounded-xl overflow-hidden h-full">
         <!-- TODO use series banner image  -->
         <img
           src="https://notiz.dev/assets/banners/blog/simple-rxjs-keyboard-shortcuts/twitter.png"

From 4f5bc1464f3dbce440655b4541a66c8f997c3c6a Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Fri, 18 Dec 2020 14:20:52 +0100
Subject: [PATCH 06/19] feat(series): use tags icon as series cover

* move chapters into prose content
---
 content/series/angular-scully-tailwind.md     |  2 +-
 .../series-details.component.css              |  2 -
 .../series-details.component.html             | 67 +++++++++----------
 .../series-details.component.scss}            |  0
 .../series-details.component.ts               |  2 +-
 src/app/pages/series/series.component.html    | 30 +++++----
 src/app/pages/series/series.component.scss    |  0
 src/app/pages/series/series.component.ts      |  2 +-
 src/app/pages/series/series.module.ts         | 10 ++-
 9 files changed, 61 insertions(+), 54 deletions(-)
 delete mode 100644 src/app/pages/series-details/series-details.component.css
 rename src/app/pages/{series/series.component.css => series-details/series-details.component.scss} (100%)
 create mode 100644 src/app/pages/series/series.component.scss

diff --git a/content/series/angular-scully-tailwind.md b/content/series/angular-scully-tailwind.md
index 76a11542..35074144 100644
--- a/content/series/angular-scully-tailwind.md
+++ b/content/series/angular-scully-tailwind.md
@@ -24,6 +24,6 @@ chapters:
 
 ## Live Demo
 
-You are using right **now** a Scully application styled with Tailwind - notiz.dev uses the following stack: Angular, Scully, Tailwind CSS and Firebase Hosting. 
+You are using right **now** a Scully application styled with Tailwind - [notiz.dev](/) uses the following stack: Angular, Scully, Tailwind CSS and Firebase Hosting. 
 
 Try another [Live Demo](https://angular-scully-tailwindcss.web.app) of a Scully blog styled with Tailwind CSS. Find the full [source code](https://github.com/notiz-dev/angular-scully-tailwindcss) on GitHub. 
diff --git a/src/app/pages/series-details/series-details.component.css b/src/app/pages/series-details/series-details.component.css
deleted file mode 100644
index e2c50cea..00000000
--- a/src/app/pages/series-details/series-details.component.css
+++ /dev/null
@@ -1,2 +0,0 @@
-.content {
-}
diff --git a/src/app/pages/series-details/series-details.component.html b/src/app/pages/series-details/series-details.component.html
index 9769402e..1997610a 100644
--- a/src/app/pages/series-details/series-details.component.html
+++ b/src/app/pages/series-details/series-details.component.html
@@ -18,46 +18,43 @@ <h1 class="text-3xl font-extrabold sm:text-4xl md:text-5xl">
 
   <div class="prose max-w-none md:prose-lg">
     <scully-content></scully-content>
-  </div>
 
-  <h2 class="text-xl font-semibold sm:text-2xl md:text-4xl">Chapters</h2>
+    <h2>Chapters</h2>
 
-  <div *ngIf="page$ | async as page" class="space-y-5">
-    <div *ngFor="let chapter of page.chapters" class="space-y-2">
-      <h3
-        class="text-lg font-medium sm:text-xl md:text-2xl"
-        [id]="chapter.slug"
-      >
-        {{ chapter.title }}
-      </h3>
+    <div *ngIf="page$ | async as page" class="space-y-5">
+      <div *ngFor="let chapter of page.chapters" class="space-y-2">
+        <h3 [id]="chapter.slug">
+          {{ chapter.title }}
+        </h3>
 
-      <div class="rounded-md shadow-md overflow-hidden">
-        <a
-          *ngFor="
-            let post of seriesPosts$ | async | filterChapter: chapter.slug
-          "
-          class="flex flex-col p-4 bg-canvas-light space-y-2 md:space-y-0 md:flex-row md:items-center md:justify-between group hover:bg-canvas-shade focus:outline-none focus:ring focus:ring-primary focus:ring-inset"
-          [routerLink]="post.route"
-        >
-          <span>
-            <span
-              class="block text-base font-bold group-hover:text-blue sm:text-lg md:text-xl"
-            >
-              {{ post.title }}
-            </span>
-            <span class="text-sm sm:text-base md:text-lg">
-              {{ post.description }}
+        <div class="rounded-md shadow-md overflow-hidden">
+          <a
+            *ngFor="
+              let post of seriesPosts$ | async | filterChapter: chapter.slug
+            "
+            class="flex flex-col p-4 bg-canvas-light space-y-2 md:space-y-0 md:flex-row md:items-center md:justify-between group hover:bg-canvas-shade focus:outline-none focus:ring focus:ring-primary focus:ring-inset"
+            [routerLink]="post.route"
+          >
+            <span>
+              <span
+                class="block text-base font-bold group-hover:text-primary sm:text-lg md:text-xl"
+              >
+                {{ post.title }}
+              </span>
+              <span class="text-sm sm:text-base md:text-lg">
+                {{ post.description }}
+              </span>
             </span>
-          </span>
 
-          <div class="flex space-x-2">
-            <niz-inline-svg
-              *ngFor="let tag of post.tags | slice: 0:3"
-              class="h-6 w-6"
-              [svgSource]="'assets/stack/' + tag + '.svg' | lowercase | dash"
-            ></niz-inline-svg>
-          </div>
-        </a>
+            <div class="flex space-x-2">
+              <niz-inline-svg
+                *ngFor="let tag of post.tags | slice: 0:3"
+                class="h-6 w-6"
+                [svgSource]="'assets/stack/' + tag + '.svg' | lowercase | dash"
+              ></niz-inline-svg>
+            </div>
+          </a>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/app/pages/series/series.component.css b/src/app/pages/series-details/series-details.component.scss
similarity index 100%
rename from src/app/pages/series/series.component.css
rename to src/app/pages/series-details/series-details.component.scss
diff --git a/src/app/pages/series-details/series-details.component.ts b/src/app/pages/series-details/series-details.component.ts
index c5ac5c68..e74abc19 100644
--- a/src/app/pages/series-details/series-details.component.ts
+++ b/src/app/pages/series-details/series-details.component.ts
@@ -7,7 +7,7 @@ import { takeUntil, switchMap } from 'rxjs/operators';
 @Component({
   selector: 'niz-series-details',
   templateUrl: './series-details.component.html',
-  styleUrls: ['./series-details.component.css'],
+  styleUrls: ['./series-details.component.scss'],
 })
 export class SeriesDetailsComponent implements OnInit, OnDestroy {
   page$: Observable<ScullyRoute> = this.scullyContent.getCurrent();
diff --git a/src/app/pages/series/series.component.html b/src/app/pages/series/series.component.html
index 83259edf..98afba0a 100644
--- a/src/app/pages/series/series.component.html
+++ b/src/app/pages/series/series.component.html
@@ -1,6 +1,6 @@
 <niz-seo title="Series - notiz" description="All series on notiz.dev"></niz-seo>
 
-<article class="mt-10 max-w-container">
+<article class="mt-10 max-w-container space-y-5">
   <header>
     <h1 class="text-3xl font-extrabold sm:text-4xl md:text-5xl">Series</h1>
     <p class="mt-1 text-lg text-color-light sm:text-xl md:text-2xl">
@@ -9,18 +9,22 @@ <h1 class="text-3xl font-extrabold sm:text-4xl md:text-5xl">Series</h1>
     </p>
   </header>
 
-  <div
-    class="grid grid-cols-1 gap-y-4 md:grid-cols-2 md:gap-x-4 lg:grid-cols-3 lg:gap-x-6 lg:gap-y-4"
-  >
-    <a *ngFor="let s of series$ | async" class="group" [routerLink]="[s.route]">
-      <div class="bg-canvas-light rounded-xl overflow-hidden h-full">
-        <!-- TODO use series banner image  -->
-        <img
-          src="https://notiz.dev/assets/banners/blog/simple-rxjs-keyboard-shortcuts/twitter.png"
-          [alt]="s.title"
-        />
-        <div class="p-6 text-center">
-          <h2 class="text-2xl font-semibold group-hover:text-blue">
+  <div class="grid grid-cols-1 gap-y-4 md:grid-cols-2 md:gap-x-8">
+    <a
+      *ngFor="let s of series$ | async"
+      class="bg-canvas-light rounded-xl shadow-md overflow-hidden group focus-ring transform hover:-translate-y-1"
+      [routerLink]="[s.route]"
+    >
+      <div class="h-full">
+        <div class="bg-canvas-shade flex justify-around py-8 px-4">
+          <niz-inline-svg
+            *ngFor="let tag of s.tags"
+            class="h-24 w-24"
+            [svgSource]="'assets/stack/' + tag + '.svg' | lowercase | dash"
+          ></niz-inline-svg>
+        </div>
+        <div class="p-6 space-y-2">
+          <h2 class="text-2xl font-semibold group-hover:text-primary">
             {{ s.title }}
           </h2>
           <p>
diff --git a/src/app/pages/series/series.component.scss b/src/app/pages/series/series.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/pages/series/series.component.ts b/src/app/pages/series/series.component.ts
index d0ceecdb..bac99697 100644
--- a/src/app/pages/series/series.component.ts
+++ b/src/app/pages/series/series.component.ts
@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'niz-series',
   templateUrl: './series.component.html',
-  styleUrls: ['./series.component.css'],
+  styleUrls: ['./series.component.scss'],
 })
 export class SeriesComponent implements OnInit {
   series$: Observable<ScullyRoute[]>;
diff --git a/src/app/pages/series/series.module.ts b/src/app/pages/series/series.module.ts
index a187a982..433ac301 100644
--- a/src/app/pages/series/series.module.ts
+++ b/src/app/pages/series/series.module.ts
@@ -1,3 +1,5 @@
+import { PipesModule } from '@pipes/pipes.module';
+import { NizInlineSvgModule } from '@notiz/ngx-design';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
@@ -7,6 +9,12 @@ import { SeoModule } from '@components/seo/seo.module';
 
 @NgModule({
   declarations: [SeriesComponent],
-  imports: [CommonModule, SeriesRoutingModule, SeoModule],
+  imports: [
+    CommonModule,
+    SeriesRoutingModule,
+    SeoModule,
+    NizInlineSvgModule,
+    PipesModule,
+  ],
 })
 export class SeriesModule {}

From 39e765aaf3ff80c2a7d45c731a14dcf60e8cd0f4 Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Fri, 18 Dec 2020 17:45:39 +0100
Subject: [PATCH 07/19] content: add todos to series

---
 ...mponent-library-for-angular-and-the-web.md |  4 ----
 .../blog/simple-rxjs-keyboard-shortcuts.md    |  4 ----
 content/series/angular-scully-tailwind.md     | 13 +++++++----
 content/series/fullstack.md                   | 22 +++++++++++++++++++
 content/series/nestjs-prisma.md               |  7 ++++++
 5 files changed, 38 insertions(+), 12 deletions(-)
 create mode 100644 content/series/fullstack.md

diff --git a/content/blog/create-a-component-library-for-angular-and-the-web.md b/content/blog/create-a-component-library-for-angular-and-the-web.md
index d149a253..43bd8f9f 100644
--- a/content/blog/create-a-component-library-for-angular-and-the-web.md
+++ b/content/blog/create-a-component-library-for-angular-and-the-web.md
@@ -11,10 +11,6 @@ keywords:
   - Custom Elements
 authors:
   - Gary Großgarten
-series:
-  - slug: angular-scully-tailwind
-    chapterSlug: getting-started
-    weight: 30
 github: 'https://github.com/notiz-dev/design'
 ---
 
diff --git a/content/blog/simple-rxjs-keyboard-shortcuts.md b/content/blog/simple-rxjs-keyboard-shortcuts.md
index 6a28db97..1b5a1883 100644
--- a/content/blog/simple-rxjs-keyboard-shortcuts.md
+++ b/content/blog/simple-rxjs-keyboard-shortcuts.md
@@ -12,10 +12,6 @@ keywords:
   - Angular
 authors:
   - Gary Großgarten
-series:
-  - slug: angular-scully-tailwind
-    chapterSlug: rxjs-tips
-    weight: 10
 github: https://github.com/garygrossgarten/rxjs-shortcuts
 ---
 
diff --git a/content/series/angular-scully-tailwind.md b/content/series/angular-scully-tailwind.md
index 35074144..9b6819a7 100644
--- a/content/series/angular-scully-tailwind.md
+++ b/content/series/angular-scully-tailwind.md
@@ -1,6 +1,6 @@
 ---
 title: Angular + Scully + Tailwind CSS Series
-description: Build Angular Jamstack application with Scully styled by Tailwind CSS
+description: Build Angular Jamstack blog with Scully styled by Tailwind CSS
 published: true
 slug: angular-scully-tailwind
 tags:
@@ -10,8 +10,6 @@ tags:
 chapters:
   - title: Getting Started
     slug: getting-started
-  - title: RxJS tips
-    slug: rxjs-tips
   - title: Hosting
     slug: hosting
 ---
@@ -20,7 +18,14 @@ chapters:
 
 - Setting up Angular with Tailwind CSS
 - Jamstack with Scully
-- Deploy via GitHub Actions to firebase Hosting
+- Deploy via GitHub Actions to Firebase Hosting
+- SEO (coming soon)
+- Use and create Scully Plugin (coming soon)
+- Analytics (coming soon)
+- CMS (Netlify coming soon)
+- Cross posting to dev.to (coming soon)
+- Newsletter (coming soon)
+- Shortcodes in Markdown (coming soon)
 
 ## Live Demo
 
diff --git a/content/series/fullstack.md b/content/series/fullstack.md
new file mode 100644
index 00000000..7223d31b
--- /dev/null
+++ b/content/series/fullstack.md
@@ -0,0 +1,22 @@
+---
+title: Fullstack
+description: Fullstack
+published: false
+slug: fullstack
+tags:
+  - Angular
+  - NestJS
+  - Prisma
+chapters:
+  - title: Getting Started
+    slug: getting-started
+---
+
+## What will you build?
+
+- Mono Repo Angular + NestJS + Prisma (Build Scripts serving, ...)
+- CRUD with NestJS 
+- Codegen REST and GraphQL
+- Authentication
+- Deployment/Hosting
+
diff --git a/content/series/nestjs-prisma.md b/content/series/nestjs-prisma.md
index 8fc90412..5f1db2e4 100644
--- a/content/series/nestjs-prisma.md
+++ b/content/series/nestjs-prisma.md
@@ -21,4 +21,11 @@ chapters:
 - Build GraphQL endpoit with NestJS
 - Deployment of NestJS and Prisma to Heroku
 - Dockerize NestJS and Prisma application
+- Swagger API (coming soon)
+- Prisma Migrate, Native Types (coming soon)
+- Authentication with PassportJS (coming soon)
+- Pagination (coming soon)
+- Subscriptions (coming soon)
+- Mailing (coming soon)
+- Cloud Run (coming soon)
 - more to come

From 7e8ff2216f5c0325e32a14add311e7505cd221dc Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Wed, 30 Dec 2020 16:41:51 +0100
Subject: [PATCH 08/19] fix(series): move chaperts into its own div

* scully-content needs its own div otherwise *ngIf="page$ | async as page" is not correctly interpreted
---
 .../series-details.component.html             |  4 ++-
 .../series-details.component.ts               | 34 +++++++------------
 2 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/src/app/pages/series-details/series-details.component.html b/src/app/pages/series-details/series-details.component.html
index 1997610a..9ad7d227 100644
--- a/src/app/pages/series-details/series-details.component.html
+++ b/src/app/pages/series-details/series-details.component.html
@@ -18,10 +18,12 @@ <h1 class="text-3xl font-extrabold sm:text-4xl md:text-5xl">
 
   <div class="prose max-w-none md:prose-lg">
     <scully-content></scully-content>
+  </div>
 
+  <div *ngIf="page$ | async as page" class="prose max-w-none md:prose-lg">
     <h2>Chapters</h2>
 
-    <div *ngIf="page$ | async as page" class="space-y-5">
+    <div class="space-y-5">
       <div *ngFor="let chapter of page.chapters" class="space-y-2">
         <h3 [id]="chapter.slug">
           {{ chapter.title }}
diff --git a/src/app/pages/series-details/series-details.component.ts b/src/app/pages/series-details/series-details.component.ts
index e74abc19..dcb8aca6 100644
--- a/src/app/pages/series-details/series-details.component.ts
+++ b/src/app/pages/series-details/series-details.component.ts
@@ -1,31 +1,23 @@
 import { ScullyContentService } from '@services/scully-content.service';
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ScullyRoute } from '@scullyio/ng-lib';
-import { Observable, Subject } from 'rxjs';
-import { takeUntil, switchMap } from 'rxjs/operators';
+import { Component } from '@angular/core';
+import { ScullyRoute, ScullyRoutesService } from '@scullyio/ng-lib';
+import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 
 @Component({
   selector: 'niz-series-details',
   templateUrl: './series-details.component.html',
   styleUrls: ['./series-details.component.scss'],
 })
-export class SeriesDetailsComponent implements OnInit, OnDestroy {
-  page$: Observable<ScullyRoute> = this.scullyContent.getCurrent();
+export class SeriesDetailsComponent {
+  page$: Observable<ScullyRoute> = this.scully.getCurrent();
 
-  seriesPosts$: Observable<ScullyRoute[]>;
+  seriesPosts$: Observable<ScullyRoute[]> = this.page$.pipe(
+    switchMap((page) => this.scullyContent.seriesPosts(page))
+  );
 
-  private destroy$ = new Subject();
-
-  constructor(private scullyContent: ScullyContentService) {}
-
-  ngOnInit(): void {
-    this.seriesPosts$ = this.page$.pipe(
-      switchMap((page) => this.scullyContent.seriesPosts(page))
-    );
-  }
-
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
+  constructor(
+    private scullyContent: ScullyContentService,
+    private scully: ScullyRoutesService
+  ) {}
 }

From 7ad643b75c3b6966f64450757e9b667299563afe Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Wed, 30 Dec 2020 16:42:16 +0100
Subject: [PATCH 09/19] series: add coming soon badge

---
 content/series/angular-scully-tailwind.md | 12 ++++++------
 content/series/fullstack.md               | 11 ++++++-----
 content/series/nestjs-prisma.md           | 14 +++++++-------
 tailwind.config.js                        |  1 +
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/content/series/angular-scully-tailwind.md b/content/series/angular-scully-tailwind.md
index 9b6819a7..554449cf 100644
--- a/content/series/angular-scully-tailwind.md
+++ b/content/series/angular-scully-tailwind.md
@@ -19,13 +19,13 @@ chapters:
 - Setting up Angular with Tailwind CSS
 - Jamstack with Scully
 - Deploy via GitHub Actions to Firebase Hosting
-- SEO (coming soon)
-- Use and create Scully Plugin (coming soon)
-- Analytics (coming soon)
+- SEO <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Use and create Scully Plugin <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Analytics <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
 - CMS (Netlify coming soon)
-- Cross posting to dev.to (coming soon)
-- Newsletter (coming soon)
-- Shortcodes in Markdown (coming soon)
+- Cross posting to dev.to <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Newsletter <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Shortcodes in Markdown <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
 
 ## Live Demo
 
diff --git a/content/series/fullstack.md b/content/series/fullstack.md
index 7223d31b..eca0f84c 100644
--- a/content/series/fullstack.md
+++ b/content/series/fullstack.md
@@ -4,12 +4,13 @@ description: Fullstack
 published: false
 slug: fullstack
 tags:
-  - Angular
-  - NestJS
-  - Prisma
+    - Angular
+    - NestJS
+    - Prisma
 chapters:
-  - title: Getting Started
-    slug: getting-started
+    - {title: 'Getting Started', slug: getting-started}
+slugs:
+    - ___UNPUBLISHED___kjbib7un_h0Iph5ugONgWCrNk1clLVN79u160Y4qp
 ---
 
 ## What will you build?
diff --git a/content/series/nestjs-prisma.md b/content/series/nestjs-prisma.md
index 5f1db2e4..3434c875 100644
--- a/content/series/nestjs-prisma.md
+++ b/content/series/nestjs-prisma.md
@@ -21,11 +21,11 @@ chapters:
 - Build GraphQL endpoit with NestJS
 - Deployment of NestJS and Prisma to Heroku
 - Dockerize NestJS and Prisma application
-- Swagger API (coming soon)
-- Prisma Migrate, Native Types (coming soon)
-- Authentication with PassportJS (coming soon)
-- Pagination (coming soon)
-- Subscriptions (coming soon)
-- Mailing (coming soon)
-- Cloud Run (coming soon)
+- Swagger API <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Prisma Migrate, Native Types <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Authentication with PassportJS <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Pagination <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Subscriptions <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Mailing <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Cloud Run <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
 - more to come
diff --git a/tailwind.config.js b/tailwind.config.js
index 753c5589..66027ee7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ const colors = require('tailwindcss/colors');
 module.exports = {
   purge: [
     './src/**/*.{html,ts}',
+    './content/**/*.md',
     './projects/design/**/*.{html,ts}',
     './projects/shortcodes/**/*.{html,ts}',
   ],

From 51b841310e20cff0d1b0ccffc19249e5c31997bb Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Wed, 30 Dec 2020 16:59:21 +0100
Subject: [PATCH 10/19] refactor(scully): use ScullyRoutesService.getCurrent

* ScullyRoutesService.getCurrent() subscribes to route-events
---
 src/app/pages/series-details/series-details.component.ts | 9 +++------
 src/app/services/scully-content.service.ts               | 7 +------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/app/pages/series-details/series-details.component.ts b/src/app/pages/series-details/series-details.component.ts
index dcb8aca6..8626d136 100644
--- a/src/app/pages/series-details/series-details.component.ts
+++ b/src/app/pages/series-details/series-details.component.ts
@@ -1,6 +1,6 @@
 import { ScullyContentService } from '@services/scully-content.service';
 import { Component } from '@angular/core';
-import { ScullyRoute, ScullyRoutesService } from '@scullyio/ng-lib';
+import { ScullyRoute } from '@scullyio/ng-lib';
 import { Observable } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 
@@ -10,14 +10,11 @@ import { switchMap } from 'rxjs/operators';
   styleUrls: ['./series-details.component.scss'],
 })
 export class SeriesDetailsComponent {
-  page$: Observable<ScullyRoute> = this.scully.getCurrent();
+  page$: Observable<ScullyRoute> = this.scullyContent.getCurrent();
 
   seriesPosts$: Observable<ScullyRoute[]> = this.page$.pipe(
     switchMap((page) => this.scullyContent.seriesPosts(page))
   );
 
-  constructor(
-    private scullyContent: ScullyContentService,
-    private scully: ScullyRoutesService
-  ) {}
+  constructor(private scullyContent: ScullyContentService) {}
 }
diff --git a/src/app/services/scully-content.service.ts b/src/app/services/scully-content.service.ts
index e656ae2f..3ebb9326 100644
--- a/src/app/services/scully-content.service.ts
+++ b/src/app/services/scully-content.service.ts
@@ -22,12 +22,7 @@ export class ScullyContentService {
   }
 
   getCurrent(): Observable<ScullyRoute> {
-    return this.router.events.pipe(
-      startWith(new NavigationEnd(0, '/', '/')),
-      filter((event) => event instanceof NavigationEnd),
-      switchMap(() => this.scully.getCurrent()),
-      filter((route) => !!route)
-    );
+    return this.scully.getCurrent();
   }
 
   latestBlogPost(): Observable<ScullyRoute> {

From 758a675e00fdc1425c81b2e6192f065a716a5f7b Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Wed, 30 Dec 2020 17:07:43 +0100
Subject: [PATCH 11/19] styles(series): move into one div for prose styles

---
 .../series-details.component.html             | 74 ++++++++++---------
 1 file changed, 39 insertions(+), 35 deletions(-)

diff --git a/src/app/pages/series-details/series-details.component.html b/src/app/pages/series-details/series-details.component.html
index 9ad7d227..f5ea771c 100644
--- a/src/app/pages/series-details/series-details.component.html
+++ b/src/app/pages/series-details/series-details.component.html
@@ -6,7 +6,7 @@
   [tags]="[page.title]"
 ></niz-seo>
 
-<article class="max-w-container space-y-5 mt-10">
+<article class="max-w-container mt-10">
   <header>
     <h1 class="text-3xl font-extrabold sm:text-4xl md:text-5xl">
       {{ (page$ | async)?.title }}
@@ -17,45 +17,49 @@ <h1 class="text-3xl font-extrabold sm:text-4xl md:text-5xl">
   </header>
 
   <div class="prose max-w-none md:prose-lg">
-    <scully-content></scully-content>
-  </div>
+    <div>
+      <scully-content></scully-content>
+    </div>
 
-  <div *ngIf="page$ | async as page" class="prose max-w-none md:prose-lg">
-    <h2>Chapters</h2>
+    <div *ngIf="page$ | async as page">
+      <h2>Chapters</h2>
 
-    <div class="space-y-5">
-      <div *ngFor="let chapter of page.chapters" class="space-y-2">
-        <h3 [id]="chapter.slug">
-          {{ chapter.title }}
-        </h3>
+      <div class="space-y-5">
+        <div *ngFor="let chapter of page.chapters" class="space-y-2">
+          <h3 [id]="chapter.slug">
+            {{ chapter.title }}
+          </h3>
 
-        <div class="rounded-md shadow-md overflow-hidden">
-          <a
-            *ngFor="
-              let post of seriesPosts$ | async | filterChapter: chapter.slug
-            "
-            class="flex flex-col p-4 bg-canvas-light space-y-2 md:space-y-0 md:flex-row md:items-center md:justify-between group hover:bg-canvas-shade focus:outline-none focus:ring focus:ring-primary focus:ring-inset"
-            [routerLink]="post.route"
-          >
-            <span>
-              <span
-                class="block text-base font-bold group-hover:text-primary sm:text-lg md:text-xl"
-              >
-                {{ post.title }}
-              </span>
-              <span class="text-sm sm:text-base md:text-lg">
-                {{ post.description }}
+          <div class="rounded-md shadow-md overflow-hidden">
+            <a
+              *ngFor="
+                let post of seriesPosts$ | async | filterChapter: chapter.slug
+              "
+              class="flex flex-col p-4 bg-canvas-light space-y-2 md:space-y-0 md:flex-row md:items-center md:justify-between group hover:bg-canvas-shade focus:outline-none focus:ring focus:ring-primary focus:ring-inset"
+              [routerLink]="post.route"
+            >
+              <span>
+                <span
+                  class="block text-base font-bold group-hover:text-primary sm:text-lg md:text-xl"
+                >
+                  {{ post.title }}
+                </span>
+                <span class="text-sm sm:text-base md:text-lg">
+                  {{ post.description }}
+                </span>
               </span>
-            </span>
 
-            <div class="flex space-x-2">
-              <niz-inline-svg
-                *ngFor="let tag of post.tags | slice: 0:3"
-                class="h-6 w-6"
-                [svgSource]="'assets/stack/' + tag + '.svg' | lowercase | dash"
-              ></niz-inline-svg>
-            </div>
-          </a>
+              <div class="flex space-x-2">
+                <niz-inline-svg
+                  *ngFor="let tag of post.tags | slice: 0:3"
+                  class="h-6 w-6"
+                  [svgSource]="
+                    'assets/stack/' + tag + '.svg' | lowercase | dash
+                  "
+                ></niz-inline-svg>
+              </div>
+            </a>
+          </div>
         </div>
       </div>
     </div>

From 20df75c4270410f03d8f20e401f1e9fdbd387c35 Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Wed, 30 Dec 2020 17:43:56 +0100
Subject: [PATCH 12/19] refactor(scully): assign pages directly

---
 .../components/article/article.component.ts   |  5 +---
 .../components/comments/comments.component.ts | 16 ++++------
 src/app/pages/author/author.component.html    |  2 +-
 src/app/pages/author/author.component.ts      | 29 ++++++++-----------
 src/app/pages/authors/authors.component.ts    | 10 ++-----
 .../pages/blog-post/blog-post.component.ts    |  4 +--
 src/app/pages/blog/blog.component.ts          | 13 +++------
 src/app/pages/home/home.component.ts          | 21 +++++---------
 src/app/pages/legal/legal.component.ts        | 10 ++-----
 src/app/pages/series/series.component.ts      |  7 ++---
 src/app/pages/tag/tag.component.html          |  2 +-
 src/app/pages/tag/tag.component.ts            | 14 ++++-----
 src/app/pages/tags/tags.component.ts          | 12 ++------
 13 files changed, 51 insertions(+), 94 deletions(-)

diff --git a/src/app/components/article/article.component.ts b/src/app/components/article/article.component.ts
index 55ccf226..643f203a 100644
--- a/src/app/components/article/article.component.ts
+++ b/src/app/components/article/article.component.ts
@@ -2,7 +2,6 @@ import { Component, OnInit, Input } from '@angular/core';
 import { ScullyRoute } from '@scullyio/ng-lib';
 import { ContentType } from 'src/app/types/types';
 
-
 @Component({
   selector: 'app-article',
   templateUrl: './article.component.html',
@@ -12,8 +11,6 @@ export class ArticleComponent implements OnInit {
   @Input() route: ScullyRoute;
   type: ContentType;
 
-
-
   ngOnInit(): void {
     const type = this.route.route.split('/')[1];
     switch (type) {
@@ -25,4 +22,4 @@ export class ArticleComponent implements OnInit {
         break;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/components/comments/comments.component.ts b/src/app/components/comments/comments.component.ts
index d646a9d0..025e270b 100644
--- a/src/app/components/comments/comments.component.ts
+++ b/src/app/components/comments/comments.component.ts
@@ -8,12 +8,7 @@ import {
 } from '@angular/core';
 import { ScullyRoute } from '@scullyio/ng-lib';
 import { ThemeService } from '@services/theme.service';
-import {
-  distinctUntilChanged,
-  tap,
-  startWith,
-  takeUntil,
-} from 'rxjs/operators';
+import { distinctUntilChanged, tap, takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 
 @Component({
@@ -30,10 +25,6 @@ export class CommentsComponent implements OnInit, OnDestroy {
     private renderer: Renderer2,
     private theme: ThemeService
   ) {}
-  ngOnDestroy(): void {
-    this.onDestroy$.next();
-    this.onDestroy$.complete();
-  }
 
   ngOnInit(): void {
     this.theme.themeChange
@@ -58,4 +49,9 @@ export class CommentsComponent implements OnInit, OnDestroy {
       )
       .subscribe();
   }
+
+  ngOnDestroy(): void {
+    this.onDestroy$.next();
+    this.onDestroy$.complete();
+  }
 }
diff --git a/src/app/pages/author/author.component.html b/src/app/pages/author/author.component.html
index 85701bdd..c76aa5ca 100644
--- a/src/app/pages/author/author.component.html
+++ b/src/app/pages/author/author.component.html
@@ -93,7 +93,7 @@ <h1 *ngIf="author$ | async as author" class="text-2xl text-semibold">
 </div>
 
 <div
-  class="flex flex-col md:flex-row space-y-5 md:space-y-0 md:space-x-5 mt-10 max-w-screen-xl mx-auto px-5"
+  class="max-w-container flex flex-col md:flex-row space-y-5 md:space-y-0 md:space-x-5 mt-10"
 >
   <div class="w-full md:w-9/12 xl:w-10/12 flex flex-col space-y-4">
     <h2 class="text-2xl font-semibold">Recently Updated</h2>
diff --git a/src/app/pages/author/author.component.ts b/src/app/pages/author/author.component.ts
index 9961aeb1..6bff3c53 100644
--- a/src/app/pages/author/author.component.ts
+++ b/src/app/pages/author/author.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { ScullyRoute } from '@scullyio/ng-lib';
 import { Observable } from 'rxjs';
 import { ScullyContentService } from '@services/scully-content.service';
@@ -8,23 +8,18 @@ import { ScullyContentService } from '@services/scully-content.service';
   templateUrl: './author.component.html',
   styleUrls: ['./author.component.scss'],
 })
-export class AuthorComponent implements OnInit {
-  author$: Observable<ScullyRoute>;
+export class AuthorComponent {
+  author$: Observable<ScullyRoute> = this.scullyContent.getCurrent();
 
-  latestAuthorPosts$: Observable<ScullyRoute[]>;
-  updatedAuthorPosts$: Observable<ScullyRoute[]>;
-  authorTags$: Observable<ScullyRoute[]>;
+  latestAuthorPosts$: Observable<
+    ScullyRoute[]
+  > = this.scullyContent.authorPosts(this.author$);
+  updatedAuthorPosts$: Observable<
+    ScullyRoute[]
+  > = this.scullyContent.lastUpdateAuthorPosts(this.author$);
+  authorTags$: Observable<ScullyRoute[]> = this.scullyContent.authorTags(
+    this.author$
+  );
 
   constructor(private scullyContent: ScullyContentService) {}
-
-  ngOnInit(): void {
-    this.author$ = this.scullyContent.getCurrent();
-
-    this.latestAuthorPosts$ = this.scullyContent.authorPosts(this.author$);
-    this.updatedAuthorPosts$ = this.scullyContent.lastUpdateAuthorPosts(
-      this.author$
-    );
-
-    this.authorTags$ = this.scullyContent.authorTags(this.author$);
-  }
 }
diff --git a/src/app/pages/authors/authors.component.ts b/src/app/pages/authors/authors.component.ts
index e508fd6c..fa6c9f44 100644
--- a/src/app/pages/authors/authors.component.ts
+++ b/src/app/pages/authors/authors.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { ScullyRoute } from '@scullyio/ng-lib';
 import { ScullyContentService } from '@services/scully-content.service';
@@ -8,12 +8,8 @@ import { ScullyContentService } from '@services/scully-content.service';
   templateUrl: './authors.component.html',
   styleUrls: ['./authors.component.scss'],
 })
-export class AuthorsComponent implements OnInit {
-  authors$: Observable<ScullyRoute[]>;
+export class AuthorsComponent {
+  authors$: Observable<ScullyRoute[]> = this.scullyContentService.authors();
 
   constructor(private scullyContentService: ScullyContentService) {}
-
-  ngOnInit() {
-    this.authors$ = this.scullyContentService.authors();
-  }
 }
diff --git a/src/app/pages/blog-post/blog-post.component.ts b/src/app/pages/blog-post/blog-post.component.ts
index 4e9c1ea0..3038ce47 100644
--- a/src/app/pages/blog-post/blog-post.component.ts
+++ b/src/app/pages/blog-post/blog-post.component.ts
@@ -20,7 +20,7 @@ import { ScullyContentService } from 'src/app/services/scully-content.service';
   encapsulation: ViewEncapsulation.Emulated,
 })
 export class BlogPostComponent implements OnInit, AfterViewChecked, OnDestroy {
-  post$: Observable<ScullyRoute>;
+  post$: Observable<ScullyRoute> = this.content.getCurrent();
   related$: Observable<ScullyRoute[]>;
   authors$: Observable<ScullyRoute[]>;
 
@@ -50,8 +50,6 @@ export class BlogPostComponent implements OnInit, AfterViewChecked, OnDestroy {
       )
       .subscribe();
 
-    this.post$ = this.content.getCurrent();
-
     this.related$ = this.content
       .posts()
       .pipe(
diff --git a/src/app/pages/blog/blog.component.ts b/src/app/pages/blog/blog.component.ts
index 126052d2..b42f7f77 100644
--- a/src/app/pages/blog/blog.component.ts
+++ b/src/app/pages/blog/blog.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { ScullyRoute } from '@scullyio/ng-lib';
 import { ScullyContentService } from '@services/scully-content.service';
@@ -8,14 +8,9 @@ import { ScullyContentService } from '@services/scully-content.service';
   templateUrl: './blog.component.html',
   styleUrls: ['./blog.component.scss'],
 })
-export class BlogComponent implements OnInit {
-  blogPosts$: Observable<ScullyRoute[]>;
-  tags$: Observable<ScullyRoute[]>;
+export class BlogComponent {
+  blogPosts$: Observable<ScullyRoute[]> = this.scullyContentService.posts();
+  tags$: Observable<ScullyRoute[]> = this.scullyContentService.tags();
 
   constructor(private scullyContentService: ScullyContentService) {}
-
-  ngOnInit() {
-    this.blogPosts$ = this.scullyContentService.posts();
-    this.tags$ = this.scullyContentService.tags();
-  }
 }
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index c1dab14c..a535d7fe 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { ScullyRoute } from '@scullyio/ng-lib';
 import { ScullyContentService } from '@services/scully-content.service';
@@ -8,18 +8,13 @@ import { ScullyContentService } from '@services/scully-content.service';
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
 })
-export class HomeComponent implements OnInit {
-  latestBlogPost$: Observable<ScullyRoute>;
-  blogPosts$: Observable<ScullyRoute[]>;
-  updateBlogPosts$: Observable<ScullyRoute[]>;
-  tags$: Observable<ScullyRoute[]>;
+export class HomeComponent {
+  latestBlogPost$: Observable<ScullyRoute> = this.scullyContentService.latestPost();
+  blogPosts$: Observable<ScullyRoute[]> = this.scullyContentService.posts();
+  updateBlogPosts$: Observable<
+    ScullyRoute[]
+  > = this.scullyContentService.lastPosts();
+  tags$: Observable<ScullyRoute[]> = this.scullyContentService.tags();
 
   constructor(private scullyContentService: ScullyContentService) {}
-
-  ngOnInit() {
-    this.latestBlogPost$ = this.scullyContentService.latestPost();
-    this.blogPosts$ = this.scullyContentService.posts();
-    this.updateBlogPosts$ = this.scullyContentService.lastPosts();
-    this.tags$ = this.scullyContentService.tags();
-  }
 }
diff --git a/src/app/pages/legal/legal.component.ts b/src/app/pages/legal/legal.component.ts
index 8912bc38..2f8c0791 100644
--- a/src/app/pages/legal/legal.component.ts
+++ b/src/app/pages/legal/legal.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { ScullyRoute } from '@scullyio/ng-lib';
 import { Observable } from 'rxjs';
 import { ScullyContentService } from '@services/scully-content.service';
@@ -8,12 +8,8 @@ import { ScullyContentService } from '@services/scully-content.service';
   templateUrl: './legal.component.html',
   styleUrls: ['./legal.component.scss'],
 })
-export class LegalComponent implements OnInit {
-  page$: Observable<ScullyRoute>;
+export class LegalComponent {
+  page$: Observable<ScullyRoute> = this.content.getCurrent();
 
   constructor(public content: ScullyContentService) {}
-
-  ngOnInit(): void {
-    this.page$ = this.content.getCurrent();
-  }
 }
diff --git a/src/app/pages/series/series.component.ts b/src/app/pages/series/series.component.ts
index bac99697..5396c248 100644
--- a/src/app/pages/series/series.component.ts
+++ b/src/app/pages/series/series.component.ts
@@ -9,10 +9,9 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./series.component.scss'],
 })
 export class SeriesComponent implements OnInit {
-  series$: Observable<ScullyRoute[]>;
+  series$: Observable<ScullyRoute[]> = this.scullyContent.series();
+
   constructor(private scullyContent: ScullyContentService) {}
 
-  ngOnInit(): void {
-    this.series$ = this.scullyContent.series();
-  }
+  ngOnInit(): void {}
 }
diff --git a/src/app/pages/tag/tag.component.html b/src/app/pages/tag/tag.component.html
index 5ecd9ea6..8f746568 100644
--- a/src/app/pages/tag/tag.component.html
+++ b/src/app/pages/tag/tag.component.html
@@ -32,7 +32,7 @@ <h2 class="text-2xl font-semibold">
     </h2>
     <div class="flex flex-wrap">
       <app-article
-        *ngFor="let blogPost of tagPosts$ | async | slice: 0:10"
+        *ngFor="let blogPost of tagPosts$ | async | slice: 1:11"
         [route]="blogPost"
       >
       </app-article>
diff --git a/src/app/pages/tag/tag.component.ts b/src/app/pages/tag/tag.component.ts
index 52e1e602..b84afa77 100644
--- a/src/app/pages/tag/tag.component.ts
+++ b/src/app/pages/tag/tag.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { ScullyRoute } from '@scullyio/ng-lib';
 import { Observable } from 'rxjs';
 import { ScullyContentService } from '@services/scully-content.service';
@@ -8,16 +8,12 @@ import { ScullyContentService } from '@services/scully-content.service';
   templateUrl: './tag.component.html',
   styleUrls: ['./tag.component.scss'],
 })
-export class TagComponent implements OnInit {
+export class TagComponent {
   page$: Observable<ScullyRoute> = this.scullyContent.getCurrent();
 
-  tagPosts$: Observable<ScullyRoute[]>;
+  tagPosts$: Observable<ScullyRoute[]> = this.scullyContent.tagPosts(
+    this.page$
+  );
 
   constructor(private scullyContent: ScullyContentService) {}
-
-  ngOnInit(): void {
-    this.page$ = this.scullyContent.getCurrent();
-
-    this.tagPosts$ = this.scullyContent.tagPosts(this.page$);
-  }
 }
diff --git a/src/app/pages/tags/tags.component.ts b/src/app/pages/tags/tags.component.ts
index 90bc2089..19e12e27 100644
--- a/src/app/pages/tags/tags.component.ts
+++ b/src/app/pages/tags/tags.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { ScullyContentService } from '@services/scully-content.service';
 import { Observable } from 'rxjs';
 import { ScullyRoute } from '@scullyio/ng-lib';
@@ -8,14 +8,8 @@ import { ScullyRoute } from '@scullyio/ng-lib';
   templateUrl: './tags.component.html',
   styleUrls: ['./tags.component.scss'],
 })
-export class TagsComponent implements OnInit {
-  blogPosts$: Observable<ScullyRoute[]>;
-  tags$: Observable<ScullyRoute[]>;
+export class TagsComponent {
+  tags$: Observable<ScullyRoute[]> = this.scullyContent.tags();
 
   constructor(private scullyContent: ScullyContentService) {}
-
-  ngOnInit(): void {
-    this.blogPosts$ = this.scullyContent.posts();
-    this.tags$ = this.scullyContent.tags();
-  }
 }

From 6a53917125f943242b180db6900dc830c75d1531 Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Thu, 31 Dec 2020 08:54:44 +0100
Subject: [PATCH 13/19] feat(search): include series in search and add badge

* show search type in badge
---
 src/app/components/badge/badge.component.html |  6 +++
 src/app/components/badge/badge.component.scss |  0
 .../components/badge/badge.component.spec.ts  | 25 ++++++++++++
 src/app/components/badge/badge.component.ts   | 40 +++++++++++++++++++
 src/app/components/badge/badge.module.ts      | 10 +++++
 .../components/search/search.component.html   | 17 +++++---
 .../components/search/search.component.scss   |  9 ++---
 src/app/components/search/search.component.ts |  2 +
 src/app/components/search/search.module.ts    |  2 +
 src/app/pipes/search.pipe.ts                  | 20 +++++++++-
 src/app/types/types.ts                        |  3 ++
 11 files changed, 122 insertions(+), 12 deletions(-)
 create mode 100644 src/app/components/badge/badge.component.html
 create mode 100644 src/app/components/badge/badge.component.scss
 create mode 100644 src/app/components/badge/badge.component.spec.ts
 create mode 100644 src/app/components/badge/badge.component.ts
 create mode 100644 src/app/components/badge/badge.module.ts

diff --git a/src/app/components/badge/badge.component.html b/src/app/components/badge/badge.component.html
new file mode 100644
index 00000000..a6a338b8
--- /dev/null
+++ b/src/app/components/badge/badge.component.html
@@ -0,0 +1,6 @@
+<span
+  class="ml-2 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"
+  [ngClass]="[typeStylesBg]"
+>
+  <span [ngClass]="[typeStylesText]"> <ng-content></ng-content> </span>
+</span>
diff --git a/src/app/components/badge/badge.component.scss b/src/app/components/badge/badge.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/components/badge/badge.component.spec.ts b/src/app/components/badge/badge.component.spec.ts
new file mode 100644
index 00000000..6b63e579
--- /dev/null
+++ b/src/app/components/badge/badge.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BadgeComponent } from './badge.component';
+
+describe('BadgeComponent', () => {
+  let component: BadgeComponent;
+  let fixture: ComponentFixture<BadgeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BadgeComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BadgeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/badge/badge.component.ts b/src/app/components/badge/badge.component.ts
new file mode 100644
index 00000000..c8b97c85
--- /dev/null
+++ b/src/app/components/badge/badge.component.ts
@@ -0,0 +1,40 @@
+import { SearchItemType } from './../../types/types';
+import { Component, HostBinding, Input } from '@angular/core';
+
+@Component({
+  selector: 'niz-badge',
+  templateUrl: './badge.component.html',
+  styleUrls: ['./badge.component.scss'],
+})
+export class BadgeComponent {
+  // TODO add styles for new, coming soon
+  @Input() type: SearchItemType | 'new' | 'coming-soon' = 'blog';
+
+  constructor() {}
+
+  get typeStylesBg(): string {
+    switch (this.type) {
+      case 'tag':
+        return 'bg-green-500 bg-opacity-10';
+      case 'series':
+        return 'bg-red-500 bg-opacity-10';
+      case 'blog':
+      case 'link':
+      default:
+        return 'bg-primary bg-opacity-10';
+    }
+  }
+
+  get typeStylesText(): string {
+    switch (this.type) {
+      case 'tag':
+        return 'text-green-500';
+      case 'series':
+        return 'text-red-500';
+      case 'blog':
+      case 'link':
+      default:
+        return 'text-primary';
+    }
+  }
+}
diff --git a/src/app/components/badge/badge.module.ts b/src/app/components/badge/badge.module.ts
new file mode 100644
index 00000000..0f72a55f
--- /dev/null
+++ b/src/app/components/badge/badge.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BadgeComponent } from './badge.component';
+
+@NgModule({
+  declarations: [BadgeComponent],
+  imports: [CommonModule],
+  exports: [BadgeComponent],
+})
+export class BadgeModule {}
diff --git a/src/app/components/search/search.component.html b/src/app/components/search/search.component.html
index 1de3803c..345b470b 100644
--- a/src/app/components/search/search.component.html
+++ b/src/app/components/search/search.component.html
@@ -18,17 +18,24 @@
       (ngModelChange)="searchChange($event)"
     />
     <div [class.hidden]="searchResult.length === 0">
-      <ul class="max-h-384 overflow-y-auto space-y-2 py-4">
-        <li #searchItem *ngFor="let searchItem of searchResult; index as i">
+      <ul class="max-h-384 overflow-y-auto space-y-2">
+        <li
+          #searchItem
+          class="searchItem px-4"
+          *ngFor="let searchItem of searchResult; index as i"
+        >
           <a
-            class="relative inline-block px-6 py-1 no-hover"
+            class="relative inline-block w-full px-4 py-1"
             [class.activeItem]="i === activeIndex"
             [routerLink]="[searchItem.url]"
             (click)="closeSearch(searchItem.url)"
           >
             <span class="flex flex-col pr-10">
-              <span id="title" class="text-lg font-semibold">
-                {{ searchItem.title }}
+              <span class="text-lg font-semibold">
+                <span id="title">{{ searchItem.title }}</span>
+                <niz-badge [type]="searchItem.type">{{
+                  searchItem.type
+                }}</niz-badge>
               </span>
               <span class="text-color-light" *ngIf="searchItem.description">
                 {{ searchItem.description }}
diff --git a/src/app/components/search/search.component.scss b/src/app/components/search/search.component.scss
index 7a7aee1c..1a8f9af1 100644
--- a/src/app/components/search/search.component.scss
+++ b/src/app/components/search/search.component.scss
@@ -1,8 +1,3 @@
-a {
-  width: calc(100% - 24px);
-  margin-left: 12px;
-}
-
 a:hover:not(.activeItem) {
   @apply bg-canvas-light rounded-lg;
 
@@ -16,3 +11,7 @@ a:hover:not(.activeItem) {
 .activeItem {
   @apply bg-canvas-shade rounded-lg;
 }
+
+.searchItem:last-child {
+  @apply pb-2;
+}
diff --git a/src/app/components/search/search.component.ts b/src/app/components/search/search.component.ts
index 5ddf5cbc..18889e31 100644
--- a/src/app/components/search/search.component.ts
+++ b/src/app/components/search/search.component.ts
@@ -1,3 +1,4 @@
+import { ScullyContentService } from '@services/scully-content.service';
 import { SimpleAnalyticsService } from '@services/simple-analytics.service';
 import { Router } from '@angular/router';
 import { SearchItem } from './../../types/types';
@@ -79,6 +80,7 @@ export class NizSearch implements OnInit {
 
   constructor(
     public scully: ScullyRoutesService,
+    private scullyContent: ScullyContentService,
     private searchPipe: SearchPipe,
     private router: Router,
     private sa: SimpleAnalyticsService
diff --git a/src/app/components/search/search.module.ts b/src/app/components/search/search.module.ts
index 9d9472d3..7c025aea 100644
--- a/src/app/components/search/search.module.ts
+++ b/src/app/components/search/search.module.ts
@@ -1,3 +1,4 @@
+import { BadgeModule } from './../badge/badge.module';
 import { NizInlineSvgModule } from '@notiz/ngx-design';
 import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
@@ -13,6 +14,7 @@ import { PipesModule } from '@pipes/pipes.module';
     RouterModule,
     NizInlineSvgModule,
     PipesModule,
+    BadgeModule,
   ],
   declarations: [NizSearch],
   exports: [NizSearch],
diff --git a/src/app/pipes/search.pipe.ts b/src/app/pipes/search.pipe.ts
index 4962a3cc..52ca8a32 100644
--- a/src/app/pipes/search.pipe.ts
+++ b/src/app/pipes/search.pipe.ts
@@ -1,6 +1,6 @@
 import { ScullyRoute } from '@scullyio/ng-lib';
 import { Pipe, PipeTransform } from '@angular/core';
-import { SearchItem } from '../types/types';
+import { SearchItem, SearchItemType } from '../types/types';
 
 @Pipe({
   name: 'search',
@@ -15,7 +15,8 @@ export class SearchPipe implements PipeTransform {
         (route) =>
           route.route.startsWith('/blog/') ||
           route.route.startsWith('/links/') ||
-          route.route.startsWith('/tags/')
+          route.route.startsWith('/tags/') ||
+          route.route.startsWith('/series/')
       )
       .filter((route) =>
         this.hasRoutesIncludingSearch(route, search.toLocaleLowerCase())
@@ -43,6 +44,7 @@ export class SearchPipe implements PipeTransform {
       description: route.description,
       url: route.route,
       tag: route.tags[0].toLowerCase(),
+      type: this.mapScullyRouteToType(route),
     };
   }
 
@@ -51,6 +53,20 @@ export class SearchPipe implements PipeTransform {
       title: route.title,
       url: route.route,
       tag: route.slug,
+      type: 'tag',
     };
   }
+
+  private mapScullyRouteToType(route: ScullyRoute): SearchItemType {
+    if (route.route.startsWith('/blog/')) {
+      return 'blog';
+    } else if (route.route.startsWith('/links/')) {
+      return 'link';
+    } else if (route.route.startsWith('/tags/')) {
+      return 'tag';
+    } else if (route.route.startsWith('/series/')) {
+      return 'series';
+    }
+    return null;
+  }
 }
diff --git a/src/app/types/types.ts b/src/app/types/types.ts
index 14a9e302..b63fb378 100644
--- a/src/app/types/types.ts
+++ b/src/app/types/types.ts
@@ -5,11 +5,14 @@ export interface TagWeight {
   weight: number;
 }
 
+export type SearchItemType = 'tag' | 'blog' | 'series' | 'link';
+
 export interface SearchItem {
   title: string;
   description?: string;
   url: string;
   tag: string;
+  type: SearchItemType;
 }
 
 export enum ContentType {

From 9a8293157fe07261080091a471665cd64c12ec57 Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Tue, 5 Jan 2021 20:29:36 +0100
Subject: [PATCH 14/19] feat(series): update series chapters and align chips

---
 .../deploy-nestjs-with-prisma-to-heroku.md     |  2 +-
 ...rizing-nestjs-with-prisma-and-postgresql.md |  2 +-
 .../blog/firebase-hosting-preview-deploy.md    |  4 ++--
 ...ss-purge-optimize-angular-for-production.md |  4 ++--
 content/series/angular-scully-tailwind.md      | 18 +++++++++---------
 content/series/nestjs-prisma.md                | 18 +++++++++---------
 6 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/content/blog/deploy-nestjs-with-prisma-to-heroku.md b/content/blog/deploy-nestjs-with-prisma-to-heroku.md
index c0085ab9..db31871b 100644
--- a/content/blog/deploy-nestjs-with-prisma-to-heroku.md
+++ b/content/blog/deploy-nestjs-with-prisma-to-heroku.md
@@ -14,7 +14,7 @@ authors:
   - Marc Stammerjohann
 series:
   - slug: nestjs-prisma
-    chapterSlug: hosting
+    chapterSlug: deployment
     weight: 10
 github: 'https://github.com/notiz-dev/deploy-nestjs-prisma-heroku'
 ---
diff --git a/content/blog/dockerizing-nestjs-with-prisma-and-postgresql.md b/content/blog/dockerizing-nestjs-with-prisma-and-postgresql.md
index 1ce474b5..d1cd7558 100644
--- a/content/blog/dockerizing-nestjs-with-prisma-and-postgresql.md
+++ b/content/blog/dockerizing-nestjs-with-prisma-and-postgresql.md
@@ -14,7 +14,7 @@ authors:
   - Marc Stammerjohann
 series:
   - slug: nestjs-prisma
-    chapterSlug: hosting
+    chapterSlug: deployment
     weight: 20
 github: https://github.com/notiz-dev/nestjs-prisma-docker
 ---
diff --git a/content/blog/firebase-hosting-preview-deploy.md b/content/blog/firebase-hosting-preview-deploy.md
index 76c81ce6..69f50a5f 100644
--- a/content/blog/firebase-hosting-preview-deploy.md
+++ b/content/blog/firebase-hosting-preview-deploy.md
@@ -18,8 +18,8 @@ authors:
   - Marc Stammerjohann
 series:
   - slug: angular-scully-tailwind
-    chapterSlug: hosting
-    weight: 10
+    chapterSlug: deployment
+    weight: 20
 github: https://github.com/notiz-dev/angular-scully-tailwindcss
 ---
 
diff --git a/content/blog/tailwindcss-purge-optimize-angular-for-production.md b/content/blog/tailwindcss-purge-optimize-angular-for-production.md
index de087d20..cbfb90d5 100644
--- a/content/blog/tailwindcss-purge-optimize-angular-for-production.md
+++ b/content/blog/tailwindcss-purge-optimize-angular-for-production.md
@@ -13,8 +13,8 @@ keywords:
   - Utility-First CSS
 series:
   - slug: angular-scully-tailwind
-    chapterSlug: getting-started
-    weight: 30
+    chapterSlug: deployment
+    weight: 10
 authors:
   - Marc Stammerjohann
 github: https://github.com/notiz-dev/angular-scully-tailwindcss
diff --git a/content/series/angular-scully-tailwind.md b/content/series/angular-scully-tailwind.md
index 554449cf..71d3cd50 100644
--- a/content/series/angular-scully-tailwind.md
+++ b/content/series/angular-scully-tailwind.md
@@ -10,8 +10,8 @@ tags:
 chapters:
   - title: Getting Started
     slug: getting-started
-  - title: Hosting
-    slug: hosting
+  - title: Deployment
+    slug: deployment
 ---
 
 ## What will you build?
@@ -19,13 +19,13 @@ chapters:
 - Setting up Angular with Tailwind CSS
 - Jamstack with Scully
 - Deploy via GitHub Actions to Firebase Hosting
-- SEO <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Use and create Scully Plugin <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Analytics <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- CMS (Netlify coming soon)
-- Cross posting to dev.to <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Newsletter <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Shortcodes in Markdown <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- SEO <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Use and create Scully Plugin <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Analytics <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- CMS <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Cross posting to dev.to <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Newsletter <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Shortcodes in Markdown <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
 
 ## Live Demo
 
diff --git a/content/series/nestjs-prisma.md b/content/series/nestjs-prisma.md
index 3434c875..cf865ec8 100644
--- a/content/series/nestjs-prisma.md
+++ b/content/series/nestjs-prisma.md
@@ -11,8 +11,8 @@ chapters:
     slug: getting-started
   - title: Prisma
     slug: prisma
-  - title: Hosting
-    slug: hosting
+  - title: Deployment
+    slug: deployment
 ---
 
 ## What is it all about?
@@ -21,11 +21,11 @@ chapters:
 - Build GraphQL endpoit with NestJS
 - Deployment of NestJS and Prisma to Heroku
 - Dockerize NestJS and Prisma application
-- Swagger API <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Prisma Migrate, Native Types <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Authentication with PassportJS <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Pagination <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Subscriptions <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Mailing <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Cloud Run <span class="inline ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Swagger API <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Prisma Migrate, Native Types <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Authentication with PassportJS <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Pagination <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Subscriptions <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Mailing <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Cloud Run <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
 - more to come

From c7b8a252098126c42ba73908d7ec6e559cbf98f1 Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Tue, 5 Jan 2021 20:40:14 +0100
Subject: [PATCH 15/19] style(badge): align middle

---
 src/app/components/badge/badge.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/badge/badge.component.html b/src/app/components/badge/badge.component.html
index a6a338b8..48a1dbba 100644
--- a/src/app/components/badge/badge.component.html
+++ b/src/app/components/badge/badge.component.html
@@ -1,5 +1,5 @@
 <span
-  class="ml-2 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"
+  class="ml-2 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold align-middle"
   [ngClass]="[typeStylesBg]"
 >
   <span [ngClass]="[typeStylesText]"> <ng-content></ng-content> </span>

From e8d342fa4635dd1890d5cb7858a99b6ce7db5914 Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Thu, 7 Jan 2021 16:19:08 +0100
Subject: [PATCH 16/19] refactor(badge): create badge component styles

---
 content/series/angular-scully-tailwind.md | 14 +++++++-------
 content/series/nestjs-prisma.md           | 14 +++++++-------
 src/styles.scss                           |  4 ++++
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/content/series/angular-scully-tailwind.md b/content/series/angular-scully-tailwind.md
index 71d3cd50..efd65fd6 100644
--- a/content/series/angular-scully-tailwind.md
+++ b/content/series/angular-scully-tailwind.md
@@ -19,13 +19,13 @@ chapters:
 - Setting up Angular with Tailwind CSS
 - Jamstack with Scully
 - Deploy via GitHub Actions to Firebase Hosting
-- SEO <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Use and create Scully Plugin <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Analytics <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- CMS <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Cross posting to dev.to <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Newsletter <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Shortcodes in Markdown <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- SEO <span class="badge-coming-soon">Coming soon</span>
+- Use and create Scully Plugin <span class="badge-coming-soon">Coming soon</span>
+- Analytics <span class="badge-coming-soon">Coming soon</span>
+- CMS <span class="badge-coming-soon">Coming soon</span>
+- Cross posting to dev.to <span class="badge-coming-soon">Coming soon</span>
+- Newsletter <span class="badge-coming-soon">Coming soon</span>
+- Shortcodes in Markdown <span class="badge-coming-soon">Coming soon</span>
 
 ## Live Demo
 
diff --git a/content/series/nestjs-prisma.md b/content/series/nestjs-prisma.md
index cf865ec8..7bbd02e1 100644
--- a/content/series/nestjs-prisma.md
+++ b/content/series/nestjs-prisma.md
@@ -21,11 +21,11 @@ chapters:
 - Build GraphQL endpoit with NestJS
 - Deployment of NestJS and Prisma to Heroku
 - Dockerize NestJS and Prisma application
-- Swagger API <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Prisma Migrate, Native Types <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Authentication with PassportJS <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Pagination <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Subscriptions <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Mailing <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
-- Cloud Run <span class="inline align-middle ml-2 bg-primary bg-opacity-10 rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold"><span class="text-primary">Coming soon</span></span>
+- Swagger API <span class="badge-coming-soon">Coming soon</span>
+- Prisma Migrate, Native Types <span class="badge-coming-soon">Coming soon</span>
+- Authentication with PassportJS <span class="badge-coming-soon">Coming soon</span>
+- Pagination <span class="badge-coming-soon">Coming soon</span>
+- Subscriptions <span class="badge-coming-soon">Coming soon</span>
+- Mailing <span class="badge-coming-soon">Coming soon</span>
+- Cloud Run <span class="badge-coming-soon">Coming soon</span>
 - more to come
diff --git a/src/styles.scss b/src/styles.scss
index 64abf94b..268dd5c8 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -30,6 +30,10 @@
   .focus-ring {
     @apply focus:outline-none focus:ring focus:ring-primary;
   }
+
+  .badge-coming-soon {
+    @apply inline align-middle ml-2 bg-primary bg-opacity-10 text-primary rounded-full px-2 py-0.5 text-xs tracking-wide uppercase font-semibold;
+  }
 }
 
 body {

From 0cb2f3fa3af25dfd394dcf4a93fddb9e0a9157b5 Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Thu, 7 Jan 2021 18:12:56 +0100
Subject: [PATCH 17/19] feat(series): generate banner for series

---
 ...ments-in-angular-demo-github-repository.md |  1 +
 .../banner-generator/src/banner-generator.js  | 64 ++++++++++++++++++-
 .../banner-generator/src/generate-images.js   |  8 +--
 projects/banner-generator/template.html       | 28 ++++----
 .../banner-series.component.html              | 13 ++++
 .../banner-series.component.scss              |  3 +
 .../banner-series/banner-series.component.ts  | 28 ++++++++
 .../lib/banner-series/banner-series.module.ts | 10 +++
 .../src/lib/banner/banner.component.scss      |  5 +-
 projects/design/src/public-api.ts             |  2 +
 projects/shortcodes/src/app/app.module.ts     | 10 ++-
 scully.notiz.config.ts                        |  1 +
 src/app/pages/series/series.component.html    | 26 +++-----
 13 files changed, 152 insertions(+), 47 deletions(-)
 create mode 100644 projects/design/src/lib/banner-series/banner-series.component.html
 create mode 100644 projects/design/src/lib/banner-series/banner-series.component.scss
 create mode 100644 projects/design/src/lib/banner-series/banner-series.component.ts
 create mode 100644 projects/design/src/lib/banner-series/banner-series.module.ts

diff --git a/content/links/elements-in-angular-demo-github-repository.md b/content/links/elements-in-angular-demo-github-repository.md
index 4224abe4..f8f786ed 100644
--- a/content/links/elements-in-angular-demo-github-repository.md
+++ b/content/links/elements-in-angular-demo-github-repository.md
@@ -1,6 +1,7 @@
 ---
 title: 'Angular Elements: Demo - Using Elements In Another Angular Project.'
 description: 'GitHub Repository for elements-in-angular-demo. Contribute on GitHub.'
+published: true
 publishedAt: 2020-06-04T13:28:39.082Z
 updatedAt: 2020-06-04T13:28:39.082Z
 url: https://github.com/garygrossgarten/elements-in-angular-demo
diff --git a/projects/banner-generator/src/banner-generator.js b/projects/banner-generator/src/banner-generator.js
index 6ca5beaa..d46e8602 100644
--- a/projects/banner-generator/src/banner-generator.js
+++ b/projects/banner-generator/src/banner-generator.js
@@ -10,6 +10,7 @@ const {
 
 const { resolve } = require('path');
 const { generateImage } = require('./generate-images');
+const { log, logError } = require('@scullyio/scully');
 
 const sizes = [
   { name: 'og', width: 1200, height: 630 },
@@ -17,6 +18,19 @@ const sizes = [
 ];
 
 const bannerGeneratorPlugin = async (html, route) => {
+  if (!(route && route.data && route.data.published)) {
+    return html;
+  }
+
+  if (route.route.startsWith('/series/')) {
+    await generateSeriesBanner(route);
+  } else {
+    await generateBlogBanner(route);
+  }
+  return html;
+};
+
+async function generateBlogBanner(route) {
   try {
     const outDir = './dist/static/assets/banners';
     const template = readFileSync(
@@ -65,10 +79,54 @@ const bannerGeneratorPlugin = async (html, route) => {
     unlinkSync(`${outDir}/${route.route}/styles.css`);
     unlinkSync(`${outDir}/${route.route}/main-es5.js`);
   } catch (err) {
-    console.error(err.message);
+    logError(err.message);
   }
-  return html;
-};
+}
+
+async function generateSeriesBanner(route) {
+  try {
+    const outDir = './dist/static/assets/banners';
+    const template = readFileSync(
+      resolve('./projects/banner-generator/template.html')
+    ).toString();
+    const logos = route.data.tags
+      .map((t) =>
+        resolve(`./src/assets/stack/${t.toLowerCase().replace(' ', '-')}.svg`)
+      )
+      .filter((t) => existsSync(t));
+
+    for await (size of sizes) {
+      const dom = new JSDOM(template);
+      const document = dom.window.document;
+      const image = document.createElement('nizs-banner-series');
+      image.title = route.data.title;
+      image.setAttribute('updated-at', route.data.updatedAt);
+      image.setAttribute('logos', logos);
+      image.setAttribute('width', size.width);
+      image.setAttribute('height', size.height);
+      document.body.append(image);
+      writeFileSyncRecursive(
+        `${outDir}/${route.route}/index.html`,
+        dom.serialize()
+      );
+      copyFileSync(
+        resolve('./dist/shortcodes/styles.css'),
+        resolve(`${outDir}/${route.route}/styles.css`)
+      );
+      copyFileSync(
+        resolve('./dist/shortcodes/main-es5.js'),
+        resolve(`${outDir}/${route.route}/main-es5.js`)
+      );
+      await generateImage(route, size);
+      log(`Generated banner for ${route.route}`);
+    }
+    unlinkSync(`${outDir}/${route.route}/index.html`);
+    unlinkSync(`${outDir}/${route.route}/styles.css`);
+    unlinkSync(`${outDir}/${route.route}/main-es5.js`);
+  } catch (err) {
+    logError(err.message);
+  }
+}
 
 function getYamlFromMarkdown(path) {
   const file = readFileSync(resolve(path)).toString();
diff --git a/projects/banner-generator/src/generate-images.js b/projects/banner-generator/src/generate-images.js
index 7f20101a..46e6bd0c 100644
--- a/projects/banner-generator/src/generate-images.js
+++ b/projects/banner-generator/src/generate-images.js
@@ -2,15 +2,13 @@ const puppeteer = require('puppeteer');
 const { resolve } = require('path');
 
 const generateImage = async (route, size) => {
-  const outDir = './dist/static/assets/banners'
+  const outDir = './dist/static/assets/banners';
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
-  await page.goto(
-    `file://${resolve(`${outDir}/${route.route}/index.html`)}`
-  );
+  await page.goto(`file://${resolve(`${outDir}/${route.route}/index.html`)}`);
   await page.screenshot({
     path: resolve(`${outDir}/${route.route}/${size.name}.png`),
-    fullPage: true
+    fullPage: true,
   });
 
   await browser.close();
diff --git a/projects/banner-generator/template.html b/projects/banner-generator/template.html
index bda55438..f99fdd76 100644
--- a/projects/banner-generator/template.html
+++ b/projects/banner-generator/template.html
@@ -1,23 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
     <script src="main-es5.js"></script>
-    <link rel="stylesheet" href="styles.css">
-   
+    <link rel="stylesheet" href="styles.css" />
+
     <style>
-        body{
-            margin: 0;
-        }
-        
-        
+      body {
+        margin: 0;
+      }
     </style>
-</head>
-<body class="dark">
-
-
-    
-</body>
-</html>
\ No newline at end of file
+  </head>
+  <body class="dark"></body>
+</html>
diff --git a/projects/design/src/lib/banner-series/banner-series.component.html b/projects/design/src/lib/banner-series/banner-series.component.html
new file mode 100644
index 00000000..4999f1e2
--- /dev/null
+++ b/projects/design/src/lib/banner-series/banner-series.component.html
@@ -0,0 +1,13 @@
+<div class="px-10 py-5 flex flex-col space-y-2 z-10 flex-grow">
+  <a class="flex items-center select-none space-x-2">
+    <img class="h-20 w-20" [src]="logo" />
+    <span class="text-2xl font-black text-primary">notiz.dev</span>
+  </a>
+  <span class="title text-6xl font-bold text-color leading-normal w-4/5">{{
+    title
+  }}</span>
+
+  <div class="flex flex-row items-center space-x-4">
+    <img class="h-20 w-auto" *ngFor="let l of _logos.reverse()" [src]="l" />
+  </div>
+</div>
diff --git a/projects/design/src/lib/banner-series/banner-series.component.scss b/projects/design/src/lib/banner-series/banner-series.component.scss
new file mode 100644
index 00000000..9e595ac7
--- /dev/null
+++ b/projects/design/src/lib/banner-series/banner-series.component.scss
@@ -0,0 +1,3 @@
+:host {
+  @apply flex flex-col bg-canvas;
+}
diff --git a/projects/design/src/lib/banner-series/banner-series.component.ts b/projects/design/src/lib/banner-series/banner-series.component.ts
new file mode 100644
index 00000000..c7311bb7
--- /dev/null
+++ b/projects/design/src/lib/banner-series/banner-series.component.ts
@@ -0,0 +1,28 @@
+import { Component, Input, HostBinding } from '@angular/core';
+
+@Component({
+  selector: 'lib-banner-series',
+  templateUrl: './banner-series.component.html',
+  styleUrls: ['./banner-series.component.scss'],
+})
+export class NizBannerSeries {
+  @Input() title = 'image-template';
+  @Input() updatedAt = new Date().toDateString();
+  @Input() logo = 'https://notiz.dev/assets/img/logo.svg';
+  @Input() set logos(logos: string) {
+    this._logos = logos.split(',');
+  }
+  _logos = [];
+  @Input() height = 630;
+  @Input() width = 1200;
+
+  @HostBinding('style.width')
+  get _width() {
+    return `${this.width}px`;
+  }
+
+  @HostBinding('style.height')
+  get _height() {
+    return `${this.height}px`;
+  }
+}
diff --git a/projects/design/src/lib/banner-series/banner-series.module.ts b/projects/design/src/lib/banner-series/banner-series.module.ts
new file mode 100644
index 00000000..481a8db6
--- /dev/null
+++ b/projects/design/src/lib/banner-series/banner-series.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NizBannerSeries } from './banner-series.component';
+
+@NgModule({
+  declarations: [NizBannerSeries],
+  exports: [NizBannerSeries],
+  imports: [CommonModule],
+})
+export class NizBannerSeriesModule {}
diff --git a/projects/design/src/lib/banner/banner.component.scss b/projects/design/src/lib/banner/banner.component.scss
index 18869972..275c7fd8 100644
--- a/projects/design/src/lib/banner/banner.component.scss
+++ b/projects/design/src/lib/banner/banner.component.scss
@@ -1,8 +1,5 @@
 :host {
-  @apply flex;
-  @apply flex-col;
-  @apply bg-canvas;
-  @apply relative;
+  @apply flex flex-col bg-canvas;
 }
 
 .footer {
diff --git a/projects/design/src/public-api.ts b/projects/design/src/public-api.ts
index 9d18ead3..53951235 100644
--- a/projects/design/src/public-api.ts
+++ b/projects/design/src/public-api.ts
@@ -29,3 +29,5 @@ export * from './lib/menu/menu.module';
 export * from './lib/menu/menu.component';
 export * from './lib/banner/banner.module';
 export * from './lib/banner/banner.component';
+export * from './lib/banner-series/banner-series.module';
+export * from './lib/banner-series/banner-series.component';
diff --git a/projects/shortcodes/src/app/app.module.ts b/projects/shortcodes/src/app/app.module.ts
index 38084f71..3a2aa1e2 100644
--- a/projects/shortcodes/src/app/app.module.ts
+++ b/projects/shortcodes/src/app/app.module.ts
@@ -6,10 +6,17 @@ import {
   NizChipModule,
   NizBanner,
   NizBannerModule,
+  NizBannerSeriesModule,
+  NizBannerSeries,
 } from '@notiz/ngx-design';
 
 @NgModule({
-  imports: [BrowserModule, NizChipModule, NizBannerModule],
+  imports: [
+    BrowserModule,
+    NizChipModule,
+    NizBannerModule,
+    NizBannerSeriesModule,
+  ],
   providers: [],
 })
 export class AppModule {
@@ -19,6 +26,7 @@ export class AppModule {
     const elements: any[] = [
       [NizChip, 'nizs-chip'],
       [NizBanner, 'nizs-banner'],
+      [NizBannerSeries, 'nizs-banner-series'],
     ];
 
     for (const [component, name] of elements) {
diff --git a/scully.notiz.config.ts b/scully.notiz.config.ts
index 92724b51..4483faf0 100644
--- a/scully.notiz.config.ts
+++ b/scully.notiz.config.ts
@@ -94,6 +94,7 @@ export const config: ScullyConfig = {
       slug: {
         folder: './content/series',
       },
+      postRenderers: [...defaultPostRenderers, 'bannerGenerator'],
     },
     '/tags/:slug': {
       type: 'contentFolder',
diff --git a/src/app/pages/series/series.component.html b/src/app/pages/series/series.component.html
index 98afba0a..e514026f 100644
--- a/src/app/pages/series/series.component.html
+++ b/src/app/pages/series/series.component.html
@@ -12,25 +12,17 @@ <h1 class="text-3xl font-extrabold sm:text-4xl md:text-5xl">Series</h1>
   <div class="grid grid-cols-1 gap-y-4 md:grid-cols-2 md:gap-x-8">
     <a
       *ngFor="let s of series$ | async"
-      class="bg-canvas-light rounded-xl shadow-md overflow-hidden group focus-ring transform hover:-translate-y-1"
+      class="bg-canvas-light rounded-xl shadow-md overflow-hidden group focus-ring transform transition-transform duration-300 hover:-translate-y-1"
       [routerLink]="[s.route]"
     >
-      <div class="h-full">
-        <div class="bg-canvas-shade flex justify-around py-8 px-4">
-          <niz-inline-svg
-            *ngFor="let tag of s.tags"
-            class="h-24 w-24"
-            [svgSource]="'assets/stack/' + tag + '.svg' | lowercase | dash"
-          ></niz-inline-svg>
-        </div>
-        <div class="p-6 space-y-2">
-          <h2 class="text-2xl font-semibold group-hover:text-primary">
-            {{ s.title }}
-          </h2>
-          <p>
-            {{ s.description }}
-          </p>
-        </div>
+      <img src="assets/banners{{ s.route }}/og.png" [alt]="s.title" />
+      <div class="p-6 space-y-2">
+        <h2 class="text-2xl font-semibold group-hover:text-primary">
+          {{ s.title }}
+        </h2>
+        <p>
+          {{ s.description }}
+        </p>
       </div>
     </a>
   </div>

From bf438d4753c94061280381c699761db963c81265 Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Thu, 7 Jan 2021 18:38:42 +0100
Subject: [PATCH 18/19] fix(series): lazyImage plugin cannot find banner for
 series

---
 scully.notiz.config.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/scully.notiz.config.ts b/scully.notiz.config.ts
index 4483faf0..ed1a96e5 100644
--- a/scully.notiz.config.ts
+++ b/scully.notiz.config.ts
@@ -94,7 +94,13 @@ export const config: ScullyConfig = {
       slug: {
         folder: './content/series',
       },
-      postRenderers: [...defaultPostRenderers, 'bannerGenerator'],
+      postRenderers: [
+        'fouc',
+        'seoHrefOptimise',
+        'mediumZoom',
+        'copyStaticContent',
+        'bannerGenerator',
+      ],
     },
     '/tags/:slug': {
       type: 'contentFolder',

From c45da5611614b6f548cec90aef39e831631653b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gary=20Gro=C3=9Fgarten?= <gary.grossgarten@gmail.com>
Date: Sat, 9 Jan 2021 17:13:24 +0100
Subject: [PATCH 19/19] series: update series structure

---
 content/blog/analytics.md                     | 21 +++++
 content/blog/angular-10-with-tailwindcss.md   |  2 +-
 content/blog/angular-seo.md                   | 21 +++++
 content/blog/banner-generator.md              | 20 +++++
 content/blog/blog-structure.md                | 26 ++++++
 content/blog/cms.md                           | 22 +++++
 content/blog/create-scully-plugin.md          | 22 +++++
 content/blog/cross-posting-with-rss.md        | 22 +++++
 .../blog/firebase-hosting-preview-deploy.md   |  2 +-
 .../jamstack-angular-scully-tailwind-css.md   |  2 +-
 content/blog/newsletter.md                    | 23 +++++
 content/blog/rss.md                           | 20 +++++
 content/blog/shortcodes-in-markdown.md        | 22 +++++
 ...s-purge-optimize-angular-for-production.md |  2 +-
 content/blog/toc.md                           | 20 +++++
 content/blog/useful-scully-plugins.md         | 29 +++++++
 content/series/angular-jamstack.md            | 28 ++++++
 content/series/angular-scully-tailwind.md     | 34 --------
 package-lock.json                             | 12 ++-
 package.json                                  |  3 +-
 scully.notiz.config.ts                        |  5 +-
 .../components/search/search.component.html   |  2 +-
 .../series-details.component.html             | 85 ++++++++++++-------
 .../series-details/series-details.module.ts   |  2 +
 src/app/services/scully-content.service.ts    |  2 +-
 src/styles.scss                               |  1 -
 src/theme/line-clamp.utilities.scss           | 61 -------------
 tailwind.config.js                            |  5 +-
 28 files changed, 374 insertions(+), 142 deletions(-)
 create mode 100644 content/blog/analytics.md
 create mode 100644 content/blog/angular-seo.md
 create mode 100644 content/blog/banner-generator.md
 create mode 100644 content/blog/blog-structure.md
 create mode 100644 content/blog/cms.md
 create mode 100644 content/blog/create-scully-plugin.md
 create mode 100644 content/blog/cross-posting-with-rss.md
 create mode 100644 content/blog/newsletter.md
 create mode 100644 content/blog/rss.md
 create mode 100644 content/blog/shortcodes-in-markdown.md
 create mode 100644 content/blog/toc.md
 create mode 100644 content/blog/useful-scully-plugins.md
 create mode 100644 content/series/angular-jamstack.md
 delete mode 100644 content/series/angular-scully-tailwind.md
 delete mode 100644 src/theme/line-clamp.utilities.scss

diff --git a/content/blog/analytics.md b/content/blog/analytics.md
new file mode 100644
index 00000000..e8b6b73c
--- /dev/null
+++ b/content/blog/analytics.md
@@ -0,0 +1,21 @@
+---
+title: 'Analytics'
+description: 'Analytics'
+published: false
+publishedAt: 2021-01-01T09:00:00.000Z
+updatedAt: 2021-01-01T09:00:00.000Z
+tags:
+    - Angular
+keywords:
+    - Analytics
+series:
+  - slug: angular-jamstack
+    chapterSlug: basics
+    weight: 60
+authors:
+    - '...'
+github: 'https://github.com/notiz-dev/...'
+slugs:
+    - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz
+---
+
diff --git a/content/blog/angular-10-with-tailwindcss.md b/content/blog/angular-10-with-tailwindcss.md
index fbd4ac11..73abeffc 100644
--- a/content/blog/angular-10-with-tailwindcss.md
+++ b/content/blog/angular-10-with-tailwindcss.md
@@ -13,7 +13,7 @@ keywords:
 authors:
   - Marc Stammerjohann
 series:
-  - slug: angular-scully-tailwind
+  - slug: angular-jamstack
     chapterSlug: getting-started
     weight: 10
 github: https://github.com/notiz-dev/angular-tailwindcss
diff --git a/content/blog/angular-seo.md b/content/blog/angular-seo.md
new file mode 100644
index 00000000..737439a4
--- /dev/null
+++ b/content/blog/angular-seo.md
@@ -0,0 +1,21 @@
+---
+title: 'Angular SEO'
+description: 'Improve your SEO ranking'
+published: false
+publishedAt: 2021-01-01T09:00:00.000Z
+updatedAt: 2021-01-01T09:00:00.000Z
+tags:
+    - Angular
+keywords:
+    - SEO
+series:
+  - slug: angular-jamstack
+    chapterSlug: basics
+    weight: 50
+authors:
+    - '...'
+github: 'https://github.com/notiz-dev/...'
+slugs:
+    - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz
+---
+
diff --git a/content/blog/banner-generator.md b/content/blog/banner-generator.md
new file mode 100644
index 00000000..964fa09f
--- /dev/null
+++ b/content/blog/banner-generator.md
@@ -0,0 +1,20 @@
+---
+title: 'Banner Generator'
+description: 'Banner Generator'
+published: false
+publishedAt: 2021-01-01T09:00:00.000Z
+updatedAt: 2021-01-01T09:00:00.000Z
+tags:
+    - Scully
+keywords:
+    - Plugins
+series:
+  - slug: angular-jamstack
+    chapterSlug: advanced-concepts
+    weight: 60
+authors:
+    - '...'
+github: 'https://github.com/notiz-dev/...'
+slugs:
+    - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz
+---
diff --git a/content/blog/blog-structure.md b/content/blog/blog-structure.md
new file mode 100644
index 00000000..613108ff
--- /dev/null
+++ b/content/blog/blog-structure.md
@@ -0,0 +1,26 @@
+---
+title: 'Blog Structure'
+description: 'Blog Structure'
+published: false
+publishedAt: 2021-01-01T09:00:00.000Z
+updatedAt: 2021-01-01T09:00:00.000Z
+tags:
+    - Angular
+    - Scully
+keywords:
+    - SEO
+series:
+  - slug: angular-jamstack
+    chapterSlug: basics
+    weight: 10
+authors:
+    - '...'
+github: 'https://github.com/notiz-dev/...'
+slugs:
+    - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz
+---
+
+* Concepts for building a blog
+    * related posts
+    * overview page
+    * tags
\ No newline at end of file
diff --git a/content/blog/cms.md b/content/blog/cms.md
new file mode 100644
index 00000000..7e8a4f9c
--- /dev/null
+++ b/content/blog/cms.md
@@ -0,0 +1,22 @@
+---
+title: 'CMS'
+description: 'CMS'
+published: false
+publishedAt: 2021-01-01T09:00:00.000Z
+updatedAt: 2021-01-01T09:00:00.000Z
+tags:
+    - Angular
+    - Scully
+keywords:
+    - SEO
+series:
+  - slug: angular-jamstack
+    chapterSlug: advanced-concepts
+    weight: 10
+authors:
+    - '...'
+github: 'https://github.com/notiz-dev/...'
+slugs:
+    - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz
+---
+
diff --git a/content/blog/create-scully-plugin.md b/content/blog/create-scully-plugin.md
new file mode 100644
index 00000000..e251ef31
--- /dev/null
+++ b/content/blog/create-scully-plugin.md
@@ -0,0 +1,22 @@
+---
+title: 'Create a Scully Plugin'
+description: 'Create a Scully Plugin'
+published: false
+publishedAt: 2021-01-01T09:00:00.000Z
+updatedAt: 2021-01-01T09:00:00.000Z
+tags:
+    - Angular
+    - Scully
+keywords:
+    - SEO
+series:
+  - slug: angular-jamstack
+    chapterSlug: basics
+    weight: 40
+authors:
+    - '...'
+github: 'https://github.com/notiz-dev/...'
+slugs:
+    - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz
+---
+
diff --git a/content/blog/cross-posting-with-rss.md b/content/blog/cross-posting-with-rss.md
new file mode 100644
index 00000000..2ecfbba8
--- /dev/null
+++ b/content/blog/cross-posting-with-rss.md
@@ -0,0 +1,22 @@
+---
+title: 'Cross Post your Content'
+description: 'Cross Post your Content'
+published: false
+publishedAt: 2021-01-01T09:00:00.000Z
+updatedAt: 2021-01-01T09:00:00.000Z
+tags:
+    - Angular
+    - Scully
+keywords:
+    - SEO
+series:
+  - slug: angular-jamstack
+    chapterSlug: advanced-concepts
+    weight: 50
+authors:
+    - '...'
+github: 'https://github.com/notiz-dev/...'
+slugs:
+    - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz
+---
+
diff --git a/content/blog/firebase-hosting-preview-deploy.md b/content/blog/firebase-hosting-preview-deploy.md
index 69f50a5f..8ff55052 100644
--- a/content/blog/firebase-hosting-preview-deploy.md
+++ b/content/blog/firebase-hosting-preview-deploy.md
@@ -17,7 +17,7 @@ keywords:
 authors:
   - Marc Stammerjohann
 series:
-  - slug: angular-scully-tailwind
+  - slug: angular-jamstack
     chapterSlug: deployment
     weight: 20
 github: https://github.com/notiz-dev/angular-scully-tailwindcss
diff --git a/content/blog/jamstack-angular-scully-tailwind-css.md b/content/blog/jamstack-angular-scully-tailwind-css.md
index 37cfe68b..43308e16 100644
--- a/content/blog/jamstack-angular-scully-tailwind-css.md
+++ b/content/blog/jamstack-angular-scully-tailwind-css.md
@@ -14,7 +14,7 @@ keywords:
 authors:
   - Marc Stammerjohann
 series:
-  - slug: angular-scully-tailwind
+  - slug: angular-jamstack
     chapterSlug: getting-started
     weight: 20
 github: https://github.com/notiz-dev/angular-scully-tailwindcss
diff --git a/content/blog/newsletter.md b/content/blog/newsletter.md
new file mode 100644
index 00000000..34fc194a
--- /dev/null
+++ b/content/blog/newsletter.md
@@ -0,0 +1,23 @@
+---
+title: 'Newsletter'
+description: 'Newsletter'
+published: false
+publishedAt: 2021-01-01T09:00:00.000Z
+updatedAt: 2021-01-01T09:00:00.000Z
+tags:
+    - Angular
+    - Tailwind CSS
+    - Maizzle
+keywords:
+    - Newsletter
+series:
+  - slug: angular-jamstack
+    chapterSlug: advanced-concepts
+    weight: 30
+authors:
+    - '...'
+github: 'https://github.com/notiz-dev/...'
+slugs:
+    - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz
+---
+
diff --git a/content/blog/rss.md b/content/blog/rss.md
new file mode 100644
index 00000000..51c432b0
--- /dev/null
+++ b/content/blog/rss.md
@@ -0,0 +1,20 @@
+---
+title: 'Rss'
+description: 'Rss'
+published: false
+publishedAt: 2021-01-01T09:00:00.000Z
+updatedAt: 2021-01-01T09:00:00.000Z
+tags:
+    - Scully
+keywords:
+    - Plugins
+series:
+  - slug: angular-jamstack
+    chapterSlug: advanced-concepts
+    weight: 40
+authors:
+    - '...'
+github: 'https://github.com/notiz-dev/...'
+slugs:
+    - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz
+---
diff --git a/content/blog/shortcodes-in-markdown.md b/content/blog/shortcodes-in-markdown.md
new file mode 100644
index 00000000..8bfcc88d
--- /dev/null
+++ b/content/blog/shortcodes-in-markdown.md
@@ -0,0 +1,22 @@
+---
+title: 'Shortcodes in Markdown'
+description: 'Shortcodes in Markdown'
+published: false
+publishedAt: 2021-01-01T09:00:00.000Z
+updatedAt: 2021-01-01T09:00:00.000Z
+tags:
+    - Angular
+    - Scully
+keywords:
+    - Markdown
+series:
+  - slug: angular-jamstack
+    chapterSlug: advanced-concepts
+    weight: 20
+authors:
+    - '...'
+github: 'https://github.com/notiz-dev/...'
+slugs:
+    - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz
+---
+
diff --git a/content/blog/tailwindcss-purge-optimize-angular-for-production.md b/content/blog/tailwindcss-purge-optimize-angular-for-production.md
index cbfb90d5..22d012cb 100644
--- a/content/blog/tailwindcss-purge-optimize-angular-for-production.md
+++ b/content/blog/tailwindcss-purge-optimize-angular-for-production.md
@@ -12,7 +12,7 @@ keywords:
   - CSS
   - Utility-First CSS
 series:
-  - slug: angular-scully-tailwind
+  - slug: angular-jamstack
     chapterSlug: deployment
     weight: 10
 authors:
diff --git a/content/blog/toc.md b/content/blog/toc.md
new file mode 100644
index 00000000..a7016cba
--- /dev/null
+++ b/content/blog/toc.md
@@ -0,0 +1,20 @@
+---
+title: 'Table of Content'
+description: 'Table of Content'
+published: false
+publishedAt: 2021-01-01T09:00:00.000Z
+updatedAt: 2021-01-01T09:00:00.000Z
+tags:
+    - Scully
+keywords:
+    - Plugins
+series:
+  - slug: angular-jamstack
+    chapterSlug: basics
+    weight: 20
+authors:
+    - '...'
+github: 'https://github.com/notiz-dev/...'
+slugs:
+    - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz
+---
diff --git a/content/blog/useful-scully-plugins.md b/content/blog/useful-scully-plugins.md
new file mode 100644
index 00000000..27c57bcf
--- /dev/null
+++ b/content/blog/useful-scully-plugins.md
@@ -0,0 +1,29 @@
+---
+title: 'Useful Scully Plugins'
+description: 'Top Scully Plugins you should use'
+published: false
+publishedAt: 2021-01-01T09:00:00.000Z
+updatedAt: 2021-01-01T09:00:00.000Z
+tags:
+    - Scully
+keywords:
+    - Plugins
+series:
+  - slug: angular-jamstack
+    chapterSlug: basics
+    weight: 30
+authors:
+    - '...'
+github: 'https://github.com/notiz-dev/...'
+slugs:
+    - ___UNPUBLISHED___kjptabv5_N4rM4wLbruHkAkdUrVbIu9bDlKOoAOSz
+---
+
+* fouc
+* rss
+* lazy images
+* medium zoom
+* sitemap
+* seoHrefOptimise
+* critical CSS
+* ...
\ No newline at end of file
diff --git a/content/series/angular-jamstack.md b/content/series/angular-jamstack.md
new file mode 100644
index 00000000..9810a416
--- /dev/null
+++ b/content/series/angular-jamstack.md
@@ -0,0 +1,28 @@
+---
+title: Angular JAMstack from Start to Finish
+description: Angular JAMstack without the tears. This series covers everything you need to know to build and deploy your JAMstack app with Angular, Scully and Tailwind CSS.
+published: true
+slug: angular-jamstack
+tags:
+  - Angular
+  - Scully
+  - Tailwind CSS
+chapters:
+  - title: Getting Started
+    slug: getting-started
+  - title: Basics
+    slug: basics
+  - title: Advanced Concepts
+    slug: advanced-concepts
+  - title: Deployment
+    slug: deployment
+---
+
+## What you will build
+
+...
+
+[Live Demo](https://angular-scully-tailwindcss.web.app) of a Scully blog styled with Tailwind CSS. Find the full [source code](https://github.com/notiz-dev/angular-scully-tailwindcss) on GitHub. 
+
+By the way, [notiz.dev](https://github.com/notiz-dev/notiz) is a Scully application styled with Tailwind.
+
diff --git a/content/series/angular-scully-tailwind.md b/content/series/angular-scully-tailwind.md
deleted file mode 100644
index efd65fd6..00000000
--- a/content/series/angular-scully-tailwind.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: Angular + Scully + Tailwind CSS Series
-description: Build Angular Jamstack blog with Scully styled by Tailwind CSS
-published: true
-slug: angular-scully-tailwind
-tags:
-  - Angular
-  - Scully
-  - Tailwind CSS
-chapters:
-  - title: Getting Started
-    slug: getting-started
-  - title: Deployment
-    slug: deployment
----
-
-## What will you build?
-
-- Setting up Angular with Tailwind CSS
-- Jamstack with Scully
-- Deploy via GitHub Actions to Firebase Hosting
-- SEO <span class="badge-coming-soon">Coming soon</span>
-- Use and create Scully Plugin <span class="badge-coming-soon">Coming soon</span>
-- Analytics <span class="badge-coming-soon">Coming soon</span>
-- CMS <span class="badge-coming-soon">Coming soon</span>
-- Cross posting to dev.to <span class="badge-coming-soon">Coming soon</span>
-- Newsletter <span class="badge-coming-soon">Coming soon</span>
-- Shortcodes in Markdown <span class="badge-coming-soon">Coming soon</span>
-
-## Live Demo
-
-You are using right **now** a Scully application styled with Tailwind - [notiz.dev](/) uses the following stack: Angular, Scully, Tailwind CSS and Firebase Hosting. 
-
-Try another [Live Demo](https://angular-scully-tailwindcss.web.app) of a Scully blog styled with Tailwind CSS. Find the full [source code](https://github.com/notiz-dev/angular-scully-tailwindcss) on GitHub. 
diff --git a/package-lock.json b/package-lock.json
index 95649a9d..7dc9b82c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3995,9 +3995,9 @@
       }
     },
     "@notiz/scully-plugin-lazy-images": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@notiz/scully-plugin-lazy-images/-/scully-plugin-lazy-images-0.3.0.tgz",
-      "integrity": "sha512-SY7H8Rk3qjBubzwI7S9qXYFHTUJZG09W9T3fWqWWc9coIETl+UXZk3XvzjDDwVo+RyzODAPeYA9Kpw9UcYVThQ==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@notiz/scully-plugin-lazy-images/-/scully-plugin-lazy-images-0.4.0.tgz",
+      "integrity": "sha512-NeUNX+XYSGUNVFpxE0tUMhti2hSbtrSOECPmF0cHTbOWViFpikUV/alq+zUPOjPYWV9Veg117GO700WkBHRp8A==",
       "dev": true,
       "requires": {
         "axios": "^0.19.2",
@@ -4686,6 +4686,12 @@
       "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==",
       "dev": true
     },
+    "@tailwindcss/line-clamp": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.1.0.tgz",
+      "integrity": "sha512-js+iq+EGiMb3LNi+Jnu9HGKJQp94d1aY/cngJ6llMfaNpXSG9olYtv0mrSNYUh5Z2PKYOdhZXZvxR6xwiJjRSg==",
+      "dev": true
+    },
     "@tailwindcss/typography": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.3.1.tgz",
diff --git a/package.json b/package.json
index 76509016..df9517c5 100644
--- a/package.json
+++ b/package.json
@@ -63,9 +63,10 @@
     "@gammastream/scully-plugin-sitemap": "1.0.6",
     "@notiz/scully-plugin-copy-static-content": "file:projects/copy-static-content",
     "@notiz/scully-plugin-fouc": "0.2.0",
-    "@notiz/scully-plugin-lazy-images": "0.3.0",
+    "@notiz/scully-plugin-lazy-images": "0.4.0",
     "@notiz/scully-plugin-medium-zoom": "0.2.4",
     "@notiz/scully-plugin-rss": "1.1.0",
+    "@tailwindcss/line-clamp": "^0.1.0",
     "@tailwindcss/typography": "0.3.1",
     "@types/jasmine": "3.5.8",
     "@types/jasminewd2": "2.0.3",
diff --git a/scully.notiz.config.ts b/scully.notiz.config.ts
index ed1a96e5..79e073e2 100644
--- a/scully.notiz.config.ts
+++ b/scully.notiz.config.ts
@@ -95,10 +95,7 @@ export const config: ScullyConfig = {
         folder: './content/series',
       },
       postRenderers: [
-        'fouc',
-        'seoHrefOptimise',
-        'mediumZoom',
-        'copyStaticContent',
+        ...defaultPostRenderers,
         'bannerGenerator',
       ],
     },
diff --git a/src/app/components/search/search.component.html b/src/app/components/search/search.component.html
index 345b470b..3045bbce 100644
--- a/src/app/components/search/search.component.html
+++ b/src/app/components/search/search.component.html
@@ -37,7 +37,7 @@
                   searchItem.type
                 }}</niz-badge>
               </span>
-              <span class="text-color-light" *ngIf="searchItem.description">
+              <span class="text-color-light line-clamp-2" *ngIf="searchItem.description">
                 {{ searchItem.description }}
               </span>
             </span>
diff --git a/src/app/pages/series-details/series-details.component.html b/src/app/pages/series-details/series-details.component.html
index f5ea771c..def3a09d 100644
--- a/src/app/pages/series-details/series-details.component.html
+++ b/src/app/pages/series-details/series-details.component.html
@@ -7,16 +7,15 @@
 ></niz-seo>
 
 <article class="max-w-container mt-10">
-  <header>
-    <h1 class="text-3xl font-extrabold sm:text-4xl md:text-5xl">
-      {{ (page$ | async)?.title }}
-    </h1>
-    <p class="mt-1 text-lg text-color-light sm:text-xl md:text-2xl">
-      {{ (page$ | async)?.description }}
-    </p>
-  </header>
-
   <div class="prose max-w-none md:prose-lg">
+    <header>
+      <h1>
+        {{ (page$ | async)?.title }}
+      </h1>
+      <p class="text-xl md:text-2xl">
+        {{ (page$ | async)?.description }}
+      </p>
+    </header>
     <div>
       <scully-content></scully-content>
     </div>
@@ -31,37 +30,61 @@ <h3 [id]="chapter.slug">
           </h3>
 
           <div class="rounded-md shadow-md overflow-hidden">
-            <a
+            <ng-container
               *ngFor="
                 let post of seriesPosts$ | async | filterChapter: chapter.slug
               "
-              class="flex flex-col p-4 bg-canvas-light space-y-2 md:space-y-0 md:flex-row md:items-center md:justify-between group hover:bg-canvas-shade focus:outline-none focus:ring focus:ring-primary focus:ring-inset"
-              [routerLink]="post.route"
             >
-              <span>
-                <span
-                  class="block text-base font-bold group-hover:text-primary sm:text-lg md:text-xl"
-                >
-                  {{ post.title }}
-                </span>
-                <span class="text-sm sm:text-base md:text-lg">
-                  {{ post.description }}
-                </span>
-              </span>
+              <a
+                *ngIf="post.published"
+                class="flex flex-col p-4 bg-canvas-light space-y-2 md:space-y-0 md:flex-row md:items-center md:justify-between group hover:bg-canvas-shade focus:outline-none focus:ring focus:ring-primary focus:ring-inset"
+                [routerLink]="post.route"
+              >
+                <ng-container
+                  *ngTemplateOutlet="
+                    chapterTemplate;
+                    context: { $implicit: post }
+                  "
+                ></ng-container>
+              </a>
 
-              <div class="flex space-x-2">
-                <niz-inline-svg
-                  *ngFor="let tag of post.tags | slice: 0:3"
-                  class="h-6 w-6"
-                  [svgSource]="
-                    'assets/stack/' + tag + '.svg' | lowercase | dash
+              <span
+                *ngIf="!post.published"
+                class="flex flex-col p-4 bg-canvas-light space-y-2 md:space-y-0 md:flex-row md:items-center md:justify-between"
+              >
+                <ng-container
+                  *ngTemplateOutlet="
+                    chapterTemplate;
+                    context: { $implicit: post }
                   "
-                ></niz-inline-svg>
-              </div>
-            </a>
+                ></ng-container>
+              </span>
+            </ng-container>
           </div>
         </div>
       </div>
     </div>
   </div>
 </article>
+
+<ng-template #chapterTemplate let-post>
+  <span>
+    <span
+      class="block text-base font-bold group-hover:text-primary sm:text-lg md:text-xl"
+    >
+      {{ post.title }}
+      <niz-badge *ngIf="!post.published">Coming soon</niz-badge>
+    </span>
+    <span class="text-sm line-clamp-2 sm:text-base md:text-lg">
+      {{ post.description }}
+    </span>
+  </span>
+
+  <div class="flex space-x-2">
+    <niz-inline-svg
+      *ngFor="let tag of post.tags | slice: 0:3"
+      class="h-6 w-6"
+      [svgSource]="'assets/stack/' + tag + '.svg' | lowercase | dash"
+    ></niz-inline-svg>
+  </div>
+</ng-template>
diff --git a/src/app/pages/series-details/series-details.module.ts b/src/app/pages/series-details/series-details.module.ts
index 1b8d724e..178fe2d6 100644
--- a/src/app/pages/series-details/series-details.module.ts
+++ b/src/app/pages/series-details/series-details.module.ts
@@ -7,6 +7,7 @@ import { SeriesDetailsComponent } from './series-details.component';
 import { SeoModule } from '@components/seo/seo.module';
 import { ScullyLibModule } from '@scullyio/ng-lib';
 import { PipesModule } from '@pipes/pipes.module';
+import { BadgeModule } from '@components/badge/badge.module';
 
 @NgModule({
   declarations: [SeriesDetailsComponent],
@@ -17,6 +18,7 @@ import { PipesModule } from '@pipes/pipes.module';
     ScullyLibModule,
     PipesModule,
     NizInlineSvgModule,
+    BadgeModule
   ],
 })
 export class SeriesDetailsModule {}
diff --git a/src/app/services/scully-content.service.ts b/src/app/services/scully-content.service.ts
index 3ebb9326..6644c180 100644
--- a/src/app/services/scully-content.service.ts
+++ b/src/app/services/scully-content.service.ts
@@ -75,7 +75,7 @@ export class ScullyContentService {
   }
 
   seriesPosts(series: ScullyRoute): Observable<ScullyRoute[]> {
-    return this.blogPosts().pipe(
+    return filterRoute(this.scully.allRoutes$, '/blog/').pipe(
       map((posts) =>
         posts.filter((post) => post.series?.find((s) => s.slug === series.slug))
       )
diff --git a/src/styles.scss b/src/styles.scss
index 268dd5c8..f9e37ef1 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,7 +1,6 @@
 /* purgecss start ignore */
 @import 'tailwindcss/base';
 @import 'base-styles.scss';
-@import 'theme/line-clamp.utilities.scss';
 
 @import 'prismjs/themes/prism-tomorrow';
 @import 'prismjs/plugins/toolbar/prism-toolbar';
diff --git a/src/theme/line-clamp.utilities.scss b/src/theme/line-clamp.utilities.scss
deleted file mode 100644
index 91dda092..00000000
--- a/src/theme/line-clamp.utilities.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.line-clamp-1 {
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  .line-clamp-2 {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  .line-clamp-3 {
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  .line-clamp-4 {
-    display: -webkit-box;
-    -webkit-line-clamp: 4;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  .line-clamp-5 {
-    display: -webkit-box;
-    -webkit-line-clamp: 5;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  .line-clamp-6 {
-    display: -webkit-box;
-    -webkit-line-clamp: 6;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  .line-clamp-7 {
-    display: -webkit-box;
-    -webkit-line-clamp: 7;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  .line-clamp-8 {
-    display: -webkit-box;
-    -webkit-line-clamp: 8;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  .line-clamp-9 {
-    display: -webkit-box;
-    -webkit-line-clamp: 9;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  .line-clamp-10 {
-    display: -webkit-box;
-    -webkit-line-clamp: 10;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 66027ee7..7545c598 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -179,5 +179,8 @@ module.exports = {
       borderWidth: ['hover'],
     },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/line-clamp'),
+  ],
 };