pagination.html

---
title: Articles
# permalink: /articles/
layout: layouts/main.html

pagination:
  data: collections.articles
  size: 3
  alias: articles
permalink: 'articles{% if pagination.pageNumber > 0 %}/page/{{ pagination.pageNumber }}{% endif %}/index.html'

tags: ['nav']
eleventyNavigation:
  key: Articles
  order: 1
---

<h1> {{ title }} </h1>
<p>Insights into our thinking and work case studies.</p>

<section aria-label="Articles" class="articles-collection">
    {% set postItems = pagination.items %}
    {% for item in postItems %}
    <article class="articles-collection__item">
        <h2 class="articles__collection__item__title"><a href="{{ item.url }}">{{ item.data.title }}</a></h2>
        <p class="articles__collection__item__publish-date">Published on {{ item.data.date | readableDate }} </p>
        <p  class="articles__collection__item__teaser">{{ item.data.teaser }} </p>
    </article>
    {% endfor %}
</section>


<nav class="c-collection-pagination" aria-labelledby="pagination-label">
  <h2 id="pagination-label" class="visually-hidden">Pagination</h2>
  <ul>
    <li>
        {% if page.url != pagination.href.first %}<a href="{{ pagination.href.first }}">First</a>
        {% else %}First{% endif %}
    </li>
    <li>
        {% if page.url != pagination.href.last %}<a href="{{ pagination.href.last }}">Last</a>
        {% else %}Last{% endif %}
    </li>
    <li>
        {% if pagination.href.previous %}<a href="{{ pagination.href.previous }}">Previous</a>
        {% else %}Previous{% endif %}
    </li>
    <li>
        {% if pagination.href.next %}<a href="{{ pagination.href.next }}">Next</a>
        {% else %}Next{% endif %}
    </li>
    <br>
    {%- for pageEntry in pagination.pages %}
    <li><a href="{{ pagination.hrefs[ loop.index0 ] }}" {% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page"{% endif %}>Page {{ loop.index }}</a></li>
    {%- endfor %}
  </ul>
</nav>