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.1 KiB
189 lines
5.1 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="/content/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 »</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());
|
|
}
|
|
lazyLoad();
|
|
}
|
|
|
|
$(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="/content/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 »</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 »</b></a>
|
|
|
|
|
|
</div>
|
|
{/if}
|
|
<br>
|
|
</div>
|
|
<div class="col-md-4 col-12">
|
|
{>sideBar}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{footer}
|