Merge pull request #98 from jrtechs/more_posts

More posts

blog/category.js

@@ -25,6 +25,7 @@ module.exports=
                 templateContext["title"] = category;
                 sql.getPostsFromCategory(category).then(function(posts)
                 {
+                    templateContext["categoryID"] = posts[0].category_id;
                     Promise.all([blogBodyRenderer.renderBatchOfPosts(requestURL, posts, page, 5, templateContext),
                         require('./renderNextBar').main("/category" + request.url, page, 5, posts.length, templateContext)]).then(function()
                     {

blog/homePage.js

@@ -13,7 +13,7 @@ module.exports=
         main: function(requestURL, request, templateContext)
         {
             var page = request.query.page;
-
+            templateContext["categoryID"] = 0;
             return new Promise(function(resolve, reject)
             {
                 sql.getAllPosts().then(function(posts)

routes/api/index.js

@@ -15,6 +15,21 @@ routes.get('/posts', (request, result) =>
 });
 
 
+routes.get('/preview/:postID', (request, result) =>
+{
+    sql.getPostById(request.params.postID).then((sqlData)=>
+    {
+        renderPost.generateBlogPost(sqlData, 3).then((rendered)=>
+        { 
+            result.json(rendered).end();
+        });
+    }).catch((err)=>
+    {
+        result.status(404).json({error: 404}).end();
+    })
+});
+
+
 routes.get('/render/:postID', (request, result) =>
 {
     sql.getPostById(request.params.postID).then((sqlData)=>
@@ -27,7 +42,6 @@ routes.get('/render/:postID', (request, result) =>
     {
         result.status(404).json({error: 404}).end();
     })
-
 });
 
 routes.get('*', (request, result) =>

templates/blog/blogMain.html

@@ -1,4 +1,132 @@
 {>header}
+
+<script src="https://code.jquery.com/jquery-3.3.1.min.js"
+    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+    crossorigin="anonymous">
+</script>
+
+<script>
+
+    var postsToLoad= [];
+
+    /**
+     * Runs a get request using ajax
+     */
+    function runAjax(url, successCallBack, errorCallBack)
+    {
+        console.log(url);
+        $.ajax({
+            type:'GET',
+            url: url,
+            crossDomain: true,
+            dataType: "json",
+            success: successCallBack,
+            error:errorCallBack,
+            timeout: 3000
+        });
+    }
+
+    /** 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 buildPostHTML(post)
+    {
+        var pic = '';
+        if(post.hasPicture)
+        {
+            pic = '<img src="/blogContent/headerImages/' + post.picture_url + '" style="width:100%;">';
+        }
+        return '<div class="blogPost">' + pic + '<div class="p-4"><b><h3>' + post.name + '</h3></b><h5>' + post.published + '</span></h5><div>' + post.blogBody + '<p class="text-center"><a class="btn btn-secondary btn-lg text-white" href="https://jrtechs.net/' + post.categoryURL + '/' + post.url + '"><b>Read More &raquo;</b></a></p></div></div></div><br><br>';
+    }
+
+    function addPosts(id)
+    {
+        return new Promise(function(resolve, reject)
+        {
+            runAjax("/api/preview/" + id,
+                (html)=>
+            {
+                var content = buildPostHTML(html)
+
+                $("#newPosts").append(content);
+                //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]);
+                resolve();
+            },
+            (err)=>
+            {
+                console.log(err);
+                reject();
+            });
+        })
+    }
+
+    async function loadMore()
+    {
+        for(var i = 0; i < 3; i++)
+        {
+            if(postsToLoad.length == 0)
+            {
+                $('#morePostsBtn').html('');
+                break;
+            }
+                
+            await addPosts(postsToLoad.shift());
+        }
+        console.log("Wham");
+    }
+
+    $(document).ready(function()
+    {
+        runAjax("/api/getPostsIds/{categoryID}",
+            (idsList)=>
+        {
+            postsToLoad=idsList;
+        },
+        (err)=>
+        {
+            console.log(err);
+            reject();
+        });
+    });
+
+
+</script>
+
 <br><br><br><br><br>
 <div class="container">
 
@@ -40,7 +168,16 @@
             <br><br>
             {/for}
 
-            {>paginationTemplate}
+            <div id="newPosts"></div>
+
+            {if preview}
+            <div class="justify-content-center w-100 blogPost" id="morePostsBtn">
+                <a class="btn btn-secondary btn-lg btn-block text-white w-100 text-center" id="readMore"
+                    onclick="loadMore()"><b>More Posts &raquo;</b></a>
+
+
+            </div>
+            {/if}
             <br>
         </div>
         <div class="col-md-4 col-12">

templates/blog/header.html

@@ -2,7 +2,6 @@
 
 <html lang="en">
 <head>
-    <!--fuck-->
     {if title}
     <title>Jrtechs: {title}</title>
     {else}

utils/sql.js

@@ -178,6 +178,35 @@ module.exports=
         });
     },
 
+    getPostIds: function(categoryID)
+    {
+        return new Promise((resolve, reject)=>
+        {
+            if(categoryID == 0)
+            {
+                fetch("select post_id from posts order by published desc")
+                    .then(function(ids)
+                {
+                    resolve(ids);
+                }).catch((error)=>
+                {
+                    reject(error);
+                });
+            }
+            else
+            {
+                fetch("select post_id from posts where category_id='" + categoryID + "' order by published desc")
+                    .then(function(ids)
+                {
+                    resolve(ids);
+                }).catch((error)=>
+                {
+                    reject(error);
+                });
+            }
+        });
+    },
+
     insert: function(sqlStatement)
     {
         return insert(sqlStatement);