Merge branch 'dev-2.0' into dev-2.0

Author: limzykenneth

contributor_docs/contributing_to_the_p5js_reference.md

@@ -15,7 +15,7 @@ Our community is large and diverse. Many people learn to code using p5.js, and a
 ## Table of Contents
 
 ### Writing
-- [YUIDoc](#yuidoc)
+- [documentation.js and JSDoc](#documentationjs-and-jsdoc)
 - [English](#english)
 - [Oxford Comma](#oxford-comma)
 - [Wording](#wording)
@@ -42,15 +42,13 @@ Our community is large and diverse. Many people learn to code using p5.js, and a
 - [Classes](#classes)
 - [Assets](#assets)
 
-## YUIDoc
+## documentation.js and JSDoc
 
-We use YUIDoc to generate the p5.js API documentation. To generate the docs, navigate to the p5.js root directory, run `npm install`, and execute:
+We use [documentation.js](https://documentation.js.org/) to generate the p5.js API documentation from [JSDoc](https://jsdoc.app/) comments in the p5.js source code.
 
-```
-$ npm run grunt yui:dev
-```
+Refer to the [inline documentation guide](./contributing_to_the_p5js_reference.md) for more information on how to structure the documentation comments and what tags to use.
 
-The output will appear in docs/reference. Refer to the [inline documentation guide](./contributing_to_the_p5js_reference.md) for more information.
+It also discusses how to [generate and preview the reference documentation](./contributing_to_the_p5js_reference/#generating-and-previewing-the-reference) to see your changes.
 
 **[⬆ back to top](#table-of-contents)**
 
@@ -141,7 +139,7 @@ Always use `let` to declare variables.
 
 **Accessibility terminology**
 
-The following terminology is adapted from the WordPress documentation guidelines for [Writing inclusive documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). For more background on people-first language, see the CDC's guide on [Communicating With and About People with Disabilities](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html).
+The following terminology is adapted from the WordPress documentation guidelines for [Writing inclusive documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). For more background on people-first language, see the CDC's guide on [Communicating With and About People with Disabilities](https://www.cdc.gov/disability-and-health/articles-documents/communicating-with-and-about-people-with-disabilities.html).
 
 | Recommended | Not Recommended |
 | -- | -- |
@@ -1267,25 +1265,30 @@ class Mover {
 
 ## Assets
 
-- Always load assets from a folder called "assets".
+Whether assets (such as images, fonts, sound files, etc) are being used in the descriptions or code examples of the reference documentation, or in tutorials, the same rules apply:
 
-> Why? It models good project organization. It's also required for assets to load on the p5.js website. Place assets in the following folders to include them in our online documentation:
-- Examples: [src/data/examples/assets](https://github.com/processing/p5.js-website/tree/main/src/data/examples)
-- Reference Pages: [src/templates/pages/reference/assets](https://github.com/processing/p5.js-website/tree/main/src/templates/pages/reference/assets)
-- Learn Pages: [src/assets/learn](https://github.com/processing/p5.js-website/tree/main/src/assets/learn)
+- Always load assets from a folder called `assets`.
+- Store the assets in the `public/assets` folder of the p5.js-website repository.
+
+> Why? It models good project organization. It's also required for assets to load on the p5.js website. 
 
 ```javascript
 let img;
 
 // Bad.
-function preload() {
-  img = loadImage('moonwalk.jpg');
+async function setup() {
+  img = await loadImage('moonwalk.jpg');
+  //...
 }
 
 // Good.
-function preload() {
-  img = loadImage('assets/moonwalk.jpg');
+async function setup() {
+  img = await loadImage('assets/moonwalk.jpg');
+  //...
 }
 ```
 
+There is more on working with assets in the guide: [Contributing to the p5.js reference](./contributing_to_the_p5js_reference/#using-assets).
+
+
 **[⬆ back to top](#table-of-contents)**

contributor_docs/documentation_style_guide.md

@@ -1,153 +1,3 @@
 # JSDoc Best Practices
 
-Documentation on the website is built from the comments in the p5.js repo. Here are a few things to keep in mind in order for the documentation to be parsed correctly!
-
-## For everything
-
-- At the top of a file, add a comment with the `@module` tag, and optionally also the `@submodule`. These reference the category and subcategory names that the contents of the file should appear under in the reference:
-
-  e.g. for just a category:
-  ```js
-  /**
-   * @module Rendering
-   */
-  ```
-
-  e.g. for both:
-  ```js
-  /**
-   * @module Data
-   * @submodule LocalStorage
-   */
-  ```
-
-## For classes
-
-
-- Create classes *outside* of the addon function, and assign them to `p5` *inside.* The class name should be the same always:
-
-  ```js
-  class MyClass {
-    // ...
-  }
-
-  export default function myAddon(p5, fn) {
-     p5.MyClass = MyClass;
-  }
-  ```
-
-- Document class methods directly above the members in classes, *without* a `@method` tag:
-
-  ```js
-  class MyClass {
-    /**
-     * Description goes here
-     */
-    myMethod() {
-      return 4;
-    }
-  }
-  ```
-
-- Documentation for the class itself should go at the spot where the class is added to `p5` and not right next to the class definition. This needs to include the `@class` tag, including a `p5.` prefix on the class name. Also include the parameters for the constructor in this description, if they exist.
-
-  ```js
-  class MyClass {
-    constructor(n) {
-      this.n = n;
-    }
-  }
-
-  export default function myAddon(p5, fn) {
-    /**
-     * Description of the class goes here!
-     *
-     * @class p5.MyClass
-     * @param {Number} n A number to pass in
-     */
-     p5.MyClass = MyClass;
-  }
-  ```
-
-- Documentation for class properties should appear after the class is added to `p5`, not within the class itself. It needs to have the `@for` tag referencing its class, and the `@property` tag naming the property itself:
-
-  ```js
-  class MyClass {
-    myProperty;
-    constructor() {
-      myProperty = 2;
-    }
-  }
-
-  export default function myAddon(p5, fn) {
-    /**
-     * Description of the class goes here!
-     *
-     * @class p5.MyClass
-     */
-     p5.MyClass = MyClass;
-
-     /**
-      * Description of the property goes here!
-      *
-      * @property {Number} myProperty
-      * @for p5.MyClass
-      */
-  }
-  ```
-
-## For global functions
-
-- Add a comment with the `@method` tag listing its name:
-
-  ```js
-  export default function myAddon(p5, fn) {
-    /**
-     * Description goes here!
-     *
-     * @method myFunction
-     */
-    p5.myFunction = function() {
-      return 8;
-    };
-  }
-  ```
-
-- For dynamically generated methods, do the same as usual, but add `@for p5`.
-
-  ```js
-  function myAddon(p5, fn) {
-    for (const key of ['nameA', 'nameB']) {
-      fn[key] = function() {
-        return `Hello from ${key}!`;
-      };
-    }
-
-    /**
-     * @method nameA
-     * @for p5
-     */
-
-    /**
-     * @method nameB
-     * @for p5
-     */
-  }
-  ```
-
-- Mark things that you don't want showing up as `@private`. This is done automatically for methods whose names start with `_`.
-
-  ```js
-  class MyClass {
-    /**
-     * @private
-     */
-    privateMethodA() {
-      // ...
-    }
-
-    _privateMethodB() {
-      // ...
-    }
-  }
-  ```
+This material has been moved into [Contributing to the p5.js Reference](./contributing_to_the_p5js_reference.md)

contributor_docs/images/reference-screenshot-example-fill-red.png

@@ -20,7 +20,7 @@
     "test/**/*.js": "eslint",
     "utils/**/*.{js,mjs}": "eslint"
   },
-  "version": "2.2.2",
+  "version": "2.2.3-rc.1",
   "dependencies": {
     "@davepagurek/bezier-path": "^0.0.7",
     "@japont/unicode-range": "^1.0.0",