Display New Version information from changelog at bottom of Info Page

package.json

@@ -37,6 +37,7 @@
     "file-saver": "^2.0.2",
     "jquery": "^3.5.1",
     "jsdom": "^16.4.0",
+    "marked": "^1.2.7",
     "material-icons": "^0.5.1",
     "memorystore": "^1.6.4",
     "node-fetch": "^2.6.1",

public/css/home.css

@@ -18,7 +18,6 @@
 
 * {
   margin: 0px;
-  padding: 0px;
   box-sizing: border-box;
 }
 
@@ -152,11 +151,6 @@ p {
   margin: 0px;
 }
 
-ul, li {
-  margin: 0px;
-  list-style-type: none;
-}
-
 body {
   background-size: cover;
   background-color: var(--white1);
@@ -809,6 +803,8 @@ canvas#large_clock {
 #export_modal_content ul {
   margin-left: 1em;
   color: var(--black);
+  list-style-type: none;
+  padding: 0;
 }
 
 #export_modal_content label {
@@ -1256,3 +1252,28 @@ p#large_clock_period {
   opacity: 0;
   transition: opacity 300ms 0ms, visibility 0ms 300ms;
 }
+
+#updates-container {
+  margin-top: 2em;
+}
+.info-header a {
+  font-size: 120%;
+  color: var(--green2);
+  text-decoration: none;
+  margin-bottom: 2em;
+}
+
+
+hr {
+  margin-top:0px;
+}
+#updates ul {
+  margin-bottom: 20px;
+}
+#more-versions {
+    text-align: center;
+}
+
+#more-versions a {
+  font-size: 120%;
+}

public/home.html

@@ -416,6 +416,14 @@ <h2 class="info-header">GPA Type and Switching Quarters</h2>
       GPA for each quarter, which when clicked allows you to see your grades and
       assignments for that quarter.
       </p>
+
+      <hr>
+      <p class="info-text" id="updates-container"><span id="updates"></span></p>
+      <p id="more-versions">
+        <a href="https://github.com/Aspine/aspine/blob/master/CHANGELOG.md">
+          View changes made in older versions of Aspine&hellip;
+        </a>
+      </p>
     </div>
   </div>
   <p>Aspine version: <span id="version">(loading&hellip;)</span></p>

public/js/home.js

@@ -1250,6 +1250,23 @@ document.getElementById("default_open").click();
 
 //#ifndef lite
 $.ajax("/version").then(ver => $("#version").text(ver));
+
+$.ajax("/updates").then(upt => {
+    $("#updates").html(upt);
+    document.getElementById("changelog").outerHTML = "<h2 class='info-header'>Version History/What's New:</h2>";
+    const items = [...document.querySelectorAll("#updates h2")];
+    items.forEach(x => { x.className = "info-header"; });
+    //Hide Everything but first and second versions
+    items.slice(3).forEach(x => { x.style.setProperty("display", "none") });
+    const subpoints = [...document.querySelectorAll("#updates ul")];
+    subpoints.slice(2).forEach(x => { x.style.setProperty("display", "none") });
+
+    //Removes first two paragraphs with "Semantic versioning info"
+    const paras = [...document.querySelectorAll("#updates p")];
+    paras.slice(0,2).forEach(x => { x.style.setProperty("display", "none") });
+
+});
+
 //#endif
 
 //#ifdef lite

serve.js

@@ -9,11 +9,16 @@ const fs = require('fs');
 const https = require('https');
 const compression = require('compression');
 const child_process = require('child_process');
+const marked = require("marked");
+
 // -------------------------------------------
 
 // Get Aspine version number without leading 'v'
 const version = child_process.execSync('git describe')
     .toString().trim().match(/^v?(.*)/)[1];
+const changelog = marked(
+    fs.readFileSync(__dirname + '/CHANGELOG.md').toString()
+);
 
 program
     .version(version)
@@ -156,6 +161,9 @@ app.use('/fonts/material-icons/iconfont', express.static(
 // Endpoint to expose version number to client
 app.get('/version', (req, res) => res.send(version));
 
+// Endpoint to expose rendered changelog to client
+app.get('/updates', (req, res) => res.send(changelog));
+
 app.use(function(req, res, next) { // enable cors
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");