Code-to-image

[hatemhosny]

What type of PR is this? (check all applicable)

• ✨ Feature
• 🐛 Bug Fix
• 📝 Documentation Update
• 🎨 Style
• ♻️ Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🤖 Build
• 🔁 CI
• 📦 Chore (Release)
• ⏩ Revert
• 🌐 Internationalization / Translation

Description

This PR adds a feature of taking screenshots for code and saving it as images

e.g. https://code-to-image.livecodes.pages.dev/?x=id/4dgnt5cs3nb&screen=code-to-image

Mobile & Desktop Screenshots/Recordings

Added tests?

• 👍 yes
• 🙅 no, because they aren't needed
• 🙋 no, because I need help

Added to documentations?

• 📓 docs (./docs)
• 📕 storybook (./storybook)
• 📜 README.md
• 🙅 no documentation needed

[zyf722]

It looks great to me!

Just some minor suggestions:

• For me it takes about 1-2 seconds until the browser starts to download the generated image. A progress bar / loading indicator, or simply a mask on the screen, could be added to indicate that the image is being generated.

• Some DOMException shows for html-to-image in the console:
  

• It might be more consistent to place the color block inside the rounded-corner input field so that it fits neatly within its borders.

• The direction option in the dropdown menu seems to be misplaced. Is it actually the label for the dropdown menu itself?
  

[hatemhosny]

Thank you @zyf722 for the valuable comments

• For me it takes about 1-2 seconds until the browser starts to download the generated image. A progress bar / loading indicator, or simply a mask on the screen, could be added to indicate that the image is being generated.

Added a "Generating..." indicator and the button is displayed as disabled while generating the image.

• Some DOMException shows for html-to-image in the console:

This was a CORS error because of monaco stylesheet (which is not actually used for generating the image!).
Fixed.

• It might be more consistent to place the color block inside the rounded-corner input field so that it fits neatly within its borders.

Now, the whole field has a consistent rounded border.

• The direction option in the dropdown menu seems to be misplaced. Is it actually the label for the dropdown menu itself?

I'm not sure about this. The text "Direction" is intended to be like a placeholder. It is an option with no value, falling back to the default. I do not want to add an extra label here.

[hatemhosny]

hi @gigamaster

I was glad that applying your design system for the new screen (code-to-image) was straight forward and did not take much effort.
Thank you. You have done a great job indeed.

Please let me know if you have any comments, or if you can come up with better presets.

Thank you.

[sonarqubecloud]

Quality Gate passed

Issues
24 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[livecodes-ci]

i18n Actions

Source PR has been merged into the default branch.

Maintainers can comment .i18n-update-push to trigger the i18n update workflow and push the changes to Lokalise.

[hatemhosny]

.i18n-update-push

[livecodes-ci]

i18n Actions: .i18n-update-push

Localization updated and pushed to Lokalise.

Name	Description
New Branch for i18n	i18n/live-codes/code-to-image
Last Commit SHA	333a626

Maintainers can comment .i18n-update-pull after translation is done to trigger the i18n pull workflow and pull the changes back to Github.

[hatemhosny]

@zyf722 @gigamaster

I have added some transperancy for the code block and updated the presets before merging this.
Would you kindly have a look?

I have also added automatic translations on Lokalise.

I would appreciate if you can revise the translations. I have already revised the Arabic translation.
Thank you :)

[zyf722]

@hatemhosny

I've just reviewed Simplified Chinese translation and fixed some issues.

Great work! This will be an excellent feature that adds some nice flavor to the application :)

[hatemhosny]

Thank you very much @zyf722
I hope to release this by tomorrow.

[hatemhosny]

.i18n-update-pull

[livecodes-ci]

i18n Actions: .i18n-update-pull

Localization pulled from Lokalise.

Name	Description
i18n Branch	i18n/live-codes/code-to-image
Last Commit SHA	bc34dc1
i18n PR	#692