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.
257 lines
6.6 KiB
257 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>
|
|
|
|
<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(--dark);
|
|
background-color: var(--white);
|
|
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 {
|
|
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>
|
|
<link href="/includes/js/vis/dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
|
|
|
|
|
|
<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}
|