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.
165 lines
3.9 KiB
165 lines
3.9 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="card">
|
|
<div id="previewPost"></div>
|
|
</div>
|
|
<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">
|
|
|
|
|
|
function runAjax(url, successCallBack, errorCallBack)
|
|
{
|
|
console.log(url);
|
|
$.ajax({
|
|
type:'GET',
|
|
url: url,
|
|
crossDomain: true,
|
|
dataType: "json",
|
|
success: successCallBack,
|
|
error:errorCallBack,
|
|
timeout: 3000
|
|
});
|
|
}
|
|
|
|
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
|
|
}
|
|
);
|
|
}
|
|
resolve(datasetContents);
|
|
},
|
|
(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);
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
{footer}
|