Add pagination to changelog/blog main page

openstatusHQ / openstatus

🏓 The open-source synthetic monitoring platform 🏓

https://openstatus.dev

GNU Affero General Public License v3.0

6k stars 378 forks source link

Add pagination to changelog/blog main page #926

Closed Skye967 closed 2 days ago

Skye967 commented 1 month ago

Type of change

When we are on the openstatus.dev/changelog or openstatus.dev/blog we added pagination to show only the last 10 entries.

[ ] 🐛 Bug fix
[x] 🌟 New feature
[ ] 🔨 Breaking change
[ ] 📖 Refactoring / dependency upgrade / documentation

Description

I added a file for "use client" so it does not interfere with the metadata export
created pagination function
made next page and previous page handler function
added buttons to flip pages and page number to the top and bottom of page

A picture tells a thousand words (if any)

Before this PR

After this PR

Related Issue (optional)

https://github.com/openstatusHQ/openstatus/issues/923

vercel[bot] commented 1 month ago

@Skye967 is attempting to deploy a commit to the OpenStatus Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
openstatus-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 5, 2024 8:41pm

Skye967 commented 1 month ago

Thanks for the feedback, I think I did it that way because I also was have problems using next/navigation, I'll double check that and try put it on the server side. I'll change it to the shadcn ui component.

mxkaske commented 1 month ago

Thanks for the feedback, I think I did it that way because I also was have problems using next/navigation, I'll double check that and try put it on the server side. I'll change it to the shadcn ui component.

Sounds good! Feel free to point out your issue with next/navigation (either within the PR or via Discord DM).

Skye967 commented 1 month ago

I think I did it how you suggested. I was going to use the shadcn ui, but I noticed there was some pagination components in the local directory. I decided on making the ListPagination component to utilize the pagination components which also had the right ui style consistency.

Skye967 commented 1 month ago

Adjusted the list-pagination component and added zod validation to the changelog and blog. I also made copies of the pagination and button components and put them in @openstatus/ui. I moved the list-pagination to the bottom of the pages.

Skye967 commented 1 month ago

I think the build step should be working. I can't test it properly because I have no Sentry auth token configured. I changed the pagination component to use the next Link tag. I had to install the dependency in the directory.

mxkaske commented 2 weeks ago

Hey @Skye967, sorry for keeping you waiting. I'll be back from vacation end of the week and will have some time to follow up! I will test it locally and if that's ok for you I'll commit the last fixes on top of it! Thanks for your work so far.

mxkaske commented 2 days ago

Hey @Skye967! Feel free to have a look at the final changes. Thanks for your work here and apologies it took so long. 🙏