Add `design` page to generate banner and social images

bestofjs / javascript-risingstars

:stars: An overview of the JavaScript landscape in 2023: trends about frontend, Node.js, fullstack frameworks, build tools, testing, Vue.js, React, state management...

https://risingstars.js.org

1k stars 56 forks source link

Add `design` page to generate banner and social images #92

Closed michaelrambeau closed 2 years ago

michaelrambeau commented 2 years ago

Goal

Add a page /:year/:language/design used only for development, to generate 2 images:

the background image displayed at the top of the screen
the 1280x640 image displayed when sharing the Rising Stars URL on social networks

The images are generated by inspecting the DOM elements on the screen and use the menu "Capture node screenshot" in Chrome DevTools

This page is used only for dev purpose: we don't need static side generation

Screenshots

vercel[bot] commented 2 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/bestofjs/javascript-risingstars/HMY6zdn8Zs4vJBUToF2r38AcAZD3
✅ Preview: https://javascript-risingstars-git-design-bestofjs.vercel.app

michaelrambeau commented 2 years ago

Updating the social image

To be consistent with the title displayed at the top of page 2021 JavaScript Rising Stars, the image displayed when sharing on social networks has been updated.

Also it was compressed to 255 colors.

Before: 431 kB
After: 119 kB

Command:

convert localhost_3000_2021_en_design.png -colors 255 rising-stars.png