refactor($app): Clean up code more. Add tap to util.

config/util.ts

@@ -0,0 +1,10 @@
+export function tap(x: any, w?: string) {
+ console.log(`%c***** ${ w ? w : ''} *****`,
+ `border:1px solid grey;
+ border-radius: 5px 5px;
+ padding:0 10px;
+ background-color:black;
+ color:lime;
+ font-style:bold;`, x);
+ return x;
+};

src/app/app-routing.module.ts

@@ -1,17 +1,19 @@
 import { HomeComponent } from './ngx-blog/containers/home/home.component';
 import { RouterModule, Routes } from '@angular/router';
-import {NgModule} from '@angular/core';
+import { NgModule } from '@angular/core';
 import { PostComponent } from './ngx-blog/components/post/post.component';
 
 const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
- { path: 'blog', component: PostComponent }
+ { path: 'posts', component: PostComponent }
 ];
 
 @NgModule({
- imports: [ RouterModule.forRoot(routes) ],
- exports: [ RouterModule ]
+ imports: [
+ RouterModule.forRoot(routes, { enableTracing: false })
+ ],
+ exports: [RouterModule]
 })
 export class AppRoutingModule {}
 

src/app/app.component.html

@@ -1,9 +1,11 @@
 <main>
- <h1>Hello from {{title}} with Webpack</h1>
-
  <img src="../assets/images/angular.png">
 </main>
 <nav>
  <a routerLink="home" routerLinkActive="active">Home</a>
+ <a routerLink="posts" routerLinkActive="active">Posts</a>
 </nav>
-<router-outlet></router-outlet>
+<router-outlet
+ (activate)="onActivate($event)"
+ (deactivate)="onDeactivate($event)">
+</router-outlet>

src/app/app.component.ts

@@ -1,11 +1,30 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { tap } from '../../config/util';
 
 @Component({
  selector: 'ngxb-app',
  templateUrl: './app.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
  title = 'NGX Blog';
+
+ onActivate(event: any) {
+ tap(event, 'Activate');
+ }
+
+ onDeactivate(event: any) {
+ tap(event, 'Deactivate');
+ }
+ constructor(private _router: Router) {}
+
+ ngOnInit() {
+ this._router.events
+ .filter(event => event instanceof NavigationEnd)
+ .subscribe(event => {
+ tap(event, 'event');
+ });
+ }
 }

src/app/app.scss

@@ -1,3 +1,20 @@
 .posts-card {
- box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.6);
+ box-shadow: 2px 3px 2px 1px rgba(90,90,90,0.6);
+ border: 1px solid darkslategrey;
+ position: relative;
+ margin: 40px 20px;
+ &--title {
+ position: inherit;
+ //top: 50%;
+ left: 50%;
+ margin: 0 -50% 0 0;
+ transform: translate(-50%, -50%);
+ }
+ &--description {
+ position: inherit;
+ //top: 50%;
+ left: 50%;
+ margin: 0 -50% 0 0;
+ transform: translate(-50%, -50%);
+ }
 }

src/app/ngx-blog/components/posts/posts.component.html

@@ -1,9 +1,9 @@
 <ng-container *ngFor='let post of mainPosts'>
+ <!--<article class="posts-card">-->
+ <!--<ngxb-post [src]="'src/app/ngx-blog/components/posts/posts.component.html'"></ngxb-post>-->
+ <!--</article>-->
  <article class="posts-card">
- <ngxb-post [src]="'src/app/ngx-blog/components/posts/posts.component.html'"></ngxb-post>
- </article>
- <article>
- {{post.title}}
+ <span class="posts-card--title">{{post.title}} | {{post.description}}</span>
  <ngxb-post>
  {{post.body}}
  </ngxb-post>

src/app/ngx-blog/components/posts/posts.component.ts

@@ -16,6 +16,7 @@ export class PostsComponent implements OnInit {
  e.entries.map((p: any) => {
  this.mainPosts.push({
  title: p.post.attributes.title,
+ description: p.post.attributes.description,
  body: p.post.body
  });
  });

src/app/ngx-blog/containers/home/home.component.html

@@ -1,16 +1,15 @@
 <div>
  <h2>Home</h2>
 </div>
-<!--<posts></posts>-->
 <section>
  <ngxb-posts>
  </ngxb-posts>
 
  <!--TODO: (Jason) this breaks when removing prepare(raw)-->
- <ngxb-post>
- ```typescript
- const someVal = 'this is raw on home.component'
+ <!--<ngxb-post>-->
+ <!--```typescript-->
+ <!--const someVal = 'this is raw on home.component'-->
 
- ```
- </ngxb-post>
+ <!--```-->
+ <!--</ngxb-post>-->
 </section>

src/app/ngx-blog/containers/home/home.component.ts

@@ -1,6 +1,6 @@
 import { PostsService } from '../../services/posts.service';
 import { Component, OnInit } from '@angular/core';
-import * as marked from 'marked';
+import { tap } from '../../../../../config/util';
 
 @Component({
  selector: 'ngxb-home',
@@ -10,12 +10,10 @@ import * as marked from 'marked';
 export class HomeComponent implements OnInit {
  posts: any;
  convertedText: string;
+
  constructor(public postsService: PostsService, public md: PostsService) {}
 
  ngOnInit() {
- // this.postsService.getPosts().subscribe((p) => {
- // this.post = p.post;
- // });
  }
 
 }

src/assets/_posts/2017-08-09-test-post.md

@@ -3,4 +3,6 @@ title: August 09, 2017 Test Post
 description: just another test post
 ---
 
-Yet another test post but with yaml front-matter
+```typescript
+let post = 'August 09';
+```

src/assets/_posts/2017-08-10-test-post.md

@@ -1,4 +1,8 @@
 ---
 title: August 10th, 2017 Test Post
 description: Description for the August 10th post
----
+---
+
+```typescript
+let post = 'August 10';
+```

src/assets/_posts/2017-08-11-test-post.md

@@ -3,21 +3,6 @@ title: August 11, 2017 Test Post
 description: Description for August 11th post
 ---
 
-
-To write an asset, you have to use [webpack-sources](https://www.npmjs.com/package/webpack-sources) file abstraction.
-
-```bash
-yarn add --dev webpack-sources
-```
-
-## enum
-
-```Typescript
-enum Color {
- Gray, // 0
- Green = 100, // 100
- Blue = 2 // 2
-}
-let myColor: Color = Color.Blue
-console.log(myColor); // 
+```typescript
+let post = 'August 11'; 
 ```

src/assets/_posts/posts.json

@@ -1 +1 @@
-{ "entries": [{"post":{"attributes":{"title":"August 09, 2017 Test Post","description":"just another test post"},"body":"\nYet another test post but with yaml front-matter","frontmatter":"title: August 09, 2017 Test Post\ndescription: just another test post"}},{"post":{"attributes":{"title":"August 10th, 2017 Test Post","description":"Description for the August 10th post"},"body":"","frontmatter":"title: August 10th, 2017 Test Post\ndescription: Description for the August 10th post"}},{"post":{"attributes":{"title":"August 11, 2017 Test Post","description":"Description for August 11th post"},"body":"\n\nTo write an asset, you have to use [webpack-sources](https://www.npmjs.com/package/webpack-sources) file abstraction.\n\n```bash\nyarn add --dev webpack-sources\n```\n\n## enum\n\n```Typescript\nenum Color {\n Gray, // 0\n Green = 100, // 100\n Blue = 2 // 2\n}\nlet myColor: Color = Color.Blue\nconsole.log(myColor); // \n```","frontmatter":"title: August 11, 2017 Test Post\ndescription: Description for August 11th post"}}] }
+{ "entries": [{"post":{"attributes":{"title":"August 09, 2017 Test Post","description":"just another test post"},"body":"\n```typescript\nlet post = 'August 09';\n```","frontmatter":"title: August 09, 2017 Test Post\ndescription: just another test post"}},{"post":{"attributes":{"title":"August 10th, 2017 Test Post","description":"Description for the August 10th post"},"body":"\n```typescript\nlet post = 'August 10';\n```","frontmatter":"title: August 10th, 2017 Test Post\ndescription: Description for the August 10th post"}},{"post":{"attributes":{"title":"August 11, 2017 Test Post","description":"Description for August 11th post"},"body":"\n```typescript\nlet post = 'August 11'; \n```","frontmatter":"title: August 11, 2017 Test Post\ndescription: Description for August 11th post"}}] }