Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.