---
title: All posts by year
show_tags: true
permalink: posts/
---

<div class="d-md-block d-lg-none mb-3">
    {% include components/all-tags.html %}
</div>

<div id="currently-showing">
    <h2 class="d-flex align-items-center mb-3">
        <span class="text-secondary mr-2">Showing everything matching:</span>
        <span class="border rounded p-2 mr-2 bg-light text-secondary" id="active-tag"></span>
        <a class="btn btn-primary btn-small" href="javascript:void(0)" onclick="clearTags()">clear</a>
    </h4>
</div>

{% capture written_year %}'None'{% endcapture %}
{% for post in site.posts %}

    {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}

    {% if year != written_year %}
        <h5 class="text-secondary mt-4 mb-4 p-2 bg-light rounded" id="{{ year | slugify }}">
            {{ year }}
        </h5>
        {% capture written_year %}{{ year }}{% endcapture %}
    {% endif %}

    {% include components/post-card.html %}

{% endfor %}

<script type="text/javascript">

    var parseHash = function() {
        if (document.location.hash.length > 0) {
            var tag = document.location.hash.slice(1)
            var name = $(".tag-" + tag).first().text()
            showPostByTag(tag, name)
        }
        else {
            clearTags()
        }
    }

    $(document).ready(parseHash);

    $(window).on('hashchange', parseHash);

    var showPostByTag = function(tag, name) {
        $("#currently-showing").show()
        $(".card-post").hide()
        $(".tag").removeClass("bg-warning")
            .addClass("bg-white")
            .removeClass("text-dark")
        $(".card-post").each(function(idx, card) {
            var matches = $(card).find(".tag-" + tag)
            if (matches.length > 0) $(card).show()
        })
        $(".tag-" + tag).removeClass("bg-white")
            .addClass("bg-warning")
            .addClass("text-dark")
            .blur()
        $("#active-tag").html(name)
    }

    var clearTags = function() {
        $("#currently-showing").hide()
        $(".card-post").show()
        $(".tag").removeClass("bg-warning")
            .addClass("bg-white")
            .removeClass("text-dark")
        document.location.hash = ""
    }

</script>