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

[kattyode]

QA Validation note:

@herzog0 while testing the News page I noticed a tiny difference: the color of the selected pagination number doesn’t match Figma or the Components page (where it’s correctly set to #050816). The same issue appears in dark mode as well. Let me know your thoughts on this please:

Implementation:

Figma:

[herzog0]

Hey @kattyode, I think this is a different issue. The inner color is rendering correctly. If you target the inner component you'll see it in the devtools bar. But there is definitely an issue here, where I think we're getting boostlook styles leaking to this page. The text color gets stacked there but it never actually reaches the selected number.

[kattyode]

Thanks @herzog0 for the clarification.
QA Validation note: Passed