---
layout: layouts/base.njk
permalink: "/archive/"
title: Archive
---
<h1 class="text-2xl font-bold mb-6">Archive</h1>

<div class="prose prose-lg dark:prose-invert max-w-none mb-8">
  <p>A chronological archive of all posts, organized by year and month.</p>
</div>

{% set postsByYear = collections.posts | groupby("date.getFullYear()") %}
{% for year, posts in postsByYear %}
<section class="mb-8">
  <h2 class="text-xl font-semibold mb-4 border-b border-gray-200 dark:border-gray-700 pb-2">{{ year }}</h2>
  
  {% set postsByMonth = posts | groupby("date.getMonth()") %}
  {% for month, monthPosts in postsByMonth %}
  <div class="mb-6">
    <h3 class="text-lg font-medium mb-3 text-gray-700 dark:text-gray-300">
      {{ monthPosts[0].date | readableDate("MMMM") }}
    </h3>
    
    <div class="space-y-2">
      {% for post in monthPosts %}
      <article class="flex items-start gap-4 py-2">
        <time class="text-sm text-gray-500 dark:text-gray-400 font-mono min-w-[4rem]">
          {{ post.date | readableDate("MMM dd") }}
        </time>
        <div class="flex-1">
          <h4 class="font-medium">
            <a href="{{ post.url }}" class="hover:text-blue-600 dark:hover:text-blue-400">
              {{ post.data.title }}
            </a>
          </h4>
          {% if post.data.description %}
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ post.data.description }}</p>
          {% endif %}
          {% if post.data.tags %}
          <div class="flex flex-wrap gap-1 mt-2">
            {% for tag in post.data.tags %}
            <span class="inline-block px-2 py-1 text-xs rounded-full text-white" 
                  style="background-color: {{ tag | tagColor }}">
              {{ tag }}
            </span>
            {% endfor %}
          </div>
          {% endif %}
        </div>
      </article>
      {% endfor %}
    </div>
  </div>
  {% endfor %}
</section>
{% endfor %}

{% if collections.posts.length == 0 %}
<div class="text-center py-12">
  <p class="text-gray-500 dark:text-gray-400">No posts found.</p>
</div>
{% endif %}