Personal blog written from scratch using Node.js, Bootstrap, and MySQL. https://jrtechs.net
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

189 lines
5.2 KiB

{>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
Prism.highlightAll();
//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">
<div class="row">
<div class="col-md-8 col-12">
{for post in posts}
<div class="blogPost">
{if post.hasPicture}
<img src="/blogContent/headerImages/{post.picture_url}" style="width:100%;">
{/if}
<div class="p-4">
<h3><b>{post.name}</b></h3>
<h5>
<span class="w3-opacity">{post.published}</span>
</h5>
{post.blogBody}
{if preview}
<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>
{/if}
</div>
</div>
<br>
<br>
{else}
<div class="row p-lg-0">
<h1 class="align-content-center">Page Not Found</h1>
<div class="align-content-center">
<img src="/includes/img/404.jpg" alt="Page not found" width="70%" />
</div>
</div>
<br><br>
{/for}
<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">
{>sideBar}
</div>
</div>
</div>
{footer}