added categories to the blog

blog/src/posts.json

@@ -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"
     }

index.html

@@ -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">
+                    <div id="blog-archive"></div>
-                        <em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
-                    </div>
                     <script src="./scripts/blog.js"></script>
                 </div>
             </div>

node/blog.js

@@ -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;
     }
 }

node/rss.js

@@ -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);

scripts/blog.js

@@ -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--) {
+    list.html("");
-            var obj = json[i];
+    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);
+        });
+    }
+}

style/style.css

@@ -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;
+    }
 }