Merge branch '2.0' into 2.0

Author: NalinDalal

src/content/contributor-docs/en/contributing_to_the_p5js_reference.mdx

@@ -380,21 +380,35 @@ Class constructors are defined with the `@class` tag and the `@constructor` tag.
 
 The p5.js repository is set up so that you can generate and preview the reference without needing to build and run the p5.js website as well.
 
-* The main command to generate the reference from the reference comments in the source code is to run the following command.
+To do so, make sure you have committed and pushed your changes to a branch of your fork of p5.js.
+
+**Important:** Make sure you're working with compatible branches:
+
+- Use the `2.0` branch of p5.js-website with the `dev-2.0` branch of p5.js
+- Use the `main` branch of p5.js-website with the `main` branch of p5.js
+
+* First, ensure you have the necessary dependencies installed in the p5.js-website repository:
 
 ```
-npm run docs
+npm install
 ```
 
-This will generate the necessary preview files and the main `docs/reference/data.json` file, which is the same file (after minification) that will be used to render the reference page on the website.
-
-* For continuous work on the reference, you can run the following command.
+* Then, in the p5.js-website repo, run the following command, using the URL of your fork of p5 before the `#`, and the name of your branch after the `#`:
 
 ```
-npm run docs:dev
+npm run custom:dev https://github.com/yourUsername/p5.js.git#yourBranch
 ```
 
-This will launch a live preview of the rendered reference that will update each time you make changes (you will need to refresh the page after making changes to see them appear). This is useful, especially for previewing example code running in the browser.
+This will build the reference from your branch and start a development preview of the website. A URL will be logged in the console that you can go to in your browser to test out your changes.
+
+If everything is working correctly, your terminal output should look similar to this:
+![Terminal output showing successful npm run custom:dev execution](src/content/contributor-docs/images/custom-dev-terminal-output.png)
+
+* When you're done, you can run this command to reset your changes:
+
+```
+npm run custom:cleanup
+```
 
 * The main template files are stored in the `docs/` folder and, in most cases, you should not make changes directly to files in this folder, except to add new asset files in the `docs/yuidoc-p5-theme/assets` folder.
 

src/content/contributor-docs/images/custom-dev-terminal-output.png

@@ -53,12 +53,18 @@ Using the [p5.js Web Editor](https://editor.p5js.org/):
 
 - Log in to the [p5.js Web Editor](https://editor.p5js.org/).
 - Name your project “Interactive Landscape” by clicking the *pencil icon* and typing “Interactive Landscape” into the text box that appears.
+
+![A user on the p5.js Web Editor names a new project “Interactive Landscape”.](../images/introduction/p5_editor_interactive_landscape_1.png)
+
 - Click on *File* and select *Save*.
+
+![A user on the p5.js Web Editor saves their new project "Interactive Landscape".](../images/introduction/p5_editor_interactive_landscape_2.png)
+
 - Confirm your project is saved by navigating to your gallery of saved sketches:
   - Click on *File* and select *Open*.
   - Your most recent sketches will appear at the top of the list of projects saved on your account.
 
-![A user on the p5.js Web Editor names a new project “Interactive Landscape”, saves it, finds it in their gallery of saved sketches, and clicks the project's name to open it.](../images/introduction/rename-sketch.gif)
+![A user on the p5.js Web Editor finds their project "Interactive Landscape" in their gallery of saved sketches.](../images/introduction/p5_editor_interactive_landscape_3.png)
 
 #### Default Code
 

src/content/tutorials/en/get-started.mdx

@@ -4,7 +4,7 @@ description: A quick tutorial for setting up the p5.js Web Editor and VS Code to
 category: introduction
 categoryIndex: 0
 featuredImage: ../images/featured/SetupA.jpg
-featuredImageAlt: An interactive sketch in the p5.js Web Editor draws circles on the canvas as the mouse pointer moves.
+featuredImageAlt: An interactive sketch in the p5.js Editor draws circles on the canvas as the mouse pointer moves.
 relatedContent:
   references:
     - en/p5/setup
@@ -61,7 +61,7 @@ If you are new to p5.js, start with the [p5.js Web Editor](https://editor.p5js.o
 - Open a desktop browser on your computer and go to [https://editor.p5js.org/](https://editor.p5js.org/).
 - Click the [“Sign up”](https://editor.p5js.org/signup) link on the top-right of the web page.
 
-![An arrow pointing to the “Sign Up” link in the top right corner of the p5.js Web Editor.](../images/introduction/web-editor-signup.png)
+![An arrow pointing to the “Sign Up” link in the top right corner of the p5.js Editor.](../images/introduction/p5_editor_sign_up.png)
 
 
 ### Step 2: Create an account with [p5.js Web Editor](https://editor.p5js.org/)
@@ -73,7 +73,9 @@ If you are new to p5.js, start with the [p5.js Web Editor](https://editor.p5js.o
   - Create and confirm a password. 
   - Click the “Sign Up” button.
 
-![A user clicks the “Sign Up” button in the p5.js Web Editor,  enters a new username, email address, and password.](../images/introduction/editor-signup.gif)
+
+![An arrow pointing to the highlighted fields on the Sign Up page, as described above.](../images/introduction/p5_editor_sign_up_page.png)
+
 
 - Using a Google account
   - Click on the button on the bottom of the page that says “Login with Google.” 
@@ -98,21 +100,29 @@ The [p5.js Web Editor](https://editor.p5js.org/) is an online environment where
 
 The following diagram labels and describes each element of the editor’s interface:
 
-![A labeled diagram of the p5.js Web Editor’s user interface.](../images/introduction/web-editor-diagram.png)
+![A labeled diagram of the p5.js Web Editor’s user interface.](../images/introduction/p5_editor_interface_breakdown.png)
+
+{/* ![Play and Stop buttons.](../images/introduction/p5_editor_play_start.png)
+![Settings button with a gear icon in the center.](../images/introduction/p5_editor_settings.png) */}
 
 
 ### Step 4: Name, save, and run your first sketch
 
 - Name your projects by clicking on the pencil icon above the text editor and typing in a name for your project.
+
+![An arrow points to a pencil icon to rename a sketch.](../images/introduction/p5_editor_naming_a_sketch.png)
+
 - Save projects by clicking on *File* in the top toolbar, and selecting *Save*. 
   - Make sure you are logged in to your account or you will not be able to save the sketch.
   - Saving projects frequently helps to ensure that code isn’t lost if something happens to your computer, browser, or internet connection while you are coding.
 
-![A user on the p5.js Web Editor names a new project “My First Sketch” and saves it. A notification box then appears for a moment with the text “Sketch saved.”](../images/introduction/renameSave.gif)
+![A user on the p5.js Web Editor names a new project and saves it.”](../images/introduction/p5_editor_saving_a_sketch.png)
+
+![An arrow pointing to a notification box with the text “Sketch saved.”](../images/introduction/p5_editor_saved_sketch_notification.png)
 
 To view the output of your code, click the *Play* button in the top left corner: 
 
-![A blank canvas appears in the preview window of the p5.js Web Editor when a user clicks on the “Play” button in the top right corner.](../images/introduction/play.gif)
+![A blank canvas appears in the preview window of the p5.js Web Editor when a user clicks on the “Play” button in the top right corner.](../images/introduction/p5_editor_running_a_sketch.png)
 
 A *p5.js sketch* is a text file with code written in the *JavaScript* programming language. *JavaScript* is a programming language used to make web pages interactive. p5.js is a library written in *JavaScript* – which is why it ends in “*.js*” for *JavaScript*. With p5.js, you can create programs that are colorful and animated, with features that users can interact with! To learn more about some of the things you can do with p5.js, watch the [p5.js Welcome Video!](https://hello.p5js.org/) To learn more about JavaScript, you can visit [this resource.](https://developer.mozilla.org/en-US/docs/Web/JavaScript)