categories-tab.html

<div class="tab">
  <ul class="cards">
    {% capture cats %}
      {% for cat in site.categories %}
        {{ cat | first }}
      {% endfor %}
    {% endcapture %}
    {% assign sortedCats = cats | split: ' ' | sort %}

    {% for category in sortedCats %}
      <li class="card">
        {% assign cat_dir = site.category_dir | default: 'category' %}
        <a class="card__link" href="{{ site.baseurl }}/{{ cat_dir }}/{{ category | downcase | slugify }}/">
          {% for post in site.categories[category] limit: 1 %}
            <div class="card__img">
              {% if post.image-sm %}
                <figure class="absolute-bg" style="background-image: url('{{ post.image-sm }}');"></figure>
              {% else %}
                <figure class="absolute-bg" style="background-image: url('{{ post.image }}');"></figure>
              {% endif %}
            </div>
          {% endfor %}
          <div class="card__container">
            <h2 class="card__header">{{ category }}</h2>
            <p class="card__count">{{ site.categories[category] | size }} {{ site.data.language.posts }}</p>
            <span class="card__more">{{ site.data.language.viewall }}</span>
          </div>
        </a>
      </li>
    {% endfor %}
  </ul>

  {% include archive-link.html %}
</div>