Updated timeline so that the blog post will render once you click on it in the time line.

includes/html/footer.html

@@ -59,7 +59,9 @@
 <script>hljs.initHighlightingOnLoad();</script>
 
 <script>
-    ( function() {
+
+    function lazyLoad()
+    {
 
         var youtube = document.querySelectorAll( ".youtube" );
 
@@ -85,7 +87,11 @@
                 this.appendChild( iframe );
             } );
         };
+    }
+
+    ( function() {
 
+        lazyLoad();
     } )();
 </script>
 

includes/html/header.html

@@ -65,6 +65,9 @@
                 <li class="nav-item">
                     <a class="nav-link" href="/contact">Contact</a>
                 </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/posts">Posts</a>
+                </li>
                 <li class="nav-item">
                     <a class="nav-link" href="/photos">Photography</a>
                 </li>

routes/api/index.js

@@ -1,19 +1,35 @@
 const routes = require('express').Router();
 const sql = require('../../utils/sql');
 
-
+const renderPost = require('../../blog/renderBlogPost');
 
 routes.get('/posts', (request, result) =>
 {
     sql.getAllPosts().then((data)=>
     {
-        result.json(data).end();result
+        result.json(data).end();
     }).catch((err)=>
     {
         result.status(500).json([]).end();
     });
 });
 
+
+routes.get('/render/:postID', (request, result) =>
+{
+    sql.getPostById(request.params.postID).then((sqlData)=>
+    {
+        renderPost.generateBlogPost(sqlData, -1).then((rendered)=>
+        { 
+            result.json(rendered).end();
+        });
+    }).catch((err)=>
+    {
+        result.status(404).json({error: 404}).end();
+    })
+
+});
+
 routes.get('*', (request, result) =>
 {
     result.json([]).end();

templates/blog/posts.html

@@ -78,9 +78,19 @@
 
     <div class="row">
         <div class="col-md-8 col-12">
-            <div class="card">
-                <div id="previewPost"></div>
+            <div class="blogPost">
+                <div id=POST_PICTURE>
+                </div>
+
+                <div class="p-4">
+                    <b><h3 id="POST_TITLE"></h3></b>
+                    <h5>
+                        <span class="w3-opacity"><div id="POST_PUBLISHED"></div></span>
+                    </h5>
+                    <div id="POST_BODY"></div>
+                </div>
             </div>
+            <br>
             <br><br>
         </div>
         <div class="col-md-4 col-12">
@@ -95,7 +105,9 @@
 
 <script type="text/javascript">
 
-
+    /**
+     * Runs a get request using ajax
+     */
     function runAjax(url, successCallBack, errorCallBack)
     {
         console.log(url);
@@ -110,6 +122,83 @@
         });
     }
 
+    /** Lazy loads youtube videos on the page
+     */
+    function lazyLoad()
+    {
+        var youtube = document.querySelectorAll( ".youtube" );
+
+        for (var i = 0; i < youtube.length; i++) {
+
+            var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
+
+            var image = new Image();
+            image.src = source;
+            image.addEventListener( "load", function() {
+                youtube[ i ].appendChild( image );
+            }( i ) );
+
+            youtube[i].addEventListener( "click", function() {
+
+                var iframe = document.createElement( "iframe" );
+
+                iframe.setAttribute( "frameborder", "0" );
+                iframe.setAttribute( "allowfullscreen", "" );
+                iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
+
+                this.innerHTML = "";
+                this.appendChild( iframe );
+            } );
+        };
+    }
+
+
+    function renderPostOnPage(postID)
+    {
+        runAjax("api/render/" + postID,
+        (html)=>
+        {
+            //uses ajax to update blog page
+            $('#POST_TITLE').text(html.name);
+            $('#POST_PUBLISHED').text(html.published);
+            $('#POST_BODY').html(html.blogBody);
+            $('#POST_PICTURE').html(html.hasPicture ?
+                '<img src="/blogContent/headerImages/' + html.picture_url + '" style="width:100%;">' :
+                 '');
+
+            //lazy loads youtube videos
+            lazyLoad();
+
+            //highlights code
+            document.querySelectorAll('pre code').forEach((block) => {
+                hljs.highlightBlock(block);
+            });
+            //renders latex math
+            MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
+        },
+        (err)=>
+        {
+            console.log(err);
+        });
+    }
+
+
+    /**
+     * After a timeline event gets clicked this will
+     * query the api for the blog post content and
+     * display it on the page.
+     */
+    function timeLineClick(properties)
+    {
+        if(properties.item !== null)
+        {
+            renderPostOnPage(properties.item);
+        }
+    }
+
+    /**
+     * Fetches all the 
+     */
     function fetchPosts()
     {
         return new Promise((resolve, reject)=>
@@ -123,11 +212,13 @@
                     datasetContents.push(
                         {
                             start: new Date(data[i].published),
-                            content: data[i].name
+                            content: data[i].name,
+                            id: data[i].post_id
                         }
                     );
                 }
                 resolve(datasetContents);
+                renderPostOnPage(data[0].post_id);
             },
             (error)=>
             {
@@ -156,6 +247,7 @@
 
             var items = new vis.DataSet(data);
             var timeline = new vis.Timeline(container, items, options);
+            timeline.on('click', timeLineClick);
         });
     });
 

utils/sql.js

@@ -157,15 +157,20 @@ module.exports=
      */
     getPostById: function(id)
     {
-        console.log("select * from posts where post_id='" + id + "' limit 1");
-
-        return new Promise(function(resolve, reject)
+        return new Promise((resolve, reject)=>
         {
             fetch("select * from posts where post_id='" + id + "' limit 1")
                 .then(function(post)
             {
-                resolve(post[0]);
-            }).catch(function(error)
+                if(post.length === 1)
+                {
+                    resolve(post[0]);
+                }
+                else
+                {
+                    reject();
+                }
+            }).catch((error)=>
             {
                 reject(error);
             });