Skip to content

Conversation

@KC900201
Copy link
Contributor

@KC900201 KC900201 commented Aug 25, 2025

Include pagination logic to home page

Improvements completed:

  • Add in pagination logic with options of 6, 12, 24, 48 cards to display (6 is default)
  • Include previous and next button to allow user navigating through results
  • Include test scripts for pagination logic

Screenshot:

Before

image

After

image

Copilot AI review requested due to automatic review settings August 25, 2025 07:28
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds comprehensive pagination functionality to the home page, allowing users to control how many cards are displayed and navigate through results. The implementation includes support for filtering integration, ensuring pagination works seamlessly with existing search and category filter features.

Key changes:

  • Added pagination controls with dropdown for page size selection (6, 12, 24, 48 items)
  • Implemented previous/next navigation buttons with Bootstrap icons
  • Created comprehensive test coverage for pagination logic and UI components

Reviewed Changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
src/scripts/paginate.ts Core pagination logic managing card display, navigation, and filter integration
src/scripts/paginate.test.ts Comprehensive test suite covering pagination functionality and edge cases
src/components/CardList.astro Updated UI to include pagination controls and navigation buttons
src/components/CardList.test.ts Added tests for pagination UI rendering and component structure
src/scripts/hero-action.ts Modified to dispatch events for pagination refresh when filters change
src/styles/global.css Added CSS styling for pagination controls and dark mode support
src/pages/index.astro Added bootstrap-icons dependency and pagination script import
package.json Added bootstrap-icons and @types/jsdom dependencies

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

@Buzzpy
Copy link
Owner

Buzzpy commented Sep 4, 2025

Hi @KC900201
Thanks a bunch for the contribution! I'll review it as soon as possible and get back to you. Have a great day ahead!

@Buzzpy Buzzpy self-assigned this Sep 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants