Ellpeck/Web
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

added categories to the blog
All checks were successful
Web/pipeline/head This commit looks good
Details

Browse source
This commit is contained in:
Ell 2021-03-17 03:07:12 +01:00
parent 3f5e2ac4de
commit 8cd72547f0
6 changed files with 82 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
blog/src/posts.json
View file

@ -2,6 +2,7 @@
"name": "Blogs are Cool, I Think",
"summary": "The first post and how I created it",
"id": "blogs_are_cool",
"cat": "Miscellaneous",
"date": "2/17/2019",
"discuss": "https://twitter.com/Ellpeck/status/1096937184601538566",
"archived": true
@ -10,6 +11,7 @@
"name": "Why You Should Mod Minecraft",
"summary": "About what makes Minecraft modding great and why you should probably try it if you enjoy programming",
"id": "why_you_should_mod_minecraft",
"cat": "Minecraft",
"date": "2/17/2019",
"discuss": "https://twitter.com/Ellpeck/status/1097177774337462272"
},
@ -17,6 +19,7 @@
"name": "Kindling the Reading Flame",
"summary": "About the Kindle, Harry Potter and what I like and dislike about them",
"id": "reading",
"cat": "Miscellaneous",
"date": "3/22/2019",
"discuss": "https://twitter.com/Ellpeck/status/1109102077911973888"
},
@ -24,6 +27,7 @@
"name": "Small Projects",
"summary": "Why creating a small, unplanned project is sometimes good for you",
"id": "small_projects",
"cat": "Programming",
"date": "5/1/2019",
"discuss": "https://twitter.com/Ellpeck/status/1123651624201871360"
},
@ -31,6 +35,7 @@
"name": "About Cross-Platform and Motivation",
"summary": "How moving from Java to C# taught me how horrible it is to create a cross-platform application with little to no knowledge or documentation",
"id": "cross_platform_trainwreck",
"cat": "Programming",
"date": "7/6/2019",
"discuss": "https://twitter.com/Ellpeck/status/1147502654236573697",
"archived": true
@ -39,6 +44,7 @@
"name": "Big Projects",
"summary": "How a once small project I even created a post about turned into the first game I'm selling: Foe Frenzy",
"id": "big_projects",
"cat": "Programming",
"date": "9/15/2019",
"discuss": "https://twitter.com/Ellpeck/status/1173247686654517249"
},
@ -46,6 +52,7 @@
"name": "How to make a Rock Bottom mod",
"summary": "My adventures back into a game I stopped working on about two years ago and how I start on a mod for it",
"id": "rock_bottom_mod",
"cat": "Programming",
"date": "10/3/2019",
"discuss": "https://twitter.com/Ellpeck/status/1180092634410487808"
},
@ -53,6 +60,7 @@
"name": "Java Tutorial, Part 1: Hello World",
"summary": "The first part of my post series for programming beginners where I explain how to write code in Java.",
"id": "java_1",
"cat": "Java Tutorials",
"date": "10/10/2019",
"discuss": "https://twitter.com/Ellpeck/status/1182080078827737088"
},
@ -60,6 +68,7 @@
"name": "Java Tutorial, Part 2: Intro to Conditions and Loops",
"summary": "The second part of my post series for programming beginners. This one is all about conditions and loops.",
"id": "java_2",
"cat": "Java Tutorials",
"date": "10/10/2019",
"discuss": "https://twitter.com/Ellpeck/status/1182354544707198976"
},
@ -67,6 +76,7 @@
"name": "Java Tutorial, Part 3: (Static) Methods",
"summary": "In this Java tutorial for beginners, we cover what (static) methods, parameters and return types are.",
"id": "java_3",
"cat": "Java Tutorials",
"date": "10/11/2019",
"discuss": "https://twitter.com/Ellpeck/status/1182775985885847558"
},
@ -74,6 +84,7 @@
"name": "Java Tutorial, Part 4: Classes and Objects",
"summary": "In this Java tutorial for beginners, we cover the basics of creating classes with a constructor, some fields and some methods and creating objects of them.",
"id": "java_4",
"cat": "Java Tutorials",
"date": "10/14/2019",
"discuss": "https://twitter.com/Ellpeck/status/1183857460660101133"
},
@ -81,6 +92,7 @@
"name": "Java Tutorial, Part 5: Things I Left Out So Far",
"summary": "In this Java tutorial for beginners, we cover some shorthands, some more data types, the difference between pass-by-reference and pass-by-value, null, as well as arrays and lists.",
"id": "java_5",
"cat": "Java Tutorials",
"date": "10/17/2019",
"discuss": "https://twitter.com/Ellpeck/status/1184894859133509632"
},
@ -88,6 +100,7 @@
"name": "Lows",
"summary": "About depression and what it feels like when I don't know what to do with myself",
"id": "lows",
"cat": "Miscellaneous",
"date": "10/20/2019",
"discuss": "https://twitter.com/Ellpeck/status/1186028260838334471",
"archived": true
@ -96,6 +109,7 @@
"name": "Java Tutorial, Part 6: Inheritance",
"summary": "In this Java tutorial for beginners, we cover classes extending other classes and the instanceof keyword.",
"id": "java_6",
"cat": "Java Tutorials",
"date": "10/31/2019",
"discuss": "https://twitter.com/Ellpeck/status/1189904487722487809"
},
@ -103,6 +117,7 @@
"name": "Java Tutorial, Part 7: Overriding Methods",
"summary": "In this Java tutorial for beginners, we cover overriding methods, calling superclass methods and toString().",
"id": "java_7",
"cat": "Java Tutorials",
"date": "11/26/2019",
"discuss": "https://twitter.com/Ellpeck/status/1199339701640945664"
},
@ -110,12 +125,14 @@
"name": "But Do You Really Care?",
"summary": "On taking a break from social media",
"id": "but_do_you_really_care",
"cat": "Miscellaneous",
"date": "5/6/2020"
},
{
"name": "Oh God, Please Don't Port Actually Additions",
"summary": "As Actually Additions celebrates its fifth birthday, I break down what I like and dislike about it.",
"id": "actually_additions",
"cat": "Minecraft",
"date": "5/10/2020",
"discuss": "https://twitter.com/Ellpeck/status/1259600490377216002"
},
@ -123,6 +140,7 @@
"name": "The Future of Actually Additions",
"summary": "Not wanting to accept the fate of Actually Additions, someone has come to its rescue. 1.16, here we come?",
"id": "future_actually_additions",
"cat": "Minecraft",
"date": "11/23/2020",
"discuss": "https://twitter.com/Ellpeck/status/1330938597785169925"
}

5
index.html
View file

@ -169,13 +169,12 @@
Occasionally I enjoy writing stuff. So here's some of the stuff I've written. Just click on any of the headers to open the post. Alternatively, you can subscribe to this blog using <a href="/rss.xml">RSS</a>, <a href="/atom.xml">Atom</a> or <a href="/feed.json">JSON</a>.
</p>
<div id="blog-cats"></div>
<div id="blog-list">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
</div>
<button type="button" class="btn btn-link" id="blog-archive-button">Show archived posts</button>
<div id="blog-archive">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
</div>
<div id="blog-archive"></div>
<script src="./scripts/blog.js"></script>
</div>
</div>

7
node/blog.js
View file

@ -41,10 +41,10 @@ fs.readFile(folder + "index.html", function (_, html) {
nav += '<a class="nav-item nav-link" href="/#blog">Back to Main Page</a>';
let last = getAdjacentPost(json, i, -1);
if (last)
nav += '<a class="nav-item nav-link" href="/blog/' + last.id + '">Previous Post</a>';
nav += '<a class="nav-item nav-link" href="/blog/' + last.id + '">Previous ' + post.cat + ' Post</a>';
let next = getAdjacentPost(json, i, 1);
if (next)
nav += '<a class="nav-item nav-link" href="/blog/' + next.id + '">Next Post</a>';
nav += '<a class="nav-item nav-link" href="/blog/' + next.id + '">Next ' + post.cat + ' Post</a>';
document.getElementById("nav-items").innerHTML = nav;
let c = "";
@ -72,12 +72,13 @@ fs.readFile(folder + "index.html", function (_, html) {
});
function getAdjacentPost(json, index, move) {
let cat = json[index].cat;
while (true) {
index += move;
let post = json[index];
if (!post)
break;
if (!post.archived)
if (post.cat == cat && !post.archived)
return post;
}
}

7
node/rss.js
View file

@ -45,8 +45,13 @@ function createFeed(callback) {
description: post.summary,
content: html,
date: date,
published: date
published: date,
category: [{
name: post.cat
}]
});
if (feed.categories.indexOf(post.cat) < 0)
feed.addCategory(post.cat);
if (i == 0) {
callback(feed);

36
scripts/blog.js
View file

@ -4,23 +4,38 @@ $("#blog-archive-button").on("click", function () {
$(this).html((archive.is(":visible") ? "Hide" : "Show") + " archived posts");
});
let blogData;
$.ajax({
dataType: "json",
url: "blog/src/posts.json",
cache: false,
success: function (json) {
let list = $('#blog-list');
blogData = json;
populateBlog("All");
forceToAnchor();
}
});
function populateBlog(cat) {
let archive = $('#blog-archive');
list.html("");
let list = $('#blog-list');
let cats = $('#blog-cats');
archive.html("");
for (let i = json.length - 1; i >= 0; i--) {
var obj = json[i];
list.html("");
cats.html("");
addCatButton(cats, "All");
for (let i = blogData.length - 1; i >= 0; i--) {
var obj = blogData[i];
addCatButton(cats, obj.cat);
if (cat == "All" || obj.cat == cat) {
let p = "";
p += '<div class="card bg-light blog-entry rounded-0">';
p += '<div class="card-body">';
p += '<h4 class="card-title"><a class="blog-button" href="/blog/' + obj.id + '">' + obj.name + '</a></h4>';
p += '<h4 class="card-title blog-title"><a class="blog-button" href="/blog/' + obj.id + '">' + obj.name + '</a></h4>';
p += '<div class="card-text text-muted blog-summary">' + obj.summary + '</div>';
p += '<span class="text-muted project-status">' + obj.date + "</span>";
p += '<span class="text-muted blog-cat">' + obj.cat + "</span>";
p += '</div></div>';
if (obj.archived) {
archive.append(p);
@ -28,6 +43,15 @@ $.ajax({
list.append(p);
}
}
forceToAnchor();
}
}
function addCatButton(cats, cat) {
let catAnchor = `blog-cat-${cat.toLowerCase().replace(" ", "_")}`;
if (!$(`#${catAnchor}`).length) {
cats.append(`<button type="button" class="btn btn-link blog-cat-button" id=${catAnchor}>${cat}</button>`);
$(`#${catAnchor}`).on('click', function () {
populateBlog(cat);
});
}
}

20
style/style.css
View file

@ -56,6 +56,12 @@ body {
bottom: 15px;
}
.blog-cat {
position: absolute;
right: 20px;
top: 15px;
}
.social-button {
width: 200px;
margin: 10px;
@ -76,6 +82,11 @@ body {
text-align: center;
}
.blog-cat-button {
padding: 0px;
margin-right: 10px;
}
#blog-archive-button {
display: block;
position: relative;
@ -123,7 +134,8 @@ body {
margin-top: 15px;
}
.blog-summary {
.blog-summary,
.blog-title {
width: 85%;
}
@ -255,4 +267,10 @@ blockquote {
right: 10px;
bottom: 5px;
}
.blog-cat {
position: absolute;
right: 10px;
top: 5px;
}
}