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

VS Code like Editor in Playground and Customized Terminal #265

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from

Conversation

gitwikc
Copy link

@gitwikc gitwikc commented Apr 2, 2022

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)

  • 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.
  • These changes have been thoroughly tested.

- monaco editor by Microsoft used for VS Code
- Also changed the styles of the terminal; Styled terminal scrollbar
- Terminal font-family changed to "Fira Code"
- Code completion for Bhailang
- Monokai theme (customized to match website)
@netlify
Copy link

netlify bot commented Apr 2, 2022

Deploy Preview for bhailang-preview failed.

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

@gitwikc
Copy link
Author

gitwikc commented Apr 2, 2022

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

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This new change will make the editor of bhai Lang vs code like.....waiting for quick release

@@ -0,0 +1,9 @@
# This configuration file was automatically generated by Gitpod.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we delete this file? It might cause problem with the setup.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file is the config file that Gitpod uses when you open the project in Gitpod and as as far as I have tested, doesn't meddle with the source files. Could you please elaborate on what files conflict with this one and which setup is being affected by this file? We could resolve the issue better that way.

The content of this file basically tells Gitpod to build the bundle (which is not pushed to Github, i.e. ignored) and also start the dev server so that we can preview the docs website. If you open the project on your machine locally by checking out the PR, this file is ignored and the project should open as it does normally.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not familiar with the gitpod so thought it might conflict. Anyways nice addition to the playground. Let's wait for the authorized users to react to this.

Copy link

@tbhaxor tbhaxor left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm. @ankitchouhan1020 Please merge this if this doesn't cause any issue.

@gitwikc
Copy link
Author

gitwikc commented Apr 8, 2022

@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 🤩

@ankitchouhan1020
Copy link
Collaborator

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

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.

None yet

4 participants