How do you implement pagination?

[pigeonflight]

Maybe I'm missing something but this implementation is a bit different from vanilla 11ty. How do I implement pagination with neat-starter?

[pigeonflight]

To answer my own question: I've only done it on collections so far.... here's how. To activate pagination you need to add a pagination option to your template. For example, if you have a collection of articles, you'll probably have index files that summarise those articles. Adding the following to the beginning of src/articles/index.html did the trick (Note the use of reverse, since I wanted the newest articles first.)

---
layout: blog
title: Articles
eleventyExcludeFromCollections: true
pagination:
  data: collections.articles
  size: 10
  alias: articles
  reverse: true
---

Iterating over the articles should look familiar

 {% for item in articles %}
        {% if item.data.active %}
        <article class="my-8">
            <h2 class="font-bold text-3xl text-gray-900 mb-2">
                <a href="{{ item.url | url }}">
                    {% if item.data.title %}
                        {{ item.data.title }}
                    {% else %}
                        Untitled
                    {% endif %}
                </a>
            </h2>
            <p class="text-base leading-6 text-gray-500 mb-3">
                <time>
                    {{ item.date | readableDate }}
                    by
                    <a>{{ item.data.author }}</a>

                </time>
            </p>
            {% if item.data.description %}
                <p class="text-lg text-gray-500 mb-3">
                    {{ item.data.description }}
                </p>
            {% endif %}

            <p>
                <a href="{{ item.url | url }}" class="border border-yellow-800 py-2 px-4 text-yellow-800 font-bold text-lg">
                    Listen →
                </a>
            </p>

        </article>
    {% endif %}
    {% endfor %}

Then in the index.html I added pagination code (I modified something I found here:: https://tailwindui.com/components/application-ui/navigation/pagination ):

<div class="px-4 py-3 flex items-center justify-between border-t border-gray-100 sm:px-6">
    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">

      <div>
        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
          {% if pagination.href.previous %}
          <a href="{{ pagination.href.previous }}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
            <span class="sr-only">Previous</span>
            <!-- Heroicon name: solid/chevron-left -->
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
          {% endif %}
  {% for pageEntry in pagination.pages %}
          <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
          <a href="{{ pagination.hrefs[ loop.index0 ] }}" {% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page"{% endif %}class="z-10  border-yellow-800 text-yellow-800 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
            {{ loop.index }}
          </a>
  {% endfor %}
  {% if pagination.href.next %}
  <a href="{{ pagination.href.next }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
    <span class="sr-only">Next</span>
    <!-- Heroicon name: solid/chevron-right -->
    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
    </svg>
  </a>
  {% endif %}
        </nav>
      </div>
    </div>
  </div>

[pigeonflight]

closing this, since I figured it out and documented the solution.

[surjithctly]

Thanks. It will definitely help others.