Added post to main page + posts page

8 files changed, 448 insertions, 15 deletions

diff --git a/package-lock.json b/package-lock.json
index 49d7d01..18f8d9f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@octokit/rest": "^18.12.0",
         "body-parser": "^1.19.2",
+        "cheerio": "^1.0.0-rc.10",
         "cors": "^2.8.5",
         "dotenv": "^16.0.0",
         "ejs": "^3.1.6",
@@ -819,6 +820,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
+    },
     "node_modules/boxen": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz",
@@ -966,6 +972,41 @@
         "node": ">=8"
       }
     },
+    "node_modules/cheerio": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.10.tgz",
+      "integrity": "sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==",
+      "dependencies": {
+        "cheerio-select": "^1.5.0",
+        "dom-serializer": "^1.3.2",
+        "domhandler": "^4.2.0",
+        "htmlparser2": "^6.1.0",
+        "parse5": "^6.0.1",
+        "parse5-htmlparser2-tree-adapter": "^6.0.1",
+        "tslib": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-1.5.0.tgz",
+      "integrity": "sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==",
+      "dependencies": {
+        "css-select": "^4.1.3",
+        "css-what": "^5.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0",
+        "domutils": "^2.7.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -1136,6 +1177,32 @@
         "node": ">=8"
       }
     },
+    "node_modules/css-select": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
+      "integrity": "sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^5.1.0",
+        "domhandler": "^4.3.0",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
+      "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/data-uri-to-buffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz",
@@ -1214,6 +1281,57 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/dot-prop": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@@ -1308,6 +1426,14 @@
       "integrity": "sha1-6WQhkyWiHQX0RGai9obtbOX13R0=",
       "optional": true
     },
+    "node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -1836,6 +1962,24 @@
       "integrity": "sha512-Gjzu0Xn7IagXVkSu9cSFuK1fqzwtLwFhNhVL8IFJijRNMgUttFbBSIAzKuSIrsFMO1+g1RlsoN49zPIbwPDMGQ==",
       "optional": true
     },
+    "node_modules/htmlparser2": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
+      }
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
@@ -2714,6 +2858,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
+      "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -2798,6 +2953,19 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
+      "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
+      "dependencies": {
+        "parse5": "^6.0.1"
+      }
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -4423,6 +4591,11 @@
         "type-is": "~1.6.18"
       }
     },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
+    },
     "boxen": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz",
@@ -4532,6 +4705,32 @@
         }
       }
     },
+    "cheerio": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.10.tgz",
+      "integrity": "sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==",
+      "requires": {
+        "cheerio-select": "^1.5.0",
+        "dom-serializer": "^1.3.2",
+        "domhandler": "^4.2.0",
+        "htmlparser2": "^6.1.0",
+        "parse5": "^6.0.1",
+        "parse5-htmlparser2-tree-adapter": "^6.0.1",
+        "tslib": "^2.2.0"
+      }
+    },
+    "cheerio-select": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-1.5.0.tgz",
+      "integrity": "sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==",
+      "requires": {
+        "css-select": "^4.1.3",
+        "css-what": "^5.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0",
+        "domutils": "^2.7.0"
+      }
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -4661,6 +4860,23 @@
       "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
       "devOptional": true
     },
+    "css-select": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
+      "integrity": "sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==",
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-what": "^5.1.0",
+        "domhandler": "^4.3.0",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      }
+    },
+    "css-what": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
+      "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw=="
+    },
     "data-uri-to-buffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz",
@@ -4724,6 +4940,39 @@
         "streamsearch": "^1.1.0"
       }
     },
+    "dom-serializer": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      }
+    },
+    "domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
+    },
+    "domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "requires": {
+        "domelementtype": "^2.2.0"
+      }
+    },
+    "domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "requires": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      }
+    },
     "dot-prop": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@@ -4803,6 +5052,11 @@
       "integrity": "sha1-6WQhkyWiHQX0RGai9obtbOX13R0=",
       "optional": true
     },
+    "entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -5195,6 +5449,17 @@
       "integrity": "sha512-Gjzu0Xn7IagXVkSu9cSFuK1fqzwtLwFhNhVL8IFJijRNMgUttFbBSIAzKuSIrsFMO1+g1RlsoN49zPIbwPDMGQ==",
       "optional": true
     },
+    "htmlparser2": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
+      }
+    },
     "http-cache-semantics": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
@@ -5874,6 +6139,14 @@
       "integrity": "sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==",
       "dev": true
     },
+    "nth-check": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
+      "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
+      "requires": {
+        "boolbase": "^1.0.0"
+      }
+    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5936,6 +6209,19 @@
         }
       }
     },
+    "parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+    },
+    "parse5-htmlparser2-tree-adapter": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
+      "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
+      "requires": {
+        "parse5": "^6.0.1"
+      }
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
diff --git a/package.json b/package.json
index 65bb419..d18c47e 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "@octokit/rest": "^18.12.0",
     "body-parser": "^1.19.2",
+    "cheerio": "^1.0.0-rc.10",
     "cors": "^2.8.5",
     "dotenv": "^16.0.0",
     "ejs": "^3.1.6",
diff --git a/public/index.html b/public/index.html
index 4b46aa1..5e0041a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -35,6 +35,7 @@
     </div>
     <!-- Hero Unit -->
     <div class="container margin-top-375" style="margin-top: 3.75rem;">
+        <div id="hero-unit" class="hero-unit hidden"></div>
         <h1>Hello, world!</h1>
         <p>I'm Bobby. Welcome to my personal website. Unfortunately, this website is currently under maintenance and I
             am working on a completely new look. Please come back soon...</p>
@@ -43,6 +44,30 @@
     <script src="/static/assets/js/bootstrap-386.js"></script>
     <script src="/static/assets/js/bootstrap-transition.js"></script>
     <script src="/static/assets/js/bootstrap-collapse.js"></script>
+    <script>
+        $(document).ready(function() {
+            $.ajax({
+                url: '/api/blog/posts',
+                type: 'GET',
+                success: (data) => {
+                    const posts = document.getElementById('posts');
+                    console.log(data);
+                    data.forEach((post, index) => {
+                        if(index == 0) {
+                            const heroUnit = document.getElementById('hero-unit');
+                            heroUnit.classList.remove('hidden');
+                            heroUnit.innerHTML = `<h3>${post.title}</h3>
+                            <p>${post.shortText}</p>
+                            <p><a class="btn btn-primary btn-large" href="/posts/${post.slug}">Continue Reading</a></p>`;
+                        }
+                    })
+                }, 
+                error: (err) => {
+                    console.log(err);
+                }
+            });
+        });
+    </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/views/createPost.html b/public/views/createPost.html
index db6687e..fddf13c 100644
--- a/public/views/createPost.html
+++ b/public/views/createPost.html
@@ -104,7 +104,8 @@
                             </div>
                             <div class="control-group">
                                 <div class="controls">
-                                    <button type="submit" class="btn btn-primary" id="publishPost">Create New Post</button>
+                                    <button type="submit" class="btn btn-primary" id="publishPost">Create New
+                                        Post</button>
                                 </div>
                             </div>
                         </div>
@@ -155,9 +156,10 @@
         });
         $(document).on('click', '#publishPost', () => {
             document.getElementById('error').classList.add('hidden');
-            const htmlRender = $('#renderPreview').html();
+            const content = $('#content').val();
             const title = $('#title').val();
             const publishDate = $('#publishDate').val();
+            const slug = title.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g, '');
             const tags = $('#tags').val();
             if (title === '' || publishDate === '') {
                 document.getElementById('error').classList.remove('hidden');
@@ -168,7 +170,9 @@
                     title: title,
                     publishDate: publishDate,
                     tags: tags,
-                    content: htmlRender
+                    content: marked.parse(content),
+                    shortText: marked.parse(content.substring(0, 120) + "..."),
+                    slug: slug
                 };
                 $.ajax({
                     url: '/api/blog/new',
diff --git a/public/views/dashboard.html b/public/views/dashboard.html
index 6556fd9..8692bb4 100644
--- a/public/views/dashboard.html
+++ b/public/views/dashboard.html
@@ -72,7 +72,7 @@
                         const title = document.createElement('h3');
                         title.innerHTML = post.title;
                         const content = document.createElement('p');
-                        content.innerHTML = post.content.substring(0, 100) + '...';
+                        content.innerHTML = post.shortText;
                         const date = document.createElement('p');
                         date.innerHTML = post.publishDate;
                         const tags = document.createElement('p');
diff --git a/public/views/post.html b/public/views/post.html
new file mode 100644
index 0000000..c0897f6
--- /dev/null
+++ b/public/views/post.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>That Computer Scientist</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link href="/static/assets/css/bootstrap.css" rel="stylesheet">
+    <link href="/static/assets/css/bootstrap-responsive.css" rel="stylesheet">
+    <!-- <link href="/static/assets/css/docs.css" rel="stylesheet"> -->
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/base16/seti-ui.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">
+    <link href="/static/assets/css/custom.css" rel="stylesheet">
+    <link rel="shortcut icon" href="/static/images/favicon.png">
+    <style type="text/css">
+        input,
+        textarea {
+            width: 100%;
+        }
+
+        code,
+        pre {
+            font-family: 'Fira Code', monospace !important;
+            font-size: 14px;
+            background-color: #1c1c1c;
+            color: #D4D4D5;
+        }
+
+        pre {
+            padding: 10px;
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Navbar  -->
+    <div class="navbar navbar-inverse navbar-fixed-top">
+        <div class="navbar-inner">
+            <div class="container">
+                <button type="button" class="btn btn-navbar" data-toggle="collapse"
+                    data-target=".nav-collapse"></button>
+                <a class="brand" href="./">That Computer Scientist</a>
+                <div class="nav-collapse collapse">
+                    <ul class="nav">
+                        <li class="active"><a href="./">Home</a></li>
+                        <li><a href="/about">About</a></li>
+                        <li><a href="/repos">Repositories</a></li>
+                        <li><a href="https://github.com/luciferreeves" target="_blank">Github</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Hero Unit -->
+    <div class="container margin-top-375" style="margin-top: 3.75rem;">
+        <h1 id="title"></h1>
+        <br>
+        <hr>
+        <br>
+        <h4>Published On: <span id="publishDate"></span></h4>
+        <br>
+        <h5>Tags: <span id="tags"></span></h5>
+        <br>
+        <div id="content"></div>
+    </div>
+    <script src="/static/assets/js/jquery.js"></script>
+    <!-- <script src="/static/assets/js/bootstrap-386.js"></script> -->
+    <script src="/static/assets/js/bootstrap-transition.js"></script>
+    <script src="/static/assets/js/bootstrap-collapse.js"></script>
+    <script src="/static/assets/js/marked.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"
+        integrity="sha384-0fdwu/T/EQMsQlrHCCHoH10pkPLlKA1jL5dFyUOvB3lfeT2540/2g6YgSi2BL14p"
+        crossorigin="anonymous"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
+        integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR"
+        crossorigin="anonymous"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/routes/index.js b/routes/index.js
index 8f09e24..0db91d6 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -1,6 +1,9 @@
 // Import express router
 const express = require("express");
 const router = express.Router();
+const firebase = require("../firebase");
+const fs = require("fs");
+const cheerio = require("cheerio");
 // Import the routes
 const admin = require("./admin");
 const api = require("./api");
@@ -21,5 +24,35 @@ router.get("/repos", (req, res) => {
   res.render("repositories.html");
 });
 
+router.get("/posts/:id", function (req, res) {
+  const id = req.params.id;
+  // get single document where slug === id
+  const store = firebase.firestore();
+  let query = store.collection("posts");
+  query.select("tags", "title", "content", "publishDate");
+  query = query.where("slug", "==", id);
+  var html = fs.readFileSync(__dirname + "/../public/views/post.html", "utf8");
+  var $ = cheerio.load(html);
+  query.get().then(function (querySnapshot) {
+    querySnapshot.forEach(function (doc) {
+      const post = doc.data();
+      const changedTitle =
+        '<script>document.title = "That Computer Scientist | ' +
+        post.title +
+        '";</script>';
+      $("head").append(changedTitle);
+      $("#title").text(post.title);
+      $("#content").html(post.content);
+      $("#publishDate").text(post.publishDate);
+      post.tags.forEach((tag) => {
+        $("#tags").append(
+          `<a href="/posts/tag/${tag.trim().replace(/ /g, '-')}" class="label label-info" style="margin-right: 10px;">${tag.trim()}</a>`
+        );
+      });
+      res.send($.html());
+    });
+  });
+});
+
 // Export the routes
 module.exports = router;
diff --git a/routes/posts.js b/routes/posts.js
index 3ae3a3c..7e68106 100644
--- a/routes/posts.js
+++ b/routes/posts.js
@@ -6,21 +6,18 @@ router.get("/posts", (req, res) => {
   const store = firebase.firestore();
   const posts = [];
   let query = store.collection("posts");
-
-  query
-    .get()
-    .then((querySnapshot) => {
-      querySnapshot.forEach((documentSnapshot) => {
-        posts.push(documentSnapshot.data());
-      });
-    })
-    .then(() => {
-      res.json(posts);
+  query = query.select("slug", "tags", "title", "shortText", "publishDate");
+  query.get().then(function (querySnapshot) {
+    querySnapshot.forEach(function (doc) {
+      posts.push(doc.data());
     });
+  }).then(() => {
+    res.json(posts);
+  });
 });
 
 router.post("/new", (req, res) => {
-  const { title, content, tags, publishDate } = req.body;
+  const { title, content, tags, publishDate, shortText, slug } = req.body;
   const store = firebase.firestore();
   const id = store.collection("posts").doc().id;
   const post = {
@@ -29,6 +26,8 @@ router.post("/new", (req, res) => {
     content,
     tags: String(tags).split(",").length > 0 ? String(tags).split(",") : [],
     publishDate,
+    shortText,
+    slug,
   };
   let query = store.collection("posts");
   query