Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

projects screenshot & enhance component list design #45

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

abdelrahman-mh
Copy link

Screenshot Generate For Each design & Some Enhancement 🔥

Screenshot 2024-03-13 at 20-59-37 ui

Generate a screenshot with puppeteer for every html file, so i edit a index.mjs and adds this:

  • Auto generate a screenshot for each html component and save the images in ./screenshot directory using puppeteer
    • The screenshots size for current files is 11MB when run the compress-images-with-sharp they be just 3MB

  • The screenshot images save with pattern ./screenshot/screenshot-<index>.png
  • For generate a index.html file run npm run build
    • This will first delete the old screenshot directory and will build the react-examples, and after he will run index.mjs to generate a new screenshot for every html design

  • add the images in a html file output, and improve some design architecture

Some others thing:

  • Create a ./style.css to add simple style sheet to the design
  • install compress-images-with-sharp because he in npm scripts but not installed ❔
  • Also install puppeteer for handle screenshot generate
  • Add a project image to README.md file, i first chose a best and details screenshots in the app and make a zoom-out and take a picture, i saved the image in ./docs/screenshot.png and import it to readme file

this is my second contribute in this repo so i hope he accepted 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant