---
pagination:
  data: collections.posts
  size: 20
  alias: list
  reverse: true
permalink: '<% if (pagination.pageNumber > 0) { %><%= `blog/page${pagination.pageNumber + 1}/index.html` %><% } else { %>blog/index.html<% } %>'
eleventyComputed:
  title: '<% if (pagination.pageNumber > 0) { %><%= `Page ${pagination.pageNumber + 1} | ${site.title}` %><% } else { %><%= site.title %><% } %>'
pageName: blog
---

<h2 class="blog-header">
  Blog
</h2>

<ul id="blogs">
    <% list.forEach((post) => { %>
      <li class="blog">
        <a href="<%= post.url %>">
          <article>
            <img src="/assets/images/posts/<%= post.data.image %>" alt="">
            <h1><%= post.data.title %></h1>
            <time datetime="<%= new Date(post.data.date) %>"><%= this.dateFns.format(new Date(post.data.date), 'LLLL d, yyyy') %></time>
            <p><%= post.data.description %></p>
          </article>
        </a>
      </li>
    <% }) %>
</ul>
  
<div class="">
  <% if (pagination.previous) { %>
  <div>
    <a href="<%= pagination.previous.replace(/index.html$/, "") %>">← Newer Posts</a>
  </div>
  <% } %> <% if (pagination.next) { %>
  <div class="">
    <a href="<%= pagination.next.replace(/index.html$/, "") %>">Older Posts →</a>
  </div>
  <% } %>
</div>