Server side rendering of repos page

6 files changed, 293 insertions, 289 deletions

diff --git a/public/views/repositories.html b/public/views/repositories.html
index 56ac9ed..350edd4 100644
--- a/public/views/repositories.html
+++ b/public/views/repositories.html
@@ -71,7 +71,6 @@
         </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
-    <script src="/static/assets/js/pages/repositories.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>
diff --git a/routes/api.js b/routes/api.js
deleted file mode 100644
index 4b72d05..0000000
--- a/routes/api.js
+++ /dev/null
@@ -1,59 +0,0 @@
-const express = require("express");
-const router = express.Router();
-const { Github } = require("../api/github");
-const github = new Github("luciferreeves");
-
-router.get("/repos", (req, res) => {
-  const page = req.query.page || 1;
-  github.getRepos(page).then((repos) => {
-    github.getRepos(parseInt(page) + 1).then((repos2) => {
-      const count = repos.length;
-      const count2 = repos2.length;
-      const repositories = [];
-      repos.forEach((repo) => {
-        repositories.push({
-          name: repo.name,
-          description: repo.description,
-          url: repo.html_url,
-          language: repo.language,
-          stars: repo.stargazers_count,
-          forks: repo.forks_count,
-          issues: repo.open_issues_count,
-          license: repo.license ? repo.license.name : null,
-          updated: repo.updated_at,
-          created: repo.created_at,
-        });
-      });
-      res.json({
-        count: count,
-        countNext: count2,
-        repositories: repositories,
-      });
-    });
-  });
-});
-
-router.get("/user", (req, res) => {
-  github.getUserDetails().then((user) => {
-    github.getOneYearUserContributions().then((contributions) => {
-      res.json({
-        user: {
-          login: user.login,
-          name: user.name,
-          avatar: user.avatar_url,
-          location: user.location,
-          bio: user.bio,
-          url: user.html_url,
-          followers: user.followers,
-          following: user.following,
-          company: user.company,
-          twitter: user.twitter_username,
-          blog: user.blog,
-        },
-        contributions: contributions,
-      });
-    });
-  });
-});
-
-module.exports = router;
diff --git a/routes/index.js b/routes/index.js
index df2c9be..37799b1 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -3,13 +3,13 @@ const express = require("express");
 const router = express.Router();
 // Import the routes
 const admin = require("./admin");
-const api = require("./api");
+const repositories = require("./repositories");
 const blog = require("./blog");
 const posts = require("./posts");
 // Set the routes
 router.use("/admin", admin);
-router.use("/api", api);
 router.use("/api/blog", blog);
+router.use("/", repositories);
 router.use("/", posts);
 
 // Create the routes
@@ -19,9 +19,6 @@ router.get("/", (req, res) => {
 router.get("/about", (req, res) => {
   res.render("about.html");
 });
-router.get("/repos", (req, res) => {
-  res.render("repositories.html");
-});
 
 
 // Export the routes
diff --git a/routes/posts.js b/routes/posts.js
index 00b092f..bc22670 100644
--- a/routes/posts.js
+++ b/routes/posts.js
@@ -6,6 +6,7 @@ const router = express.Router();
 const marked = require("marked");
 const hljs = require("highlight.js");
 
+
 router.get("/posts/:id", function (req, res) {
   const id = req.params.id;
   // get single document where slug === id
diff --git a/routes/repositories.js b/routes/repositories.js
new file mode 100644
index 0000000..7ab6164
--- /dev/null
+++ b/routes/repositories.js
@@ -0,0 +1,290 @@
+const express = require("express");
+const router = express.Router();
+const { Github } = require("../api/github");
+const github = new Github("luciferreeves");
+const fs = require("fs");
+const cheerio = require("cheerio");
+
+router.get("/repos", (req, res) => {
+  const page = req.query.page || 1;
+  github.getRepos(page).then((repos) => {
+    github.getRepos(parseInt(page) + 1).then((repos2) => {
+      const count = repos.length;
+      const count2 = repos2.length;
+      const repositories = [];
+      repos.forEach((repo) => {
+        repositories.push({
+          name: repo.name,
+          description: repo.description,
+          url: repo.html_url,
+          language: repo.language,
+          stars: repo.stargazers_count,
+          forks: repo.forks_count,
+          issues: repo.open_issues_count,
+          license: repo.license ? repo.license.name : null,
+          updated: repo.updated_at,
+          created: repo.created_at,
+        });
+      });
+      const reposData = {
+        count: count,
+        countNext: count2,
+        repositories: repositories,
+      };
+      github.getUserDetails().then((user) => {
+        github.getOneYearUserContributions().then((contributions) => {
+          const data = {
+            user: {
+              login: user.login,
+              name: user.name,
+              avatar: user.avatar_url,
+              location: user.location,
+              bio: user.bio,
+              url: user.html_url,
+              followers: user.followers,
+              following: user.following,
+              company: user.company,
+              twitter: user.twitter_username,
+              blog: user.blog,
+            },
+            contributions: contributions,
+          };
+          var html = fs.readFileSync(
+            __dirname + "/../public/views/repositories.html",
+            "utf8"
+          );
+          var $ = cheerio.load(html);
+          const userScript = `
+            <script>
+              const userData = document.getElementById("userData");
+              const userAvatar = document.createElement("img");
+              userAvatar.src = "${data.user.avatar}";
+              userAvatar.className = "img-polaroid";
+              userAvatar.style.width = "100%";
+              userData.appendChild(userAvatar);
+              const strong = document.createElement("strong");
+              const userName = document.createElement("h2");
+              userName.innerHTML = "${data.user.name}";
+              userName.style.color = "#000";
+              strong.appendChild(userName);
+              userData.appendChild(strong);
+              const userBio = document.createElement("p");
+              userBio.innerHTML = "${data.user.bio}";
+              userBio.style.color = "#000";
+              userData.appendChild(userBio);
+              const followerContainer = document.createElement("p");
+              followerContainer.style.color = "#000";
+              const followerIcon = document.createElement("i");
+              followerIcon.classList.add("tcs-icon", "trophy", "is-small");
+              followerContainer.appendChild(followerIcon);
+              const followerText = document.createElement("span");
+              followerText.innerHTML = "&emsp;" + "${data.user.followers}" + " Followers";
+              followerContainer.appendChild(followerText);
+              userData.appendChild(followerContainer);
+              const twParagraph = document.createElement("p");
+              twParagraph.style.color = "#000";
+              const twitterIcon = document.createElement("i");
+              twitterIcon.classList.add("tcs-icon", "twitter", "is-small");
+              twParagraph.appendChild(twitterIcon);
+              const twitterText = document.createElement("span");
+              const ts2 = document.createElement("span");
+              ts2.innerHTML = "&emsp;";
+              twitterText.appendChild(ts2);
+              const twitterContainer = document.createElement("a");
+              twitterContainer.style.color = "#db4437";
+              twitterContainer.classList.add("a-hvr");
+              twitterContainer.href = "https://twitter.com/" + "${data.user.twitter}";
+              twitterContainer.target = "_blank";
+              twitterContainer.innerHTML = "${data.user.twitter}";
+              twitterText.appendChild(twitterContainer);
+              twParagraph.appendChild(twitterText);
+              userData.appendChild(twParagraph);
+              const ghParagraph = document.createElement("p");
+              ghParagraph.style.color = "#000";
+              const githubIcon = document.createElement("i");
+              githubIcon.classList.add("tcs-icon", "github", "is-small");
+              ghParagraph.appendChild(githubIcon);
+              const githubText = document.createElement("span");
+              const ts3 = document.createElement("span");
+              ts3.innerHTML = "&emsp;";
+              githubText.appendChild(ts3);
+              const githubContainer = document.createElement("a");
+              githubContainer.style.color = "#db4437";
+              githubContainer.classList.add("a-hvr");
+              githubContainer.href = "${data.user.url}";
+              githubContainer.target = "_blank";
+              githubContainer.innerHTML = "${data.user.login}";
+              githubText.appendChild(githubContainer);
+              ghParagraph.appendChild(githubText);
+              userData.appendChild(ghParagraph);
+              const weeklyContributionsTitle = "Weekly Contributions (Past Year)";
+              const weeklyContributions = document.createElement("p");
+              weeklyContributions.style.color = "#000";
+              weeklyContributions.innerHTML = weeklyContributionsTitle;
+              weeklyContributions.style.textAlign = "center";
+              userData.appendChild(weeklyContributions);
+              const contributions = [${data.contributions}];
+              const canvas = document.createElement("canvas");
+              canvas.id = "contributionsChart";
+              const ctx = canvas.getContext("2d");
+              const color = "#000083";
+              // Generate Dates of past 53 weeks
+              const dates = [];
+              const today = new Date();
+              const startDate = new Date(
+                today.getFullYear(),
+                today.getMonth(),
+                today.getDate() - 53 * 7
+              );
+              for (let i = 0; i < 53; i++) {
+                const date = new Date(
+                  startDate.getFullYear(),
+                  startDate.getMonth(),
+                  startDate.getDate() + i * 7
+                );
+                const datePlusSevenDays = new Date(
+                  date.getFullYear(),
+                  date.getMonth(),
+                  date.getDate() + 6
+                );
+                const sd = date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  year: "numeric",
+                });
+                const ed = datePlusSevenDays.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  year: "numeric",
+                });
+                dates.push(sd + " - " + ed);
+              }
+              const contributionsChart = new Chart(ctx, {
+                type: "bar",
+                data: {
+                  labels: dates,
+                  datasets: [
+                    {
+                      label: "Weekly Contributions",
+                      data: contributions,
+                      backgroundColor: color,
+                    },
+                  ],
+                },
+                options: {
+                  plugins: {
+                    legend: {
+                      display: false,
+                    },
+                  },
+                  scales: {
+                    x: {
+                      ticks: {
+                        display: false,
+                      },
+                    },
+                    y: {
+                      ticks: {
+                        display: false,
+                        beginAtZero: true,
+                      },
+                    },
+                  },
+                },
+              });
+              canvas.height = "200px";
+              userData.appendChild(canvas);
+            </script>
+          `;
+          const repoScript = `
+            <script>
+              const repos = document.getElementById("repos");
+              const page = window.location.search.split("page=")[1] || 1;
+              
+              function nextPage() {
+                window.location.href = "?page=${parseInt(page) + 1}";
+              }
+              
+              function prevPage() {
+                window.location.href = "?page=${parseInt(page) - 1}";
+              }
+              if (page == 1) {
+                document.getElementById("olderTop").classList.add("disabled");
+                document.getElementById("olderBottom").classList.add("disabled");
+              } else {
+                document.getElementById("olderTop").classList.remove("disabled");
+                document.getElementById("olderBottom").classList.remove("disabled");
+                document.getElementById("olderTop").addEventListener("click", prevPage);
+                document.getElementById("olderBottom").addEventListener("click", prevPage);
+              }
+              if (${reposData.countNext} == 0) {
+                document.getElementById("newerTop").classList.add("disabled");
+                document.getElementById("newerBottom").classList.add("disabled");
+              } else {
+                document.getElementById("newerTop").classList.remove("disabled");
+                document.getElementById("newerBottom").classList.remove("disabled");
+                document.getElementById("newerTop").addEventListener("click", nextPage);
+                document.getElementById("newerBottom").addEventListener("click", nextPage);
+              }
+              const repositories = ${JSON.stringify(reposData.repositories)};
+              repositories.forEach((repo) => {
+                const leadParagraphCotainer = document.createElement("p");
+                leadParagraphCotainer.className = "lead";
+                const repoName = repo.name;
+                const repoLink = repo.url;
+                const repoDescription = repo.description;
+                const repoLanguage = repo.language || "No language";
+                const repoStars = repo.stars;
+                const repoForks = repo.forks;
+                const license = repo.license;
+            
+                const nameContainer = document.createElement("h3");
+                nameContainer.innerHTML = repoName;
+                const descriptionContainer = document.createElement("p");
+                descriptionContainer.innerHTML = repoDescription;
+                const languageAndLicenseContainer = document.createElement("div");
+                const languageBadgeContainer = document.createElement("span");
+                languageBadgeContainer.className = "badge badge-warning";
+                languageBadgeContainer.innerHTML = repoLanguage;
+                const licenseBadgeContainer = document.createElement("span");
+                licenseBadgeContainer.className = "badge badge-info";
+                licenseBadgeContainer.style.marginLeft = "10px";
+                licenseBadgeContainer.innerHTML = license;
+                languageAndLicenseContainer.appendChild(languageBadgeContainer);
+                languageAndLicenseContainer.appendChild(licenseBadgeContainer);
+                languageAndLicenseContainer.style.marginBottom = "10px";
+                const starsAndForksContainer = document.createElement("div");
+                const starsContainer = document.createElement("span");
+                const starIcon = document.createElement("i");
+                starIcon.classList.add("tcs-icon", "star", "is-small");
+                starsContainer.appendChild(starIcon);
+                starsContainer.innerHTML += " " + repoStars + " Stars";
+                const forksContainer = document.createElement("span");
+                forksContainer.innerHTML += " " + repoForks + " Forks";
+                starsAndForksContainer.appendChild(starsContainer);
+                starsAndForksContainer.appendChild(forksContainer);
+                starsAndForksContainer.style.marginBottom = "10px";
+                const repoLinkContainer = document.createElement("p");
+                const repoLinkAnchor = document.createElement("a");
+                repoLinkAnchor.href = repoLink;
+                repoLinkAnchor.innerHTML = "View on Github";
+                repoLinkContainer.appendChild(repoLinkAnchor);
+                leadParagraphCotainer.appendChild(nameContainer);
+                leadParagraphCotainer.appendChild(descriptionContainer);
+                leadParagraphCotainer.appendChild(languageAndLicenseContainer);
+                leadParagraphCotainer.appendChild(starsAndForksContainer);
+                leadParagraphCotainer.appendChild(repoLinkContainer);
+                repos.appendChild(leadParagraphCotainer);
+              });
+            </script>
+          `;
+          $("body").append(userScript);
+          $("body").append(repoScript);
+          res.send($.html());
+        });
+      });
+    });
+  });
+});
+
+module.exports = router;
diff --git a/static/assets/js/pages/repositories.js b/static/assets/js/pages/repositories.js
deleted file mode 100644
index 105e50c..0000000
--- a/static/assets/js/pages/repositories.js
+++ /dev/null
@@ -1,224 +0,0 @@
-const userData = document.getElementById("userData");
-// Get the user data from 'api/user'
-$.getJSON("api/user", function (data) {
-  const userAvatar = document.createElement("img");
-  userAvatar.src = data.user.avatar;
-  userAvatar.className = "img-polaroid";
-  userAvatar.style.width = "100%";
-  userData.appendChild(userAvatar);
-  const strong = document.createElement("strong");
-  const userName = document.createElement("h2");
-  userName.innerHTML = data.user.name;
-  userName.style.color = "#000";
-  strong.appendChild(userName);
-  userData.appendChild(strong);
-  const userBio = document.createElement("p");
-  userBio.innerHTML = data.user.bio;
-  userBio.style.color = "#000";
-  userData.appendChild(userBio);
-  const followerContainer = document.createElement("p");
-  followerContainer.style.color = "#000";
-  const followerIcon = document.createElement("i");
-  followerIcon.classList.add("tcs-icon", "trophy", "is-small");
-  followerContainer.appendChild(followerIcon);
-  const followerText = document.createElement("span");
-  followerText.innerHTML = "&emsp;" + data.user.followers + " Followers";
-  followerContainer.appendChild(followerText);
-  userData.appendChild(followerContainer);
-  const twParagraph = document.createElement("p");
-  twParagraph.style.color = "#000";
-  const twitterIcon = document.createElement("i");
-  twitterIcon.classList.add("tcs-icon", "twitter", "is-small");
-  twParagraph.appendChild(twitterIcon);
-  const twitterText = document.createElement("span");
-  const ts2 = document.createElement("span");
-  ts2.innerHTML = "&emsp;";
-  twitterText.appendChild(ts2);
-  const twitterContainer = document.createElement("a");
-  twitterContainer.style.color = "#db4437";
-  twitterContainer.classList.add("a-hvr");
-  twitterContainer.href = "https://twitter.com/" + data.user.twitter;
-  twitterContainer.target = "_blank";
-  twitterContainer.innerHTML = data.user.twitter;
-  twitterText.appendChild(twitterContainer);
-  twParagraph.appendChild(twitterText);
-  userData.appendChild(twParagraph);
-  const ghParagraph = document.createElement("p");
-  ghParagraph.style.color = "#000";
-  const githubIcon = document.createElement("i");
-  githubIcon.classList.add("tcs-icon", "github", "is-small");
-  ghParagraph.appendChild(githubIcon);
-  const githubText = document.createElement("span");
-  const ts3 = document.createElement("span");
-  ts3.innerHTML = "&emsp;";
-  githubText.appendChild(ts3);
-  const githubContainer = document.createElement("a");
-  githubContainer.style.color = "#db4437";
-  githubContainer.classList.add("a-hvr");
-  githubContainer.href = data.user.url;
-  githubContainer.target = "_blank";
-  githubContainer.innerHTML = data.user.login;
-  githubText.appendChild(githubContainer);
-  ghParagraph.appendChild(githubText);
-  userData.appendChild(ghParagraph);
-  const weeklyContributionsTitle = "Weekly Contributions (Past Year)";
-  const weeklyContributions = document.createElement("p");
-  weeklyContributions.style.color = "#000";
-  weeklyContributions.innerHTML = weeklyContributionsTitle;
-  weeklyContributions.style.textAlign = "center";
-  userData.appendChild(weeklyContributions);
-  const contributions = data.contributions;
-  const canvas = document.createElement("canvas");
-  canvas.id = "contributionsChart";
-  const ctx = canvas.getContext("2d");
-  const color = "#000083";
-  // Generate Dates of past 53 weeks
-  const dates = [];
-  const today = new Date();
-  const startDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() - 53 * 7
-  );
-  for (let i = 0; i < 53; i++) {
-    const date = new Date(
-      startDate.getFullYear(),
-      startDate.getMonth(),
-      startDate.getDate() + i * 7
-    );
-    const datePlusSevenDays = new Date(
-      date.getFullYear(),
-      date.getMonth(),
-      date.getDate() + 6
-    );
-    const sd = date.toLocaleDateString("en-US", {
-      month: "short",
-      day: "numeric",
-      year: "numeric",
-    });
-    const ed = datePlusSevenDays.toLocaleDateString("en-US", {
-      month: "short",
-      day: "numeric",
-      year: "numeric",
-    });
-    dates.push(sd + " - " + ed);
-  }
-  const contributionsChart = new Chart(ctx, {
-    type: "bar",
-    data: {
-      labels: dates,
-      datasets: [
-        {
-          label: "Weekly Contributions",
-          data: contributions,
-          backgroundColor: color,
-        },
-      ],
-    },
-    options: {
-      plugins: {
-        legend: {
-          display: false,
-        },
-      },
-      scales: {
-        x: {
-          ticks: {
-            display: false
-          }
-        },
-        y: {
-          ticks: {
-            display: false,
-            beginAtZero: true
-          }
-        }
-      }
-    },
-  });
-  canvas.height = "200px";
-  userData.appendChild(canvas);
-});
-
-const repos = document.getElementById("repos");
-const page = window.location.search.split("page=")[1] || 1;
-
-function nextPage() {
-  window.location.href = `?page=${parseInt(page) + 1}`;
-}
-
-function prevPage() {
-  window.location.href = `?page=${parseInt(page) - 1}`;
-}
-
-// Get the repositories from 'api/repos'
-$.getJSON(`api/repos?page=${page}`, function (data) {
-  if (page == 1) {
-    document.getElementById("olderTop").classList.add("disabled");
-    document.getElementById("olderBottom").classList.add("disabled");
-  } else {
-    document.getElementById("olderTop").classList.remove("disabled");
-    document.getElementById("olderBottom").classList.remove("disabled");
-    document.getElementById("olderTop").addEventListener("click", prevPage);
-    document.getElementById("olderBottom").addEventListener("click", prevPage);
-  }
-  if (data.countNext == 0) {
-    document.getElementById("newerTop").classList.add("disabled");
-    document.getElementById("newerBottom").classList.add("disabled");
-  } else {
-    document.getElementById("newerTop").classList.remove("disabled");
-    document.getElementById("newerBottom").classList.remove("disabled");
-    document.getElementById("newerTop").addEventListener("click", nextPage);
-    document.getElementById("newerBottom").addEventListener("click", nextPage);
-  }
-  const repositories = data.repositories;
-  repositories.forEach((repo) => {
-    const leadParagraphCotainer = document.createElement("p");
-    leadParagraphCotainer.className = "lead";
-    const repoName = repo.name;
-    const repoLink = repo.url;
-    const repoDescription = repo.description;
-    const repoLanguage = repo.language || "No language";
-    const repoStars = repo.stars;
-    const repoForks = repo.forks;
-    const license = repo.license;
-
-    const nameContainer = document.createElement("h3");
-    nameContainer.innerHTML = repoName;
-    const descriptionContainer = document.createElement("p");
-    descriptionContainer.innerHTML = repoDescription;
-    const languageAndLicenseContainer = document.createElement("div");
-    const languageBadgeContainer = document.createElement("span");
-    languageBadgeContainer.className = "badge badge-warning";
-    languageBadgeContainer.innerHTML = repoLanguage;
-    const licenseBadgeContainer = document.createElement("span");
-    licenseBadgeContainer.className = "badge badge-info";
-    licenseBadgeContainer.style.marginLeft = "10px";
-    licenseBadgeContainer.innerHTML = license;
-    languageAndLicenseContainer.appendChild(languageBadgeContainer);
-    languageAndLicenseContainer.appendChild(licenseBadgeContainer);
-    languageAndLicenseContainer.style.marginBottom = "10px";
-    const starsAndForksContainer = document.createElement("div");
-    const starsContainer = document.createElement("span");
-    const starIcon = document.createElement("i");
-    starIcon.classList.add("tcs-icon", "star", "is-small");
-    starsContainer.appendChild(starIcon);
-    starsContainer.innerHTML += " " + repoStars + " Stars";
-    const forksContainer = document.createElement("span");
-    forksContainer.innerHTML += " " + repoForks + " Forks";
-    starsAndForksContainer.appendChild(starsContainer);
-    starsAndForksContainer.appendChild(forksContainer);
-    starsAndForksContainer.style.marginBottom = "10px";
-    const repoLinkContainer = document.createElement("p");
-    const repoLinkAnchor = document.createElement("a");
-    repoLinkAnchor.href = repoLink;
-    repoLinkAnchor.innerHTML = "View on Github";
-    repoLinkContainer.appendChild(repoLinkAnchor);
-    leadParagraphCotainer.appendChild(nameContainer);
-    leadParagraphCotainer.appendChild(descriptionContainer);
-    leadParagraphCotainer.appendChild(languageAndLicenseContainer);
-    leadParagraphCotainer.appendChild(starsAndForksContainer);
-    leadParagraphCotainer.appendChild(repoLinkContainer);
-    repos.appendChild(leadParagraphCotainer);
-  });
-});