{# Reverse-chronological list of posts. Expects `postslist` to be set by the caller. #}
<ul role="list" class="not-prose mt-8 space-y-px">
{%- for post in postslist | reverse %}
  <li>
    <a href="{{ post.url }}"
       class="group flex flex-col gap-1.5 border-l-2 border-transparent bg-white/[0.02] px-4 py-4 transition-colors hover:border-amber hover:bg-white/[0.05] sm:flex-row sm:items-baseline sm:justify-between sm:gap-6">
      <span class="leading-snug text-amber-bright transition-colors group-hover:text-amber">
        {%- if post.data.title %}{{ post.data.title }}{% else %}<code class="text-base">{{ post.url }}</code>{% endif -%}
      </span>
      <time datetime="{{ post.date | htmlDateString }}"
            class="shrink-0 font-sans text-xs uppercase tracking-[0.15em] text-slate-400">
        {{ post.date | readableDate("LLL d, yyyy") }}
      </time>
    </a>
  </li>
{%- else %}
  <li class="not-prose mt-8 text-slate-400">No posts yet - check back soon.</li>
{%- endfor %}
</ul>