Added categories

_layouts/page.html

@@ -24,14 +24,14 @@
 
 
                 <div class="title-container container">
-                    <h1>{{page.title}}</h1>
+                    <h1 id="page-title">{{page.title}}</h1>
-                    <h4>{{page.description}}</h4>
+                    <h4 id="page-subtitle">{{page.description}}</h4>
 
                     {% assign page_date = page.date | split: " " %}
                     <h6>
                         <small style="color:gray;">{{page_date.first}}</small>
                         {% for category in page.categories %}
-                        <span class="badge badge-secondary">{{category}}</span>
+                        <a href="/categories?c={{category}}"><span class="badge" style="background-color: var(--light-gray);color:#333;">{{category}}</span></a>
                         {% endfor %}
                     </h6>
 

assets/css/page.css

@@ -47,6 +47,10 @@ iframe {
     
 }
 
+.hidden{
+    display:none !important;
+}
+
 /* .inner-content-container>p>a {
     position: relative;
     display: inline-block;

blog.html

@@ -6,7 +6,7 @@ backing_img: /assets/images/innovation__monochromatic.svg
 backing_scalar: "height:90%;"
 ---
 
-Here is a list of things I find interesting, and writeups of projects I have worked on.
+<p>Here is a list of things I find interesting, and writeups of projects I have worked on.</p>
 
 <div class="list-group" id="posts">
     <!-- <a href="#posts"

categories.html

@@ -0,0 +1,55 @@
+---
+title: Categories
+layout: page
+backing_img: /assets/images/innovation__monochromatic.svg
+backing_scalar: "height:90%;"
+---
+
+<!-- This page uses JS for everything -->
+<noscript>
+    <p>This page requires JavaScript.</p>
+</noscript>
+
+<div class="list-group" id="posts">
+    {% for post in site.posts %}
+    {% assign the_date = post.date | split: " " %}
+
+    <a href="{{post.url}}" class="list-group-item list-group-item-action hidden"
+        categories="{% for category in post.categories %}{{category}},{% endfor %}">
+        <div class="d-flex w-100 justify-content-between">
+            <h5 class="mb-1">{{post.title}}</h5>
+            <small style="color:gray;">{{the_date.first}}</small>
+        </div>
+        <p class="card-text">{{post.description}}</p>
+    </a>
+
+    {% endfor %}
+</div>
+
+<script>
+
+    // Load the category name
+    var category = new URLSearchParams(window.location.search).get("c");
+
+    // Handle no category
+    if (category == null) {
+        document.location = "/";
+    }
+
+    // Fill in the subtitle
+    document.getElementById("page-subtitle").innerText = "Here are all my posts about " + category + ":";
+
+    // Get all sub-posts of the posts list
+    var allposts = document.getElementById("posts").children;
+
+    // Iterate through each post, and unhide it if it has a matching catrgory
+    for (let post of allposts) {
+        console.log(post)
+        if (post.attributes.categories.nodeValue.split(",").includes(category)) {
+            post.classList.remove("hidden");
+        }
+    };
+
+
+
+</script>