Server side rendering of index page

3 files changed, 45 insertions, 27 deletions

diff --git a/public/index.html b/public/views/index.html
index 5e0041a..ad3b4d8 100644
--- a/public/index.html
+++ b/public/views/index.html
@@ -44,30 +44,6 @@
     <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/routes/home.js b/routes/home.js
new file mode 100644
index 0000000..98309b6
--- /dev/null
+++ b/routes/home.js
@@ -0,0 +1,40 @@
+const express = require("express");
+const router = express.Router();
+const cheerio = require("cheerio");
+const firebase = require("../firebase");
+const fs = require("fs");
+
+router.get("/", (req, res) => {
+  const store = firebase.firestore();
+  const posts = [];
+  let query = store.collection("posts");
+  query = query.select("slug", "tags", "title", "shortText", "publishDate");
+  query
+    .get()
+    .then(function (querySnapshot) {
+      querySnapshot.forEach(function (doc) {
+        posts.push(doc.data());
+      });
+    })
+    .then(() => {
+      var html = fs.readFileSync(
+        __dirname + "/../public/views/index.html",
+        "utf8"
+      );
+      var $ = cheerio.load(html);
+      $("#posts").html("");
+      posts.forEach((post, index) => {
+        if (index === 0) {
+            $('#hero-unit').removeClass('hidden');
+            $('#hero-unit').html(`
+                <h1>${post.title}</h1>
+                <p>${post.shortText}</p>
+                <p><a class="btn btn-primary btn-lg" href="/posts/${post.slug}">Read More</a></p>
+            `);
+        }
+      });
+      res.send($.html());
+    });
+});
+
+module.exports = router;
diff --git a/routes/index.js b/routes/index.js
index 37799b1..659d50d 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -1,21 +1,23 @@
 // Import express router
 const express = require("express");
 const router = express.Router();
+
 // Import the routes
 const admin = require("./admin");
 const repositories = require("./repositories");
 const blog = require("./blog");
 const posts = require("./posts");
+const home = require("./home");
+
 // Set the routes
 router.use("/admin", admin);
 router.use("/api/blog", blog);
 router.use("/", repositories);
 router.use("/", posts);
+router.use("/", home);
 
 // Create the routes
-router.get("/", (req, res) => {
-  res.render("index.html");
-});
+
 router.get("/about", (req, res) => {
   res.render("about.html");
 });