Merge branch 'develop' into bugfix/full-view

Author: catarak

.github/CONTRIBUTING.md

@@ -18,7 +18,7 @@ Hello! We welcome community contributions to the p5.js Web Editor. Contributing
 
 ## Code of Conduct
 
-Please follow the guidelines in the [Code of Conduct](https://github.com/processing/p5.js-web-editor/blob/master/.github/CODE_OF_CONDUCT.md).
+Please follow the guidelines in the [Code of Conduct](https://github.com/processing/p5.js-web-editor/blob/develop/.github/CODE_OF_CONDUCT.md).
 
 ## How Can I Contribute?
 If you're new to open source, [read about how to contribute to open source](https://opensource.guide/how-to-contribute/).
@@ -60,7 +60,7 @@ If you feel like an issue is tagged incorrectly (e.g. it's low priority and you
 
 If you'd like to work on an issue, please comment on it to let the maintainers know, so that they can assign it to you. If someone else has already commented and taken up that issue, please refrain from working on it and submitting a PR without asking the maintainers as it leads to unnecessary duplication of effort.
 
-Then, look at the [development guide](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/development.md) for instructions on how to install the project locally and follow the right development workflow.
+Then, look at the [development guide](https://github.com/processing/p5.js-web-editor/blob/develop/developer_docs/development.md) for instructions on how to install the project locally and follow the right development workflow.
 
 ### Contribution Guides
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -3,5 +3,5 @@ Fixes #issue-number
 I have verified that this pull request:
 
 * [ ] has no linting errors (`npm run lint`)
-* [ ] is from a uniquely-named feature branch and has been rebased on top of the latest master. (If I was asked to make more changes, I have made sure to rebase onto master then too)
-* [ ] is descriptively named and links to an issue number, i.e. `Fixes #123`
+* [ ] is from a uniquely-named feature branch and has been rebased on top of the latest `develop` branch. (If I was asked to make more changes, I have made sure to rebase onto `develop` then too)
+* [ ] is descriptively named and links to an issue number, i.e. `Fixes #123`

.github/config.yml

@@ -10,8 +10,8 @@ newIssueWelcomeComment: >
 
 # Comment to be posted to on PRs from first time contributors in your repository
 newPRWelcomeComment: >
-  🎉 Thanks for opening this pull request! Please check out our [contributing guidelines](https://github.com/processing/p5.js-web-editor/blob/master/.github/CONTRIBUTING.md) if you haven't already.
+  🎉 Thanks for opening this pull request! Please check out our [contributing guidelines](https://github.com/processing/p5.js-web-editor/blob/develop/.github/CONTRIBUTING.md) if you haven't already.
 
 # Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge
 
-# Comment to be posted to on pull requests merged by a first time user
+# Comment to be posted to on pull requests merged by a first time user

README.md

@@ -3,7 +3,7 @@
 
 Documentation is also available in the following languages:
 
-[한국어](https://github.com/processing/p5.js-web-editor/blob/master/translations/ko)
+[한국어](https://github.com/processing/p5.js-web-editor/blob/develop/translations/ko)
 
 ## Welcome! 👋👋🏿👋🏽👋🏻👋🏾👋🏼
 
@@ -23,7 +23,7 @@ All contributors to the p5.js Web Editor are expected to follow the [Code of Con
 
 The p5.js Web Editor is a collaborative project created by many individuals, and you are invited to help. All types of involvement are welcome! Please check out the [contribution guide](./.github/CONTRIBUTING.md) for more details.
 
-Developers, check the [developer docs](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/) details about contributing code, bug fixes, and documentation. To start writing code, a great place to start is the [development guide](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/development.md).
+Developers, check the [developer docs](https://github.com/processing/p5.js-web-editor/blob/develop/developer_docs/) details about contributing code, bug fixes, and documentation. To start writing code, a great place to start is the [development guide](https://github.com/processing/p5.js-web-editor/blob/develop/developer_docs/development.md).
 
 ## Issues
 

developer_docs/README.md

@@ -1,7 +1,7 @@
 This folder contains documents intended for developers of the p5.js Web Editor. 
 
 ## List of Documents
-* [Contribution Guide](https://github.com/processing/p5.js-web-editor/blob/master/.github/CONTRIBUTING.md) - A place to get started!
+* [Contribution Guide](https://github.com/processing/p5.js-web-editor/blob/develop/.github/CONTRIBUTING.md) - A place to get started!
 * [Installation](installation.md) - A guide for setting up your development environment
 * [Development](development.md) - A guide for adding code to the web editor
 * [Preparing a pull-request](preparing_a_pull_request.md) - Instructions for how to make a pull-request
@@ -11,6 +11,6 @@ This folder contains documents intended for developers of the p5.js Web Editor.
 * [Release](./release.md) - A guide to creating a production release.
 
 ## Documents to Create
-* Design Principles - reference [p5.js design principles](https://github.com/processing/p5.js/edit/master/contributor_docs/design_principles.md)
-* Issue Labels - reference [p5.js issue labels](https://github.com/processing/p5.js/blob/master/contributor_docs/issue_labels.md)
+* Design Principles - reference [p5.js design principles](https://github.com/processing/p5.js/edit/develop/contributor_docs/design_principles.md)
+* Issue Labels - reference [p5.js issue labels](https://github.com/processing/p5.js/blob/develop/contributor_docs/issue_labels.md)
 * File Structure - An explanation of the file structure of this application.

developer_docs/accessibility.md

@@ -8,13 +8,13 @@ The code for the p5.js web editor adheres to web accessibility standards. The fo
 
 * 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)
 * All buttons/links/windows need to be accessible by the keyboard ( By tabbing, pressing space etc.)
-* 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/master/client/modules/IDE/components/Editor.jsx#L249)
-* 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/master/client/modules/IDE/components/NewFileForm.jsx#L16)
+* 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)
+* 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)
 
 **Labeling**
 
-* When creating button icons, images, or something without text (this does not include an HTML5 `<button>`), use [aria-labels](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute). [code example](https://github.com/processing/p5.js-web-editor/blob/master/client/modules/IDE/components/Toolbar.jsx#L67)
-* All `<table>`s need to have a `summary` attribute. This will ensure user is given context to what the table is. [code example](https://github.com/processing/p5.js-web-editor/blob/master/client/modules/IDE/components/SketchList.jsx#L39)
-* `ul`s and `nav`s menus need to include a title. [code example](https://github.com/processing/p5.js-web-editor/blob/master/client/components/Nav.jsx#L7)
+* When creating button icons, images, or something without text (this does not include an HTML5 `<button>`), use [aria-labels](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute). [code example](https://github.com/processing/p5.js-web-editor/blob/develop/client/modules/IDE/components/Toolbar.jsx#L67)
+* All `<table>`s need to have a `summary` attribute. This will ensure user is given context to what the table is. [code example](https://github.com/processing/p5.js-web-editor/blob/develop/client/modules/IDE/components/SketchList.jsx#L39)
+* `ul`s and `nav`s menus need to include a title. [code example](https://github.com/processing/p5.js-web-editor/blob/develop/client/components/Nav.jsx#L7)
 
-For more information on accessibility see the [teach access tutorial](https://teachaccess.github.io/tutorial/)
+For more information on accessibility see the [teach access tutorial](https://teachaccess.github.io/tutorial/)

developer_docs/deployment.md

@@ -17,7 +17,7 @@ WIP.
 
 These are the steps that happen when you deploy the application.
 
-1. Push to `master` branch, or merge in a pull request to the `master` branch.
+1. Push to `develop` branch, or merge in a pull request to the `develop` branch.
 2. This triggers a build on [Travis CI](https://travis-ci.org/processing/p5.js-web-editor).
 3. Travis CI builds a (development) Docker image of the whole application.
 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.
@@ -46,7 +46,7 @@ _Note_: The installation steps assume you are using a Unix-like shell. If you ar
 If you are interested in hosting and deploying your own p5.js Web Editor instance, you can! It would be the same as the official editor instance at editor.p5js.org, except with a different domain, and you would be in charge of the maintenance. We recommend using Heroku as you can host it for free.
 
 1. Sign up for a free account at: [Heroku](https://www.heroku.com/)
-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/master)
+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)
 3. Enter a unique *App name*, this will become part of the url (i.e. https://app-name.herokuapp.com/)
 4. Update any configuration variables, or accept the defaults for a quick evaluation (they can be changed later to enable full functionality)
 5. Click on the "Deploy app" button

developer_docs/preparing_a_pull_request.md

@@ -28,11 +28,11 @@ Then ask git about the latest changes.
 ### Just in case: make a copy of your changes in a new branch
     git branch your-branch-name-backup
 
-### Apply changes from master branch, adds your changes *after*
-    git rebase upstream/master
+### Apply changes from develop branch, adds your changes *after*
+    git rebase upstream/develop
 
-### Switches back to master branch
-    git checkout master
+### Switches back to develop branch
+    git checkout develop
 
 ### Helps other contributors fully understand the changes that you made
     git commit -m "Fixed documentation typos"   
@@ -41,7 +41,7 @@ Then ask git about the latest changes.
     git status       
 
 ## CONFLICTS
-You may have some conflicts! It's okay. Feel free to ask for help. If merging with the latest upstream master causes conflicts, you can always make a pull request with the upstream repository, which makes the merge conflicts public.
+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.
 
 ## And finally, for great glory
     git push --set-upstream origin your-branch-name-backup

developer_docs/translations.md

@@ -12,7 +12,8 @@ In order to simplify the translations process the following rules of thumb were
 * There is only one file to translate all the texts in any specific language, which is located under the directory, in respective locale [subdirectory](https://github.com/processing/p5.js-web-editor/tree/develop/translations/locales)
 * The new language code must be added to [client/i18n.js](https://github.com/processing/p5.js-web-editor/blob/develop/client/i18n.js#L7)
 * New languages will need to be selected using a dropdown in Nav component, specifically in function [renderLanguageMenu.](https://github.com/processing/p5.js-web-editor/blob/develop/client/components/Nav.jsx#L550)
- 
+* Need to add `TRANSLATIONS_ENABLED=true` to `.env` to activate dropdown for the languages.
+
 ## Translations
 
 * Every component should introduce its own subset of keys inside a dictionary named after the component. 

server/views/404Page.js

@@ -110,11 +110,11 @@ export function get404Sketch(callback) {
         // Fix links to assets
         htmlFile = htmlFile.replace(
           /'assets/g,
-          "'https://rawgit.com/processing/p5.js-website/master/dist/assets/examples/assets/"
+          "'https://rawgit.com/processing/p5.js-website/main/dist/assets/examples/assets/"
         );
         htmlFile = htmlFile.replace(
           /"assets/g,
-          '"https://rawgit.com/processing/p5.js-website/master/dist/assets/examples/assets/'
+          '"https://rawgit.com/processing/p5.js-website/main/dist/assets/examples/assets/'
         );
 
         // Change canvas size