As your snippet library grows, pagination needs to stay clean and useful. This implementation balances clarity and compactness by showing nearby pages with ellipsis for long ranges.

Pagination features

• Previous and next controls with disabled states
• Active page highlighting
• Ellipsis compression for large page counts
• Mobile-friendly wrapping and touch targets

Data flow

Create archive pages in gatsby-node.js and pass currentPage, numPages, skip, and limit through context. Keep URL structure consistent (/page/2, /page/3) to avoid broken links.

UX guidance

Show current progress (Page X of Y) near controls so users always know where they are.