---
layout: recommends
title: Matth-ijs.nl recommends
---
<h1>Matth-ijs.nl recommends...</h1>
<p>Here you'll find any and all things I'd recommend 😇. <a href="/project/2017/09/05/project-recommends/">Check the blog-post</a></p>

<!-- categories filter -->
Categories:
<!-- create categories array-->
{% assign categories_array = "" | split:"|" %}

<!--Add each unique 'my_collection' category to the array-->
{% for post in site.recommendations %}
    {% for category in post.categories %}
        {% assign categories_array = categories_array | push: category | uniq %}
    {% endfor %}
{% endfor %}

<!--Output the categories-->
{% for category in categories_array %}
    <a href="#" onclick="setDisplay('card', 'none'); setDisplay('{{ category }}', 'block');">{{ category }}</a> |
{% endfor %}
<a href="#" onclick="setDisplay('card', 'block');">all</a>
<hr>

<div class="cards">
  {% for recommendation in site.recommendations reversed %}
  <a href="{{ recommendation.link }}" target="_blank">
    <div class="card {{ recommendation.category }}">
      <div class="card-image" style="background-image: url('/images/recommends/resized/{{ recommendation.image }}');"></div>
      <div class="card-container">
        <h4><b>{{ recommendation.title }}</b></h4>
        <p>{{ recommendation.content }}</p>
      </div>
    </div>
  </a>
  {% endfor %}
</div>

<center><i>images on this page obviously do not fall under Creative Commons license</i></center>

<script>
/**
 * sets display of a certain class
 * @param {string} target - the classname whose display property should be changed
 * @param {string} display - whether it should be hidden or shown ("none" or "block")
 */
function setDisplay(target, display) {
  var elements = document.querySelectorAll("." + target);
  elements.forEach(function (e) {e.style.display = display});
}
</script>