Skip to content

Commit 2da7ff1

Browse files
authored
Merge branch 'develop' into fix/styled-warning
2 parents 824f181 + 050b447 commit 2da7ff1

39 files changed

+2356
-1034
lines changed

client/components/Nav.jsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -667,6 +667,16 @@ class Nav extends React.PureComponent {
667667
हिन्दी
668668
</button>
669669
</li>
670+
<li className="nav__dropdown-item">
671+
<button
672+
onFocus={this.handleFocusForLang}
673+
onBlur={this.handleBlur}
674+
value="ko"
675+
onClick={(e) => this.handleLangSelection(e)}
676+
>
677+
한국어
678+
</button>
679+
</li>
670680
<li className="nav__dropdown-item">
671681
<button
672682
onFocus={this.handleFocusForLang}

client/i18n.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import i18n from 'i18next';
22
import { initReactI18next } from 'react-i18next';
33
import Backend from 'i18next-http-backend';
4+
45
import {
56
enUS,
67
es,
78
ja,
89
hi,
10+
ko,
911
ptBR,
1012
de,
1113
frCA,
@@ -23,6 +25,7 @@ const availableLanguages = [
2325
'fr-CA',
2426
'hi',
2527
'ja',
28+
'ko',
2629
'pt-BR',
2730
'sv',
2831
'uk-UA',
@@ -38,6 +41,7 @@ export function languageKeyToLabel(lang) {
3841
'fr-CA': 'Français',
3942
hi: 'हिन्दी',
4043
ja: '日本語',
44+
ko: '한국어',
4145
'pt-BR': 'Português',
4246
sv: 'Svenska',
4347
'uk-UA': 'Українська',
@@ -55,6 +59,7 @@ export function languageKeyToDateLocale(lang) {
5559
'fr-CA': frCA,
5660
hi,
5761
ja,
62+
ko,
5863
'pt-BR': ptBR,
5964
sv,
6065
'uk-UA': uk,

client/modules/IDE/components/PreviewFrame.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ function PreviewFrame({ fullView }) {
2424
const frameUrl = previewUrl;
2525
const sandboxAttributes = `allow-forms allow-modals allow-pointer-lock allow-popups
2626
allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads`;
27-
const allow = `accelerometer; ambient-light-sensor; autoplay; camera; encrypted-media; geolocation; gyroscope; \
27+
const allow = `accelerometer; ambient-light-sensor; autoplay; bluetooth; camera; encrypted-media; geolocation; gyroscope; \
2828
hid; microphone; magnetometer; midi; payment; usb; serial; vr; xr-spatial-tracking`;
2929

3030
return (

client/modules/IDE/reducers/files.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ function draw() {
1212
const defaultHTML = `<!DOCTYPE html>
1313
<html lang="en">
1414
<head>
15-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
16-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/addons/p5.sound.min.js"></script>
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
16+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js"></script>
1717
<link rel="stylesheet" type="text/css" href="style.css">
1818
<meta charset="utf-8" />
1919

client/styles/components/_preferences.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,7 @@ input[type="number"]::-webkit-outer-spin-button {
237237
@include themify() {
238238
//for some reason this won't work for getThemifyVariable
239239
color: map-get($theme-map, "heavy-text-color");
240+
font-weight: bold;
240241
}
241242
}
242243

client/testData/testReduxStore.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const initialTestState = {
6868
},
6969
{
7070
name: 'index.html',
71-
content: `<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <main> </main> <script src="sketch.js"></script> </body> </html>`,
71+
content: `<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <main> </main> <script src="sketch.js"></script> </body> </html>`,
7272
id: '606fc1c46045e19ca2ee2646',
7373
_id: '606fc1c46045e19ca2ee2646',
7474
fileType: 'file',

contributor_docs/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@ This folder contains documents intended for developers of the p5.js Web Editor.
1212
* [Release](./release.md) - A guide to creating a production release.
1313

1414
## Documents to Create
15-
* Design Principles - reference [p5.js design principles](https://github.com/processing/p5.js/edit/develop/contributor_docs/design_principles.md)
16-
* Issue Labels - reference [p5.js issue labels](https://github.com/processing/p5.js/blob/develop/contributor_docs/issue_labels.md)
15+
* Design Principles - reference [p5.js design principles](https://github.com/processing/p5.js/blob/main/contributor_docs/design_principles.md)
16+
* Issue Labels - reference [p5.js issue labels](https://github.com/processing/p5.js/blob/main/contributor_docs/issue_labels.md)
1717
* File Structure - An explanation of the file structure of this application.

contributor_docs/installation.md

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,24 @@ _Note_: The installation steps assume you are using a Unix-like shell. If you ar
1515
```
1616

1717
4. If you are using nvm, run `$ nvm use` to set your Node version to 16.14.2
18-
5. Navigate into the project folder and install all its necessary dependencies with npm.
18+
5. Ensure your npm version is set to 8.5.0. If it isn't, run `npm install -g npm@8.5.0` to install it.
19+
6. Navigate into the project folder and install all its necessary dependencies with npm.
1920

2021
```
2122
$ cd p5.js-web-editor
2223
$ npm install
2324
```
24-
6. Install MongoDB and make sure it is running
25+
7. Install MongoDB and make sure it is running
2526
* For Mac OSX with [homebrew](http://brew.sh/): `brew tap mongodb/brew` then `brew install mongodb-community` and finally start the server with `brew services start mongodb-community` or you can visit the installation guide here [Installation Guide For MacOS](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/)
2627
* For Windows and Linux: [MongoDB Installation](https://docs.mongodb.com/manual/installation/)
27-
7. `$ cp .env.example .env`
28-
8. (Optional) Update `.env` with necessary keys to enable certain app behaviors, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
29-
9. Run `$ npm run fetch-examples` to download the example sketches into a user called 'p5'. Note that you need to configure your GitHub Credentials, which you can do by following the [Github API Configuration](#github-api-configuration) section.
30-
10. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
31-
11. `$ npm start`
32-
12. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
33-
13. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
34-
14. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w`
28+
8. `$ cp .env.example .env`
29+
9. (Optional) Update `.env` with necessary keys to enable certain app behaviors, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
30+
10. Run `$ npm run fetch-examples` to download the example sketches into a user called 'p5'. Note that you need to configure your GitHub Credentials, which you can do by following the [Github API Configuration](#github-api-configuration) section.
31+
11. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
32+
12. `$ npm start`
33+
13. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
34+
14. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
35+
15. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w`
3536

3637
## Docker Installation
3738

@@ -42,27 +43,28 @@ Using Docker, you can have a complete, consistent development environment withou
4243
Note that this takes up a significant amount of space on your machine. Make sure you have at least 5GB free.
4344

4445
1. Install Docker for your operating system
45-
* Mac: https://www.docker.com/docker-mac
46-
* Windows: https://www.docker.com/docker-windows
47-
2. Clone this repository and cd into it
48-
3. `$ docker-compose -f docker-compose-development.yml build`
49-
4. `$ cp .env.example .env`
50-
5. (Optional) Update `.env` with necessary keys to enable certain app behavoirs, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
51-
6. `$ docker-compose -f docker-compose-development.yml run --rm app npm run fetch-examples` - note that you need to configure your GitHub Credentials, which you can do by following the [Github API Configuration](#github-api-configuration) section.
52-
7. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
46+
* [Mac](https://www.docker.com/docker-mac)
47+
* [Windows](https://www.docker.com/docker-windows)
48+
2. Install [Docker Desktop](https://www.docker.com/products/docker-desktop/)
49+
3. Clone this repository and cd into it
50+
4. `$ docker-compose -f docker-compose-development.yml build`
51+
5. `$ cp .env.example .env`
52+
6. (Optional) Update `.env` with necessary keys to enable certain app behavoirs, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
53+
7. `$ docker-compose -f docker-compose-development.yml run --rm app npm run fetch-examples` - note that you need to configure your GitHub Credentials, which you can do by following the [Github API Configuration](#github-api-configuration) section.
54+
8. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
5355

5456
Now, anytime you wish to start the server with its dependencies, you can run:
5557

56-
8. `$ docker-compose -f docker-compose-development.yml up`
57-
9. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
58+
9. `$ docker-compose -f docker-compose-development.yml up`
59+
10. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
5860

5961
To open a terminal/shell in the running Docker server (i.e. after `docker-compose up` has been run):
6062

61-
10. `$ docker-compose -f docker-compose-development.yml exec app bash -l`
63+
11. `$ docker-compose -f docker-compose-development.yml exec app bash -l`
6264

6365
If you don't have the full server environment running, you can launch a one-off container instance (and have it automatically deleted after you're done using it):
6466

65-
11. `$ docker-compose -f docker-compose-development.yml run app --rm bash -l`
67+
12. `$ docker-compose -f docker-compose-development.yml run app --rm bash -l`
6668

6769
## S3 Bucket Configuration
6870

contributor_docs/release.md

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,17 @@ This project release guide is based on
1111

1212
## Steps
1313
1. `$ git checkout develop`
14-
2. `$ git checkout -b release-<newversion>`
15-
3. Do all of the release branch testing necessary. This could be as simple as running `npm test:ci`, or it could take user testing over a few days.
16-
4. `$ npm version <newversion>` (see [npm-version](https://docs.npmjs.com/cli/version) for valid values of <newversion>).
17-
5. `$ git checkout release`
18-
6. `$ git merge --no-ff release-<newversion>`
19-
7. `$ git push && git push --tags`
20-
8. `$ git checkout develop`
21-
9. Create a release on GitHub. Make sure that you release from the `release` branch! You can do this in one of two ways:
22-
1. (Preferred) Use the [`hub` command line tool](https://hub.github.com/). You can automate adding all commit messages since the last release with the following command:
23-
```sh
24-
$ hub release create -d -m "<newversion>" -m "$(git log `git describe --tags --abbrev=0 HEAD^`..HEAD --oneline)" <newversion>`
25-
```
26-
Note that this creates a draft release, which you can then edit on GitHub. This allows you to create release notes from the list of commit messages, but then edit these notes as you wish.
27-
2. [Draft a new release on Github](https://github.com/processing/p5.js-web-editor/releases/new).
14+
2. `$ git pull origin develop`
15+
3. `$ git checkout -b release-<newversion>`
16+
4. Do all of the release branch testing necessary. This could be as simple as running `npm test:ci`, or it could take user testing over a few days.
17+
5. `$ npm version <newversion>` (see [npm-version](https://docs.npmjs.com/cli/version) for valid values of <newversion>).
18+
6. `$ git checkout release`
19+
7. `$ git merge --no-ff release-<newversion>`
20+
8. `$ git push && git push --tags`
21+
9. `$ git checkout develop`
2822
10. `$ git merge --no-ff release-<newversion>`
23+
11. `$ git push origin develop`
24+
12. [Draft a new release on Github](https://github.com/processing/p5.js-web-editor/releases/new). Choose the tag that is the release version you just created, and then title it `v<newversion>`. Then click "Generate release notes". Publish the release and you are finished!
2925

3026
Travis CI will automatically deploy the release to production, as well as push a production tagged Docker image to DockerHub.
3127

infrastructure/README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
## Quickly Rolling Back a Deploy
2+
3+
1. Since the latest tag is being used, we can't simply just repoint the image back to the previous release, but we can instead use Kubernetes' built in rollback feature.
4+
1. `kubectl rollout undo deployment.apps/web-editor-node -n production`
5+
6+
## Upgrading the GKE Cluster
7+
8+
1. Log into the [Google Cloud Platform console](https://console.cloud.google.com/) and go to the GKE service and click into the p5-gke-cluster.
9+
1. There are two components of GKE that need to be upgraded, the control plane (or cluster master node), and the cluster nodes themselves (or node pools), in that order.
10+
11+
### Upgrading the GKE control plane
12+
13+
1. Upgrade the GKE control plane first, by following the steps below.
14+
![GKE control plane upgrade 1](./images/control_plane_upgrade_1.png)
15+
1. Look up the latest available version in the [Kubernetes release changelog](https://kubernetes.io/releases/) to determine if there are any breaking changes that will require updates to your manifest files. Based on this information, determine the version you want to upgrade the cluster to (ideally the latest supported version) and hit save changes. This should begin the control plane upgrade. Since this is a regional cluster, there should be no downtime during this process however, the API will be unavailable, so do not attempt a deploy during the upgrade.
16+
![GKE control plane upgrade 2](./images/control_plane_upgrade_2.png)
17+
18+
### Upgrading the GKE node pool
19+
20+
1. Wait until the GKE control plane upgrade is complete and then proceed by upgrading the GKE node pool using the following steps.
21+
1. Navigate to the workloads page to make sure that you have a few replicas (pods) of each service running in the cluster so that the node draining process doesn't cause downtime.
22+
1. Navigate back to the main GKE service page where you see the cluster listing and you should see that there is an update available.
23+
![GKE node pool upgrade 1](./images/node_pool_upgrade_1.png)
24+
1. Select the version that is the same as the control plane.
25+
![GKE node pool upgrade 2](./images/node_pool_upgrade_2.png)
26+
27+
### Update the version in the terraform
28+
29+
1. Since we've done the upgrade manually, the terraform file should be updated to reflect the current version in case we need to recreate the cluster from scratch.
30+
1. Update the default GKE version [here](https://github.com/processing/p5.js-web-editor/blob/develop/terraform/variables.tf#L13).
Loading
Loading
240 KB
Loading
109 KB
Loading
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.

0 commit comments

Comments
 (0)