A repo for my personal website
Adding blog page
+239
-1
+17
blog.html
+17
blog.html
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
+
<meta charset="utf-8" />
6
+
<meta name="viewport" content="width=device-width" />
7
+
<meta http-equiv="x-ua-compatible" content="ie=edge" />
8
+
<link rel="stylesheet" href="style.css" media="screen" />
9
+
<link href="fonts/righteous.css" rel="stylesheet" type="text/css" />
10
+
<link href="fonts/quicksand.css" rel="stylesheet" type="text/css" />
11
+
<script src="scripts/modernizr.js"></script>
12
+
<script src="scripts/showdown.min.js"></script>
13
+
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
14
+
<script src="scripts/blog.js" type="module"></script>
15
+
</head>
16
+
<body></body>
17
+
</html>
+143
scripts/blog.js
+143
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);
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
+
28
+
for (var i = 0; i < postData.length; i += 5) {
29
+
document.querySelector('.site-content').innerHTML += `
30
+
<article class="news" data-page="${(Math.floor(i / 5) + 1).toString()}">
31
+
</article>
32
+
`;
33
+
34
+
document.querySelector(`.site-content .news[data-page="${(Math.floor(i / 5) + 1).toString()}"]`).innerHTML = generateBlogPost(postData[i]);
35
+
36
+
if ((i + 1) < postData.length) {
37
+
document.querySelector(`.site-content .news[data-page="${(Math.floor(i / 5) + 1).toString()}"]`).innerHTML += generateBlogPost(postData[i + 1]);
38
+
}
39
+
40
+
if ((i + 2) < postData.length) {
41
+
document.querySelector(`.site-content .news[data-page="${(Math.floor(i / 5) + 1).toString()}"]`).innerHTML += generateBlogPost(postData[i + 2]);
42
+
}
43
+
44
+
if ((i + 3) < postData.length) {
45
+
document.querySelector(`.site-content .news[data-page="${(Math.floor(i / 5) + 1).toString()}"]`).innerHTML += generateBlogPost(postData[i + 3]);
46
+
}
47
+
48
+
if ((i + 4) < postData.length) {
49
+
document.querySelector(`.site-content .news[data-page="${(Math.floor(i / 5) + 1).toString()}"]`).innerHTML += generateBlogPost(postData[i + 4]);
50
+
}
51
+
}
52
+
53
+
document.querySelector('.site-content .news[data-page="1"]').classList.add('active-news-page');
54
+
55
+
document.getElementById('foot-nav').innerHTML = `
56
+
<ul class="cd-pagination animated-buttons custom-icons">
57
+
<li class="button"><a id="previous" href="#"><i data-i18n="[html]nav.previous">Prev</i></a></li>
58
+
<li><a class="current page-button" href="#" data-i18n="[html]nav.page.1" data-page="1">1</a></li>
59
+
<!--<li><span id="left-elipses">...</span></li>-->
60
+
<li><a href="#" class="page-button" data-i18n="[html]nav.page.2" data-page="2">2</a></li>
61
+
<!--<li><a href="#" class="page-button" data-i18n="[html]nav.page.3" data-page="3">3</a></li>
62
+
<li><a href="#" class="page-button" data-i18n="[html]nav.page.4" data-page="4">4</a></li>
63
+
<li><span id="right-elipses">...</span></li>
64
+
<li><a href="#" class="page-button" data-i18n="[html]nav.page.20" data-page="20">20</a></li>-->
65
+
<li class="button"><a id="next" href="#"><i data-i18n="[html]nav.next">Next</i></a></li>
66
+
</ul>
67
+
`;
68
+
69
+
var pageNumber = window.location.hash.substring(1);
70
+
var pages = document.querySelectorAll('.news');
71
+
72
+
if (pageNumber === '') {
73
+
pageNumber = '1';
74
+
}
75
+
76
+
for (var i = 0; i < pages.length; i++) {
77
+
if ((get_page(pages[i]) === pageNumber) && (!pages[i].classList.contains('active-news-page'))) {
78
+
pages[i].classList.add('active-news-page');
79
+
80
+
if (!document.querySelectorAll('.page-button')[i].className.includes('current')) {
81
+
document.querySelectorAll('.page-button')[i].classList.add('current');
82
+
}
83
+
} else if ((get_page(pages[i]) !== pageNumber) && (pages[i].classList.contains('active-news-page'))) {
84
+
pages[i].classList.remove('active-news-page');
85
+
86
+
if (document.querySelectorAll('.page-button')[i].className.includes('current')) {
87
+
document.querySelectorAll('.page-button')[i].classList.remove('current');
88
+
}
89
+
}
90
+
}
91
+
92
+
if (pageNumber === '1') {
93
+
//document.getElementById('left-elipses').style.display = 'none';
94
+
}
95
+
96
+
if (pageNumber === '20') {
97
+
//document.getElementById('right-elipses').style.display = 'none';
98
+
}
99
+
100
+
currentPage = parseInt(pageNumber);
101
+
numPages = parseInt(pages.length);
102
+
103
+
document.querySelectorAll('.page-button').forEach((element, key, parent) => {
104
+
element.addEventListener('click', (e) => {
105
+
e.preventDefault();
106
+
window.location = `blog.html#${get_page(element)}`;
107
+
window.location.reload();
108
+
}, false);
109
+
});
110
+
111
+
document.getElementById('previous').addEventListener('click', (e) => {
112
+
e.preventDefault();
113
+
var newPage = currentPage - 1;
114
+
115
+
if (newPage === 0) {
116
+
newPage = 1;
117
+
}
118
+
119
+
window.location = `blog.html#${newPage.toString()}`;
120
+
window.location.reload();
121
+
});
122
+
123
+
document.getElementById('next').addEventListener('click', (e) => {
124
+
e.preventDefault();
125
+
var newPage = currentPage + 1;
126
+
127
+
if (newPage > numPages) {
128
+
newPage = numPages;
129
+
}
130
+
131
+
window.location = `blog.html#${newPage.toString()}`;
132
+
window.location.reload();
133
+
});
134
+
135
+
setupNavAnim(document);
136
+
parseMarkdown(document);
137
+
138
+
setTimeout(() => {
139
+
document.body.classList.add('loaded');
140
+
}, 150);
141
+
142
+
setupLink(document);
143
+
})();
+16
scripts/blog_post.js
+16
scripts/blog_post.js
···
1
+
function generateBlogPost(postData)
2
+
{
3
+
return `
4
+
<div class="blog_item full grey_bg">
5
+
<a class="full_link" href="blog-item.html#${postData.id}"></a>
6
+
<div class="abs_bg" style="background-color:#0f404f;"></div>
7
+
<div class="blog_item_inner">
8
+
<h1>${postData.title}</h1>
9
+
<h5 class="date"><div>${postData.author}</div><div>${postData.date}</div>
10
+
<p>${postData.description}</p>
11
+
</div>
12
+
</div>
13
+
`;
14
+
}
15
+
16
+
export default generateBlogPost;
+1
-1
scripts/contact.js
+1
-1
scripts/contact.js
···
24
24
}
25
25
26
26
(function () {
27
-
document.body.innerHTML = getBase(true, false, true);
27
+
document.body.innerHTML = getBase(false, false, true);
28
28
29
29
document.querySelector('.site-content').innerHTML = `
30
30
<div class="input"><input type="text" required placeholder="Name *" name="name" id="contact-name" /></div>
+62
scripts/posts.js
+62
scripts/posts.js
···
1
+
function getPosts() {
2
+
return [
3
+
{
4
+
id: 'updates',
5
+
title: 'Updates!',
6
+
date: '2022 January 02',
7
+
author: 'Cass Forest',
8
+
content: 'Hello everyone! I\'m here with some updates for my creative career, and what better place to do it than here, on my blog, which I really haven\'t used all that much last year since putting it up on my website. In any case, I wanted to make some kind of announcement at the beginning of the year to sort of talk about what I want to do this year and also some goals I\'d like to achieve professionally with my content creation.\n\n#### My !1[**YouTube**] and !1[**Twitch**] Channels\n\nI plan to continue streaming as I have been and am actually introducing a new series to my Twitch channel which you\'ll hear about at the beginning of next week (stay tuned to my Twitter for information on that). I have actually figured out a fix for the weird texture errors I was getting in my Majora\'s Mask 3D playthrough, so we won\'t be seeing any more of those when the series returns to my Twitch channel next week.\n\nAs for my YouTube channel, I plan to keep uploading my VODs from Twitch to YouTube like I have been. If you\'re wondering what I\'m talking about, after my Twitch streams are over, I upload recordings of them to my YouTube channel as Unlisted. However, if you want to access them, you can head to the Playlists section on my YouTube channel and browse from there. Anyways, I want to keep doing more covers and keep releasing more videos of me playing music. I have a list of covers I want to get to, but I haven\'t been able to record any of them as of yet (except for one, which needs to be mixed, mastered, and edited together). I also have written a new song and am looking to get a music video of it done soon so be on the lookout for that on my YouTube channel.\n\n#### My !4[**Music**]\n\nAs I said in the last paragraph, I do have some new music coming out soon. It\'s been recorded, mixed, mastered--the whole kit and kaboodle. I just need to nail down some details to get a music video together and then you should be hearing it soon. I also have my EP of original music, some of which I released as an EP of demos last year titled [Unweather](https://distrokid.com/hyperfollow/cityboundforest/unweather), and that will be releasing sometime in the middle of the year, I project. It could be earlier, but I have another project that will be coming out first.\n\nRegarding that, that\'s an EP of some cover songs and while all the music has been recorded and finalized, I\'m still working on a small part of the project that will be pretty cool and will involve some interesting pictures, so be on the lookout for that. I\'ll announce that on all of my socials (including here).\n\n#### Other News\n\nI am working on a number of projects (as always, haha), but some of them that I\'ll talk about here are The Four Woods Podcast, the Forest Cinema Podcast, and this blog.\n\nStarting with **The Four Woods Podcast**. It\'s the podcast that I launched last April as part of my senior project for my Media Studies degree. I have said that I do want to continue it past that senior project, and I do, in fact, have plans to do so, I just haven\'t gotten around to acting on those plans yet. I feel like this podcast is going to be a large project and I\'ll want to bring on at least a couple of people to do some parts of the podcast that I either find boring or can\'t do. Also on that note, I want to bring in some other writers with respect to Isaiah\'s character as a person of color (which I am not). Also just having a writing team that isn\'t comprised of just me will take a large load off my shoulders as showrunner. More news on The Four Woods Podcast should be coming by April.\n\nMoving onto the **Forest Cinema Podcast**. Most of you likely won\'t know what I\'m talking about. But some of you might. In any case, the Forest Cinema Podcast is a podcast where I take pieces of media and analyze and review them critically from various angles. I\'ve recorded episodes on media such as Hellblade: Senua\'s Sacrifice and Captain America: Civil War, so be on the lookout for an announcement of when that will be going live. I should be getting those first few episodes out by February.\n\nOnto this blog. Like I said at the beginning of this post, I haven\'t really used this blog all that much since putting it on my website at the beginning of last year. I want to be more intentional with my creative endeavors, so that means using this thing more often. I\'ll try to post an update on this blog every week or so talking about the things I\'ve done or am doing that week, projects that are coming up, or announcements of music or podcast releases. Hopefully by the time this post has gone live, I\'ll have created an RSS link you can follow to get updates from this blog.\n\n---\n\nAnyways, that\'s it from me for now. I\'ll see you in the next blog post, or if you want to come talk to me live, I\'ll be streaming live on my Twitch channel this Saturday at 1:00 pm PST, so you can come by the stream and chat with me then.\n\n**UPDATE**: I have realized since writing this post that I probably should have some kind of comments section on my posts. I will be looking into that in the interim, but for now, feel free to use the contact form on my website here or by contacting me on my various social medias to discuss this blog post.\n\n**2nd Update**: I have sort of obviously added a Disqus comment form down below that will appear underneath all of my blog posts (hopefully the way I set it up works for all of them and they don\'t duplicate, fingers crossed). We may have some bumps in the road later on, but for now, this is where we\'re at. Enjoy!',
9
+
description: 'A small little update on what I\'m planning on doing in the coming year.'
10
+
},
11
+
{
12
+
id: 'minecraft_stream',
13
+
title: 'Minecraft Stream on Saturday!',
14
+
date: '2022 January 05',
15
+
author: 'Cass Forest',
16
+
content: 'Hey everyone! This is just a reminder that I\'ll be streaming this Saturday at 1:00 pm PST on my [Twitch Channel](https://twitch.tv/cityboundforest) playing Minecraft with my friend KniightRyder. Hope to see you there!\n\nMake sure you follow me on Twitch to get notifications for when I go live!',
17
+
description: 'Just a reminder of my upcoming Minecraft stream on Saturday.'
18
+
},
19
+
{
20
+
id: 'streamschedule_updates',
21
+
title: 'Stream Schedule and Updates!',
22
+
date: '2022 January 09',
23
+
author: 'Cass Forest',
24
+
content: 'Hello everyone! I\'m back with some more announcements!\n\n#### !1[**Twitch Stream Schedule**]\n\nI have a new stream schedule for this week! Here it is!\n\n\n\n#### Podcasts\n\nI\'m currently trying to work on editing together a D&D actual play podcast surrounding the Skull & Shackles Adventure Path written for Pathfinder 1st Edition (although we play in Pathfinder 2nd Edition). Since I\'m the only editor on the project and it\'s not my only priority (as streaming takes up most of my time alongside finding a stable job), it\'s been taking me a while to edit the first episode, but when it comes out, you\'ll be able to get an update here on my blog as well as on all of my social media accounts. The problem with me being the only editor on the project is that I *also* run the game and we\'re also like 20 sessions in. And we\'re starting sessions back up this upcoming week. So I have a lot of work to do on that.\n\nIn any case, I\'ve worked out a kind of budget when it comes to paying the voice actors for my audio drama podcast The Four Woods Podcast. Beyond that, I\'ll need to, well, ask them whether or not they would be willing to return for the rest of the podcast as well as find writers and editors for the show.\n\n---\n\nIn any case, that\'s all I\'ve got on this front for blog posts. I\'m still wondering what else to put on this blog other than my stream updates and creative updates.',
25
+
description: 'A new stream schedule and some updates about my creative content.'
26
+
},
27
+
{
28
+
id: 'secondstreamschedule',
29
+
title: 'New Stream schedule!',
30
+
date: '2022 January 16',
31
+
author: 'Cass Forest',
32
+
content: 'Hello everyone! I\'m back with another stream schedule!\n\n\n\nThat\'s all from me for now, see you over on Twitch!',
33
+
description: 'My new stream schedule for this upcoming week.'
34
+
},
35
+
{
36
+
id: 'thirdstreamschedule',
37
+
title: 'Another New Stream Schedule!',
38
+
date: '2022 January 23',
39
+
author: 'Cass Forest',
40
+
content: 'Hey everyone! I\'m back with another stream schedule! Also I\'ve found that I\'ve started to use this blog just to post my stream schedules and other creative updates and while I certainly want to keep doing that, I feel like it has a bigger purpose than that, but I haven\'t necessarily figured out what that is yet.\n\nAnyways, here\'s the stream schedule!\n\n\N\NThat\'s all from me for this post, see you over on Twitch!',
41
+
description: 'Another stream schedule for this upcoming week.'
42
+
},
43
+
{
44
+
id: 'streamscheduleandbudgetupdate',
45
+
title: 'Stream Schedule and an Update!',
46
+
date: '2022 January 30',
47
+
author: 'Cass Forest',
48
+
content: 'Hey everyone! Here\'s a new stream schedule for this week. I\'m going to keep publishing my stream schedules here as I make them but I still want to do more with this blog. If you have any ideas, let me know down below in the comments. Anyway, onto the stream schedule!\n\n\n\nThat\'s all from me in this post, see you over on Twitch!\n\n---\n\n### Update on the Four Woods Podcast\n\nHey! I have an update on my audio drama podcast, The Four Woods Podcast. I\'ve done some research and I\'m moving forward in the pre-production process for season 1 of the show. Right now, all I\'ve got is a budget outline for how much I\'m going to need to raise to pay the actors, the writers that I\'m going to bring on, the editors that I\'m going to bring on (that\'s audio editors, not script editors), as well as myself. It\'s currently looking to be around $15,000, but I don\'t have exact numbers yet, and I won\'t have exact numbers until I figure out some specific things like any characters that I\'m going to need to add for later episodes in the season. I\'m considering making a Patreon, but I already have my [Ko-Fi](https://ko-fi.com/cityboundforest) set up and it can take monthly donations, so I\'m tempted to use that instead. Let me know which you\'d rather me use (Patreon or Ko-Fi) in the comments below. Any money coming in through Ko-Fi with the express mention of the podcast will go to the podcast (and if I make a Patreon, I\'ll put some percentage that I\'ll figure out later into the podcast); otherwise, it\'ll just go to me through my usual channels (similar to my Twitch subscriptions or StreamElements tips). In any case, things are looking up for the podcast and I\'m excited to see where things are going to go. Keep an eye out on this space as well as my other socials to hear more about this and I\'ll see you later!!!',
49
+
description: 'This week\'s stream schedule (January 31 - February 5, 2022) as well as an update on my audio drama podcast'
50
+
},
51
+
{
52
+
id: 'streamschedulepodcastupdate',
53
+
title: 'Another Stream Schedule and Podcast Update',
54
+
date: '2022 February 6',
55
+
author: 'Cass Forest',
56
+
content: 'Hey everyone! This blog post, much like the film adaptation of Mockingjay by Susanne Collins, comes to you in two parts.\n\n### Part 1: Stream Schedule\n\nHere is the stream schedule for this upcoming week. Enjoy!\n\n\n\n---\n\n### Part 2: The Four Woods Podcast Update\n\nLast week I said that I was getting together a budget for the continued production of my audio drama podcast, [The Four Woods Podcast](https://beacons.page/4woodspodcast). Well, I have since made a mock-up budget and am getting ready to start sending out a request for writers to join the project. The budget hasn\'t changed that much from my projections last week, so I\'ll still want to raise a lot of money for this project, most of which will be going to the actors. Any donations made to my Twitch page in which the donator requests that the money received be put towards the podcast (this includes subscriptions and bits) as well as donations made through my StreamElements donation page in which the donator requests that the money donated be put towards the podcast will be put to the side and will count towards that goal that I mentioned last week. Any of my Ko-Fi donations in which the donator requests that the money go towards the podcast will also be set aside similarly. I really hope I get to continue making this podcast as I had a lot of fun creating it last year.\n\n---\n\nIn any case, that\'s all for me on this post. I\'ll see you over on Twitch or wherever else I happen to be!',
57
+
description: 'The stream schedule for this week (February 7 - 11, 2022) and an important update for The Four Woods Podcast'
58
+
}
59
+
];
60
+
}
61
+
62
+
export default getPosts;