From 8ff6afba8fb9e690efac4c5e7c072682415f580b Mon Sep 17 00:00:00 2001 From: Sean Hellum Date: Sat, 16 May 2020 18:38:17 +0000 Subject: [PATCH] [docs] Fix table scaling for languages and frameworks Fixes #495 Update src/docs/languages/bash.md Co-authored-by: Nisar Hassan Naqvi Update src/styles/normalize.ts Co-authored-by: Nisar Hassan Naqvi Update src/docs/languages/cpp.md Co-authored-by: Nisar Hassan Naqvi --- src/docs/languages/bash.md | 2 +- src/docs/languages/cpp.md | 2 +- src/docs/languages/dotnet.md | 2 +- src/docs/languages/go.md | 2 +- src/docs/languages/html.md | 13 +++++--- src/docs/languages/php.md | 2 +- src/docs/languages/python.md | 59 +++++++++++++++++++++--------------- src/docs/languages/ruby.md | 2 +- src/docs/languages/rust.md | 2 +- src/docs/languages/vue.md | 2 +- src/styles/normalize.ts | 5 +++ 11 files changed, 57 insertions(+), 36 deletions(-) diff --git a/src/docs/languages/bash.md b/src/docs/languages/bash.md index 47c81a8b8..9dcb9c2c1 100644 --- a/src/docs/languages/bash.md +++ b/src/docs/languages/bash.md @@ -6,7 +6,7 @@ Bash is the default shell for Gitpod. However, if you're developing a Bash scrip Here are a few Bash example projects that are already automated with Gitpod: -
+
| Repository | Description | Try It | |------------|--------------|--------| diff --git a/src/docs/languages/cpp.md b/src/docs/languages/cpp.md index 1ae635972..676546ae0 100644 --- a/src/docs/languages/cpp.md +++ b/src/docs/languages/cpp.md @@ -6,7 +6,7 @@ Gitpod supports C++ right out of the box, but there are still ways to enhance yo Here are a few C++ example projects that are already automated with Gitpod: -
+
| Repository | Description | Try it | |------|----------------|-----------| diff --git a/src/docs/languages/dotnet.md b/src/docs/languages/dotnet.md index f9ee95d9a..0024e34aa 100644 --- a/src/docs/languages/dotnet.md +++ b/src/docs/languages/dotnet.md @@ -3,7 +3,7 @@ ## Example Repositories -
+
| Repository | Description | Try it | |------|----------------|-----------| diff --git a/src/docs/languages/go.md b/src/docs/languages/go.md index a0498144b..3acb50241 100644 --- a/src/docs/languages/go.md +++ b/src/docs/languages/go.md @@ -6,7 +6,7 @@ Gitpod supports Go right out of the box, but there are still ways to optimize yo Here are a few Go example projects that are already automated with Gitpod: -
+
| Repository | Description | Try It | | ----------------------------------------------------------------- | ------------------------------|-------------------------------------------------------------------------------------------------: | diff --git a/src/docs/languages/html.md b/src/docs/languages/html.md index 79db1de32..9d9653731 100644 --- a/src/docs/languages/html.md +++ b/src/docs/languages/html.md @@ -6,10 +6,15 @@ Here are a few HTML/CSS example projects that are already automated with Gitpod: -Repository | Description | Try it ----|---|--- -[Front-End-Checklist](https://github.com/thedaviddias/Front-End-Checklist) | The perfect Front-End Checklist for modern websites and meticulous developers | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/thedaviddias/Front-End-Checklist) -[Devhints](https://github.com/rstacruz/cheatsheets) | TL;DR for developer documentation - a ridiculous collection of cheatsheets | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/rstacruz/cheatsheets) + +
+ +|Repository | Description | Try it| +|---|---|---| +|[Front-End-Checklist](https://github.com/thedaviddias/Front-End-Checklist) | The perfect Front-End Checklist for modern websites and meticulous developers | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/thedaviddias/Front-End-Checklist)| +|[Devhints](https://github.com/rstacruz/cheatsheets) | for developer documentation - a ridiculous collection of cheatsheets | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/rstacruz/cheatsheets)| + +
## [emmet](http://emmet.io/) Support diff --git a/src/docs/languages/php.md b/src/docs/languages/php.md index 4ce297fb5..103346614 100644 --- a/src/docs/languages/php.md +++ b/src/docs/languages/php.md @@ -4,7 +4,7 @@ Gitpod supports PHP right out of the box, but more advanced features such as deb ## Example Repositories -
+
| Repository | Description | Try it | |------------|-------------|--------| diff --git a/src/docs/languages/python.md b/src/docs/languages/python.md index 92eb09318..18dad9781 100644 --- a/src/docs/languages/python.md +++ b/src/docs/languages/python.md @@ -6,14 +6,14 @@ Gitpod comes with great support for Python built-in. Still, depending on your pr Before we get started, here are some examples of already-[gitpodified](https://www.gitpod.io/blog/gitpodify/) repositories! -
+
-| Repository | Description | Try it | ------------|-----------------------------------------------------------|---------------------------------------------------- -| [gitpod-io/django-locallibrary-tutorial](https://github.com/gitpod-io/django-locallibrary-tutorial) | An example website written in Django by MDN | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/django-locallibrary-tutorial) | -| [gitpod-io/Gitpod-PyQt](https://github.com/gitpod-io/Gitpod-PyQt) | A PyQt example for Gitpod | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/Gitpod-PyQt) | -| [gitpod-io/wxPython-example](https://github.com/gitpod-io/wxPython-example) | A wxPython example for Gitpod | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/wxPython-example) | -| [techwithtim/Hangman](https://github.com/techwithtim/Hangman) | A wxPython example for Gitpod | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/techwithtim/Hangman) | +| Repository | Description | Try it | +| --------------------------------------------------------------------------------------------------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | +| [gitpod-io/django-locallibrary-tutorial](https://github.com/gitpod-io/django-locallibrary-tutorial) | An example website written in Django by MDN | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/django-locallibrary-tutorial) | +| [gitpod-io/Gitpod-PyQt](https://github.com/gitpod-io/Gitpod-PyQt) | A PyQt example for Gitpod | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/Gitpod-PyQt) | +| [gitpod-io/wxPython-example](https://github.com/gitpod-io/wxPython-example) | A wxPython example for Gitpod | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/wxPython-example) | +| [techwithtim/Hangman](https://github.com/techwithtim/Hangman) | A wxPython example for Gitpod | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/techwithtim/Hangman) |
@@ -28,6 +28,7 @@ You can switch between Python versions using `pyenv local `. For exampl ## [Start tasks](https://www.gitpod.io/docs/config-start-tasks/) You can start building your project when, or even [before](https://www.gitpod.io/docs/prebuilds/) you start your Gitpod workspace. Are you using a `requirements.txt` file to manage dependencies? If so, add this to your [.gitpod.yml](https://www.gitpod.io/docs/config-gitpod-file/) to automatically pre-install all dependencies when starting a workspace: + ```yaml tasks: - init: pip3 install -r requirements.txt @@ -35,21 +36,27 @@ tasks: ``` ## VSCode Extensions + While the most popular Python VSCode extensions are built into Gitpod, here are a few "nice to have" extensions that you can use as well. ### ARepl for Python + ![ARepl extension example](../images/AReplExample.gif) ARepl for Python is helpful for constantly checking your code and debugging. To install this extension for your repository, add the following to your [.gitpod.yml](https://www.gitpod.io/docs/config-gitpod-file/): + ```yaml vscode: extensions: - almenon.arepl@1.0.20:Uu7lIOwyLgmNWpTwCl/iqQ== ``` + ### Python Test Explorer + ![Python test explorer example](../images/python_Test_In_Gitpod.png) Easily test your python extensions with the Python Test Explorer. To add this to your repository add the following to your [.gitpod.yml](https://www.gitpod.io/docs/config-gitpod-file/) + ```yaml vscode: extensions: @@ -95,29 +102,32 @@ ports: tasks: - command: python3 app.py ``` +
We also support other GUI frameworks such as `Kivy` and `PyQt`
Here are some other examples of Python GUI applications in Gitpod: -
+
-| Name | Framework | Try it | -|------------------|----------------|-----------| -| [Tic-Tac-Toe-GUI](https://github.com/JesterOrNot/Tic-Tac-Toe-GUI) | Kivy | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/JesterOrNot/Tic-Tac-Toe-GUI) | -| [Pong](https://github.com/JesterOrNot/Pong) | Kivy | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/JesterOrNot/Pong) | -| [Gitpod-PyQt](https://github.com/gitpod-io/Gitpod-PyQt) | PyQt | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/Gitpod-PyQt) | +| Name | Framework | Try it | +| ----------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------- | +| [Tic-Tac-Toe-GUI](https://github.com/JesterOrNot/Tic-Tac-Toe-GUI) | Kivy | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/JesterOrNot/Tic-Tac-Toe-GUI) | +| [Pong](https://github.com/JesterOrNot/Pong) | Kivy | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/JesterOrNot/Pong) | +| [Gitpod-PyQt](https://github.com/gitpod-io/Gitpod-PyQt) | PyQt | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/Gitpod-PyQt) |

## Debugging + Here is a quick clip on how to automatically configure debugging for Python! ![Python debugging example](../images/PythonDebug.gif) So, basically in this video we: + 1. First, open the Python file that we want to debug 2. Then, go to the debug menu and select "Add Configuration..." 3. Next, in the dropdown choose "Python" @@ -127,25 +137,26 @@ So, basically in this video we: You can also create the Python debug configuration file manually To start debugging your Python application in Gitpod, please create a new directory called `.theia/`, and inside add a file called `launch.json`, finally, add the following to it: + ```json { - "version": "0.2.0", - "configurations": [ - { - "name": "Python: Current File", - "type": "python", - "request": "launch", - "program": "${file}", - "console": "internalConsole" - } - ] + "version": "0.2.0", + "configurations": [ + { + "name": "Python: Current File", + "type": "python", + "request": "launch", + "program": "${file}", + "console": "internalConsole" + } + ] } ``` + Then, simply open the Python file you want to debug, open the Debug panel (in the left vertical toolbar, click the icon with the crossed-out-spider), and click the green "Run" button.
- To see a basic repository with Python debugging enabled, please check out [gitpod-io/Gitpod-Python-Debug](https://github.com/gitpod-io/Gitpod-Python-Debug): [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/Gitpod-Python-Debug) diff --git a/src/docs/languages/ruby.md b/src/docs/languages/ruby.md index 11013e3a3..d955748bb 100644 --- a/src/docs/languages/ruby.md +++ b/src/docs/languages/ruby.md @@ -11,7 +11,7 @@ To change the default Ruby version, you can simply run `rvm use 2.5 --default` i Here are a few Ruby example projects that are already automated with Gitpod: -
+
Repository | Description | Try it ---------|----------|--------- diff --git a/src/docs/languages/rust.md b/src/docs/languages/rust.md index bb491235c..c3937b99f 100644 --- a/src/docs/languages/rust.md +++ b/src/docs/languages/rust.md @@ -32,7 +32,7 @@ which will set the required Rust version and if you commit the file into source Here are a few Rust example projects that are already automated with Gitpod: -
+
| Repository | Description | Try it | |---------|------------|-----| diff --git a/src/docs/languages/vue.md b/src/docs/languages/vue.md index 3a0ea87d6..93134c054 100644 --- a/src/docs/languages/vue.md +++ b/src/docs/languages/vue.md @@ -6,7 +6,7 @@ To work with Vue.js in Gitpod, you will need to properly configure your reposito Here are a few Vue.js example projects that are already automated with Gitpod: -
+
| Repository | Description | Try it | |------------|-------------|--------| diff --git a/src/styles/normalize.ts b/src/styles/normalize.ts index e90d218ad..cbef7be66 100644 --- a/src/styles/normalize.ts +++ b/src/styles/normalize.ts @@ -432,6 +432,11 @@ export default ` } } + .language-examples td, + .language-examples tr { + font-size: 0.915rem; + } + /* --------------------------------------------- */ /* ----- Utils ----- */ /* --------------------------------------------- */