bhai-lang icon indicating copy to clipboard operation
bhai-lang copied to clipboard

VS Code like Editor in Playground and Customized Terminal

Open gitwikc opened this issue 3 years ago β€’ 4 comments

What does this PR do?

VS Code like Editor

  1. Integrated Monaco code editor into the website's playground. Adds VS code like functionalities to the editor. Set the theme to Monokai (theme config in brijeshb42's repo) [opinionized πŸ‘ˆ] image
  2. Also comes with a minimap.

Code completion

image

  1. Keywords as shown in examples in docs
  2. Snippets
    • byh == bhai ye hai
    • bb == bol bhai
    • agb == agar bhai
    • ntb == nahi to bhai
    • wb == warna bhai
    • jtb == jab tak bhai

Styled Terminal

Styled the output terminal for the playground. image

  1. Changed the terminal font family to Fira Code
  2. Terminal background and playground editor background match. [#374151 from TailwindCSS]
  3. Customized the terminal scrollbar (tealish green slim scrollbar)
  4. Terminal green and red colors also customized to look softer

What packages have been affected by this PR?

Installed packages

  1. monaco-editor
  2. @monaco-editor/react

Types of changes

Changes in

  • apps/docs/components/Code/CodeEditor
  • apps/docs/components/Code/Terminal
  • apps/docs/components/Code
  • apps/docs/styles/global.css

Put an x in the boxes that apply

  • [ ] Bugfix (non-breaking change which fixes an issue)

  • [x] New feature (non-breaking change which adds functionality)

  • [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

Package version increase in cli package?

No changes in CLI package

Checklist before merging

Put an x in the boxes that apply

  • [ ] Changes need to be immediately published on npm.
  • [x] These changes have been thoroughly tested.

gitwikc avatar Apr 02 '22 12:04 gitwikc

Deploy Preview for bhailang-preview failed.

Name Link
Latest commit df5f9059443bc2e8797928702eea1ac942b5d6c2
Latest deploy log https://app.netlify.com/sites/bhailang-preview/deploys/624846f0e6c5680008f0bafe

netlify[bot] avatar Apr 02 '22 12:04 netlify[bot]

Build fails because Next.js doesn't allow third party libraries to access global css. You would need to checkout the PR and run the server to see the changes to the docs website

gitwikc avatar Apr 02 '22 13:04 gitwikc

@ankitchouhan1020 Please let me know what bugs/issuesπŸ›πŸ”¨ I need to fix so that this PR gets merged soon. I'm really excited to see how the users like the new improved editor 🀩

gitwikc avatar Apr 08 '22 14:04 gitwikc

Hey, Thanks for the PR. Our hands are full due to other works. Since it's a new feature, will check it later.

ankitchouhan1020 avatar Apr 09 '22 16:04 ankitchouhan1020