Merge pull request #948 from adi-ray/doc-update

Update reference generation instructions for p5.js 2.0 fork workflow

Author: perminder-17

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.