Add OG image for monthly rankings pages

bestofjs / bestofjs

:star: A place to find the best components to build amazing web applications. The best of JavaScript!

https://bestofjs.org

MIT License

2.62k stars 141 forks source link

Add OG image for monthly rankings pages #237

Closed michaelrambeau closed 8 months ago

michaelrambeau commented 8 months ago

Goal

The monthly rankings page deserve their own OG image too, to be able to preview the rankings when sharing URLs /rankings/monthly/2023/10.

This PR adds the image and specific meta data.

title: Best of JS • Rankings October 2023
description: The most popular projects on Best of JS in October 2023: Bruno, Wasp, shadcn/ui, Excalidraw, Bun, Next.js, Payload, create-t3-app, Supabase, htmx...

How to test

Click to "Monthly" in the top menu to go to rankings page
Alternative: from home top page, inside the "Rankings October 2023" block click on "View monthly rankings" link
Check the page metadata when inspecting the page <head>

Screenshots

vercel[bot] commented 8 months ago

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

Name	Status	Preview	Comments	Updated (UTC)
bestofjs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 1, 2023 2:17am
bestofjs-classic	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 1, 2023 2:17am

michaelrambeau commented 8 months ago

I am starting to see similar code used for each OG image added for a page. Refactoring could definitely be possible in the future!

LGTM! 👨‍💻

Note that the shell of the image (<ImageLayout>) and the table styles are already shared between the different images.

However the content of the tables is slightly different between the pages (the last column does not show the same numbers, depending on the context) but yes I'm open to any refactoring that would remove redundancy, thank you for having checked!