Feature/205 add pagination

[KC900201]

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

After

[Copilot]

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.}

[Copilot]

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

[Buzzpy]

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!

[KC900201]

Hi @Buzzpy, happy new year. May I know how is the PR review progress going?

[Buzzpy]

Great work @KC900201! And extremely sorry for the late reply.
I took a look at the PR and have some feedback:

• We can increase the items per page to be 10, 20, 30, and 40— makes it simple and generalized.
• Can we slightly decrease this padding? I understand it might have been more relevant to the pagination bar, but it seems like a lot of dead space.

- On the mobile, the bar looks like below (flexbox? I'm not sure!):

We can perhaps just center it— easier, but it may look bulky given the other tabs are already centered, or just put it all together on the right as below:

Let me know your thoughts as well! And I apologize if I'm making some absurd statements, you already know my not-so-amazing capabilities in web design by now >.<

And if you can not find time for these fixes— which is very understandable given the timelines— let me know. I might be able to make some changes as well.

[KC900201]

@Buzzpy,

Thanks for the feedback. I've updated the code according to your feedback. Kindly review.

Updated the pagination option value

Decrease the spacing between Hero section and pagination bar

Fixated the position of pagination bar for mobile layout

[Buzzpy]

That's perfect. It's ready to be merged! Thanks for the contribution, @KC900201.