Skip to content

Commit a267f28

Browse files
raclimraclim
authored
Merge branch 'develop' into fix/scroll-position
2 parents 94cbd09 + 9073487 commit a267f28

24 files changed

+798
-66
lines changed

‎.github/ISSUE_TEMPLATE/feature-request.md renamed to ‎.github/ISSUE_TEMPLATE/🌱-new-feature-request.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
---
2-
name: New Feature Request
2+
name: "\U0001F331 New Feature Request"
33
about: This template is for requesting a new feature be added.
44
title: ''
5-
labels: feature request
5+
labels: ''
66
assignees: ''
77

88
---
99

1010
<!--
1111
Hi there!
1212
13-
Thank you for contributing to the p5.js Editor project
13+
Thank you for contributing to the p5.js Editor project.
1414
1515
Until further notice, we will only add new features that increase access.
1616

‎.github/ISSUE_TEMPLATE/found-a-bug.md renamed to ‎.github/ISSUE_TEMPLATE/🐛-found-a-bug.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
---
2-
name: Found a Bug
3-
about: This template is for reporting bugs (broken or incorrect behavior). If you have questions about your own code, please visit our forum discourse.processing.org instead.
2+
name: "\U0001F41B Found a Bug"
3+
about: This template is for reporting bugs (broken or incorrect behavior). If you
4+
have questions about your own code, please visit our forum discourse.processing.org
5+
instead.
46
title: ''
57
labels: bug
68
assignees: ''

‎.github/ISSUE_TEMPLATE/existing-feature-enhancement.md renamed to ‎.github/ISSUE_TEMPLATE/💡-existing-feature-enhancement.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
name: Existing Feature Enhancement
2+
name: "\U0001F4A1 Existing Feature Enhancement"
33
about: This template is for suggesting an improvement for an existing feature.
44
title: ''
5-
labels: enhancement
5+
labels: ''
66
assignees: ''
77

88
---

‎README.md

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
# [p5.js Editor](https://editor.p5js.org)
22

3-
4-
Documentation is also available in the following languages:
5-
6-
[한국어](https://github.com/processing/p5.js-web-editor/blob/develop/translations/ko)
7-
83
## Welcome! 👋👋🏿👋🏽👋🏻👋🏾👋🏼
94

105
The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything. It is designed with beginners in mind, limiting features and frills. The editor is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.

‎client/components/Nav.jsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -677,6 +677,16 @@ class Nav extends React.PureComponent {
677677
한국어
678678
</button>
679679
</li>
680+
<li className="nav__dropdown-item">
681+
<button
682+
onFocus={this.handleFocusForLang}
683+
onBlur={this.handleBlur}
684+
value="it"
685+
onClick={(e) => this.handleLangSelection(e)}
686+
>
687+
Italiano
688+
</button>
689+
</li>
680690
<li className="nav__dropdown-item">
681691
<button
682692
onFocus={this.handleFocusForLang}

‎client/i18n.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
es,
88
ja,
99
hi,
10+
it,
1011
ko,
1112
ptBR,
1213
de,
@@ -24,6 +25,7 @@ const availableLanguages = [
2425
'es-419',
2526
'fr-CA',
2627
'hi',
28+
'it',
2729
'ja',
2830
'ko',
2931
'pt-BR',
@@ -40,6 +42,7 @@ export function languageKeyToLabel(lang) {
4042
'es-419': 'Español',
4143
'fr-CA': 'Français',
4244
hi: 'हिन्दी',
45+
it: 'Italiano',
4346
ja: '日本語',
4447
ko: '한국어',
4548
'pt-BR': 'Português',
@@ -58,6 +61,7 @@ export function languageKeyToDateLocale(lang) {
5861
'es-419': es,
5962
'fr-CA': frCA,
6063
hi,
64+
it,
6165
ja,
6266
ko,
6367
'pt-BR': ptBR,

‎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.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>
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
16+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.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/_sidebar.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@
115115
white-space: nowrap;
116116
text-overflow: ellipsis;
117117
min-width: #{7 / $base-font-size}rem;
118+
white-space: pre;
118119
}
119120

120121
.sidebar__file-item-name-text {

‎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.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>`,
71+
content: `<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.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/accessibility.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
## Accessibility Guidelines
22

3-
Here is guide on [how to use the accessible editor](https://gist.github.com/MathuraMG/e86666b7b41fbc8c078bad9aff3f666d) and here is an overview of the [p5-accessibility.js](https://github.com/processing/p5.accessibility) library that makes p5.js sketches accessible to screen readers.
3+
Here is a guide on [how to use the accessible editor](https://gist.github.com/MathuraMG/e86666b7b41fbc8c078bad9aff3f666d) and here is an overview of the [p5-accessibility.js](https://github.com/processing/p5.accessibility) library that makes p5.js sketches accessible to screen readers.
44

55
The code for the p5.js web editor adheres to web accessibility standards. The following guidelines will help to ensure that accessibility continues to be a priority as development continues.
66

77
**Code Structure**
88

9-
* Screen Readers are an assistive technology for vision loss which helps users to navigate a web page. They are able to prioritize content based on the semantic meaning of HTML tags. Therefore, it is important to use specific tags, such as `nav`, `ul`, `li`, `section`, and so on. `div` is the least screen reader friendly tag. For example, [here is the semantic meaning of the `body` tag](http://html5doctor.com/element-index/#body)
9+
* Screen Readers are an assistive technology for vision loss that helps users to navigate a web page. They are able to prioritize content based on the semantic meaning of HTML tags. Therefore, it is important to use specific tags, such as `nav`, `ul`, `li`, `section`, and so on. `div` is the least screen reader-friendly tag. For example, [here is the semantic meaning of the `body` tag](http://html5doctor.com/element-index/#body)
1010
* All buttons/links/windows need to be accessible by the keyboard ( By tabbing, pressing space etc.)
11-
* In cases where tags are not screen reader friendly, we can take advantage of [tabIndex](http://webaim.org/techniques/keyboard/tabindex). Using tabIndex ensures that all elements are accessible via keyboard. [code example](https://github.com/processing/p5.js-web-editor/blob/develop/client/modules/IDE/components/Editor.jsx#L249)
11+
* In cases where tags are not screen reader-friendly, we can take advantage of [tabIndex](http://webaim.org/techniques/keyboard/tabindex). Using tabIndex ensures that all elements are accessible via keyboard. [code example](https://github.com/processing/p5.js-web-editor/blob/develop/client/modules/IDE/components/Editor.jsx#L249)
1212
* When opening a new window or pop up window, ensure the keyboard focus also moves to the new window. [code example](https://github.com/processing/p5.js-web-editor/blob/develop/client/modules/IDE/components/NewFileForm.jsx#L16)
1313

1414
**Labeling**

‎contributor_docs/deployment.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ WIP.
1717

1818
These are the steps that happen when you deploy the application.
1919

20-
1. Push to `develop` branch, or merge in a pull request to the `develop` branch.
20+
1. Push to the `develop` branch, or merge in a pull request to the `develop` branch.
2121
2. This triggers a build on [Travis CI](https://travis-ci.org/processing/p5.js-web-editor).
2222
3. Travis CI builds a (development) Docker image of the whole application.
2323
4. Travis CI runs some tests, which in this case, is just `npm run lint`. This could be updated in the future to include more extensive tests. If the tests fail, the build stops here.
@@ -47,7 +47,7 @@ If you are interested in hosting and deploying your own p5.js Web Editor instanc
4747

4848
1. Sign up for a free account at: [Heroku](https://www.heroku.com/)
4949
2. Click here: [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/processing/p5.js-web-editor/tree/develop)
50-
3. Enter a unique *App name*, this will become part of the url (i.e. https://app-name.herokuapp.com/)
50+
3. Enter a unique *App name*, this will become part of the URL (i.e. https://app-name.herokuapp.com/)
5151
4. Update any configuration variables, or accept the defaults for a quick evaluation (they can be changed later to enable full functionality)
5252
5. Click on the "Deploy app" button
5353
6. When complete, click on the "View app" button

‎contributor_docs/development.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Follow the [installation guide](./installation.md).
2222
As a person contributing code but not creating production releases (this is most people!), here's what you need to know:
2323
* The default branch is `develop`. All pull requests should be made to this branch. It should be stable, and all commits are visible at a staging server.
2424
* When working on a bug or feature, you should branch from the `develop` branch. When you're done, you should open a pull request from your feature branch to `develop`.
25-
* The `release` branch is the live production branch, and is the code deployed to editor.p5js.org. Changes to this branch should be made carefully, and will be done using git tags.
25+
* The `release` branch is the live production branch and is the code deployed to editor.p5js.org. Changes to this branch should be made carefully and will be done using git tags.
2626
* Emergency hotfix changes should be branched from `release` and merged via a pull request to `release`. After a PR is merged, then the commits can be merged to `develop`.
2727

2828
See the [release guide](./release.md) for information about creating a release.
@@ -68,7 +68,7 @@ Structure your commit message like this:
6868
* Write the summary line and description of what you have done in the imperative mode, that is as if you were commanding someone. Start the line with "Fix", "Add", "Change" instead of "Fixed", "Added", "Changed".
6969
* Link the GitHub issue you are working on in the summary line in brackets, e.g. [#123]
7070
* Always leave the second line blank.
71-
* Be as descriptive as possible in the description. It helps reasoning about the intention of commits and gives more context about why changes happened.
71+
* Be as descriptive as possible in the description. It helps to reason about the intention of commits and gives more context about why changes happened.
7272
* If it seems difficult to summarize what your commit does, it may be because it includes several logical changes or bug fixes, and are better split up into several commits using `git add -p`.
7373
* Note that you can connect multiple issues to a commit, if necessary: `[#123][#456] Add Button component`
7474

‎contributor_docs/installation.md

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ _Note_: The installation steps assume you are using a Unix-like shell. If you ar
2525
7. Install MongoDB and make sure it is running
2626
* 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/)
2727
* For Windows and Linux: [MongoDB Installation](https://docs.mongodb.com/manual/installation/)
28+
<<<<<<< HEAD:contributor_docs/installation.md
2829
8. `$ cp .env.example .env`
2930
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.
3031
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.
@@ -33,6 +34,16 @@ _Note_: The installation steps assume you are using a Unix-like shell. If you ar
3334
13. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
3435
14. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
3536
15. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w`
37+
=======
38+
7. `$ cp .env.example .env`
39+
8. (Optional) Update `.env` with necessary keys to enable certain app behaviours, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
40+
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.
41+
10. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
42+
11. `$ npm start`
43+
12. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
44+
13. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
45+
14. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w`
46+
>>>>>>> 1129cb97b545e7fa0a7d463fcf3f1c596e1fbf49:developer_docs/installation.md
3647
3748
## Docker Installation
3849

@@ -43,6 +54,7 @@ Using Docker, you can have a complete, consistent development environment withou
4354
Note that this takes up a significant amount of space on your machine. Make sure you have at least 5GB free.
4455

4556
1. Install Docker for your operating system
57+
<<<<<<< HEAD:contributor_docs/installation.md
4658
* [Mac](https://www.docker.com/docker-mac)
4759
* [Windows](https://www.docker.com/docker-windows)
4860
2. Install [Docker Desktop](https://www.docker.com/products/docker-desktop/)
@@ -52,6 +64,16 @@ Note that this takes up a significant amount of space on your machine. Make sure
5264
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.
5365
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.
5466
8. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
67+
=======
68+
* Mac: https://www.docker.com/docker-mac
69+
* Windows: https://www.docker.com/docker-windows
70+
2. Clone this repository and cd into it
71+
3. `$ docker-compose -f docker-compose-development.yml build`
72+
4. `$ cp .env.example .env`
73+
5. (Optional) Update `.env` with necessary keys to enable certain app behaviours, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
74+
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.
75+
7. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
76+
>>>>>>> 1129cb97b545e7fa0a7d463fcf3f1c596e1fbf49:developer_docs/installation.md
5577
5678
Now, anytime you wish to start the server with its dependencies, you can run:
5779

@@ -68,12 +90,12 @@ If you don't have the full server environment running, you can launch a one-off
6890

6991
## S3 Bucket Configuration
7092

71-
Note that this is optional, unless you are working on the part of the application that allows a user to upload images, videos, etc. Please refer to the following [gist](https://gist.github.com/catarak/70c9301f0fd1ac2d6b58de03f61997e3) to set up an S3 bucket to be used with this project.
93+
Note that this is optional unless you are working on the part of the application that allows a user to upload images, videos, etc. Please refer to the following [gist](https://gist.github.com/catarak/70c9301f0fd1ac2d6b58de03f61997e3) to set up an S3 bucket to be used with this project.
7294

7395
If your S3 bucket is in the US East (N Virginia) region (us-east-1), you'll
7496
need to set a custom URL base for it, because it does not follow the standard
7597
naming pattern as the rest of the regions. Instead, add the following to your
76-
environment/.env file, changing `BUCKET_NAME` to your bucket name. This is necessary because this override is currently treated as the full path to the bucket rather than as a proper base url:
98+
environment/.env file, changing `BUCKET_NAME` to your bucket name. This is necessary because this override is currently treated as the full path to the bucket rather than as a proper base URL:
7799
`S3_BUCKET_URL_BASE=https://s3.amazonaws.com/{BUCKET_NAME}/`
78100

79101
If you've configured your S3 bucket and DNS records to use a custom domain

‎contributor_docs/preparing_a_pull_request.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ Pull-requests are easier when your code is up to date! You can use git rebase to
1313

1414

1515
### Find out about changes
16-
Make sure you're tracking upstream p5.js repository.
16+
Make sure you're tracking the upstream p5.js repository.
1717

1818
git remote show upstream
1919

@@ -43,7 +43,7 @@ Then ask git about the latest changes.
4343
## CONFLICTS
4444
You may have some conflicts! It's okay. Feel free to ask for help. If merging with the latest upstream `develop` branch causes conflicts, you can always make a pull request with the upstream repository, which makes the merge conflicts public.
4545

46-
## And finally, for great glory
46+
## And finally, for the great glory
4747
git push --set-upstream origin your-branch-name-backup
4848

4949
Here's a good reference on rebasing, in case you're intensely curious about the technical details. https://www.atlassian.com/git/tutorials/merging-vs-rebasing

‎contributor_docs/public_api.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ This API provides a way to programmatically import data into the p5.js Web Edito
44

55
# Authentication
66

7-
Access to the API is available via a Personal Access Token, linked to an existing editor user account. Tokens can be created and deleted via logged-in user’s Settings page.
7+
Access to the API is available via a Personal Access Token, linked to an existing editor user account. Tokens can be created and deleted via the logged-in user’s Settings page.
88

99
When contacting the API, the username and token must be sent with every request using basic auth.
1010

@@ -139,7 +139,7 @@ No body.
139139

140140
Create a new sketch.
141141

142-
A sketch must contain at least one file with the `.html` extension. If none if provided in the payload, a default `index.html` and linked `style.css` file will be created automatically.
142+
A sketch must contain at least one file with the `.html` extension. If none is provided in the payload, a default `index.html` and linked `style.css` file will be created automatically.
143143

144144
### Request format
145145
See `Sketch` in Models above.
@@ -199,7 +199,7 @@ See `Sketch` in Models above.
199199

200200
## `DELETE /:user/sketches/:id`
201201

202-
Delete a sketch and all it’s associated files.
202+
Delete a sketch and all its associated files.
203203

204204
### Request format
205205
No body

0 commit comments

Comments
 (0)