feat(Home,posts):make parsed md from files render

- reverted back to using ng2-html-to-markdown

config/LoopMarkdown.js

@@ -0,0 +1,37 @@
+const _ = require("lodash");
+const { RawSource } = require("webpack-sources");
+const POSTS_DIR = "./src/assets/_posts/";
+
+// https://survivejs.com/webpack/extending/plugins/
+// function LoopMarkdownPlugin(options) {
+// this.options = _.extend(
+// {
+// template: POSTS_DIR + "template.html",
+// cache: true,
+// compile: true,
+// inject: true,
+// hash: false,
+// minify: false,
+// showErrors: true
+// },
+// options
+// );
+// }
+
+class LoopMarkdownPlugin {
+ constructor(options) {
+ this.options = options;
+ }
+ apply(compiler) {
+
+ const { name } = this.options;
+
+ compiler.plugin('emit', (compilation, callback) => {
+ console.log("Loop Markdown Plugin!", this.options);
+ compilation.assets[name] = new RawSource('some raw source');
+ callback();
+ });
+ }
+}
+
+module.exports = LoopMarkdownPlugin;

config/helpers.js

@@ -1,6 +1,6 @@
-var path = require('path');
+const path = require('path');
 
-var _root = path.resolve(__dirname, '..');
+const _root = path.resolve(__dirname, '..');
 
 function root(args) {
  args = Array.prototype.slice.call(arguments, 0);

config/webpack.common.js

@@ -1,28 +1,29 @@
-var webpack = require('webpack');
-var helpers = require('./helpers');
-
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var WebpackShellPlugin = require('webpack-shell-plugin');
+const webpack = require('webpack');
+const helpers = require('./helpers');
+const marked = require('marked');
+const times = require('lodash/times');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const WebpackShellPlugin = require('webpack-shell-plugin');
+const LoopMarkdownPlugin = require('../config/LoopMarkdown');
 
 module.exports = {
  entry: {
- 'polyfills': './src/polyfills.ts',
- 'vendor': './src/vendor.ts',
- 'app': './src/main.ts'
+ 'polyfills': helpers.root('src', 'polyfills.ts'),
+ 'vendor': helpers.root('src', 'vendor.ts'),
+ 'app': helpers.root('src', 'main.ts')
  },
-
  resolve: {
  extensions: ['.ts', '.js']
  },
-
  module: {
- rules: [{
+ rules: [
+ {
  test: /\.ts$/,
  loaders: [{
-  loader: 'awesome-typescript-loader',
-  options: { configFileName: helpers.root('src', 'tsconfig.json') }
-  },
+ loader: 'awesome-typescript-loader',
+ options: { configFileName: helpers.root('src', 'tsconfig.json') }
+ },
  'angular2-template-loader'
  ]
  },
@@ -34,22 +35,34 @@ module.exports = {
  test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
  loader: 'file-loader?name=assets/[name].[hash].[ext]'
  },
- {
- test: /\.md$/,
- loader: 'markdown-loader'
- },
  {
  test: /\.json$/,
  loader: 'file-loader?name=assets/[name].[hash].json'
  },
  {
- test: /\.css$/,
- exclude: helpers.root('src', 'app'),
- loader: ExtractTextPlugin.extract({
- fallbackLoader: 'style-loader',
- loader: 'css-loader?sourceMap'
- })
+ test: /\.scss$/,
+ 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'),
@@ -59,6 +72,7 @@ module.exports = {
  },
 
  plugins: [
+
  // Workaround for angular/angular#11580
  new webpack.ContextReplacementPlugin(
  // The (\\|\/) piece accounts for path separators in *nix and Windows
@@ -72,11 +86,15 @@ module.exports = {
  }),
 
  new HtmlWebpackPlugin({
- template: 'src/index.html'
+ template: helpers.root('src', 'index.html')
  }),
 
  new WebpackShellPlugin({
  onBuildStart: ['node ./config/dir-parse.js']
+ }),
+
+ new LoopMarkdownPlugin({
+ name: 'My Awesome Loop Markdown Plugin'
  })
 
  ]

config/webpack.dev.js

@@ -1,8 +1,11 @@
-var webpackMerge = require('webpack-merge');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var WebpackShellPlugin = require('webpack-shell-plugin');
-var commonConfig = require('./webpack.common.js');
-var helpers = require('./helpers');
+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',
@@ -15,7 +18,6 @@ module.exports = webpackMerge(commonConfig, {
  },
 
  plugins: [
- new ExtractTextPlugin('[name].css'),
  new WebpackShellPlugin({
  onBuildStart: ['node ./config/dir-parse.js']
  })

config/webpack.prod.js

@@ -1,8 +1,12 @@
-var webpack = require('webpack');
-var webpackMerge = require('webpack-merge');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var commonConfig = require('./webpack.common.js');
-var helpers = require('./helpers');
+const webpack = require('webpack');
+const helpers = require('./helpers');
+const marked = require('marked');
+const times = require('lodash/times');
+const webpackMerge = require('webpack-merge');
+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';
 
@@ -23,7 +27,6 @@ module.exports = webpackMerge(commonConfig, {
  keep_fnames: true
  }
  }),
- new ExtractTextPlugin('[name].[hash].css'),
  new webpack.DefinePlugin({
  'process.env': {
  'ENV': JSON.stringify(ENV)

package.json

@@ -41,9 +41,15 @@
  "@angular/upgrade": "~4.3.1",
  "angular-in-memory-web-api": "~0.3.2",
  "core-js": "^2.4.1",
+ "highlightjs": "^9.10.0",
  "jsonfile": "^3.0.1",
+ "marked": "^0.3.6",
+ "ng2-markdown-to-html": "^1.3.0",
+ "prismjs": "^1.6.0",
+ "reflect-metadata": "^0.1.10",
  "rxjs": "^5.1.0",
  "systemjs": "0.19.39",
+ "ts-helpers": "^1.1.2",
  "zone.js": "^0.8.4"
  },
  "devDependencies": {
@@ -55,8 +61,11 @@
  "@types/angular-resource": "^1.5.6",
  "@types/angular-route": "^1.3.2",
  "@types/angular-sanitize": "^1.3.3",
+ "@types/highlight.js": "^9.1.9",
  "@types/jasmine": "2.5.36",
+ "@types/marked": "^0.3.0",
  "@types/node": "^6.0.45",
+ "@types/prismjs": "^1.6.2",
  "angular2-template-loader": "^0.6.0",
  "awesome-typescript-loader": "^3.0.4",
  "babel-cli": "^6.16.0",
@@ -81,8 +90,9 @@
  "karma-sourcemap-loader": "^0.3.7",
  "karma-webpack": "^2.0.1",
  "lite-server": "^2.2.2",
- "lodash": "^4.16.2",
+ "lodash": "^4.17.4",
  "markdown-loader": "^2.0.1",
+ "node-sass": "^4.5.3",
  "null-loader": "^0.1.1",
  "phantomjs-prebuilt": "^2.1.7",
  "protractor": "~5.1.0",
@@ -92,6 +102,7 @@
  "rollup-plugin-commonjs": "^8.0.2",
  "rollup-plugin-node-resolve": "2.0.0",
  "rollup-plugin-uglify": "^1.0.1",
+ "sass-loader": "^6.0.6",
  "source-map-explorer": "^1.3.2",
  "style-loader": "^0.13.1",
  "ts-node": "~3.0.4",
@@ -100,7 +111,8 @@
  "webpack": "2.2.1",
  "webpack-dev-server": "2.4.1",
  "webpack-merge": "^3.0.0",
- "webpack-shell-plugin": "^0.5.0"
+ "webpack-shell-plugin": "^0.5.0",
+ "webpack-sources": "^1.0.1"
  },
  "repository": {}
 }

src/app/app.component.ts

@@ -1,8 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
  selector: 'ngxb-app',
- templateUrl: './app.component.html'
+ templateUrl: './app.component.html',
+ encapsulation: ViewEncapsulation.None,
+ styleUrls: ['./app.scss']
 })
 export class AppComponent {
  title = 'NGX Blog';