feat: add pagination to Blog index page fixes #4499

[Sourya07]

Description fixes-> #4499

• Added client-side pagination functionality to the Blog Index page.
• Users can now navigate between multiple pages of blog posts using "Previous" and "Next" buttons.
• Each page displays a fixed number of posts (configurable via the postsPerPage constant).
• The pagination integrates seamlessly with existing filters — when filters are applied, pagination resets to the first page.
• Maintains responsive layout and consistent UI/UX across devices.
• Added loading state management and ensured non-breaking changes to existing blog components.

Test results

• Verified pagination works correctly for blogs with more than 6 posts.
• Confirmed filter + pagination integration resets correctly.
• Checked responsiveness and accessibility on mobile and desktop views.
• Verified there are no console errors or UI overlaps.

Related issue(s)

https://github.com/user-attachments/assets/e930bc69-8ac6-4ce5-8aa4-15100e9d639f

Summary by CodeRabbit

• New Features

  • Added client-side pagination with Previous/Next controls and "Page X of Y" indicator; pagination displays only when needed. Filters reset to page 1 when applied.
  • Direct rendering of paginated posts and an empty-state illustration/message when no posts match filters.

• Style

  • Consolidated Clear Filters styling, moved/refined filter controls, and adjusted responsive grid and layout for clearer presentation.

[netlify[bot]]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	0b2b92dbb69b2aa12540f0e930d1a1cb9d978c56
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/69355b817dff2c00080aa27f
😎 Deploy Preview	https://deploy-preview-4526--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai[bot]]

Walkthrough

Client-side pagination was added to the blog index: new currentPage and postsPerPage state, derived currentPosts and totalPages, and Previous/Next controls. Filtering now resets currentPage to 1. Rendering was simplified to rely on currentPosts/array length and the client-only loader was removed.

Changes

Cohort / File(s)	Summary
Blog pagination and filtering pages/blog/index.tsx	Added client-side pagination state (currentPage, postsPerPage), derived currentPosts and totalPages; onFilter resets currentPage to 1 and updates posts; rendering updated to display currentPosts in a responsive grid with Previous/Next controls and page indicator; removed isClient/Loader and switched to array length checks for no-posts case; minor JSX/className/text adjustments.

Sequence Diagram

sequenceDiagram
    actor User
    participant BlogPage as Blog Page
    participant FilterComponent as Filter Component
    participant State as Pagination State
    participant Renderer as Render Engine

    User->>FilterComponent: Apply filter
    FilterComponent->>BlogPage: onFilter(filteredPosts)
    BlogPage->>State: set currentPage = 1<br/>set posts = filteredPosts
    State->>State: compute currentPosts and totalPages
    State->>Renderer: trigger re-render
    Renderer->>User: render currentPosts and Prev/Next controls (Page X of Y)

    User->>BlogPage: Click Next / Previous
    BlogPage->>State: update currentPage
    State->>Renderer: trigger re-render
    Renderer->>User: render updated currentPosts

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Check pagination boundary handling (first/last page disabling).
• Verify onFilter reliably resets page and updates displayed posts.
• Confirm removal of isClient/Loader does not reintroduce hydration or SSR mismatch issues.
• Review JSX/className/text tweaks for accessibility and layout regressions.

Possibly related issues

• asyncapi/website#3570 — Adds client-side pagination and Prev/Next controls on the blog page; matches this PR's changes.
• asyncapi/website#4499 — Implements currentPage, postsPerPage, currentPosts, totalPages and pagination controls in pages/blog/index.tsx; directly related.

Poem

🐇 I hopped through posts both near and far,
Pages now turn like a lively star.
Filters reset and pages align,
Prev and Next keep the reading fine.
Hooray — the blog hops one page at a time!

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The pull request title 'feat: add pagination to Blog index page fixes #4499' directly and clearly describes the main change in the changeset. The summary confirms that client-side pagination was introduced to the Blog Index page with Previous/Next navigation controls, which aligns perfectly with the title. The title is concise, specific, and follows conventional commit formatting with the feature type prefix.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[asyncapi-bot]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	42
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-4526--asyncapi-website.netlify.app/

[codecov[bot]]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 100.00%. Comparing base (a056c20) to head (0b2b92d). :warning: Report is 3 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master     #4526   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           22        22           
  Lines          799       799           
  Branches       146       146           
=========================================
  Hits           799       799           

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Sourya07]

Hii @sambhavgupta0705 can you review this

[Sourya07]

Hi @princerajpoot20, Whenever you have a moment, could you please review this PR? It’s not urgent — just whenever you’re free.

PR link: https://github.com/asyncapi/website/pull/4526

[Sourya07]

@princerajpoot20 take look on this .