@ariaskit/astro-collections

A lightweight pagination and collection utilities library for Astro.

Installation

npm install @ariaskit/astro-collections
# or
pnpm add @ariaskit/astro-collections
# or
yarn add @ariaskit/astro-collections

Usage

getCollectionEntries

Retrieve collection entries with optional filtering and sorting.

---
import { getCollectionEntries } from "@ariaskit/astro-collections";
import type { collections } from "./content/config";

// Basic usage
const posts = await getCollectionEntries<typeof collections>("blog");

// With filtering and sorting
const filteredPosts = await getCollectionEntries<typeof collections>("blog", {
    filterFn: (item) => item.data.category === "astro",
    sortByFn: (a, b) => a.data.title.localeCompare(b.data.title)
});
---

<ul>
    {filteredPosts.map(post => (
        <li>{post.data.title}</li>
    ))}
</ul>

createCollectionPagination

Create paginated routes for your content collections. Must be used as getStaticPaths in a dynamic route file (e.g., [...page].astro).

---
// src/pages/blog/[...page].astro
import { createCollectionPagination } from "@ariaskit/astro-collections";
import type { collections } from "../../content/config";

export const getStaticPaths = createCollectionPagination<typeof collections>({
    collection: "blog",
    pageSize: 10,
    filterFn: (item) => item.data.published === true,
    sortByFn: (a, b) => b.data.date.getTime() - a.data.date.getTime()
});

const { page } = Astro.props;
---

<h1>Blog - Page {page.currentPage}</h1>

{page.data.map(post => (
    <article>
        <h2>{post.data.title}</h2>
        <a href={`/blog/${post.slug}`}>Read more</a>
    </article>
))}

<nav>
    {page.url.prev && <a href={page.url.prev}>← Previous</a>}
    <span>Page {page.currentPage} of {page.lastPage}</span>
    {page.url.next && <a href={page.url.next}>Next →</a>}
</nav>

TypeScript

Import types if needed:

import type { PaginationOptions, SortByFn, FilterFn } from "@ariaskit/astro-collections";

License

MIT