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.
 
 

260 lines
6.6 KiB

{header}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<link href="/includes/js/vis/dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<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(--white);
background-color: #317caf;
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 {
color: var(--dark);
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="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">
{>sideBar}
</div>
</div>
</div>
<script src="/includes/js/vis/dist/vis-timeline-graph2d.min.js"></script>
<script type="text/javascript">
/**
* 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 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)=>
{
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,
id: data[i].post_id
}
);
}
resolve(datasetContents);
renderPostOnPage(data[0].post_id);
},
(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);
timeline.on('click', timeLineClick);
});
});
</script>
{footer}