A repo for my personal website
Adding the blog item page and the blog rss feed
+199
-10
+17
blog-item.html
+17
blog-item.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_item.js" type="module"></script>
15
+
</head>
16
+
<body></body>
17
+
</html>
+58
blog-rss.xml
+58
blog-rss.xml
···
1
+
<?xml version="1.0" encoding="utf-8"?>
2
+
<rss version="2.0">
3
+
<channel>
4
+
<title>CityboundForest's Blog</title>
5
+
<link>https://skeetcha.github.io/blog.html</link>
6
+
<description>The blog posts from CityboundForest's website.</description>
7
+
<language>en-us</language>
8
+
<item>
9
+
<title>Another Stream Schedule and Podcast Update</title>
10
+
<link>https://skeetcha.github.io/blog-item.html#streamschedulepodcastupdate</link>
11
+
<guid>streamschedulepodcastupdate</guid>
12
+
<pubDate>Sun, 06 Feb 2022 12:00:00 PST</pubDate>
13
+
<description>The stream schedule for this week (February 7 - 11, 2022) and an important update for The Four Woods Podcast</description>
14
+
</item>
15
+
<item>
16
+
<title>Stream Schedule and an Update!</title>
17
+
<link>https://skeetcha.github.io/blog-item.html#streamscheduleandbudgetupdate</link>
18
+
<guid>streamscheduleandbudgetupdate</guid>
19
+
<pubDate>Sun, 30 Jan 2022 12:13:00 PST</pubDate>
20
+
<description>This week's stream schedule (January 31 - February 5, 2022) as well as an update on my audio drama podcast</description>
21
+
</item>
22
+
<item>
23
+
<title>Another New Stream Schedule!</title>
24
+
<link>https://skeetcha.github.io/blog-item.html#thirdstreamschedule</link>
25
+
<guid>thirdstreamschedule</guid>
26
+
<pubDate>Sun, 23 Jan 2022 17:27:00 PST</pubDate>
27
+
<description>Another stream schedule for this upcoming week.</description>
28
+
</item>
29
+
<item>
30
+
<title>New Stream schedule!</title>
31
+
<link>https://skeetcha.github.io/blog-item.html#secondstreamschedule</link>
32
+
<guid>secondstreamschedule</guid>
33
+
<pubDate>Sun, 16 Jan 2022 14:10:00 PST</pubDate>
34
+
<description>My new stream schedule for this upcoming week.</description>
35
+
</item>
36
+
<item>
37
+
<title>Stream Schedule and Updates!</title>
38
+
<link>https://skeetcha.github.io/blog-item.html#streamschedule_updates</link>
39
+
<guid>streamschedule_update</guid>
40
+
<pubDate>Sun, 09 Jan 2022 13:45:00 PST</pubDate>
41
+
<description>A new stream schedule and some updates about my creative content.</description>
42
+
</item>
43
+
<item>
44
+
<title>Minecraft Stream on Saturday!</title>
45
+
<link>https://skeetcha.github.io/blog-item.html#minecraft_stream</link>
46
+
<guid>minecraft_stream</guid>
47
+
<pubDate>Wed, 05 Jan 2022 13:26:00 PST</pubDate>
48
+
<description>Just a reminder of my upcoming Minecraft stream on Saturday.</description>
49
+
</item>
50
+
<item>
51
+
<title>Updates!</title>
52
+
<link>https://skeetcha.github.io/blog-item.html#updates</link>
53
+
<guid>updates</guid>
54
+
<pubDate>Sun, 02 Jan 2022 15:36:00 PST</pubDate>
55
+
<description>A small little update on what I'm planning on doing in the coming year.</description>
56
+
</item>
57
+
</channel>
58
+
</rss>
+1
-1
scripts/about.js
+1
-1
scripts/about.js
···
4
4
import setupLink from './link_setup.js';
5
5
6
6
(function() {
7
-
document.body.innerHTML = getBase(false, false, false);
7
+
document.body.innerHTML = getBase(false, false, false, false);
8
8
document.querySelector('.site-content').innerHTML = `
9
9
<div class="page-desc">
10
10
<p class="markdown">"Creativity is an energy. It's a precious energy, and it's something to be protected. A lot of people take for granted that they're a creative person, but I know from experience, feeling it in myself, it is a magic; it is an energy. And it can't be taken for granted." --Ava DuVernay</p>
+3
-3
scripts/base.js
+3
-3
scripts/base.js
···
2
2
import getHeader from './head.js';
3
3
import getFoot from './foot.js';
4
4
5
-
function getBase(is_index, add_nav, is_contact) {
5
+
function getBase(is_index, add_nav, is_contact, is_blog_post) {
6
6
if (add_nav) {
7
7
return `
8
8
${getNav()}
9
9
<div class="site-container">
10
-
${getHeader(is_index, is_contact)}
10
+
${getHeader(is_index, is_contact, is_blog_post)}
11
11
<section class="site-content">
12
12
</section>
13
13
<nav role="navigation" id="foot-nav">
···
19
19
return `
20
20
${getNav()}
21
21
<div class="site-container">
22
-
${getHeader(is_index, is_contact)}
22
+
${getHeader(is_index, is_contact, is_blog_post)}
23
23
<section class="site-content">
24
24
</section>
25
25
${getFoot()}
+9
-1
scripts/blog.js
+9
-1
scripts/blog.js
···
13
13
};
14
14
15
15
(function () {
16
-
document.body.innerHTML = getBase(false, true, false);
16
+
document.body.innerHTML = getBase(false, true, false, false);
17
17
18
18
document.querySelector('.site-content').innerHTML = `
19
19
<div class="page-desc">
···
130
130
131
131
window.location = `blog.html#${newPage.toString()}`;
132
132
window.location.reload();
133
+
});
134
+
135
+
document.querySelectorAll('.cd-primary-nav li a').forEach((element, key, parent) => {
136
+
if (element.href.indexOf('blog.html') != -1) {
137
+
element.classList.add('selected');
138
+
} else {
139
+
element.classList.remove('selected');
140
+
}
133
141
});
134
142
135
143
setupNavAnim(document);
+82
scripts/blog_item.js
+82
scripts/blog_item.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
+
7
+
var converter = new showdown.Converter();
8
+
9
+
(function () {
10
+
document.body.innerHTML = getBase(false, true, false, true);
11
+
12
+
var postHash = window.location.hash.substring(1);
13
+
var postData = getPosts();
14
+
15
+
for (var i = 0; i < postData.length; i++) {
16
+
if (postData[i].id === postHash) {
17
+
postData = postData[i];
18
+
break;
19
+
} else if ((postData[i].id !== postHash) && (i == (postData.length - 1))) {
20
+
postData = undefined;
21
+
}
22
+
}
23
+
24
+
var title = '', author = '', date = '', content = '';
25
+
26
+
if (postData !== undefined) {
27
+
title = postData.title;
28
+
author = postData.author;
29
+
date = postData.date;
30
+
content = postData.content;
31
+
}
32
+
33
+
document.querySelector('.site-tagline').innerHTML = `
34
+
<h1 id="blog-post-title">${title}</h1>
35
+
<h6 class="date"><span id="blog-post-author">${author}</span> | <span id="blog-post-date">${date}</span></h6>
36
+
`;
37
+
38
+
content = converter.makeHtml(content);
39
+
var colors = ['#00eeff', '#fffb00', '#ff3e3e', '#ff70e7'];
40
+
41
+
content = content.replaceAll(/!(\d)+\[([*A-Za-z0-9 <>/\-".!']+)\]/gm, function(str, numMatch, innerText) {
42
+
var num = parseInt(numMatch, 10) - 1;
43
+
return '<span style="color:' + colors[num] + ';">' + innerText + '</span>';
44
+
});
45
+
46
+
document.querySelector('.site-content').innerHTML = `
47
+
<div class="page-desc" id="blog-post-content">${content}</div>
48
+
`;
49
+
50
+
document.querySelector('.site-container').innerHTML += `
51
+
<div id="disqus_thread style="margin:0 auto;width:75%;">
52
+
<script src="scripts/disqus.js"></script>
53
+
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
54
+
</div>
55
+
`;
56
+
57
+
document.getElementById('foot-nav').innerHTML = `
58
+
<ul class="cd-pagination animated-buttons custom-icons">
59
+
<li class="button"><a href="#"><i>Prev</i></a></li>
60
+
<li class="button"><a href="#"><i>Next</i></a></li>
61
+
</ul>
62
+
`;
63
+
64
+
document.title = `C/B/F - ${title}`;
65
+
66
+
document.querySelectorAll('.cd-primary-nav li a').forEach((element, key, parent) => {
67
+
if (element.href.indexOf('blog.html') != -1) {
68
+
element.classList.add('selected');
69
+
} else {
70
+
element.classList.remove('selected');
71
+
}
72
+
});
73
+
74
+
setupNavAnim(document);
75
+
parseMarkdown(document);
76
+
77
+
setTimeout(() => {
78
+
document.body.classList.add('loaded');
79
+
}, 150);
80
+
81
+
setupLink(document);
82
+
})();
+1
-1
scripts/contact.js
+1
-1
scripts/contact.js
···
24
24
}
25
25
26
26
(function () {
27
-
document.body.innerHTML = getBase(false, false, true);
27
+
document.body.innerHTML = getBase(false, false, true, false);
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>
+15
scripts/disqus.js
+15
scripts/disqus.js
···
1
+
/**
2
+
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
3
+
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */
4
+
5
+
var disqus_config = function () {
6
+
this.page.url = window.location.href; // Replace PAGE_URL with your page's canonical URL variable
7
+
this.page.identifier = window.location.hash.substring(1); // Replace PAGE_IDENTIFIER with your page's unique identifier variable
8
+
};
9
+
10
+
(function() { // DON'T EDIT BELOW THIS LINE
11
+
var d = document, s = d.createElement('script');
12
+
s.src = 'https://cityboundforest.disqus.com/embed.js';
13
+
s.setAttribute('data-timestamp', +new Date());
14
+
(d.head || d.body).appendChild(s);
15
+
})();
+11
-2
scripts/head.js
+11
-2
scripts/head.js
···
1
-
function getHeader(is_index, is_contact) {
1
+
function getHeader(is_index, is_contact, is_blog_post) {
2
2
if (is_index) {
3
3
return `
4
4
<header class="site-header cf">
···
19
19
</div>
20
20
</header>
21
21
`;
22
-
} else {
22
+
} else if (is_blog_post) {
23
+
return `
24
+
<header class="site-header cf">
25
+
<div class="site-title"><a href="index.html">C/B/F</a></div>
26
+
<div class="cf"></div>
27
+
<div class="site-tagline">
28
+
</div>
29
+
</header>
30
+
`;
31
+
}else {
23
32
return `
24
33
<header class="site-header cf">
25
34
<div class="site-title"><a href="index.html">C/B/F</a></div>
+1
-1
scripts/main.js
+1
-1
scripts/main.js
···
5
5
import setupLink from './link_setup.js';
6
6
7
7
(function () {
8
-
document.body.innerHTML = getBase(true, false, false);
8
+
document.body.innerHTML = getBase(true, false, false, false);
9
9
document.querySelector('.site-content').innerHTML = `<div class="projects-feed cf"></div>`;
10
10
11
11
var projects = [{id: 'fourwoods', title: 'The Four Woods Podcast', description: 'An audio drama podcast about myth and magic - Writer, Director, Editor, Producer'}, {id: 'mememachine', title: 'Meme Machine', description: 'Download, Rate, and Create Memes - Programmer'}, {id: 'shutin', title: 'Shut In', description: 'Short Film - Gaffer, Foley Artist, Sound Editor'}, {id: 'bulletrush', title: 'Bullet Rush', description: 'Cuphead meets First Person Shooter games - Programmer, Project Manager'}, {id: 'dndcombatsim', title: 'Dungeons and Dragons Combat Simulator', description: 'Combat simulator for the 5th Edition of the Tabletop RPG Dungeons and Dragons - Programmer, Project Manager'}, {id: 'cansat', title: 'CanSat', description: 'A simulated sattelite in an enclosure the shape and size of a soda can - Programmer'}];