Skip to content
This repository was archived by the owner on Apr 19, 2021. It is now read-only.

[docs] Fix table scaling for languages and frameworks #637

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/docs/languages/bash.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

<div class="table-container">
<div class="table-container language-examples">

| Repository | Description | Try It |
|------------|--------------|--------|
Expand Down
2 changes: 1 addition & 1 deletion src/docs/languages/cpp.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

<div class="table-container">
<div class="table-container language-examples">

| Repository | Description | Try it |
|------|----------------|-----------|
Expand Down
2 changes: 1 addition & 1 deletion src/docs/languages/dotnet.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
## Example Repositories


<div class="table-container">
<div class="language-examples table-container">

| Repository | Description | Try it |
|------|----------------|-----------|
Expand Down
2 changes: 1 addition & 1 deletion src/docs/languages/go.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

<div class="table-container">
<div class="language-examples table-container">

| Repository | Description | Try It |
| ----------------------------------------------------------------- | ------------------------------|-------------------------------------------------------------------------------------------------: |
Expand Down
13 changes: 9 additions & 4 deletions src/docs/languages/html.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

<div class="language-examples table-container">

|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)|

</div>

## [emmet](http://emmet.io/) Support

Expand Down
2 changes: 1 addition & 1 deletion src/docs/languages/php.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Gitpod supports PHP right out of the box, but more advanced features such as deb

## Example Repositories

<div class="table-container">
<div class="language-examples table-container">

| Repository | Description | Try it |
|------------|-------------|--------|
Expand Down
59 changes: 35 additions & 24 deletions src/docs/languages/python.md
Original file line number Diff line number Diff line change
Expand Up @@ -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!

<div class="table-container">
<div class="language-examples table-container">

| 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) |

</div>

Expand All @@ -28,28 +28,35 @@ You can switch between Python versions using `pyenv local <VERSION>`. 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
command: python3 main.py
```

## 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:
- [email protected]: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:
Expand Down Expand Up @@ -95,29 +102,32 @@ ports:
tasks:
- command: python3 app.py
```

<br>
We also support other GUI frameworks such as `Kivy` and `PyQt`
<br>
Here are some other examples of Python GUI applications in Gitpod:

<div class="table-container">
<div class="language-examples table-container">

| 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) |

</div>

<br>

## 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"
Expand All @@ -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.

<br>


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)
Expand Down
2 changes: 1 addition & 1 deletion src/docs/languages/ruby.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

<div class="table-container">
<div class="language-examples table-container">

Repository | Description | Try it
---------|----------|---------
Expand Down
2 changes: 1 addition & 1 deletion src/docs/languages/rust.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

<div class="table-container">
<div class="language-examples table-container">

| Repository | Description | Try it |
|---------|------------|-----|
Expand Down
2 changes: 1 addition & 1 deletion src/docs/languages/vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

<div class="table-container">
<div class="language-examples table-container">

| Repository | Description | Try it |
|------------|-------------|--------|
Expand Down
5 changes: 5 additions & 0 deletions src/styles/normalize.ts
Original file line number Diff line number Diff line change
Expand Up @@ -432,6 +432,11 @@ export default `
}
}

.language-examples td,
.language-examples tr {
font-size: 0.915rem;
}

/* --------------------------------------------- */
/* ----- Utils ----- */
/* --------------------------------------------- */
Expand Down