feat(parser):sloppy parsing inspired by ng2-markdown-to-html

- must sleep
- must give credit where credit is due
- good night

 ¯\_(ツ)_/¯

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/posts.json';
+const postsjson = 'src/assets/_posts/post.json';
 const dir = 'src/assets/_posts';
 
 const extFilter = 'md';
@@ -19,7 +19,7 @@ function extension(element) {
  * cycle through directory for files
  */
 fs.readdir(pathSupplied, function (err, items) {
- let opener = '{ "posts": ';
+ let opener = '{ "post": ';
  let closer = ' }';
  let posts = [];
  let file = '';
@@ -46,7 +46,8 @@ fs.readdir(pathSupplied, function (err, items) {
  return {
  file: file,
  title: title,
- description: description
+ description: description,
+ body: body
  };
  });
 

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

@@ -0,0 +1,14 @@
+<section>
+ <ng-container *ngFor='let post of mainPosts'>
+ <!--<article markdown-to-html [src]="post.file" class="post-card" >-->
+ <!--<h2>{{post.title}}</h2>-->
+ <!--<span>{{post.description}}</span>-->
+ <!--</article>-->
+ <article ngxb-posts [src]="post.file" class="posts-card" >
+ <h2>{{post.title}}</h2>
+ <!--<span>{{post.description}}</span>-->
+ <!--<div>{{post.body}}</div>-->
+ {{post.body}}
+ </article>
+ </ng-container>
+</section>

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

@@ -0,0 +1,107 @@
+import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { PostsService } from '../../services/posts.service';
+import * as marked from 'marked';
+import * as Prism from 'prismjs';
+
+import 'prismjs/prism';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-diff';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-sass';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-typescript';
+
+@Component({
+ selector: 'ngxb-post, [ngxb-post]',
+ // templateUrl: 'post.component.html',
+ template: `
+ <ng-content></ng-content>`,
+ encapsulation: ViewEncapsulation.None,
+ styleUrls: [
+ 'theme.scss'
+ ]
+})
+
+export class PostComponent implements OnInit, OnChanges, AfterViewInit {
+ @Input() data: string;
+ @Input() src: string;
+
+ constructor(public postsService: PostsService,
+ public element: ElementRef) { }
+
+ ngOnInit() { }
+
+ ngAfterViewInit() {
+ if (this.data) {
+ this.handleData();
+ return;
+ }
+ if (this.src) {
+ console.log('src: \n', this.src);
+ this.handleSrc();
+ return;
+ }
+ this.handleRaw(this.element.nativeElement.innerHTML);
+ }
+
+ // SimpleChanges parameter is required for AoT compilation (do not remove)
+ ngOnChanges(changes: SimpleChanges) {
+ if ('data' in changes) {
+ this.handleData();
+ return;
+ }
+ if ('src' in changes) {
+ this.handleSrc();
+ return;
+ }
+ }
+
+ handleData() {
+ this.handleRaw(this.data);
+ }
+
+ handleSrc() {
+ const extension = this.src
+ ? this.src.split('.').splice(-1).join()
+ : null;
+ this.postsService.getSource(this.src)
+ .subscribe(data => {
+ const raw = extension !== 'md'
+ ? '```' + extension + '\n' + data + '\n```'
+ : data;
+ this.handleRaw(raw);
+ });
+ }
+
+ handleRaw(raw: string) {
+ const markdown = this.prepare(raw);
+ this.element.nativeElement.innerHTML = marked(markdown);
+ Prism.highlightAll(false);
+ }
+
+ prepare(raw: string) {
+ if (!raw) {
+ return '';
+ }
+ let indentStart: number;
+ return raw
+ .replace(/\&gt;/g, '>')
+ .split('\n')
+ .map((line: string) => {
+ // find position of 1st non-whitespace character
+ // to determine the markdown indentation start
+ if (line.length > 0 && isNaN(indentStart)) {
+ indentStart = line.search(/\S|$/);
+ }
+ // remove whitespaces before indentation start
+ return indentStart
+ ? line.substring(indentStart)
+ : line;
+ }).join('\n');
+ }
+}

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

@@ -0,0 +1,24 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+
+import { PostComponent } from './post.component';
+import { PostsService } from '../../services/posts.service';
+
+@NgModule({
+ imports: [],
+ exports: [PostComponent],
+ declarations: [PostComponent],
+ providers: [],
+})
+export class PostModule {
+ static forRoot(): ModuleWithProviders {
+ return {
+ ngModule: PostModule,
+ providers: [PostsService]
+ };
+ }
+ static forChild(): ModuleWithProviders {
+ return {
+ ngModule: PostModule,
+ }
+ }
+}

src/app/ngx-blog/components/posts/theme.scss → src/app/ngx-blog/components/post/theme.scss

@@ -1,4 +1,4 @@
-@import url(https://fonts.googleapis.com/css?family=Fira+Mono);
+//@import url(https://fonts.googleapis.com/css?family=Fira+Mono);
 /*
  * Hopscotch
  * by Jan T. Sott

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

@@ -1,8 +1,5 @@
-<section>
- <ng-container *ngFor='let post of posts'>
- <article markdown-to-html [src]="post.file" class="posts-card" >
- <h2>{{posts.title}}</h2>
- <span>{{posts.description}}</span>
- </article>
- </ng-container>
-</section>
+<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>
+</ng-container>