feat(parser):more work on parsing

- get markdown from posts.json
- parse raw markdown

config/dir-parse.js

@@ -4,7 +4,7 @@ const fs = require('fs');
 const fm = require('front-matter');
 const path = require('path');
 const jsonfile = require('jsonfile');
-const postsjson = 'src/assets/_posts/post.json';
+const postsjson = 'src/assets/_posts/posts.json';
 const dir = 'src/assets/_posts';
 
 const extFilter = 'md';
@@ -19,37 +19,40 @@ function extension(element) {
  * cycle through directory for files
  */
 fs.readdir(pathSupplied, function (err, items) {
- let opener = '{ "post": ';
- let closer = ' }';
- let posts = [];
- let file = '';
- let fileContent = '';
- let content = '';
- let body = '';
- let attributes = {};
- let title = '';
- let description = '';
- /**
- * cycle over items, filtering for files matching extension
- * @type {Array}
- */
- posts = items.filter(extension).map((item) => {
- file = pathSupplied + '/' + item;
- fileContent = fs.readFileSync(file, 'utf8');
- content = fm(fileContent);
- console.log('*** content ***\n', content);
- body = content.body;
- attributes =  content.attributes;
- title = attributes.title;
- description = attributes.description;
+ let opener = '{ "entries": ',
+  closer = ' }',
+  posts = [],
+  file = '',
+  fileContent = '',
+  content = '',
+  body = '',
+  attributes = {},
+  title = '',
+   description = '';
+  /**
+  * cycle over items, filtering for files matching extension
+  * @type {Array}
+  */
+  posts = items.filter(extension).map((item) => {
+  file = pathSupplied + '/' + item;
+  fileContent = fs.readFileSync(file, 'utf8');
+  content = fm(fileContent);
+  console.log('*** content ***\n', content);
+  body = content.body;
+  attributes = content.attributes;
+  title = attributes.title;
+  description = attributes.description;
 
- return {
- file: file,
- title: title,
- description: description,
- body: body
- };
- });
+ return {
+ post: content
+ };
+ // return {
+ // file: file,
+ // title: title,
+ // description: description,
+ // body: body
+ // };
+ });
 
  opener += JSON.stringify(posts);
  opener += closer;

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

@@ -4,6 +4,7 @@ import * as marked from 'marked';
 import * as Prism from 'prismjs';
 
 import 'prismjs/prism';
+import 'prismjs/components/prism-bash';
 import 'prismjs/components/prism-c';
 import 'prismjs/components/prism-cpp';
 import 'prismjs/components/prism-csharp';
@@ -79,7 +80,8 @@ export class PostComponent implements OnInit, OnChanges, AfterViewInit {
  }
 
  handleRaw(raw: string) {
- const markdown = this.prepare(raw);
+ // const markdown = this.prepare(raw);
+ const markdown = raw;
  this.element.nativeElement.innerHTML = marked(markdown);
  Prism.highlightAll(false);
  }

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

@@ -2,4 +2,10 @@
  <article class="posts-card">
  <ngxb-post [src]="'src/app/ngx-blog/components/posts/posts.component.html'"></ngxb-post>
  </article>
+ <article>
+ {{post.title}}
+ <ngxb-post>
+ {{post.body}}
+ </ngxb-post>
+ </article>
 </ng-container>

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

@@ -12,17 +12,22 @@ export class PostsComponent implements OnInit {
  constructor(public postsService: PostsService) { }
 
  ngOnInit() {
- this.postsService.getPosts().subscribe((p) => {
+ this.postsService.getPosts().subscribe((e) => {
  debugger;
-console.log('%c*** COMP: PostsComponent | function ngOnInit ***', 'background-color: blue;color:white;font-style:bold;', p)
- p.posts.map((t: any) => {
+console.log('%c*** COMP: PostsComponent | function ngOnInit ***', 'background-color: blue;color:white;font-style:bold;', e)
+ e.entries.map((p: any) => {
+ this.tap(p, 'p: ');
  this.mainPosts.push({
- title: t.title,
- file: t.file,
- body: this.postsService.convert(t.body)
+ title: p.post.attributes.title,
+ body: p.post.body
  });
  });
 console.log('%c*** COMP: PostsComponent | function ngOnInit ***', 'background-color: blue;color:white;font-style:bold;', this.mainPosts)
  });
  }
+
+ tap(x: any, w?: string) {
+ console.log(`%c ${ w ? w : '*****'}`, 'background-color:yellow;color:black;font-style:bold;padding-right: 20px;', x);
+ return x;
+ };
 }

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

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

src/assets/_posts/posts.json

@@ -1 +1 @@
-{ "posts": [{"file":"src/assets/_posts/2017-08-09-test-post.md","title":"August 09, 2017 Test Post","description":"just another test post","body":"\nYet another test post but with yaml front-matter"},{"file":"src/assets/_posts/2017-08-10-test-post.md","title":"August 10th, 2017 Test Post","description":"Description for the August 10th post","body":""},{"file":"src/assets/_posts/2017-08-11-test-post.md","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```"}] }
+{ "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"}}] }