---
layout: postlist.njk
title: Posts
eleventyNavigation:
  key: posts
  order: 3
pagination:
  data: collections.posts
  size: 10
  alias: blogposts
  reverse: true
---

{% for post in blogposts %}
  <article class="blogpost">
    <h1>{{ post.data.title }}</h1>
    <aside class="not-prose space-y-4 text-base">
      <ul class="postmeta">
        <li>
          {% lucide "calendar", {"size": "20"} %}
          <time datetime="{{ post.date | isoDate }}" title="{{ post.date | longDate }}">
            {{ post.date | readableDate }}
          </time>
        </li>
        <li>
          {% lucide "user", {"size": "20"} %}
          <a href="{{ post.data.author.href }}">{{ post.data.author.name }}</a>
        </li>
        <li>
          {% lucide "glasses", {"size": "20"} %}
          {{ post.content | readingtime }}
        </li>
      </ul>
    </aside>

    {% if post.data.image and post.data.image.src != '' %}
      <img src="{{ post.data.image.src }}" alt="{{ post.data.image.alt }}">
    {% endif %}

    <p>{{ post.data.description }}</p>

    <a href="{{ post.url }}" class="not-prose read-more-button">
      Read on {% lucide "chevron-right", {"size":"20"} %}
    </a>
  </article>
{% endfor %}