add single post pages, add blog title

data/posts.json

@@ -1,3 +1,10 @@
 {
-    "1467390356291": "This is my very first blog post!"
-}
+  "1467464845605": {
+    "blogTitle": "HIPSTER 1",
+    "blogpost": "DIY knausgaard literally listicle chartreuse sriracha retro schlitz yuccie, venmo cronut cred thundercats. Bushwick seitan lomo viral. Chambray waistcoat echo park meditation brooklyn pork belly, asymmetrical ennui franzen. Hammock listicle man bun, shoreditch pinterest kitsch flexitarian before they sold out green juice semiotics put a bird on it keffiyeh neutra taxidermy cold-pressed. Kickstarter leggings sartorial humblebrag knausgaard. Everyday carry chicharrones meggings asymmetrical, echo park cronut yuccie viral shoreditch biodiesel affogato authentic. Irony quinoa single-origin coffee disrupt asymmetrical +1 gochujang, vinyl gastropub direct trade.\r\n\r\nTruffaut heirloom venmo 3 wolf moon. Cronut meditation tote bag pabst, disrupt slow-carb selvage locavore. Yuccie church-key post-ironic roof party cold-pressed mixtape. Cornhole skateboard portland vinyl mixtape, heirloom mustache brooklyn intelligentsia. Try-hard intelligentsia marfa, pork belly microdosing man braid farm-to-table knausgaard tote bag semiotics yr selfies green juice raw denim. Pop-up waistcoat hella plaid artisan twee microdosing forage, flexitarian post-ironic. Shabby chic taxidermy brunch post-ironic lumbersexual hammock, yuccie retro ennui."
+  },
+  "1467465520102": {
+    "blogTitle": "TITLE",
+    "blogpost": "TESST"
+  }
+}

package.json

@@ -18,6 +18,7 @@
   "homepage": "https://github.com/elischutze/express-workshop#readme",
   "dependencies": {
     "body-parser": "^1.15.2",
-    "express": "^4.14.0"
+    "express": "^4.14.0",
+    "mustache-express": "^1.2.2"
   }
 }

public/index.html

@@ -16,6 +16,7 @@ <h1 class="title">Node Girls</h1>
             <div class="entry-container">
                 <h3>Create a blog post</h3>
                 <form action="/create-post" method="POST">
+                    <input type="text" name="blogTitle" placeholder="Enter Post Title"><br>
                     <textarea name="blogpost" rows="10" cols="14">
 
                     </textarea>

public/main.css

@@ -3,9 +3,9 @@
 ********************/
 
 body, html, div, label, p, h1, h2, h3, h4, h5, h6, form, a, input, textarea {
-	margin: 0; 
-	padding: 0; 
-	border: 0; 
+	margin: 0;
+	padding: 0;
+	border: 0;
 	outline: none;
 }
 
@@ -53,7 +53,7 @@ main {
 header {
 	background: #FF0040;
 	background: -webkit-linear-gradient(#F5A9BC, #FF0040);
-	background: -o-linear-gradient(#F5A9BC, #FF0040); 
+	background: -o-linear-gradient(#F5A9BC, #FF0040);
 	background: -moz-linear-gradient(#F5A9BC, #FF0040);
 	background: linear-gradient(#F5A9BC, #FF0040);
 }
@@ -85,7 +85,7 @@ label {
 	width: 80%;
 }
 
-textarea {
+textarea, input {
 	width: 96%;
 	border-radius: 3px;
 	border: 1px solid #848484;
@@ -116,12 +116,17 @@ hr {
 	background: #BDBDBD;
 }
 
+h3 {
+    display: inline-block;
+}
+
 .thumbnail {
 	float: left;
 	width: 50px;
 	height: auto;
 	margin-left: 3px;
 	margin-top: 3px;
+    display: block;
 }
 
 .post {
@@ -140,8 +145,35 @@ hr {
 	margin: 5px 10px;
 }
 
+.post a:hover, .post h3:hover {
+    color: #A5DF00;
+}
+
 @media (min-width: 600px) {
 	 .post {
 		width: 28.9%;
 	}
-}
+}
+/*******************
+*  Single Posts
+********************/
+.single-post h1 {
+    text-align: center;
+}
+
+.single-post p {
+    padding: 10px;
+    font-weight: lighter;
+    text-align: justify;
+
+}
+
+.single-post a {
+    display: block;
+    padding: 15px;
+    color: #A5DF00;
+    font-weight: bold;
+    text-decoration: underline;
+
+
+}

public/script.js

@@ -7,18 +7,26 @@ $(document).ready(function() {
             for (var blogPost in data) {
                 var postDiv         = document.createElement('div');
                 var postText        = document.createElement('p');
+                var postLink = document.createElement('a');
+                var postTitle        = document.createElement('h3');
                 var thumbnail       = document.createElement('img');
                 var postContainer   = document.getElementsByClassName('post-container')[0];
 
                 thumbnail.src = "./img/logo2.png";
                 thumbnail.className = "thumbnail";
-                postText.innerHTML = data[blogPost];
+                postLink.setAttribute(
+                    "href", '/posts/'+blogPost
+                );
+                postTitle.innerHTML = data[blogPost].blogTitle;
+                postText.innerHTML = data[blogPost].blogpost ;
                 postDiv.className = "post";
 
                 postDiv.appendChild(thumbnail);
+                postDiv.appendChild(postLink);
+                postLink.appendChild(postTitle);
                 postDiv.appendChild(postText);
                 postContainer.appendChild(postDiv);
-                
+
             }
         },
         error: function(error){

server.js

@@ -1,5 +1,10 @@
 var express = require('express');
 var bodyParser = require('body-parser');
+var fs = require('fs');
+var mustacheExpress = require('mustache-express');
+
+
+
 
 // To initialise our server, we just need to call the express() function. This will create an Express application for us to work with.
 var app = express()
@@ -12,12 +17,48 @@ app.use(bodyParser.urlencoded({ extended: true }));
 
 app.use(express.static("public"));
 
+// Register '.mustache' extension with The Mustache Express
+app.engine('mustache', mustacheExpress());
+
+app.set('view engine', 'mustache');
+app.set('views', __dirname + '/views');
 
 app.post("/create-post",function(req,res){
-    console.log("create-post");
-    console.log(req.body);
+    res.redirect('/');
+    var myFile=__dirname+'/data/posts.json';
+    fs.readFile(myFile,function(error,file){
+        var parsedFile = JSON.parse(file);
+
+        parsedFile[Date.now()] = req.body;
+        // console.log(parsedFile);
+        var JSONText = JSON.stringify(parsedFile);
+        fs.writeFile(myFile,JSONText,function(error){
+            // console.log("imhere");
+
+
+        })
+
+    });
+
+});
+
+app.get('/get-posts', function(req,res){
+    res.sendFile(__dirname+'/data/posts.json');
 });
 
+app.get('/posts/:postId', function(req,res){
+    // var blogpost;
+    fs.readFile(__dirname+'/data/posts.json',function(error,file){
+        var fileObj = JSON.parse(file);
+        var key = req.params.postId
+        var blogpost = fileObj[key.toString()];
+        var title = JSON.stringify(blogpost.blogTitle).split("\"").join("");
+
+        res.render('post',{ title: title, body: blogpost.blogpost});
+    });
+
+
+});
 
 app.listen(3000, function(){
     console.log("Server is listening on Port 3000! Ready to accept requests.." );

views/post.mustache

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Blog Post</title>
+        <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700' rel='stylesheet' type='text/css'>
+        <link href="../main.css" rel="stylesheet">
+        <script>
+
+        window.onload = function(e){
+            var post = document.getElementById("blog").innerHTML;
+            console.log(post.substr(0,10));
+           post = post.split("\"").join("").split("\n").join("<br/>");
+           document.getElementById("blog").innerHTML = post;
+        console.log("script");
+    };
+
+        </script>
+    </head>
+  </head>
+  <body  class="single-post">
+  <header>
+            <img class="main-logo" src="../img/logo1.png">
+            <h1 class="title">Node Girls</h1>
+        </header>
+
+        <a href="../"><- BACK</a>
+  <div>
+
+
+    <h1>{{title}}</h1>
+    <div >
+    <p id="blog">
+      {{ body }}
+      </p>
+    </div>
+    </div>
+  </body>
+</html>