blog-eleventy-indiekit/categories.njk

---
layout: layouts/base.njk
withSidebar: true
pagination:
  data: collections.categories
  size: 1
  alias: category
permalink: "categories/{{ category | slugify }}/"
eleventyComputed:
  title: "{{ category }}"
---
<div class="h-feed">
  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">{{ category }}</h1>
  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
    Posts tagged with "{{ category }}".
  </p>

  {% set categoryPosts = [] %}
  {% for post in collections.posts %}
    {% if post.data.category %}
      {% if post.data.category is string %}
        {% if post.data.category == category %}
          {% set categoryPosts = (categoryPosts.push(post), categoryPosts) %}
        {% endif %}
      {% else %}
        {% if category in post.data.category %}
          {% set categoryPosts = (categoryPosts.push(post), categoryPosts) %}
        {% endif %}
      {% endif %}
    {% endif %}
  {% endfor %}

  {% if categoryPosts.length > 0 %}
  <p class="text-sm text-surface-500 dark:text-surface-400 mb-4">{{ categoryPosts.length }} post{% if categoryPosts.length != 1 %}s{% endif %}</p>
  <ul class="post-list">
    {% for post in categoryPosts %}
    {% set postType = post.inputPath | replace("./content/", "") %}
    {% set postType = postType.split("/")[0] %}
    {% set borderClass = "" %}
    {% if postType == "likes" %}
      {% set borderClass = "border-l-[3px] border-l-red-400 dark:border-l-red-500" %}
    {% elif postType == "bookmarks" %}
      {% set borderClass = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
    {% elif postType == "reposts" %}
      {% set borderClass = "border-l-[3px] border-l-green-400 dark:border-l-green-500" %}
    {% elif postType == "replies" %}
      {% set borderClass = "border-l-[3px] border-l-accent-400 dark:border-l-accent-500" %}
    {% elif postType == "photos" %}
      {% set borderClass = "border-l-[3px] border-l-purple-400 dark:border-l-purple-500" %}
    {% else %}
      {% set borderClass = "border-l-[3px] border-l-surface-300 dark:border-l-surface-600" %}
    {% endif %}
    <li class="h-entry post-card {{ borderClass }}">
      <div class="post-header">
        <h2 class="text-xl font-semibold mb-1 flex-1">
          <a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400" href="{{ post.url }}">
            {{ post.data.title or post.templateContent | striptags | truncate(60) or "Untitled" }}
          </a>
        </h2>
      </div>
      <div class="post-meta mt-2">
        <time class="dt-published" datetime="{{ post.date | isoDate }}">
          {{ post.date | dateDisplay }}
        </time>
        <span class="post-type">{{ postType }}</span>
      </div>
      <p class="p-summary text-surface-700 dark:text-surface-300 mt-3">
        {{ post.templateContent | striptags | truncate(250) }}
      </p>
      <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block">
        View &rarr;
      </a>
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="text-surface-600 dark:text-surface-400">No posts found with this category.</p>
  {% endif %}

  <div class="mt-8">
    <a href="/categories/" class="text-accent-600 dark:text-accent-400 hover:underline">&larr; All categories</a>
  </div>
</div>