feat(posts):make posts json contain yaml style fm

- add theme file for syntax highlighting
- start building better app structure

.gitignore

@@ -37,4 +37,5 @@ jspm_packages
 .node_repl_history
 
 
-/dist
+/dist
+.idea

config/dir-parse.js

@@ -1,34 +1,56 @@
 // https://code-maven.com/list-content-of-directory-with-nodejs
-var fs = require('fs');
-var path = require('path');
-var jsonfile = require('jsonfile');
-var postsjson = 'src/assets/_posts/posts.json';
-var dir = 'src/assets/_posts';
+// https://github.com/jxson/front-matter <- consider for yaml front matter parsing
+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 dir = 'src/assets/_posts';
 
-// if (process.argv.length <= 2) {
-// console.log("Usage: " + __filename + " path/to/directory");
-// process.exit(-1);
-// }
-var extFilter = 'md';
-// var pathSupplied = process.argv[2];
-var pathSupplied = dir;
+const extFilter = 'md';
+const pathSupplied = dir;
 
 function extension(element) {
- var extName = path.extname(element);
+ const extName = path.extname(element);
  return extName === '.' + extFilter;
-};
+}
 
-fs.readdir(pathSupplied, function(err, items) {
- var opener = '{ "posts": ';
- var closer = ' }';
- var posts = items.filter(extension).map((item) => {
- var file = pathSupplied + '/' + item;
- var obj = { title: file };
- return obj;
- })
+/**
+ * cycle through directory for files
+ */
+fs.readdir(pathSupplied, function (err, items) {
+ let opener = '{ "posts": ';
+ 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;
+
+ return {
+ file: file,
+ title: title,
+ description: description
+ };
+ });
 
  opener += JSON.stringify(posts);
  opener += closer;
- console.log("Posts: ", JSON.stringify(posts));
  fs.writeFile(postsjson, opener);
 });

config/webpack.common.js

@@ -44,25 +44,6 @@ module.exports = {
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader']
  },
- // {
- // test: /\.scss$/,
- // use: extractSass.extract({
- // use: [{
- // loader: 'css-loader'
- // }, {
- // loader: 'sass-loader'
- // }],
- // fallback: 'style-loader'
- // })
- // },
- // {
- // test: /\.css$/,
- // exclude: helpers.root('src', 'app'),
- // loader: ExtractTextPlugin.extract({
- // fallbackLoader: 'style-loader',
- // loader: 'css-loader?sourceMap'
- // })
- // },
  {
  test: /\.css$/,
  include: helpers.root('src', 'app'),
@@ -91,10 +72,6 @@ module.exports = {
 
  new WebpackShellPlugin({
  onBuildStart: ['node ./config/dir-parse.js']
- }),
-
- new LoopMarkdownPlugin({
- name: 'My Awesome Loop Markdown Plugin'
  })
 
  ]

config/webpack.dev.js

@@ -1,12 +1,8 @@
-const webpack = require('webpack');
 const helpers = require('./helpers');
-const times = require('lodash/times');
 const webpackMerge = require('webpack-merge');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const WebpackShellPlugin = require('webpack-shell-plugin');
 const commonConfig = require('./webpack.common.js');
 
-
 module.exports = webpackMerge(commonConfig, {
  devtool: 'cheap-module-eval-source-map',
 
@@ -16,13 +12,11 @@ module.exports = webpackMerge(commonConfig, {
  filename: '[name].js',
  chunkFilename: '[id].chunk.js'
  },
-
  plugins: [
  new WebpackShellPlugin({
  onBuildStart: ['node ./config/dir-parse.js']
  })
  ],
-
  devServer: {
  historyApiFallback: true,
  stats: 'minimal'

config/webpack.prod.js

@@ -7,7 +7,6 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const commonConfig = require('./webpack.common.js');
 
-
 const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
 
 module.exports = webpackMerge(commonConfig, {

package.json

@@ -41,6 +41,7 @@
  "@angular/upgrade": "~4.3.1",
  "angular-in-memory-web-api": "~0.3.2",
  "core-js": "^2.4.1",
+ "front-matter": "^2.1.2",
  "highlightjs": "^9.10.0",
  "jsonfile": "^3.0.1",
  "marked": "^0.3.6",

src/app/app-routing.module.ts

@@ -1,4 +1,4 @@
-import { HomeComponent } from '../home/home.component';
+import { HomeComponent } from './ngx-blog/containers/home/home.component';
 import { RouterModule, Routes } from '@angular/router';
 import {NgModule} from '@angular/core';
 

src/app/app.module.ts

@@ -1,27 +1,24 @@
-import { PostsService } from '../services/posts.service';
-import { HomeComponent } from '../home/home.component';
 import { AppRoutingModule } from './app-routing.module';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpModule } from '@angular/http';
 import { MarkdownToHtmlModule } from 'ng2-markdown-to-html';
 
 import { AppComponent } from './app.component';
+import { NgxBlogModule } from './ngx-blog/ngx-blog.module';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
  imports: [
  BrowserModule,
+ CommonModule,
  HttpModule,
  AppRoutingModule,
+ NgxBlogModule,
  MarkdownToHtmlModule.forRoot()
  ],
- declarations: [
- AppComponent,
- HomeComponent
- ],
- providers: [
- PostsService
- ],
+ declarations: [AppComponent],
+ providers: [ ],
  bootstrap: [AppComponent],
 })
 export class AppModule { }

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

@@ -0,0 +1,8 @@
+<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>