From f9236f4dd906b5ba3ae6ea550f5b945581444c15 Mon Sep 17 00:00:00 2001
From: Jason Hodges <jason.hodges@clickfox.com>
Date: Mon, 21 Aug 2017 19:20:31 -0600
Subject: [PATCH] feat(posts):make posts json contain yaml style fm

- add theme file for syntax highlighting
- start building better app structure
---
 .gitignore                                    |   3 +-
 .idea/inspectionProfiles/Project_Default.xml  |   6 -
 .idea/misc.xml                                |   7 -
 .idea/modules.xml                             |   8 -
 .idea/ngx-blog.iml                            |  12 -
 .idea/typescript-compiler.xml                 |   6 -
 .idea/vcs.xml                                 |   6 -
 .idea/watcherTasks.xml                        |   4 -
 .idea/workspace.xml                           | 867 ------------------
 config/dir-parse.js                           |  68 +-
 config/webpack.common.js                      |  23 -
 config/webpack.dev.js                         |   6 -
 config/webpack.prod.js                        |   1 -
 package.json                                  |   1 +
 src/app/app-routing.module.js                 |   2 +-
 src/app/app-routing.module.js.map             |   2 +-
 src/app/app-routing.module.ts                 |   2 +-
 src/app/app.component.scss                    |   0
 src/app/app.module.js                         |  15 +-
 src/app/app.module.js.map                     |   2 +-
 src/app/app.module.ts                         |  15 +-
 .../components/posts/posts.component.html     |   8 +
 .../components/posts/posts.component.js       |  36 +
 .../components/posts/posts.component.js.map   |   1 +
 .../components/posts/posts.component.ts       |  23 +
 src/app/ngx-blog/components/posts/theme.scss  | 123 +++
 .../containers/home/home.component.html       |   4 +
 .../containers}/home/home.component.js        |  14 +-
 .../containers/home/home.component.js.map     |   1 +
 .../containers}/home/home.component.ts        |  14 +-
 .../ngx-blog/containers}/home/home.module.js  |  18 +-
 .../containers/home/home.module.js.map        |   1 +
 .../ngx-blog/containers/home/home.module.ts   |  11 +
 src/app/ngx-blog/models/post.interface.js     |   1 +
 src/app/ngx-blog/models/post.interface.js.map |   1 +
 src/app/ngx-blog/models/post.interface.ts     |   5 +
 src/app/ngx-blog/ngx-blog.module.js           |  38 +
 src/app/ngx-blog/ngx-blog.module.js.map       |   1 +
 src/app/ngx-blog/ngx-blog.module.ts           |  27 +
 .../ngx-blog}/services/posts.service.js       |   2 +-
 .../ngx-blog}/services/posts.service.js.map   |   2 +-
 .../ngx-blog}/services/posts.service.ts       |   2 +-
 src/assets/_posts/2017-08-09-test-post.md     |   7 +-
 src/assets/_posts/2017-08-10-test-post.md     |   5 +-
 src/assets/_posts/2017-08-11-test-post.md     |  23 +-
 src/assets/_posts/posts.json                  |   2 +-
 src/home/home.component.html                  |   8 -
 src/home/home.component.js.map                |   1 -
 src/home/home.module.js.map                   |   1 -
 src/home/home.module.ts                       |  21 -
 src/index.html                                |   3 -
 src/vendor.ts                                 |   1 -
 yarn.lock                                     |   8 +-
 53 files changed, 399 insertions(+), 1070 deletions(-)
 delete mode 100644 .idea/inspectionProfiles/Project_Default.xml
 delete mode 100644 .idea/misc.xml
 delete mode 100644 .idea/modules.xml
 delete mode 100644 .idea/ngx-blog.iml
 delete mode 100644 .idea/typescript-compiler.xml
 delete mode 100644 .idea/vcs.xml
 delete mode 100644 .idea/watcherTasks.xml
 delete mode 100644 .idea/workspace.xml
 delete mode 100644 src/app/app.component.scss
 create mode 100644 src/app/ngx-blog/components/posts/posts.component.html
 create mode 100644 src/app/ngx-blog/components/posts/posts.component.js
 create mode 100644 src/app/ngx-blog/components/posts/posts.component.js.map
 create mode 100644 src/app/ngx-blog/components/posts/posts.component.ts
 create mode 100644 src/app/ngx-blog/components/posts/theme.scss
 create mode 100644 src/app/ngx-blog/containers/home/home.component.html
 rename src/{ => app/ngx-blog/containers}/home/home.component.js (74%)
 create mode 100644 src/app/ngx-blog/containers/home/home.component.js.map
 rename src/{ => app/ngx-blog/containers}/home/home.component.ts (54%)
 rename src/{ => app/ngx-blog/containers}/home/home.module.js (63%)
 create mode 100644 src/app/ngx-blog/containers/home/home.module.js.map
 create mode 100644 src/app/ngx-blog/containers/home/home.module.ts
 create mode 100644 src/app/ngx-blog/models/post.interface.js
 create mode 100644 src/app/ngx-blog/models/post.interface.js.map
 create mode 100644 src/app/ngx-blog/models/post.interface.ts
 create mode 100644 src/app/ngx-blog/ngx-blog.module.js
 create mode 100644 src/app/ngx-blog/ngx-blog.module.js.map
 create mode 100644 src/app/ngx-blog/ngx-blog.module.ts
 rename src/{ => app/ngx-blog}/services/posts.service.js (94%)
 rename src/{ => app/ngx-blog}/services/posts.service.js.map (87%)
 rename src/{ => app/ngx-blog}/services/posts.service.ts (90%)
 delete mode 100644 src/home/home.component.html
 delete mode 100644 src/home/home.component.js.map
 delete mode 100644 src/home/home.module.js.map
 delete mode 100644 src/home/home.module.ts

diff --git a/.gitignore b/.gitignore
index acbefef..503d4b3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,4 +37,5 @@ jspm_packages
 .node_repl_history
 
 
-/dist
\ No newline at end of file
+/dist
+.idea
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
deleted file mode 100644
index 1beadde..0000000
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="TsLint" enabled="true" level="ERROR" enabled_by_default="true" />
-  </profile>
-</component>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
deleted file mode 100644
index 9d2d2cd..0000000
--- a/.idea/misc.xml
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="IdProvider" IDEtalkID="03CD0E20DAAADC7A6419C30714F785FF" />
-  <component name="JavaScriptSettings">
-    <option name="languageLevel" value="ES6" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
deleted file mode 100644
index fb7d3ff..0000000
--- a/.idea/modules.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/ngx-blog.iml" filepath="$PROJECT_DIR$/.idea/ngx-blog.iml" />
-    </modules>
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/ngx-blog.iml b/.idea/ngx-blog.iml
deleted file mode 100644
index 24643cc..0000000
--- a/.idea/ngx-blog.iml
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>
\ No newline at end of file
diff --git a/.idea/typescript-compiler.xml b/.idea/typescript-compiler.xml
deleted file mode 100644
index 25cc839..0000000
--- a/.idea/typescript-compiler.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="TypeScriptCompiler">
-    <option name="isCompilerEnabled" value="true" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
deleted file mode 100644
index 94a25f7..0000000
--- a/.idea/vcs.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
deleted file mode 100644
index 4d4a4ac..0000000
--- a/.idea/watcherTasks.xml
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectTasksOptions" suppressed-tasks="SCSS;Babel" />
-</project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
deleted file mode 100644
index 4072aa4..0000000
--- a/.idea/workspace.xml
+++ /dev/null
@@ -1,867 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ChangeListManager">
-    <list default="true" id="0aa6eb55-6405-4289-b687-34514dad0c8c" name="Default" comment="">
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/app.scss" />
-      <change type="MOVED" beforePath="$PROJECT_DIR$/src/ExamplePlugin.js" afterPath="$PROJECT_DIR$/config/ExamplePlugin.js" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/config/helpers.js" afterPath="$PROJECT_DIR$/config/helpers.js" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/config/webpack.common.js" afterPath="$PROJECT_DIR$/config/webpack.common.js" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/config/webpack.dev.js" afterPath="$PROJECT_DIR$/config/webpack.dev.js" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/config/webpack.prod.js" afterPath="$PROJECT_DIR$/config/webpack.prod.js" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/package.json" afterPath="$PROJECT_DIR$/package.json" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/app-routing.module.js" afterPath="$PROJECT_DIR$/src/app/app-routing.module.js" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/app-routing.module.js.map" afterPath="$PROJECT_DIR$/src/app/app-routing.module.js.map" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/app.component.js" afterPath="$PROJECT_DIR$/src/app/app.component.js" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/app.component.js.map" afterPath="$PROJECT_DIR$/src/app/app.component.js.map" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/app.component.ts" afterPath="$PROJECT_DIR$/src/app/app.component.ts" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/app.module.js" afterPath="$PROJECT_DIR$/src/app/app.module.js" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/app.module.js.map" afterPath="$PROJECT_DIR$/src/app/app.module.js.map" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/app.module.ts" afterPath="$PROJECT_DIR$/src/app/app.module.ts" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/assets/_posts/2017-08-11-test-post.md" afterPath="$PROJECT_DIR$/src/assets/_posts/2017-08-11-test-post.md" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/home/home.component.html" afterPath="$PROJECT_DIR$/src/home/home.component.html" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/home/home.component.js" afterPath="$PROJECT_DIR$/src/home/home.component.js" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/home/home.component.js.map" afterPath="$PROJECT_DIR$/src/home/home.component.js.map" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/home/home.component.ts" afterPath="$PROJECT_DIR$/src/home/home.component.ts" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/home/home.module.js" afterPath="$PROJECT_DIR$/src/home/home.module.js" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/home/home.module.js.map" afterPath="$PROJECT_DIR$/src/home/home.module.js.map" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/home/home.module.ts" afterPath="$PROJECT_DIR$/src/home/home.module.ts" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/index.html" afterPath="$PROJECT_DIR$/src/index.html" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/main.js" afterPath="$PROJECT_DIR$/src/main.js" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/main.js.map" afterPath="$PROJECT_DIR$/src/main.js.map" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/main.ts" afterPath="$PROJECT_DIR$/src/main.ts" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/polyfills.js" afterPath="$PROJECT_DIR$/src/polyfills.js" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/polyfills.js.map" afterPath="$PROJECT_DIR$/src/polyfills.js.map" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/polyfills.ts" afterPath="$PROJECT_DIR$/src/polyfills.ts" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/services/posts.service.js" afterPath="$PROJECT_DIR$/src/services/posts.service.js" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/services/posts.service.js.map" afterPath="$PROJECT_DIR$/src/services/posts.service.js.map" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/services/posts.service.ts" afterPath="$PROJECT_DIR$/src/services/posts.service.ts" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/tsconfig.json" afterPath="$PROJECT_DIR$/src/tsconfig.json" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/vendor.js" afterPath="$PROJECT_DIR$/src/vendor.js" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/vendor.js.map" afterPath="$PROJECT_DIR$/src/vendor.js.map" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/vendor.ts" afterPath="$PROJECT_DIR$/src/vendor.ts" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/yarn.lock" afterPath="$PROJECT_DIR$/yarn.lock" />
-    </list>
-    <ignored path="$PROJECT_DIR$/.tmp/" />
-    <ignored path="$PROJECT_DIR$/temp/" />
-    <ignored path="$PROJECT_DIR$/tmp/" />
-    <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
-    <option name="TRACKING_ENABLED" value="true" />
-    <option name="SHOW_DIALOG" value="false" />
-    <option name="HIGHLIGHT_CONFLICTS" value="true" />
-    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
-    <option name="LAST_RESOLUTION" value="IGNORE" />
-  </component>
-  <component name="FavoritesManager">
-    <favorites_list name="ngx-blog">
-      <favorite_root url="file://$PROJECT_DIR$/config/webpack.common.js" type="psiFile" klass="com.intellij.ide.projectView.impl.nodes.PsiFileNode" />
-    </favorites_list>
-  </component>
-  <component name="FileColors">
-    <fileColor scope="Non-Project Files (Material Default)" color="2E3C43" />
-    <fileColor scope="Non-Project Files (Material Darker)" color="323232" />
-    <fileColor scope="Non-Project Files (Material Lighter)" color="eae8e8" />
-    <fileColor scope="Non-Project Files (Material Palenight)" color="2f2e43" />
-  </component>
-  <component name="FileEditorManager">
-    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
-      <file leaf-file-name="webpack.common.js" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/config/webpack.common.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="880">
-              <caret line="44" column="44" lean-forward="false" selection-start-line="44" selection-start-column="44" selection-end-line="44" selection-end-column="44" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="app.component.ts" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/app/app.component.ts">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="100">
-              <caret line="5" column="40" lean-forward="false" selection-start-line="5" selection-start-column="40" selection-end-line="5" selection-end-column="40" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="home.component.html" pinned="false" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/src/home/home.component.html">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="120">
-              <caret line="6" column="17" lean-forward="true" selection-start-line="6" selection-start-column="17" selection-end-line="6" selection-end-column="17" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="webpack.dev.js" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/config/webpack.dev.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="400">
-              <caret line="20" column="28" lean-forward="false" selection-start-line="20" selection-start-column="28" selection-end-line="20" selection-end-column="28" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="webpack.prod.js" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/config/webpack.prod.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="21">
-              <caret line="9" column="0" lean-forward="false" selection-start-line="9" selection-start-column="0" selection-end-line="9" selection-end-column="0" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-    </leaf>
-  </component>
-  <component name="FindInProjectRecents">
-    <findStrings>
-      <find>marked</find>
-    </findStrings>
-  </component>
-  <component name="Git.Settings">
-    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
-  </component>
-  <component name="IdeDocumentHistory">
-    <option name="CHANGED_PATHS">
-      <list>
-        <option value="$PROJECT_DIR$/src/assets/_posts/posts.json" />
-        <option value="$PROJECT_DIR$/src/app/app.module.ts" />
-        <option value="$PROJECT_DIR$/src/home/home.module.ts" />
-        <option value="$PROJECT_DIR$/src/typings.d.ts" />
-        <option value="$PROJECT_DIR$/src/main.ts" />
-        <option value="$PROJECT_DIR$/node_modules/ng2-markdown-to-html/dist/bundles/ng2-markdown-to-html.umd.js" />
-        <option value="$PROJECT_DIR$/node_modules/ng2-markdown-to-html/dist/lib/markdown-to-html.component.d.ts" />
-        <option value="$PROJECT_DIR$/src/services/posts.service.ts" />
-        <option value="$PROJECT_DIR$/src/polyfills.ts" />
-        <option value="$PROJECT_DIR$/src/vendor.ts" />
-        <option value="$PROJECT_DIR$/node_modules/ng2-markdown-to-html/dist/lib/index.metadata.json" />
-        <option value="$PROJECT_DIR$/src/assets/_posts/2017-08-11-test-post.md" />
-        <option value="$PROJECT_DIR$/src/app/app.scss" />
-        <option value="$PROJECT_DIR$/node_modules/ng2-markdown-to-html/dist/lib/markdown-to-html.component.js" />
-        <option value="$PROJECT_DIR$/src/home/home.component.ts" />
-        <option value="$PROJECT_DIR$/config/webpack.dev.js" />
-        <option value="$PROJECT_DIR$/config/webpack.prod.js" />
-        <option value="$PROJECT_DIR$/config/helpers.js" />
-        <option value="$PROJECT_DIR$/src/tsconfig.json" />
-        <option value="$PROJECT_DIR$/package.json" />
-        <option value="$PROJECT_DIR$/config/webpack.common.js" />
-        <option value="$PROJECT_DIR$/src/app/app.component.ts" />
-        <option value="$PROJECT_DIR$/src/home/home.component.html" />
-      </list>
-    </option>
-  </component>
-  <component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
-  <component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER">
-    <package-json value="$PROJECT_DIR$/package.json" />
-  </component>
-  <component name="JsFlowSettings">
-    <service-enabled>false</service-enabled>
-    <exe-path />
-    <annotation-enable>false</annotation-enable>
-    <other-services-enabled>false</other-services-enabled>
-    <auto-save>true</auto-save>
-  </component>
-  <component name="JsGulpfileManager">
-    <detection-done>true</detection-done>
-    <sorting>DEFINITION_ORDER</sorting>
-  </component>
-  <component name="NodeModulesDirectoryManager">
-    <handled-path value="$PROJECT_DIR$/node_modules" />
-  </component>
-  <component name="ProjectFrameBounds" extendedState="6">
-    <option name="y" value="22" />
-    <option name="width" value="1440" />
-    <option name="height" value="1058" />
-  </component>
-  <component name="ProjectView">
-    <navigator currentView="ProjectPane" proportions="" version="1">
-      <flattenPackages />
-      <showMembers />
-      <showModules />
-      <showLibraryContents />
-      <hideEmptyPackages />
-      <abbreviatePackageNames />
-      <autoscrollToSource />
-      <autoscrollFromSource />
-      <sortByType />
-      <manualOrder />
-      <foldersAlwaysOnTop value="true" />
-    </navigator>
-    <panes>
-      <pane id="Scope" />
-      <pane id="Scratches" />
-      <pane id="ProjectPane">
-        <subPane>
-          <expand>
-            <path>
-              <item name="ngx-blog" type="b2602c69:ProjectViewProjectNode" />
-              <item name="ngx-blog" type="462c0819:PsiDirectoryNode" />
-            </path>
-            <path>
-              <item name="ngx-blog" type="b2602c69:ProjectViewProjectNode" />
-              <item name="ngx-blog" type="462c0819:PsiDirectoryNode" />
-              <item name="config" type="462c0819:PsiDirectoryNode" />
-            </path>
-            <path>
-              <item name="ngx-blog" type="b2602c69:ProjectViewProjectNode" />
-              <item name="ngx-blog" type="462c0819:PsiDirectoryNode" />
-              <item name="src" type="462c0819:PsiDirectoryNode" />
-            </path>
-            <path>
-              <item name="ngx-blog" type="b2602c69:ProjectViewProjectNode" />
-              <item name="ngx-blog" type="462c0819:PsiDirectoryNode" />
-              <item name="src" type="462c0819:PsiDirectoryNode" />
-              <item name="app" type="462c0819:PsiDirectoryNode" />
-            </path>
-            <path>
-              <item name="ngx-blog" type="b2602c69:ProjectViewProjectNode" />
-              <item name="ngx-blog" type="462c0819:PsiDirectoryNode" />
-              <item name="src" type="462c0819:PsiDirectoryNode" />
-              <item name="assets" type="462c0819:PsiDirectoryNode" />
-            </path>
-            <path>
-              <item name="ngx-blog" type="b2602c69:ProjectViewProjectNode" />
-              <item name="ngx-blog" type="462c0819:PsiDirectoryNode" />
-              <item name="src" type="462c0819:PsiDirectoryNode" />
-              <item name="assets" type="462c0819:PsiDirectoryNode" />
-              <item name="_posts" type="462c0819:PsiDirectoryNode" />
-            </path>
-            <path>
-              <item name="ngx-blog" type="b2602c69:ProjectViewProjectNode" />
-              <item name="ngx-blog" type="462c0819:PsiDirectoryNode" />
-              <item name="src" type="462c0819:PsiDirectoryNode" />
-              <item name="home" type="462c0819:PsiDirectoryNode" />
-            </path>
-            <path>
-              <item name="ngx-blog" type="b2602c69:ProjectViewProjectNode" />
-              <item name="ngx-blog" type="462c0819:PsiDirectoryNode" />
-              <item name="src" type="462c0819:PsiDirectoryNode" />
-              <item name="services" type="462c0819:PsiDirectoryNode" />
-            </path>
-          </expand>
-          <select />
-        </subPane>
-      </pane>
-      <pane id="NBKnowledgePane" />
-    </panes>
-  </component>
-  <component name="PropertiesComponent">
-    <property name="settings.editor.selected.configurable" value="preferences.sourceCode" />
-    <property name="nodejs_interpreter_path" value="/usr/local/bin/node" />
-    <property name="project.structure.last.edited" value="Libraries" />
-    <property name="project.structure.proportion" value="0.0" />
-    <property name="project.structure.side.proportion" value="0.0" />
-    <property name="WebServerToolWindowFactoryState" value="false" />
-    <property name="HbShouldOpenHtmlAsHb" value="" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
-    <property name="node.js.path.for.package.tslint" value="project" />
-    <property name="node.js.detected.package.tslint" value="true" />
-    <property name="node.js.selected.package.tslint" value="$PROJECT_DIR$/node_modules/tslint" />
-    <property name="eu.ydp.idea.ts.spec.generator.settings.spec.template" value="import {$ClassName$} from '$TestsRelativePath$../src/$classRelativePath$/$ClassName$';&#10;&#10;describe('$ClassName$', () =&gt; {&#10;  let $ObjName$:$ClassName$;&#10;&#10;  beforeEach(() =&gt; {&#10;    $ObjName$ = new $ClassName$();&#10;  });&#10;&#10;  describe('', () =&gt; {&#10;    it('', () =&gt; {&#10;      // given&#10;&#10;      // when&#10;&#10;      // then&#10;    });&#10;  });&#10;});&#10;" />
-    <property name="SearchEverywhereHistoryKey" value="&#9;FILE&#9;file:///Users/jhodges/Development/Playground/_NG4/ngx-blog/node_modules/ng2-markdown-to-html/dist/lib/markdown-to-html.component.js&#10;pack&#9;FILE&#9;file:///Users/jhodges/Development/Playground/_NG4/ngx-blog/package.json" />
-  </component>
-  <component name="RecentsManager">
-    <key name="MoveFile.RECENT_KEYS">
-      <recent name="$PROJECT_DIR$/config" />
-    </key>
-  </component>
-  <component name="RunDashboard">
-    <option name="ruleStates">
-      <list>
-        <RuleState>
-          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
-        </RuleState>
-        <RuleState>
-          <option name="name" value="StatusDashboardGroupingRule" />
-        </RuleState>
-      </list>
-    </option>
-  </component>
-  <component name="ShelveChangesManager" show_recycled="false">
-    <option name="remove_strategy" value="false" />
-  </component>
-  <component name="TaskManager">
-    <task active="true" id="Default" summary="Default task">
-      <changelist id="0aa6eb55-6405-4289-b687-34514dad0c8c" name="Default" comment="" />
-      <created>1502422586480</created>
-      <option name="number" value="Default" />
-      <option name="presentableId" value="Default" />
-      <updated>1502422586480</updated>
-    </task>
-    <servers />
-  </component>
-  <component name="ToolWindowManager">
-    <frame x="0" y="22" width="1440" height="874" extended-state="6" />
-    <editor active="true" />
-    <layout>
-      <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
-      <window_info id="IDEtalk" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3297568" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
-      <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="true" content_ui="tabs" />
-      <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="8" side_tool="false" content_ui="tabs" />
-      <window_info id="npm" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
-      <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32931355" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
-      <window_info id="Mongo Explorer" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
-      <window_info id="Terminal" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.29899856" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
-      <window_info id="TypeScript" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="9" side_tool="false" content_ui="tabs" />
-      <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.22174536" sideWeight="0.49588478" order="0" side_tool="false" content_ui="combo" />
-      <window_info id="Pomodoro" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="10" side_tool="true" content_ui="tabs" />
-      <window_info id="IDEtalk Messages" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="11" side_tool="false" content_ui="tabs" />
-      <window_info id="Tail" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="12" side_tool="false" content_ui="tabs" />
-      <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
-      <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.2571885" sideWeight="0.5041152" order="2" side_tool="true" content_ui="tabs" />
-      <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
-      <window_info id="rollback" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="5" side_tool="true" content_ui="tabs" />
-      <window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
-      <window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
-      <window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
-      <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
-      <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
-      <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
-      <window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
-    </layout>
-  </component>
-  <component name="TypeScriptGeneratedFilesManager">
-    <option name="version" value="1" />
-    <option name="exactExcludedFiles">
-      <list>
-        <option value="$PROJECT_DIR$/src/vendor.js.map" />
-        <option value="$PROJECT_DIR$/src/main.js" />
-        <option value="$PROJECT_DIR$/src/polyfills.js.map" />
-        <option value="$PROJECT_DIR$/src/polyfills.js" />
-        <option value="$PROJECT_DIR$/src/main.js.map" />
-        <option value="$PROJECT_DIR$/src/vendor.js" />
-        <option value="$PROJECT_DIR$/src/app/app.component.spec.js" />
-        <option value="$PROJECT_DIR$/src/app/app.module.js.map" />
-        <option value="$PROJECT_DIR$/src/app/app.component.spec.js.map" />
-        <option value="$PROJECT_DIR$/src/app/app.module.js" />
-        <option value="$PROJECT_DIR$/src/app/app-routing.module.js.map" />
-        <option value="$PROJECT_DIR$/src/app/app.component.js" />
-        <option value="$PROJECT_DIR$/src/app/app-routing.module.js" />
-        <option value="$PROJECT_DIR$/src/app/app.component.js.map" />
-        <option value="$PROJECT_DIR$/src/home/home.module.js" />
-        <option value="$PROJECT_DIR$/src/home/home.module.js.map" />
-        <option value="$PROJECT_DIR$/src/home/home.component.js" />
-        <option value="$PROJECT_DIR$/src/home/home.component.js.map" />
-        <option value="$PROJECT_DIR$/src/services/posts.service.js.map" />
-        <option value="$PROJECT_DIR$/src/services/posts.service.js" />
-      </list>
-    </option>
-  </component>
-  <component name="VcsContentAnnotationSettings">
-    <option name="myLimit" value="2678400000" />
-  </component>
-  <component name="XDebuggerManager">
-    <breakpoint-manager />
-    <watches-manager />
-  </component>
-  <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/package.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="2020">
-          <caret line="101" column="30" lean-forward="false" selection-start-line="101" selection-start-column="30" selection-end-line="101" selection-end-column="30" />
-          <folding>
-            <marker date="1503324357000" expanded="true" signature="1040:1594" ph="{&quot;@angular/animations&quot;: &quot;~4.3.1&quot;...}" />
-            <marker date="1503324357000" expanded="true" signature="3886:3891" ph="{&quot;@angular/cli&quot;: &quot;^1.2.0&quot;...}" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/services/posts.service.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="60">
-          <caret line="6" column="0" lean-forward="false" selection-start-line="6" selection-start-column="0" selection-end-line="6" selection-end-column="0" />
-          <folding>
-            <element signature="e#0#43#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/home/home.component.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="40">
-          <caret line="2" column="14" lean-forward="false" selection-start-line="2" selection-start-column="14" selection-end-line="2" selection-end-column="14" />
-          <folding>
-            <element signature="e#0#57#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/package.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1900">
-          <caret line="95" column="30" lean-forward="false" selection-start-line="95" selection-start-column="30" selection-end-line="95" selection-end-column="30" />
-          <folding>
-            <marker date="1503324357000" expanded="true" signature="1040:1594" ph="{&quot;@angular/animations&quot;: &quot;~4.3.1&quot;...}" />
-            <marker date="1503324357000" expanded="true" signature="3886:3891" ph="{&quot;@angular/cli&quot;: &quot;^1.2.0&quot;...}" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/services/posts.service.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="40">
-          <caret line="3" column="34" lean-forward="false" selection-start-line="3" selection-start-column="34" selection-end-line="3" selection-end-column="34" />
-          <folding>
-            <element signature="e#0#43#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/home/home.component.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="340">
-          <caret line="17" column="56" lean-forward="false" selection-start-line="17" selection-start-column="56" selection-end-line="17" selection-end-column="56" />
-          <folding>
-            <element signature="e#0#57#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/assets/_posts/posts.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="0">
-          <caret line="0" column="176" lean-forward="false" selection-start-line="0" selection-start-column="176" selection-end-line="0" selection-end-column="176" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/home/home.component.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="240">
-          <caret line="10" column="2" lean-forward="false" selection-start-line="10" selection-start-column="2" selection-end-line="10" selection-end-column="2" />
-          <caret line="12" column="2" lean-forward="false" selection-start-line="12" selection-start-column="2" selection-end-line="12" selection-end-column="2" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/tsconfig.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="240">
-          <caret line="12" column="14" lean-forward="false" selection-start-line="12" selection-start-column="14" selection-end-line="12" selection-end-column="14" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/app.module.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="20">
-          <caret line="1" column="31" lean-forward="false" selection-start-line="1" selection-start-column="31" selection-end-line="1" selection-end-column="31" />
-          <folding>
-            <element signature="e#0#57#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/package.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="700">
-          <caret line="35" column="42" lean-forward="false" selection-start-line="35" selection-start-column="42" selection-end-line="35" selection-end-column="42" />
-          <folding>
-            <marker date="1503324357000" expanded="true" signature="1040:1594" ph="{&quot;@angular/animations&quot;: &quot;~4.3.1&quot;...}" />
-            <marker date="1503324357000" expanded="true" signature="3886:3891" ph="{&quot;@angular/cli&quot;: &quot;^1.2.0&quot;...}" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/app.component.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="0">
-          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/config/webpack.dev.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="0">
-          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/config/webpack.common.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1640">
-          <caret line="82" column="17" lean-forward="true" selection-start-line="82" selection-start-column="17" selection-end-line="82" selection-end-column="17" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/config/posts-to-json.js" />
-    <entry file="file://$PROJECT_DIR$/src/assets/_posts/posts.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="180">
-          <caret line="12" column="1" lean-forward="false" selection-start-line="12" selection-start-column="1" selection-end-line="12" selection-end-column="1" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/tslint.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="260">
-          <caret line="13" column="6" lean-forward="true" selection-start-line="13" selection-start-column="6" selection-end-line="13" selection-end-column="6" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/typings.d.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="80">
-          <caret line="4" column="0" lean-forward="false" selection-start-line="4" selection-start-column="0" selection-end-line="6" selection-end-column="28" />
-          <folding>
-            <element signature="n#!!doc" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/node_modules/marked/lib/marked.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1604">
-          <caret line="1280" column="2" lean-forward="false" selection-start-line="1280" selection-start-column="2" selection-end-line="1280" selection-end-column="2" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/home/home.module.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="220">
-          <caret line="11" column="33" lean-forward="false" selection-start-line="11" selection-start-column="33" selection-end-line="11" selection-end-column="33" />
-          <folding>
-            <element signature="e#0#57#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/node_modules/@types/marked/index.d.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-4489">
-          <caret line="16" column="17" lean-forward="false" selection-start-line="16" selection-start-column="17" selection-end-line="16" selection-end-column="17" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/vendor.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="280">
-          <caret line="14" column="24" lean-forward="false" selection-start-line="14" selection-start-column="24" selection-end-line="14" selection-end-column="24" />
-          <folding>
-            <element signature="e#11#46#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/services/posts.service.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="0">
-          <caret line="0" column="2" lean-forward="true" selection-start-line="0" selection-start-column="2" selection-end-line="0" selection-end-column="2" />
-          <folding>
-            <element signature="e#0#43#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/polyfills.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="260">
-          <caret line="13" column="0" lean-forward="true" selection-start-line="13" selection-start-column="0" selection-end-line="13" selection-end-column="0" />
-          <folding>
-            <element signature="e#0#21#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/main.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="200">
-          <caret line="10" column="0" lean-forward="true" selection-start-line="10" selection-start-column="0" selection-end-line="10" selection-end-column="0" />
-          <folding>
-            <element signature="e#0#75#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/node_modules/ng2-markdown-to-html/dist/lib/index.metadata.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-59">
-          <caret line="4" column="7" lean-forward="false" selection-start-line="4" selection-start-column="7" selection-end-line="4" selection-end-column="7" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/node_modules/ng2-markdown-to-html/dist/lib/markdown-to-html.module.d.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="100">
-          <caret line="5" column="0" lean-forward="true" selection-start-line="5" selection-start-column="0" selection-end-line="5" selection-end-column="0" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/node_modules/ng2-markdown-to-html/dist/lib/markdown-to-html.component.d.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="100">
-          <caret line="5" column="38" lean-forward="true" selection-start-line="5" selection-start-column="38" selection-end-line="5" selection-end-column="38" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/node_modules/ng2-markdown-to-html/dist/lib/markdown-to-html.service.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="0">
-          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-          <folding>
-            <element signature="e#0#43#0" expanded="false" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/node_modules/ng2-markdown-to-html/dist/lib/language.pipe.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="0">
-          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/node_modules/ng2-markdown-to-html/dist/lib/index.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="0">
-          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/node_modules/ng2-markdown-to-html/dist/bundles/ng2-markdown-to-html.umd.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="20">
-          <caret line="1" column="82" lean-forward="true" selection-start-line="1" selection-start-column="82" selection-end-line="1" selection-end-column="82" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/assets/_posts/2017-08-10-test-post.md">
-      <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
-        <state split_layout="SPLIT">
-          <first_editor relative-caret-position="0">
-            <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-            <folding />
-          </first_editor>
-          <second_editor />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/assets/_posts/2017-08-11-test-post.md">
-      <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
-        <state split_layout="SPLIT">
-          <first_editor relative-caret-position="0">
-            <caret line="0" column="22" lean-forward="false" selection-start-line="0" selection-start-column="22" selection-end-line="0" selection-end-column="22" />
-            <folding />
-          </first_editor>
-          <second_editor />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/node_modules/ng2-markdown-to-html/dist/lib/markdown-to-html.service.d.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="0">
-          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-          <folding>
-            <element signature="e#0#47#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/node_modules/ng2-markdown-to-html/dist/lib/language.pipe.d.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="0">
-          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/node_modules/ng2-markdown-to-html/dist/lib/index.d.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="80">
-          <caret line="4" column="0" lean-forward="true" selection-start-line="4" selection-start-column="0" selection-end-line="4" selection-end-column="0" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/assets/_posts/template.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="0">
-          <caret line="0" column="22" lean-forward="true" selection-start-line="0" selection-start-column="22" selection-end-line="0" selection-end-column="22" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/node_modules/ng2-markdown-to-html/dist/lib/markdown-to-html.component.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="300">
-          <caret line="15" column="39" lean-forward="true" selection-start-line="15" selection-start-column="39" selection-end-line="15" selection-end-column="39" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/home/home.component.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="60">
-          <caret line="3" column="0" lean-forward="true" selection-start-line="3" selection-start-column="0" selection-end-line="3" selection-end-column="0" />
-          <folding>
-            <element signature="e#0#57#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/app.scss">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="40">
-          <caret line="2" column="1" lean-forward="true" selection-start-line="2" selection-start-column="1" selection-end-line="2" selection-end-column="1" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/app.module.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="300">
-          <caret line="15" column="34" lean-forward="false" selection-start-line="15" selection-start-column="34" selection-end-line="15" selection-end-column="34" />
-          <folding>
-            <element signature="e#0#57#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/config/LoopMarkdown.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="0">
-          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/config/helpers.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="180">
-          <caret line="9" column="20" lean-forward="true" selection-start-line="9" selection-start-column="20" selection-end-line="9" selection-end-column="20" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/package.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="326">
-          <caret line="41" column="42" lean-forward="false" selection-start-line="41" selection-start-column="42" selection-end-line="41" selection-end-column="42" />
-          <folding>
-            <marker date="1503324357000" expanded="true" signature="1040:1594" ph="{&quot;@angular/animations&quot;: &quot;~4.3.1&quot;...}" />
-            <marker date="1503324357000" expanded="true" signature="3886:3891" ph="{&quot;@angular/cli&quot;: &quot;^1.2.0&quot;...}" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/tsconfig.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="360">
-          <caret line="18" column="5" lean-forward="false" selection-start-line="18" selection-start-column="5" selection-end-line="18" selection-end-column="5" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/config/webpack.dev.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="400">
-          <caret line="20" column="28" lean-forward="false" selection-start-line="20" selection-start-column="28" selection-end-line="20" selection-end-column="28" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/config/webpack.prod.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="21">
-          <caret line="9" column="0" lean-forward="false" selection-start-line="9" selection-start-column="0" selection-end-line="9" selection-end-column="0" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/config/webpack.common.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="880">
-          <caret line="44" column="44" lean-forward="false" selection-start-line="44" selection-start-column="44" selection-end-line="44" selection-end-column="44" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/app.component.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="100">
-          <caret line="5" column="40" lean-forward="false" selection-start-line="5" selection-start-column="40" selection-end-line="5" selection-end-column="40" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/home/home.component.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="120">
-          <caret line="6" column="17" lean-forward="true" selection-start-line="6" selection-start-column="17" selection-end-line="6" selection-end-column="17" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-  </component>
-  <component name="masterDetails">
-    <states>
-      <state key="GlobalLibrariesConfigurable.UI">
-        <settings>
-          <splitter-proportions>
-            <option name="proportions">
-              <list>
-                <option value="0.2" />
-              </list>
-            </option>
-          </splitter-proportions>
-        </settings>
-      </state>
-      <state key="JdkListConfigurable.UI">
-        <settings>
-          <last-edited>rbenv: 2.3.1</last-edited>
-          <splitter-proportions>
-            <option name="proportions">
-              <list>
-                <option value="0.2" />
-              </list>
-            </option>
-          </splitter-proportions>
-        </settings>
-      </state>
-      <state key="ProjectJDKs.UI">
-        <settings>
-          <last-edited>rbenv: 2.3.1</last-edited>
-          <splitter-proportions>
-            <option name="proportions">
-              <list>
-                <option value="0.2" />
-              </list>
-            </option>
-          </splitter-proportions>
-        </settings>
-      </state>
-      <state key="ProjectLibrariesConfigurable.UI">
-        <settings>
-          <splitter-proportions>
-            <option name="proportions">
-              <list>
-                <option value="0.2" />
-              </list>
-            </option>
-          </splitter-proportions>
-        </settings>
-      </state>
-      <state key="ScopeChooserConfigurable.UI">
-        <settings>
-          <splitter-proportions>
-            <option name="proportions">
-              <list>
-                <option value="0.16422288" />
-              </list>
-            </option>
-          </splitter-proportions>
-        </settings>
-      </state>
-    </states>
-  </component>
-</project>
\ No newline at end of file
diff --git a/config/dir-parse.js b/config/dir-parse.js
index 36ce951..31990c9 100644
--- a/config/dir-parse.js
+++ b/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);
 });
\ No newline at end of file
diff --git a/config/webpack.common.js b/config/webpack.common.js
index d069c4e..0500e14 100644
--- a/config/webpack.common.js
+++ b/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'
     })
 
   ]
diff --git a/config/webpack.dev.js b/config/webpack.dev.js
index 33d1a58..be48551 100644
--- a/config/webpack.dev.js
+++ b/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'
diff --git a/config/webpack.prod.js b/config/webpack.prod.js
index 7f80340..b10ffac 100644
--- a/config/webpack.prod.js
+++ b/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, {
diff --git a/package.json b/package.json
index ae52ff6..2971f0a 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/app-routing.module.js b/src/app/app-routing.module.js
index b76a9d2..e04e25a 100644
--- a/src/app/app-routing.module.js
+++ b/src/app/app-routing.module.js
@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { HomeComponent } from '../home/home.component';
+import { HomeComponent } from './ngx-blog/containers/home/home.component';
 import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 var routes = [
diff --git a/src/app/app-routing.module.js.map b/src/app/app-routing.module.js.map
index 61a0223..e78cf85 100644
--- a/src/app/app-routing.module.js.map
+++ b/src/app/app-routing.module.js.map
@@ -1 +1 @@
-{"version":3,"file":"app-routing.module.js","sourceRoot":"","sources":["app-routing.module.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAU,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAEvC,IAAM,MAAM,GAAW;IACrB,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE;IACpD,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE;CAC3C,CAAC;AAMF,IAAa,gBAAgB;IAA7B;IAA+B,CAAC;IAAD,uBAAC;AAAD,CAAC,AAAhC,IAAgC;AAAnB,gBAAgB;IAJ5B,QAAQ,CAAC;QACR,OAAO,EAAE,CAAE,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,CAAE;QACzC,OAAO,EAAE,CAAE,YAAY,CAAE;KAC1B,CAAC;GACW,gBAAgB,CAAG;SAAnB,gBAAgB"}
\ No newline at end of file
+{"version":3,"file":"app-routing.module.js","sourceRoot":"","sources":["app-routing.module.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAU,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAEvC,IAAM,MAAM,GAAW;IACrB,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE;IACpD,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE;CAC3C,CAAC;AAMF,IAAa,gBAAgB;IAA7B;IAA+B,CAAC;IAAD,uBAAC;AAAD,CAAC,AAAhC,IAAgC;AAAnB,gBAAgB;IAJ5B,QAAQ,CAAC;QACR,OAAO,EAAE,CAAE,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,CAAE;QACzC,OAAO,EAAE,CAAE,YAAY,CAAE;KAC1B,CAAC;GACW,gBAAgB,CAAG;SAAnB,gBAAgB"}
\ No newline at end of file
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 5e75d87..ca2bb8b 100644
--- a/src/app/app-routing.module.ts
+++ b/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';
 
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/app.module.js b/src/app/app.module.js
index ebbb88b..daf8c68 100644
--- a/src/app/app.module.js
+++ b/src/app/app.module.js
@@ -4,14 +4,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-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';
 var AppModule = (function () {
     function AppModule() {
     }
@@ -21,17 +21,14 @@ AppModule = __decorate([
     NgModule({
         imports: [
             BrowserModule,
+            CommonModule,
             HttpModule,
             AppRoutingModule,
+            NgxBlogModule,
             MarkdownToHtmlModule.forRoot()
         ],
-        declarations: [
-            AppComponent,
-            HomeComponent
-        ],
-        providers: [
-            PostsService
-        ],
+        declarations: [AppComponent],
+        providers: [],
         bootstrap: [AppComponent],
     })
 ], AppModule);
diff --git a/src/app/app.module.js.map b/src/app/app.module.js.map
index 9955a3e..7cda844 100644
--- a/src/app/app.module.js.map
+++ b/src/app/app.module.js.map
@@ -1 +1 @@
-{"version":3,"file":"app.module.js","sourceRoot":"","sources":["app.module.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAkB/C,IAAa,SAAS;IAAtB;IAAyB,CAAC;IAAD,gBAAC;AAAD,CAAC,AAA1B,IAA0B;AAAb,SAAS;IAhBrB,QAAQ,CAAC;QACR,OAAO,EAAE;YACP,aAAa;YACb,UAAU;YACV,gBAAgB;YAChB,oBAAoB,CAAC,OAAO,EAAE;SAC/B;QACD,YAAY,EAAE;YACZ,YAAY;YACZ,aAAa;SACd;QACD,SAAS,EAAE;YACT,YAAY;SACb;QACD,SAAS,EAAE,CAAC,YAAY,CAAC;KAC1B,CAAC;GACW,SAAS,CAAI;SAAb,SAAS"}
\ No newline at end of file
+{"version":3,"file":"app.module.js","sourceRoot":"","sources":["app.module.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAe/C,IAAa,SAAS;IAAtB;IAAyB,CAAC;IAAD,gBAAC;AAAD,CAAC,AAA1B,IAA0B;AAAb,SAAS;IAbrB,QAAQ,CAAC;QACR,OAAO,EAAE;YACP,aAAa;YACb,YAAY;YACZ,UAAU;YACV,gBAAgB;YAChB,aAAa;YACb,oBAAoB,CAAC,OAAO,EAAE;SAC/B;QACD,YAAY,EAAE,CAAC,YAAY,CAAC;QAC5B,SAAS,EAAE,EAAG;QACd,SAAS,EAAE,CAAC,YAAY,CAAC;KAC1B,CAAC;GACW,SAAS,CAAI;SAAb,SAAS"}
\ No newline at end of file
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b42c1f2..64fc6b9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,5 +1,3 @@
-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';
@@ -7,21 +5,20 @@ 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 { }
diff --git a/src/app/ngx-blog/components/posts/posts.component.html b/src/app/ngx-blog/components/posts/posts.component.html
new file mode 100644
index 0000000..ab1036f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/app/ngx-blog/components/posts/posts.component.js b/src/app/ngx-blog/components/posts/posts.component.js
new file mode 100644
index 0000000..32067bc
--- /dev/null
+++ b/src/app/ngx-blog/components/posts/posts.component.js
@@ -0,0 +1,36 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component, ViewEncapsulation } from '@angular/core';
+import { PostsService } from '../../services/posts.service';
+var PostsComponent = (function () {
+    function PostsComponent(postsService) {
+        this.postsService = postsService;
+    }
+    PostsComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        this.postsService.getPosts().subscribe(function (p) {
+            _this.posts = p.posts;
+        });
+    };
+    return PostsComponent;
+}());
+PostsComponent = __decorate([
+    Component({
+        selector: 'posts',
+        templateUrl: 'posts.component.html',
+        encapsulation: ViewEncapsulation.None,
+        styleUrls: [
+            'theme.scss'
+        ]
+    }),
+    __metadata("design:paramtypes", [PostsService])
+], PostsComponent);
+export { PostsComponent };
+//# sourceMappingURL=posts.component.js.map
\ No newline at end of file
diff --git a/src/app/ngx-blog/components/posts/posts.component.js.map b/src/app/ngx-blog/components/posts/posts.component.js.map
new file mode 100644
index 0000000..8d4a95b
--- /dev/null
+++ b/src/app/ngx-blog/components/posts/posts.component.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"posts.component.js","sourceRoot":"","sources":["posts.component.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAU,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAW5D,IAAa,cAAc;IAGzB,wBAAmB,YAA0B;QAA1B,iBAAY,GAAZ,YAAY,CAAc;IAAI,CAAC;IAElD,iCAAQ,GAAR;QAAA,iBAIC;QAHC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,UAAC,CAAC;YACvC,KAAI,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC;IACH,qBAAC;AAAD,CAAC,AAVD,IAUC;AAVY,cAAc;IAT1B,SAAS,CAAC;QACT,QAAQ,EAAE,OAAO;QACjB,WAAW,EAAE,sBAAsB;QACnC,aAAa,EAAE,iBAAiB,CAAC,IAAI;QACrC,SAAS,EAAE;YACT,YAAY;SACb;KACF,CAAC;qCAKiC,YAAY;GAHlC,cAAc,CAU1B;SAVY,cAAc"}
\ No newline at end of file
diff --git a/src/app/ngx-blog/components/posts/posts.component.ts b/src/app/ngx-blog/components/posts/posts.component.ts
new file mode 100644
index 0000000..0ef8523
--- /dev/null
+++ b/src/app/ngx-blog/components/posts/posts.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { PostsService } from '../../services/posts.service';
+
+@Component({
+  selector: 'posts',
+  templateUrl: 'posts.component.html',
+  encapsulation: ViewEncapsulation.None,
+  styleUrls: [
+    'theme.scss'
+  ]
+})
+
+export class PostsComponent implements OnInit {
+  posts: any;
+
+  constructor(public postsService: PostsService) { }
+
+  ngOnInit() {
+    this.postsService.getPosts().subscribe((p) => {
+      this.posts = p.posts;
+    });
+  }
+}
\ No newline at end of file
diff --git a/src/app/ngx-blog/components/posts/theme.scss b/src/app/ngx-blog/components/posts/theme.scss
new file mode 100644
index 0000000..5c7ea73
--- /dev/null
+++ b/src/app/ngx-blog/components/posts/theme.scss
@@ -0,0 +1,123 @@
+@import url(http://fonts.googleapis.com/css?family=Fira+Mono);
+/*
+ * Hopscotch
+ * by Jan T. Sott
+ * https://github.com/idleberg/Hopscotch
+ *
+ * This work is licensed under the Creative Commons CC0 1.0 Universal License
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #ffffff;
+  font-family: "Fira Mono", Menlo, Monaco, "Lucida Console","Courier New", Courier, monospace;
+  font-size: 16px;
+  line-height: 1.375;
+  direction: ltr;
+  text-align: left;
+  word-spacing: normal;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  white-space: pre;
+  white-space: pre-wrap;
+  word-break: break-all;
+  word-wrap: break-word;
+  background: #322931;
+  color: #b9b5b8;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #797379;
+}
+
+.token.punctuation {
+  color: #b9b5b8;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.null,
+.token.operator,
+.token.boolean,
+.token.number {
+  color: #fd8b19;
+}
+.token.property {
+  color: #fdcc59;
+}
+.token.tag {
+  color: #1290bf;
+}
+.token.string {
+  color: #149b93;
+}
+.token.selector {
+  color: #c85e7c;
+}
+.token.attr-name {
+  color: #fd8b19;
+}
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #149b93;
+}
+
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit {
+  color: #8fc13e;
+}
+
+.token.statement,
+.token.regex,
+.token.atrule {
+  color: #149b93;
+}
+
+.token.placeholder,
+.token.variable {
+  color: #1290bf;
+}
+
+.token.important {
+  color: #dd464c;
+  font-weight: bold;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+pre > code.highlight {
+  outline: .4em solid red;
+  outline-offset: .4em;
+}
diff --git a/src/app/ngx-blog/containers/home/home.component.html b/src/app/ngx-blog/containers/home/home.component.html
new file mode 100644
index 0000000..907b256
--- /dev/null
+++ b/src/app/ngx-blog/containers/home/home.component.html
@@ -0,0 +1,4 @@
+<div>
+  <h2>Home</h2>
+</div>
+<posts></posts>
\ No newline at end of file
diff --git a/src/home/home.component.js b/src/app/ngx-blog/containers/home/home.component.js
similarity index 74%
rename from src/home/home.component.js
rename to src/app/ngx-blog/containers/home/home.component.js
index 8ad0a34..2ccc1fd 100644
--- a/src/home/home.component.js
+++ b/src/app/ngx-blog/containers/home/home.component.js
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { PostsService } from '../services/posts.service';
+import { PostsService } from '../../services/posts.service';
 import { Component } from '@angular/core';
 var HomeComponent = (function () {
     function HomeComponent(postsService, md) {
@@ -15,15 +15,9 @@ var HomeComponent = (function () {
         this.md = md;
     }
     HomeComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        this.postsService.getPosts().subscribe(function (p) {
-            console.log('posts: ', p);
-            _this.posts = p.posts;
-            console.log(_this.posts);
-        });
-    };
-    HomeComponent.prototype.updateOutput = function (mdText) {
-        this.convertedText = this.md.convert(mdText);
+        // this.postsService.getPosts().subscribe((p) => {
+        //  this.posts = p.posts;
+        // });
     };
     return HomeComponent;
 }());
diff --git a/src/app/ngx-blog/containers/home/home.component.js.map b/src/app/ngx-blog/containers/home/home.component.js.map
new file mode 100644
index 0000000..98608b0
--- /dev/null
+++ b/src/app/ngx-blog/containers/home/home.component.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"home.component.js","sourceRoot":"","sources":["home.component.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAU,MAAM,eAAe,CAAC;AAQlD,IAAa,aAAa;IAGxB,uBAAmB,YAA0B,EAAS,EAAgB;QAAnD,iBAAY,GAAZ,YAAY,CAAc;QAAS,OAAE,GAAF,EAAE,CAAc;IAAG,CAAC;IAE1E,gCAAQ,GAAR;QACE,kDAAkD;QAClD,yBAAyB;QACzB,MAAM;IACR,CAAC;IAEH,oBAAC;AAAD,CAAC,AAXD,IAWC;AAXY,aAAa;IALzB,SAAS,CAAC;QACT,QAAQ,EAAE,WAAW;QACrB,WAAW,EAAE,uBAAuB;KACrC,CAAC;qCAKiC,YAAY,EAAa,YAAY;GAH3D,aAAa,CAWzB;SAXY,aAAa"}
\ No newline at end of file
diff --git a/src/home/home.component.ts b/src/app/ngx-blog/containers/home/home.component.ts
similarity index 54%
rename from src/home/home.component.ts
rename to src/app/ngx-blog/containers/home/home.component.ts
index 5a1383a..8730ae1 100644
--- a/src/home/home.component.ts
+++ b/src/app/ngx-blog/containers/home/home.component.ts
@@ -1,4 +1,4 @@
-import { PostsService } from '../services/posts.service';
+import { PostsService } from '../../services/posts.service';
 import { Component, OnInit } from '@angular/core';
 import * as marked from 'marked';
 
@@ -13,15 +13,9 @@ export class HomeComponent implements OnInit {
   constructor(public postsService: PostsService, public md: PostsService) {}
 
   ngOnInit() {
-    this.postsService.getPosts().subscribe((p) => {
-      console.log('posts: ', p);
-     this.posts = p.posts;
-      console.log(this.posts);
-    });
-  }
-
-  updateOutput(mdText: string) {
-    this.convertedText = this.md.convert(mdText);
+    // this.postsService.getPosts().subscribe((p) => {
+    //  this.posts = p.posts;
+    // });
   }
 
 }
diff --git a/src/home/home.module.js b/src/app/ngx-blog/containers/home/home.module.js
similarity index 63%
rename from src/home/home.module.js
rename to src/app/ngx-blog/containers/home/home.module.js
index 5eb604c..126e92f 100644
--- a/src/home/home.module.js
+++ b/src/app/ngx-blog/containers/home/home.module.js
@@ -4,13 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { PostsService } from '../services/posts.service';
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { HomeComponent } from './home.component';
-export var ROUTES = [
-    { path: '', component: HomeComponent }
-];
 var HomeModule = (function () {
     function HomeModule() {
     }
@@ -18,15 +12,9 @@ var HomeModule = (function () {
 }());
 HomeModule = __decorate([
     NgModule({
-        imports: [
-            RouterModule.forChild(ROUTES)
-        ],
-        declarations: [
-            HomeComponent
-        ],
-        providers: [
-            PostsService
-        ]
+        imports: [],
+        declarations: [],
+        providers: []
     })
 ], HomeModule);
 export { HomeModule };
diff --git a/src/app/ngx-blog/containers/home/home.module.js.map b/src/app/ngx-blog/containers/home/home.module.js.map
new file mode 100644
index 0000000..0da4c51
--- /dev/null
+++ b/src/app/ngx-blog/containers/home/home.module.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"home.module.js","sourceRoot":"","sources":["home.module.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAUzC,IAAa,UAAU;IAAvB;IAA0B,CAAC;IAAD,iBAAC;AAAD,CAAC,AAA3B,IAA2B;AAAd,UAAU;IAPtB,QAAQ,CAAC;QACR,OAAO,EAAE,EAAG;QACZ,YAAY,EAAE,EACb;QACD,SAAS,EAAE,EACV;KACF,CAAC;GACW,UAAU,CAAI;SAAd,UAAU"}
\ No newline at end of file
diff --git a/src/app/ngx-blog/containers/home/home.module.ts b/src/app/ngx-blog/containers/home/home.module.ts
new file mode 100644
index 0000000..c211a99
--- /dev/null
+++ b/src/app/ngx-blog/containers/home/home.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+
+
+@NgModule({
+  imports: [ ],
+  declarations: [
+  ],
+  providers: [
+  ]
+})
+export class HomeModule { }
diff --git a/src/app/ngx-blog/models/post.interface.js b/src/app/ngx-blog/models/post.interface.js
new file mode 100644
index 0000000..2164748
--- /dev/null
+++ b/src/app/ngx-blog/models/post.interface.js
@@ -0,0 +1 @@
+//# sourceMappingURL=post.interface.js.map
\ No newline at end of file
diff --git a/src/app/ngx-blog/models/post.interface.js.map b/src/app/ngx-blog/models/post.interface.js.map
new file mode 100644
index 0000000..36e043c
--- /dev/null
+++ b/src/app/ngx-blog/models/post.interface.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"post.interface.js","sourceRoot":"","sources":["post.interface.ts"],"names":[],"mappings":""}
\ No newline at end of file
diff --git a/src/app/ngx-blog/models/post.interface.ts b/src/app/ngx-blog/models/post.interface.ts
new file mode 100644
index 0000000..a52f0a0
--- /dev/null
+++ b/src/app/ngx-blog/models/post.interface.ts
@@ -0,0 +1,5 @@
+interface Post {
+  type: string;
+  title: string;
+  description: string;
+}
diff --git a/src/app/ngx-blog/ngx-blog.module.js b/src/app/ngx-blog/ngx-blog.module.js
new file mode 100644
index 0000000..822be3a
--- /dev/null
+++ b/src/app/ngx-blog/ngx-blog.module.js
@@ -0,0 +1,38 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { NgModule } from '@angular/core';
+import { MarkdownToHtmlModule } from 'ng2-markdown-to-html';
+import { HomeComponent } from './containers/home/home.component';
+import { PostsService } from './services/posts.service';
+import { PostsComponent } from './components/posts/posts.component';
+import { CommonModule } from '@angular/common';
+export var ROUTES = [
+    { path: '', component: HomeComponent }
+];
+var NgxBlogModule = (function () {
+    function NgxBlogModule() {
+    }
+    return NgxBlogModule;
+}());
+NgxBlogModule = __decorate([
+    NgModule({
+        imports: [
+            CommonModule,
+            MarkdownToHtmlModule.forRoot()
+        ],
+        exports: [],
+        declarations: [
+            HomeComponent,
+            PostsComponent
+        ],
+        providers: [
+            PostsService
+        ],
+    })
+], NgxBlogModule);
+export { NgxBlogModule };
+//# sourceMappingURL=ngx-blog.module.js.map
\ No newline at end of file
diff --git a/src/app/ngx-blog/ngx-blog.module.js.map b/src/app/ngx-blog/ngx-blog.module.js.map
new file mode 100644
index 0000000..8460f42
--- /dev/null
+++ b/src/app/ngx-blog/ngx-blog.module.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"ngx-blog.module.js","sourceRoot":"","sources":["ngx-blog.module.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,CAAC,IAAM,MAAM,GAAW;IAC5B,EAAE,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE;CACvC,CAAC;AAgBF,IAAa,aAAa;IAA1B;IAA4B,CAAC;IAAD,oBAAC;AAAD,CAAC,AAA7B,IAA6B;AAAhB,aAAa;IAdzB,QAAQ,CAAC;QACR,OAAO,EAAE;YACP,YAAY;YACZ,oBAAoB,CAAC,OAAO,EAAE;SAC/B;QACD,OAAO,EAAE,EAAE;QACX,YAAY,EAAE;YACZ,aAAa;YACb,cAAc;SACf;QACD,SAAS,EAAE;YACT,YAAY;SACb;KACF,CAAC;GACW,aAAa,CAAG;SAAhB,aAAa"}
\ No newline at end of file
diff --git a/src/app/ngx-blog/ngx-blog.module.ts b/src/app/ngx-blog/ngx-blog.module.ts
new file mode 100644
index 0000000..f48cd63
--- /dev/null
+++ b/src/app/ngx-blog/ngx-blog.module.ts
@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { MarkdownToHtmlModule } from 'ng2-markdown-to-html';
+import { HomeComponent } from './containers/home/home.component';
+import { Routes } from '@angular/router';
+import { PostsService } from './services/posts.service';
+import { PostsComponent } from './components/posts/posts.component';
+import { CommonModule } from '@angular/common';
+
+export const ROUTES: Routes = [
+  { path: '', component: HomeComponent }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MarkdownToHtmlModule.forRoot()
+  ],
+  exports: [],
+  declarations: [
+    HomeComponent,
+    PostsComponent
+  ],
+  providers: [
+    PostsService
+  ],
+})
+export class NgxBlogModule {}
diff --git a/src/services/posts.service.js b/src/app/ngx-blog/services/posts.service.js
similarity index 94%
rename from src/services/posts.service.js
rename to src/app/ngx-blog/services/posts.service.js
index 53053aa..02342bc 100644
--- a/src/services/posts.service.js
+++ b/src/app/ngx-blog/services/posts.service.js
@@ -10,7 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
 import * as marked from 'marked';
-var postsUrl = require('../assets/_posts/posts.json');
+var postsUrl = require('../../../assets/_posts/posts.json');
 var PostsService = (function () {
     function PostsService(http) {
         this.http = http;
diff --git a/src/services/posts.service.js.map b/src/app/ngx-blog/services/posts.service.js.map
similarity index 87%
rename from src/services/posts.service.js.map
rename to src/app/ngx-blog/services/posts.service.js.map
index 2e817a4..db28f42 100644
--- a/src/services/posts.service.js.map
+++ b/src/app/ngx-blog/services/posts.service.js.map
@@ -1 +1 @@
-{"version":3,"file":"posts.service.js","sourceRoot":"","sources":["posts.service.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAC;AAEjC,IAAM,QAAQ,GAAG,OAAO,CAAC,6BAA6B,CAAC,CAAC;AAGxD,IAAa,YAAY;IAGvB,sBAAmB,IAAU;QAAV,SAAI,GAAJ,IAAI,CAAM;QAC3B,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;QAEjB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC;YACjB,GAAG,EAAE,IAAI;YACT,MAAM,EAAE,IAAI;YACZ,SAAS,EAAE,UAAS,IAAS;gBAC3B,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;YAC1D,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAED,8BAAO,GAAP,UAAQ,QAAgB;QACtB,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC;IAED,+BAAQ,GAAR;QACE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,UAAC,GAAa,IAAK,OAAA,GAAG,CAAC,IAAI,EAAE,EAAV,CAAU,CAAC,CAAC;IACpE,CAAC;IACH,mBAAC;AAAD,CAAC,AAtBD,IAsBC;AAtBY,YAAY;IADxB,UAAU,EAAE;qCAIc,IAAI;GAHlB,YAAY,CAsBxB;SAtBY,YAAY"}
\ No newline at end of file
+{"version":3,"file":"posts.service.js","sourceRoot":"","sources":["posts.service.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAC;AAEjC,IAAM,QAAQ,GAAG,OAAO,CAAC,mCAAmC,CAAC,CAAC;AAG9D,IAAa,YAAY;IAGvB,sBAAmB,IAAU;QAAV,SAAI,GAAJ,IAAI,CAAM;QAC3B,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;QAEjB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC;YACjB,GAAG,EAAE,IAAI;YACT,MAAM,EAAE,IAAI;YACZ,SAAS,EAAE,UAAS,IAAS;gBAC3B,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;YAC1D,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAED,8BAAO,GAAP,UAAQ,QAAgB;QACtB,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC;IAED,+BAAQ,GAAR;QACE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,UAAC,GAAa,IAAK,OAAA,GAAG,CAAC,IAAI,EAAE,EAAV,CAAU,CAAC,CAAC;IACpE,CAAC;IACH,mBAAC;AAAD,CAAC,AAtBD,IAsBC;AAtBY,YAAY;IADxB,UAAU,EAAE;qCAIc,IAAI;GAHlB,YAAY,CAsBxB;SAtBY,YAAY"}
\ No newline at end of file
diff --git a/src/services/posts.service.ts b/src/app/ngx-blog/services/posts.service.ts
similarity index 90%
rename from src/services/posts.service.ts
rename to src/app/ngx-blog/services/posts.service.ts
index a17094f..51fa9ba 100644
--- a/src/services/posts.service.ts
+++ b/src/app/ngx-blog/services/posts.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { Http, Response } from '@angular/http';
 import * as marked from 'marked';
 
-const postsUrl = require('../assets/_posts/posts.json');
+const postsUrl = require('../../../assets/_posts/posts.json');
 
 @Injectable()
 export class PostsService {
diff --git a/src/assets/_posts/2017-08-09-test-post.md b/src/assets/_posts/2017-08-09-test-post.md
index e9fba83..c735f8a 100644
--- a/src/assets/_posts/2017-08-09-test-post.md
+++ b/src/assets/_posts/2017-08-09-test-post.md
@@ -1 +1,6 @@
-August 09, 2017 Test Post
\ No newline at end of file
+---
+title: August 09, 2017 Test Post
+description: just another test post
+---
+
+Yet another test post but with yaml front-matter
\ No newline at end of file
diff --git a/src/assets/_posts/2017-08-10-test-post.md b/src/assets/_posts/2017-08-10-test-post.md
index 8487317..22e2ca0 100644
--- a/src/assets/_posts/2017-08-10-test-post.md
+++ b/src/assets/_posts/2017-08-10-test-post.md
@@ -1 +1,4 @@
-August 10th, 2017 Test Post
\ No newline at end of file
+---
+title: August 10th, 2017 Test Post
+description: 
+---
\ No newline at end of file
diff --git a/src/assets/_posts/2017-08-11-test-post.md b/src/assets/_posts/2017-08-11-test-post.md
index a07d6f4..ab7d5ba 100644
--- a/src/assets/_posts/2017-08-11-test-post.md
+++ b/src/assets/_posts/2017-08-11-test-post.md
@@ -1 +1,22 @@
-Aug 21, 2017 Test Post
\ No newline at end of file
+---
+title: August 11, 2017 Test Post
+description: 
+---
+
+---
+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); // 
+```
\ No newline at end of file
diff --git a/src/assets/_posts/posts.json b/src/assets/_posts/posts.json
index 94d9cfc..bde06cb 100644
--- a/src/assets/_posts/posts.json
+++ b/src/assets/_posts/posts.json
@@ -1 +1 @@
-{ "posts": [{"title":"src/assets/_posts/2017-08-09-test-post.md"},{"title":"src/assets/_posts/2017-08-10-test-post.md"},{"title":"src/assets/_posts/2017-08-11-test-post.md"}] }
\ No newline at end of file
+{ "posts": [{"file":"src/assets/_posts/2017-08-09-test-post.md","title":"August 09, 2017 Test Post","description":"just another test post"},{"file":"src/assets/_posts/2017-08-10-test-post.md","title":"August 10th, 2017 Test Post","description":null},{"file":"src/assets/_posts/2017-08-11-test-post.md","title":"August 11, 2017 Test Post","description":null}] }
\ No newline at end of file
diff --git a/src/home/home.component.html b/src/home/home.component.html
deleted file mode 100644
index 7a69212..0000000
--- a/src/home/home.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div>
-  <h2>Home</h2>
-</div>
-<section>
-  <ng-container *ngFor='let post of posts'>
-    <article markdown-to-html [src]="post.title" class="posts-card" ></article>
-  </ng-container>
-</section>
\ No newline at end of file
diff --git a/src/home/home.component.js.map b/src/home/home.component.js.map
deleted file mode 100644
index 2ab856f..0000000
--- a/src/home/home.component.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"home.component.js","sourceRoot":"","sources":["home.component.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAU,MAAM,eAAe,CAAC;AAQlD,IAAa,aAAa;IAGxB,uBAAmB,YAA0B,EAAS,EAAgB;QAAnD,iBAAY,GAAZ,YAAY,CAAc;QAAS,OAAE,GAAF,EAAE,CAAc;IAAG,CAAC;IAE1E,gCAAQ,GAAR;QAAA,iBAMC;QALC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,UAAC,CAAC;YACvC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;YAC3B,KAAI,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;YACpB,OAAO,CAAC,GAAG,CAAC,KAAI,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oCAAY,GAAZ,UAAa,MAAc;QACzB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC/C,CAAC;IAEH,oBAAC;AAAD,CAAC,AAjBD,IAiBC;AAjBY,aAAa;IALzB,SAAS,CAAC;QACT,QAAQ,EAAE,WAAW;QACrB,WAAW,EAAE,uBAAuB;KACrC,CAAC;qCAKiC,YAAY,EAAa,YAAY;GAH3D,aAAa,CAiBzB;SAjBY,aAAa"}
\ No newline at end of file
diff --git a/src/home/home.module.js.map b/src/home/home.module.js.map
deleted file mode 100644
index 013e075..0000000
--- a/src/home/home.module.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"home.module.js","sourceRoot":"","sources":["home.module.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAU,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,CAAC,IAAM,MAAM,GAAW;IAC5B,EAAE,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE;CACvC,CAAC;AAaF,IAAa,UAAU;IAAvB;IAA0B,CAAC;IAAD,iBAAC;AAAD,CAAC,AAA3B,IAA2B;AAAd,UAAU;IAXtB,QAAQ,CAAC;QACR,OAAO,EAAE;YACP,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC;SAC9B;QACD,YAAY,EAAE;YACZ,aAAa;SACd;QACD,SAAS,EAAE;YACT,YAAY;SACb;KACF,CAAC;GACW,UAAU,CAAI;SAAd,UAAU"}
\ No newline at end of file
diff --git a/src/home/home.module.ts b/src/home/home.module.ts
deleted file mode 100644
index 273030d..0000000
--- a/src/home/home.module.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { PostsService } from '../services/posts.service';
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { HomeComponent } from './home.component';
-
-export const ROUTES: Routes = [
-  { path: '', component: HomeComponent }
-];
-
-@NgModule({
-  imports: [
-    RouterModule.forChild(ROUTES)
-  ],
-  declarations: [
-    HomeComponent
-  ],
-  providers: [
-    PostsService
-  ]
-})
-export class HomeModule { }
diff --git a/src/index.html b/src/index.html
index afe52a3..41b80cb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,13 +7,10 @@
   <meta name='viewport' content='width=device-width, initial-scale=1.0'>
   <meta http-equiv='X-UA-Compatible' content='ie=edge'>
   <title>NGX Blog</title>
-  <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/xt256.min.css'>
 </head>
 
 <body>
-  <h2>ngx-blog</h2>
   <ngxb-app></ngxb-app>
-  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.js'></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/vendor.ts b/src/vendor.ts
index 3177ef3..7ae0e1a 100644
--- a/src/vendor.ts
+++ b/src/vendor.ts
@@ -15,4 +15,3 @@ import 'rxjs';
 import * as marked from 'marked';
 
 import 'reflect-metadata';
-
diff --git a/yarn.lock b/yarn.lock
index ff10207..2aba529 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2754,6 +2754,12 @@ fresh@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
 
+front-matter@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/front-matter/-/front-matter-2.1.2.tgz#f75983b9f2f413be658c93dfd7bd8ce4078f5cdb"
+  dependencies:
+    js-yaml "^3.4.6"
+
 fs-access@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/fs-access/-/fs-access-1.0.1.tgz#d6a87f262271cefebec30c553407fb995da8777a"
@@ -3684,7 +3690,7 @@ js-tokens@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
-js-yaml@^3.4.3, js-yaml@~3.7.0:
+js-yaml@^3.4.3, js-yaml@^3.4.6, js-yaml@~3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
   dependencies: