Created basic timeline with posts

routes/about.js

@@ -1,17 +0,0 @@
-const routes = require('express').Router();
-
-const pageBuilder = require('../utils/pageBuilder');
-
-routes.get('/', (request, result) =>
-{
-    pageBuilder.buildPageWithTemplate(request, result,
-        (p1,p2,p3)=>{}, "blog/about.html");
-});
-
-
-routes.get('*', (request, result) =>
-{
-    pageBuilder.print404(result);
-});
-
-module.exports = routes;

routes/api/index.js

@@ -0,0 +1,22 @@
+const routes = require('express').Router();
+const sql = require('../../utils/sql');
+
+
+
+routes.get('/posts', (request, result) =>
+{
+    sql.getAllPosts().then((data)=>
+    {
+        result.json(data).end();result
+    }).catch((err)=>
+    {
+        result.status(500).json([]).end();
+    });
+});
+
+routes.get('*', (request, result) =>
+{
+    result.json([]).end();
+});
+
+module.exports = routes;

routes/index.js

@@ -1,8 +1,8 @@
 const routes = require('express').Router();
 
-/** about page */
-const about = require('./about');
-routes.use('/about', about);
+// /** about page */
+// const about = require('./about');
+// routes.use('/about', about);
 
 /** admin page and all of its sub pages */
 const admin = require('./admin');
@@ -33,10 +33,25 @@ routes.use('/category', category);
 
 const pageBuilder = require('../utils/pageBuilder');
 
+routes.get('/about', (request, result) =>
+{
+    pageBuilder.buildPageWithTemplate(request, result,
+        (p1,p2,p3)=>{}, "blog/about.html");
+});
+
+
+routes.get('/posts', (request, result) =>
+{
+    pageBuilder.buildPageWithTemplate(request, result,
+        (p1,p2,p3)=>{}, "blog/posts.html");
+});
+
+
 const project = require('./projects');
 routes.use('/steam', project);
 
-
+const api = require('./api');
+routes.use('/api', api);
 
 //blog home page
 routes.get('/', (request, result) =>

templates/blog/posts.html

@@ -0,0 +1,165 @@
+{header}
+
+<script src="https://code.jquery.com/jquery-3.3.1.min.js"
+    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+    crossorigin="anonymous">
+</script>
+
+<style>
+
+    :root {
+        --primary:rgba(16,116,231,1);
+        --secondary:rgba(46,188,79,1);
+        --dark:rgba(36,41,46,1);
+        --dark-2:rgba(43,49,55,1);
+        --white:rgba(255,255,255,1);
+    }
+
+    .vis-timeline {
+        border: none;
+        font-size: 16px;
+        color: var(--white);
+        background-color: var(--dark);
+    }
+    .vis-item {
+        font-size: 16px;
+        color: var(--dark);
+        background-color: var(--white);
+        box-sizing: border-box;
+        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06), 0px 4px 6px rgba(0, 0, 0, 0.06);
+        border-color: transparent;
+    }
+    .vis-item.vis-box {
+        border-radius: 2px;
+        padding: 0;
+        border: none;
+    }
+    .vis-item .vis-item-content {
+        padding: 8px 10px;
+    }
+    .vis-item.vis-box.vis-selected {
+        border: 2px solid var(--primary);
+    }
+    .vis-item.vis-line {
+        border-width: 2px;
+        border-color: var(--primary)
+    }
+    .vis-item.vis-dot {
+        border-color: var(--primary);
+    }
+    .vis-item.vis-selected {
+        border-color: var(--primary);
+        background-color: var(--white);
+        box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.2), 0px 10px 10px rgba(0, 0, 0, 0.14);
+    }
+    .vis-time-axis .vis-text {
+        color: var(--white)!important;
+        padding-top: 8px;
+        padding-left: 16px;
+    }
+    .vis-time-axis .vis-grid.vis-minor {
+        border-width: 2px;
+        border-color: rgba(255, 255, 255, .29);
+    }
+    .vis-labelset .vis-label {
+        color: var(--white);
+    }
+    .vis-time-axis .vis-grid.vis-major {
+        border-width: 1px;
+        border-color: rgba(255, 255, 255, .5);
+    }
+</style>
+
+
+<br><br><br><br><br>
+<div id="timeline"></div>
+<br><br>
+<div class="container">
+
+    <div class="row">
+        <div class="col-md-8 col-12">
+            <div class="card">
+                <div id="previewPost"></div>
+            </div>
+            <br><br>
+        </div>
+        <div class="col-md-4 col-12">
+            {>sideBar}
+        </div>
+    </div>
+</div>
+
+<script src="/includes/js/vis/dist/vis-timeline-graph2d.min.js"></script>
+<link href="/includes/js/vis/dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+
+
+<script type="text/javascript">
+
+
+    function runAjax(url, successCallBack, errorCallBack)
+    {
+        console.log(url);
+        $.ajax({
+            type:'GET',
+            url: url,
+            crossDomain: true,
+            dataType: "json",
+            success: successCallBack,
+            error:errorCallBack,
+            timeout: 3000
+        });
+    }
+
+    function fetchPosts()
+    {
+        return new Promise((resolve, reject)=>
+        {
+            runAjax("api/posts", (data)=>
+            {
+                var datasetContents = [];
+
+                for(var i=0; i < data.length; i++)
+                {
+                    datasetContents.push(
+                        {
+                            start: new Date(data[i].published),
+                            content: data[i].name
+                        }
+                    );
+                }
+                resolve(datasetContents);
+            },
+            (error)=>
+            {
+                resolve([]);
+            });
+        });
+    }
+
+
+    var container = document.getElementById('timeline');
+
+    $(document).ready(function()
+    {
+        fetchPosts().then((data)=>
+        {
+            var options = 
+            {
+                editable: false,
+                margin: {
+                    item: 20,
+                    axis: 40
+                },
+                start:data[12].start,
+                end:data[0].start
+            };
+
+            var items = new vis.DataSet(data);
+            var timeline = new vis.Timeline(container, items, options);
+        });
+    });
+
+</script>
+
+
+{footer}

utils/sql.js

@@ -22,6 +22,7 @@ const config = require('../utils/configLoader').getConfig();
 /** SQL connection */
 const con = mysql.createConnection({
     host: config.SQL_HOST,
+    port: config.SQL_PORT,
     user: config.SQL_USER,
     password: config.SQL_PASSWORD,
     database: config.SQL_DATABASE