Webpage Integration: Implement Pagination to Posts Feed Page

[henryajisegiri]

Goal

Paginate the posts feed to a maximum of 10 posts per page.

Figma Link

---

Scope

Full-stack: API pagination support and frontend pagination controls.

---

Acceptance Criteria

Post limit

• A maximum of 10 posts are displayed per page.

Pagination controls

• Previous and next chevrons are displayed.
• The first and last page numbers are always visible as anchors. (e.g. `1 2 3 [4] 5 6 ... 24')
• An ellipsis is shown between the anchor and the window when there are skipped pages (e.g. 1 … 4 5 [6] 7 8 … 24). The ellipsis is decorative and not clickable.
• The current page is visually indicated.
• The previous chevron is disabled on the first page.
• The next chevron is disabled on the last page.
• Pagination should be fully functional with JS disabled.

URL state

• The current page number is reflected in the URL as a query parameter (e.g. ?page=2).
• Navigating directly to a paginated URL loads the correct page.

Filters and search

• Pagination resets to page 1 when the post type filter, library filter, or search input changes.

---

Data Source

• Server side rendered via the DB

---

Out of Scope

• Posts feed filtering and search implementation
• Post card component

[herzog0]

I think we can align on the following model for the initial pages:
[1] 2 3 ... 24
1 [2] 3 4 ... 24
1 2 [3] 4 5 ... 24
1 2 3 [4] 5 6 ... 24
1 ... 3 4 [5] 6 7 ... 24