Server side rendering of index page

2 files changed, 45 insertions, 3 deletions

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");
 });