Merge branch 'develop' into about-version-info

raclim · web-flow · commit f5d6449c8089 · 2023-02-21T23:07:53.000-05:00
diff --git a/README.md b/README.md
@@ -1,10 +1,5 @@
 # [p5.js Editor](https://editor.p5js.org)
 
-
-Documentation is also available in the following languages:
-
-[한국어](https://github.com/processing/p5.js-web-editor/blob/develop/translations/ko)
-
 ## Welcome! 👋👋🏿👋🏽👋🏻👋🏾👋🏼
 
 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.
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
@@ -115,6 +115,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   min-width: #{7 / $base-font-size}rem;
+  white-space: pre;
 }
 
 .sidebar__file-item-name-text {
diff --git a/contributor_docs/accessibility.md b/contributor_docs/accessibility.md
@@ -1,14 +1,14 @@
 ## Accessibility Guidelines
 
-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.
+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.
 
 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.
 
 **Code Structure**
 
-* 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)
+* 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)
 * 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/develop/client/modules/IDE/components/Editor.jsx#L249)
+* 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**
diff --git a/contributor_docs/deployment.md b/contributor_docs/deployment.md
@@ -17,7 +17,7 @@ WIP.
 
 These are the steps that happen when you deploy the application.
 
-1. Push to `develop` branch, or merge in a pull request to the `develop` branch.
+1. Push to the `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.
@@ -47,7 +47,7 @@ If you are interested in hosting and deploying your own p5.js Web Editor instanc
 
 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/develop)
-3. Enter a unique *App name*, this will become part of the url (i.e. https://app-name.herokuapp.com/)
+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
 6. When complete, click on the "View app" button
diff --git a/contributor_docs/development.md b/contributor_docs/development.md
@@ -22,7 +22,7 @@ Follow the [installation guide](./installation.md).
 As a person contributing code but not creating production releases (this is most people!), here's what you need to know:
 * 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.
 * 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`.
-* 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. 
+* 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. 
 * 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`.
 
 See the [release guide](./release.md) for information about creating a release.
@@ -68,7 +68,7 @@ Structure your commit message like this:
 * 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".
 * Link the GitHub issue you are working on in the summary line in brackets, e.g. [#123]
 * Always leave the second line blank.
-* Be as descriptive as possible in the description. It helps reasoning about the intention of commits and gives more context about why changes happened.
+* 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.
 * 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`.
 * Note that you can connect multiple issues to a commit, if necessary: `[#123][#456] Add Button component`
 
diff --git a/contributor_docs/installation.md b/contributor_docs/installation.md
@@ -25,6 +25,7 @@ _Note_: The installation steps assume you are using a Unix-like shell. If you ar
 7. Install MongoDB and make sure it is running
    * 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/)
    * For Windows and Linux: [MongoDB Installation](https://docs.mongodb.com/manual/installation/)
+<<<<<<< HEAD:contributor_docs/installation.md
 8. `$ cp .env.example .env`
 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.
 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
 13. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
 14. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
 15. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w`
+=======
+7. `$ cp .env.example .env`
+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.
+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.
+10. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
+11. `$ npm start`
+12. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
+13. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
+14. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w`
+>>>>>>> 1129cb97b545e7fa0a7d463fcf3f1c596e1fbf49:developer_docs/installation.md
 
 ## Docker Installation
 
@@ -43,6 +54,7 @@ Using Docker, you can have a complete, consistent development environment withou
 Note that this takes up a significant amount of space on your machine. Make sure you have at least 5GB free.
 
 1. Install Docker for your operating system
+<<<<<<< HEAD:contributor_docs/installation.md
    * [Mac](https://www.docker.com/docker-mac)
    * [Windows](https://www.docker.com/docker-windows)
 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
 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.
 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.
 8. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
+=======
+   * Mac: https://www.docker.com/docker-mac
+   * Windows: https://www.docker.com/docker-windows
+2. Clone this repository and cd into it
+3. `$ docker-compose -f docker-compose-development.yml build`
+4. `$ cp .env.example .env`
+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.
+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.
+7. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
+>>>>>>> 1129cb97b545e7fa0a7d463fcf3f1c596e1fbf49:developer_docs/installation.md
 
 Now, anytime you wish to start the server with its dependencies, you can run:
 
@@ -68,12 +90,12 @@ If you don't have the full server environment running, you can launch a one-off
 
 ## S3 Bucket Configuration
 
-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.
+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.
 
 If your S3 bucket is in the US East (N Virginia) region (us-east-1), you'll
 need to set a custom URL base for it, because it does not follow the standard
 naming pattern as the rest of the regions. Instead, add the following to your
-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:
+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:
 `S3_BUCKET_URL_BASE=https://s3.amazonaws.com/{BUCKET_NAME}/`
 
 If you've configured your S3 bucket and DNS records to use a custom domain
diff --git a/contributor_docs/preparing_a_pull_request.md b/contributor_docs/preparing_a_pull_request.md
@@ -13,7 +13,7 @@ Pull-requests are easier when your code is up to date! You can use git rebase to
 
 
 ### Find out about changes
-Make sure you're tracking upstream p5.js repository.
+Make sure you're tracking the upstream p5.js repository.
 
     git remote show upstream
 
@@ -43,7 +43,7 @@ Then ask git about the latest changes.
 ## CONFLICTS
 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
+## And finally, for the great glory
     git push --set-upstream origin your-branch-name-backup
 
 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
diff --git a/contributor_docs/public_api.md b/contributor_docs/public_api.md
@@ -4,7 +4,7 @@ This API provides a way to programmatically import data into the p5.js Web Edito
 
 # Authentication
 
-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.
+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.
 
 When contacting the API, the username and token must be sent with every request using basic auth.
 
@@ -139,7 +139,7 @@ No body.
 
 Create a new sketch.
 
-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.
+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.
 
 ### Request format
 See `Sketch` in Models above.
@@ -199,7 +199,7 @@ See `Sketch` in Models above.
 
 ## `DELETE /:user/sketches/:id`
 
-Delete a sketch and all it’s associated files.
+Delete a sketch and all its associated files.
 
 ### Request format
 No body
diff --git a/contributor_docs/public_api_proposed.md b/contributor_docs/public_api_proposed.md
@@ -1,12 +1,12 @@
 # Proposed Public API extensions
 
-This describes proposed extensions to the Public API. None of these extensions are confirmed, but are recorded here for reference and discussion. 
+This describes proposed extensions to the Public API. None of these extensions are confirmed, but they are recorded here for reference and discussion. 
 
 Refer to [Public API](./public_api.md) for the current version of the API.
 
 # Authentication
 
-- Support for sending tokens can via the `Authorization: Bearer {your_access_token}` HTTP header instead of just Basic Auth
+- Support for sending tokens can be via the `Authorization: Bearer {your_access_token}` HTTP header instead of just Basic Auth
 
 # API Access
 
@@ -154,15 +154,15 @@ Returns file contents.
 
 ## `PATCH /:user/sketches/:id/files/:path` 
 
-Update the name or contents a file or directory.
+Update the name or contents of a file or directory.
 
 ### Request format
 See `File` and `Directory` above.
 
 ### Response format
 No body.
 
-### Example: Change file name
+### Example: Change the file name
 
     PATCH /p5/sketches/Ckhf0APpg/files/assets/something.js
     
@@ -206,7 +206,7 @@ Files are added to the directory, in addition to what is there.
 
 ## `DELETE /:user/:sketches/files/:path`
 
-Delete a file/directory, and it’s contents.
+Delete a file/directory, and its contents.
 
 ### Request format
 No body.
diff --git a/contributor_docs/testing.md b/contributor_docs/testing.md
diff --git a/contributor_docs/translations.md b/contributor_docs/translations.md
diff --git a/translations/contributor_docs/ko/installation.md b/translations/contributor_docs/ko/installation.md

Original file line number	Diff line number	Diff line change
`@@ -115,6 +115,7 @@`
`115`	`115`	`white-space: nowrap;`
`116`	`116`	`text-overflow: ellipsis;`
`117`	`117`	`min-width: #{7 / $base-font-size}rem;`
	`118`	`+ white-space: pre;`
`118`	`119`	`}`
`119`	`120`
`120`	`121`	`.sidebar__file-item-name-text {`