Overwrite/Define pagination paths

[danilopolani]

A common scenario with pagination is that the first page is the homepage (e.g. https://example.com) and, from page 2, the URL changes to a different path, (e.g. https://example.com/page/2) and with Astro this is not currently possible.

Current workaround

1. Get the first N items in the homepage;
2. If there are more than N items from remote APIs add a manual "next page" link;
3. Create a page/[page].astro file where I place the real pagination;
4. If the page from Astro.props is the first page, add a <script> with a redirect to the homepage;
5. If the page.prev from Astro.props is the first page, use / as URL.

Proposed solution

We could have a callback in the paginate function that mutates the pagination URLs (similar to 11ty where we can define the pagination permalink). With this we could use the paginate() directly from the homepage and then, in the [page].astro file, just retrieve the current page and its props.

paginate(data, {
  permalink: String | Function | undefined // "undefined" = default behaviour
});

// Example
paginate(data, {
  permalink: function (currentPage: number) {
    if (currentPage === 1) {
      return '/';
    }

    return '/page/:page'; // Parsed by Astro
  }
});

I have to admit this could be a bit "over" as solution, but it's definitely the most complete and versatile. Another solution could be just to overwrite the first page URL, but then in the homepage you still would manually check for more items, create the pagination link etc.

[vrabe]

If I use paginate() and want the url of the first page to be https://example.com, the other pages would be https://example.com/[page_number]. It's a little weird. It'll be good if this proposal is implemented.

Edit: I also find this discussion #19 is about the same idea. If we make the first page in /posts and the second page in /posts/page/2, it would make the url more meaningful.