notiz-dev · marcjulian · Nov 25, 2020 · Nov 26, 2020 · Nov 26, 2020 · Dec 15, 2020
diff --git 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
@@ -10,7 +10,7 @@ tags:
 keywords:
   - Custom Elements
 authors:
-  - 'Gary Großgarten'
+  - Gary Großgarten
 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
@@ -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: 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
@@ -12,6 +12,10 @@ keywords:
   - PostgreSQL
 authors:
   - Marc Stammerjohann
+series:
+  - slug: nestjs-prisma
+    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
@@ -16,6 +16,10 @@ keywords:
   - Tailwind CSS
 authors:
   - Marc Stammerjohann
+series:
+  - slug: angular-scully-tailwind
+    chapterSlug: deployment
+    weight: 20
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -11,7 +11,7 @@ keywords:
   - Shortcuts
   - Angular
 authors:
-  - 'Gary Großgarten'
+  - Gary Großgarten
 github: https://github.com/garygrossgarten/rxjs-shortcuts
 ---
 

diff --git 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: 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
@@ -0,0 +1,34 @@
+---
+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="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
+
+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/fullstack.md b/content/series/fullstack.md
@@ -0,0 +1,23 @@
+---
+title: Fullstack
+description: Fullstack
+published: false
+slug: fullstack
+tags:
+    - Angular
+    - NestJS
+    - Prisma
+chapters:
+    - {title: 'Getting Started', slug: getting-started}
+slugs:
+    - ___UNPUBLISHED___kjbib7un_h0Iph5ugONgWCrNk1clLVN79u160Y4qp
+---
+
+## 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
@@ -0,0 +1,31 @@
+---
+title: NestJS + Prisma Series
+description: Build backend application with NestJS and access databases via Prisma
+published: true
+slug: nestjs-prisma
+tags:
+  - NestJs
+  - Prisma
+chapters:
+  - title: Getting Started
+    slug: getting-started
+  - title: Prisma
+    slug: prisma
+  - title: Deployment
+    slug: deployment
+---
+
+## What is it all about?
+
+- Integrate Prisma with NestJS
+- 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>
+- more to come
diff --git a/scully.notiz.config.ts b/scully.notiz.config.ts
@@ -49,6 +49,11 @@ const sitemapConfig: SitemapConfig = {
       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',
@@ -84,6 +89,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
@@ -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
@@ -23,6 +23,17 @@
         >
           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'"
@@ -105,6 +116,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/app.module.ts b/src/app/app.module.ts
@@ -35,15 +35,15 @@ import { NizFooterModule } from '@components/footer/footer.module';
     MarkdownModule.forRoot({ loader: HttpClient }),
     NizTabsModule,
     NizTabModule,
-    NizFooterModule, 
+    NizFooterModule,
     NizNavbarModule,
     NizToolbarModule,
     NizInlineSvgModule,
     NewsletterSignupModule,
     NizSearchComponentModule,
     PipesModule,
     NizToastModule,
-    NizMenuModule
+    NizMenuModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

diff --git 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;
     }
   }
-}
+}
diff --git 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/badge/badge.component.html 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 align-middle"
+  [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
diff --git a/src/app/components/badge/badge.component.spec.ts 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();
+  });
+});