Apply pagination to ...slug

[bleak storm]

can you help me apply a pagination to my [...slug].astro file?

---
import { getGlobal } from '@lib/api.js';
import BaseLayout from '@layouts/BaseLayout.astro';
import Templates from '@components/Templates.astro';
import Layouts from '@components/Layouts.astro';
const API_URL = import.meta.env.KIRBY_URL;

export async function getStaticPaths() {
    const API_URL = import.meta.env.KIRBY_URL;
    const pagesResponse = await fetch(API_URL + '/index.json');
    const data = await pagesResponse.json();
    return data
        .filter((item) => item.uri !== 'home')
        .map((item) => {
            return {
                params: {
                    slug: item.uri,
                },
                props: {
                    template: item.intendedTemplate,
                },
            };
        });
}

const { slug } = Astro.params;
const { template } = Astro.props;
const pagesResponse = await fetch(API_URL + '/' + slug + '.json');
if (!pagesResponse) throw Astro.redirect('/404');
const data = await pagesResponse.json();
const global = await getGlobal();
const pageTitle = data.title;
---

<BaseLayout pageTitle={pageTitle} data={data} global={global}>
    {
        template === 'section' ? (
            <Templates data={data} global={global} template={template} />
        ) : (
            <Layouts layouts={data.layouts} data={data} global={global} />
        )
    }
</BaseLayout>

[austere mica]

Hi @bleak storm. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To apply pagination to your [...slug].astro file, you can use the paginate() function provided by Astro. This function will automatically generate the array to return from getStaticPaths() that creates one URL for every page of the paginated collection. The page number will be passed as a param, and the page data will be passed as a page prop.

Here's how you can modify your getStaticPaths() function to include pagination:

export async function getStaticPaths({ paginate }) {
    const API_URL = import.meta.env.KIRBY_URL;
    const pagesResponse = await fetch(API_URL + '/index.json');
    const data = await pagesResponse.json();
    const pages = data
        .filter((item) => item.uri !== 'home')
        .map((item) => {
            return {
                params: {
                    slug: item.uri,
                },
                props: {
                    template: item.intendedTemplate,
                },
            };
        });
    return paginate(pages, { pageSize: 10 }); // Adjust the pageSize to your preference
}

In your Astro component, you can then access the paginated data through the page prop:

const { page } = Astro.props;

You can then use page.data to access the data for the current page, and page.currentPage to get the current page number.

Please note that the paginate() function assumes a file name of [page].astro or [...page].astro. The page param becomes the page number in your URL. For example, /posts/[page].astro would generate the URLs /posts/1, /posts/2, /posts/3, etc.

For more information, you can refer to the Astro documentation on pagination (https://docs.astro.build/en/guides/routing#pagination) and the Astro API reference for the paginate() function (https://docs.astro.build/en/reference/api-reference#paginate).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: