A repo for my personal website
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Adding new blog page to blog.js

+152
+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 + })();