A repo for my personal website
Adding new blog page to blog.js
+152
+152
scripts/blog.js
+152
scripts/blog.js
···
1
+
import getBase from './base.js';
2
+
import parseMarkdown from './markdown.js';
3
+
import setupNavAnim from './nav_anim.js';
4
+
import setupLink from './link_setup.js';
5
+
import getPosts from './posts.js';
6
+
import generateBlogPost from './blog_post.js';
7
+
8
+
var currentPage = 1;
9
+
var numPages = 1;
10
+
11
+
var get_page = (el) => {
12
+
return el.dataset.page;
13
+
};
14
+
15
+
(function () {
16
+
document.body.innerHTML = getBase(false, true, false, false);
17
+
18
+
document.querySelector('.site-content').innerHTML = `
19
+
<div class="page-desc">
20
+
<h4>Personal Blog</h4>
21
+
<a href="blog-rss.xml"<img src="img/rss-icon.png" alt="rss-icon" style="width:20px;height:20px;" /></a>
22
+
<p>Random postings, news, and other thoughts coming soon!</p>
23
+
</div>
24
+
`;
25
+
26
+
var postData = getPosts();
27
+
postData.reverse();
28
+
29
+
for (var i = 0; i < postData.length; i += 5) {
30
+
document.querySelector('.site-content').innerHTML += `
31
+
<article class="news" data-page="${(Math.floor(i / 5) + 1).toString()}">
32
+
</article>
33
+
`;
34
+
35
+
document.querySelector(`.site-content .news[data-page="${(Math.floor(i / 5) + 1).toString()}"]`).innerHTML = generateBlogPost(postData[i]);
36
+
37
+
if ((i + 1) < postData.length) {
38
+
document.querySelector(`.site-content .news[data-page="${(Math.floor(i / 5) + 1).toString()}"]`).innerHTML += generateBlogPost(postData[i + 1]);
39
+
}
40
+
41
+
if ((i + 2) < postData.length) {
42
+
document.querySelector(`.site-content .news[data-page="${(Math.floor(i / 5) + 1).toString()}"]`).innerHTML += generateBlogPost(postData[i + 2]);
43
+
}
44
+
45
+
if ((i + 3) < postData.length) {
46
+
document.querySelector(`.site-content .news[data-page="${(Math.floor(i / 5) + 1).toString()}"]`).innerHTML += generateBlogPost(postData[i + 3]);
47
+
}
48
+
49
+
if ((i + 4) < postData.length) {
50
+
document.querySelector(`.site-content .news[data-page="${(Math.floor(i / 5) + 1).toString()}"]`).innerHTML += generateBlogPost(postData[i + 4]);
51
+
}
52
+
}
53
+
54
+
document.querySelector('.site-content .news[data-page="1"]').classList.add('active-news-page');
55
+
56
+
document.getElementById('foot-nav').innerHTML = `
57
+
<ul class="cd-pagination animated-buttons custom-icons">
58
+
<li class="button"><a id="previous" href="#"><i data-i18n="[html]nav.previous">Prev</i></a></li>
59
+
<li><a class="current page-button" href="#" data-i18n="[html]nav.page.1" data-page="1">1</a></li>
60
+
<!--<li><span id="left-elipses">...</span></li>-->
61
+
<li><a href="#" class="page-button" data-i18n="[html]nav.page.2" data-page="2">2</a></li>
62
+
<li><a href="#" class="page-button" data-i18n="[html]nav.page.3" data-page="3">3</a></li>
63
+
<!--<li><a href="#" class="page-button" data-i18n="[html]nav.page.4" data-page="4">4</a></li>
64
+
<li><span id="right-elipses">...</span></li>
65
+
<li><a href="#" class="page-button" data-i18n="[html]nav.page.20" data-page="20">20</a></li>-->
66
+
<li class="button"><a id="next" href="#"><i data-i18n="[html]nav.next">Next</i></a></li>
67
+
</ul>
68
+
`;
69
+
70
+
var pageNumber = window.location.hash.substring(1);
71
+
var pages = document.querySelectorAll('.news');
72
+
73
+
if (pageNumber === '') {
74
+
pageNumber = '1';
75
+
}
76
+
77
+
for (var i = 0; i < pages.length; i++) {
78
+
if ((get_page(pages[i]) === pageNumber) && (!pages[i].classList.contains('active-news-page'))) {
79
+
pages[i].classList.add('active-news-page');
80
+
81
+
if (!document.querySelectorAll('.page-button')[i].className.includes('current')) {
82
+
document.querySelectorAll('.page-button')[i].classList.add('current');
83
+
}
84
+
} else if ((get_page(pages[i]) !== pageNumber) && (pages[i].classList.contains('active-news-page'))) {
85
+
pages[i].classList.remove('active-news-page');
86
+
87
+
if (document.querySelectorAll('.page-button')[i].className.includes('current')) {
88
+
document.querySelectorAll('.page-button')[i].classList.remove('current');
89
+
}
90
+
}
91
+
}
92
+
93
+
if (pageNumber === '1') {
94
+
//document.getElementById('left-elipses').style.display = 'none';
95
+
}
96
+
97
+
if (pageNumber === '20') {
98
+
//document.getElementById('right-elipses').style.display = 'none';
99
+
}
100
+
101
+
currentPage = parseInt(pageNumber);
102
+
numPages = parseInt(pages.length);
103
+
104
+
document.querySelectorAll('.page-button').forEach((element, key, parent) => {
105
+
element.addEventListener('click', (e) => {
106
+
e.preventDefault();
107
+
window.location = `blog.html#${get_page(element)}`;
108
+
window.location.reload();
109
+
}, false);
110
+
});
111
+
112
+
document.getElementById('previous').addEventListener('click', (e) => {
113
+
e.preventDefault();
114
+
var newPage = currentPage - 1;
115
+
116
+
if (newPage === 0) {
117
+
newPage = 1;
118
+
}
119
+
120
+
window.location = `blog.html#${newPage.toString()}`;
121
+
window.location.reload();
122
+
});
123
+
124
+
document.getElementById('next').addEventListener('click', (e) => {
125
+
e.preventDefault();
126
+
var newPage = currentPage + 1;
127
+
128
+
if (newPage > numPages) {
129
+
newPage = numPages;
130
+
}
131
+
132
+
window.location = `blog.html#${newPage.toString()}`;
133
+
window.location.reload();
134
+
});
135
+
136
+
document.querySelectorAll('.cd-primary-nav li a').forEach((element, key, parent) => {
137
+
if (element.href.indexOf('blog.html') != -1) {
138
+
element.classList.add('selected');
139
+
} else {
140
+
element.classList.remove('selected');
141
+
}
142
+
});
143
+
144
+
setupNavAnim(document);
145
+
parseMarkdown(document);
146
+
147
+
setTimeout(() => {
148
+
document.body.classList.add('loaded');
149
+
}, 150);
150
+
151
+
setupLink(document);
152
+
})();