---
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>