10secondsofcode
diff --git a/‎docs/SUMMARY.md‎
100644100755 b/‎docs/SUMMARY.md‎
100644100755
diff --git a/‎docs/chapter-1/README.md‎
100644100755 b/‎docs/chapter-1/README.md‎
100644100755
diff --git a/‎docs/chapter-1/something.md‎
100644100755 b/‎docs/chapter-1/something.md‎
100644100755
diff --git a/‎docs/chapter-2/README.md‎
100644100755 b/‎docs/chapter-2/README.md‎
100644100755
diff --git a/‎docs/chapter-2/something.md‎
100644100755 b/‎docs/chapter-2/something.md‎
100644100755
diff --git a/‎docs/chapter-3/README.md‎
100644100755 b/‎docs/chapter-3/README.md‎
100644100755
diff --git a/‎docs/chapter-3/something.md‎
100644100755 b/‎docs/chapter-3/something.md‎
100644100755
diff --git a/‎package.json‎
Lines changed: 6 additions & 1 deletion b/‎package.json‎
Lines changed: 6 additions & 1 deletion
diff --git a/‎src/App.js‎
Lines changed: 16 additions & 1 deletion b/‎src/App.js‎
Lines changed: 16 additions & 1 deletion
diff --git a/‎webpack.config.js‎
Lines changed: 16 additions & 0 deletions b/‎webpack.config.js‎
Lines changed: 16 additions & 0 deletions
@@ -8,7 +8,7 @@
     "start": "webpack-dev-server --mode development ",
     "dev": "webpack --mode development --output ./dist/leaf.js",
     "build": "webpack --mode production --output ./dist/leaf.js",
-    "docs-build":"gitbook build docs/ dist/docs",
+    "docs-build": "gitbook build docs/ dist/docs",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist"
   },
@@ -34,9 +34,11 @@
     "babel-loader": "^8.0.2",
     "css-loader": "^1.0.0",
     "docpress": "0.7.4",
+    "file-loader": "^3.0.1",
     "gh-pages": "^2.0.1",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
+    "json-loader": "^0.5.7",
     "mini-css-extract-plugin": "^0.4.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
@@ -46,7 +48,10 @@
   },
   "dependencies": {
     "bootstrap": "^4.1.3",
+    "front-matter-loader": "^0.2.0",
     "jquery": "^3.3.1",
+    "markdown-loader": "^4.0.0",
+    "react-markdown": "^4.0.6",
     "reactstrap": "^6.5.0"
   },
   "docpress": {
 
@@ -4,17 +4,30 @@ import { Button } from 'reactstrap';
 import Navigation from './Components/Navigation';
 import Main from './Components/Main';
 import Herocontent from './Components/Herocontent';
+import ReactMarkdown from 'react-markdown';
+import AppMarkdown from '../README.md';
 
 class App extends React.Component {
   constructor(props){
     super(props);
     this.state = {
-      count : 0
+      count : 5,
+      markdown: ''
     }
     this.increment = this.increment.bind(this);
     this.decrement = this.decrement.bind(this);
   }
 
+  componentDidMount() {
+    fetch('../README.md')
+    .then((resp) => resp.text()) 
+    .then(data => {
+      this.setState(
+        { markdown: data }
+      );
+    });
+  }
+
   increment() {
     this.setState(
       {count : this.state.count+1}
@@ -28,10 +41,12 @@ class App extends React.Component {
   }
 
   render() {  
+    const { markdown } = this.state;
     return (
       <div>
         <Navigation />
         <Herocontent />
+        <ReactMarkdown source={markdown} />
         <Main />
       </div>
     );
 
@@ -1,5 +1,6 @@
 const HtmlWebPackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
 module.exports = {
   module: {
     rules: [
@@ -19,6 +20,21 @@ module.exports = {
           }
         ]
       },
+      {
+        test: /\.md$/,
+        use: [
+            {
+                loader: "html-loader"
+            },
+            {
+                loader: "markdown-loader",
+                options: {
+                  pedantic: true,
+                  renderer
+              }
+            }
+        ]
+      },
       {
         test: /\.css$/,
         use: [MiniCssExtractPlugin.loader, "css-loader"]