Update contribute docs and script (processing#123)

* refresh contribute docs

* convert MD comments to MDX in contributor docs build script

* move contribute build script; handle cleaning out previous docs

* update contribute docs

* ignore repo clone path

Author: outofambit

.eslintignore

@@ -2,4 +2,5 @@ src/content/examples/**/*.js
 src/content/tutorials/**/sketches/**/*.js
 src/content/contributor-docs/**/*.js
 test/mocks/assets/
-dist/
+dist/
+in/

package.json

@@ -10,7 +10,7 @@
     "build": "astro check && astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "build:contribute": "tsx ./src/scripts/build-contribute.ts",
+    "build:contribute": "tsx ./src/scripts/builders/contribute.ts",
     "build:reference": "tsx ./src/scripts/builders/reference.ts",
     "build:search": "tsx ./src/scripts/builders/search.ts",
     "test": "vitest",

public/images/contributor-docs/fes.svg

@@ -1,34 +1,36 @@
+{/* What our commitment to access means for contributors and users of the library. */}
+
 # Our Focus on Access
 
 At the [2019 Contributors Conference](https://p5js.org/community/contributors-conference-2019.html), p5.js made the commitment to only add new features that increase access (inclusion and accessibility). We will not accept feature requests that don't support these efforts. We commit to the work of acknowledging, dismantling, and preventing barriers. This means considering intersecting[^1] experiences of diversity that can impact access and participation. These include alignments of gender, race, ethnicity, sexuality, language, location, et cetera. We center the needs of marginalized groups over the continued comfort of those privileged within the p5.js community. We are collectively exploring the meaning of access. We are learning how to practice and teach access. We choose to think of access through expansive, intersectional, and coalitionary frameworks. This commitment is part of the core values of p5.js outlined in our [Community Statement](https://p5js.org/community/).
 
 # Kinds of access
 
-Increasing access is not focused on expanding the raw number of people in the p5.js community. Instead, we want to make p5.js available for people who get left out of the community. This is often a consequence of structural bias. This commitment extends to the tools and platforms p5.js offers. It also includes the makeup, decision-making, and actions of p5.js leadership. We resist a technological culture of speed, growth and competition. We prioritize intentionality, slowness, accommodation, and accountability as acts of collective care.
+Increasing access is not focused on expanding the raw number of people in the p5.js community. It is a continued commitment to making p5.js available to and approachable for people who have been excluded from the p5.js community as a consequence of structural oppression. This commitment extends to the tools and platforms p5.js offers. It also includes the makeup, decision-making, and actions of p5.js leadership. We resist a technological culture of speed, growth, and competition. We prioritize intentionality, slowness, accommodation, and accountability as acts of collective care.
 
 Access here means making p5.js equitable for:
 
 * People who speak languages other than English
-* People of color and people of marginalized ethnic identities
-* Lesbian, gay, bisexual, trans, queer, questioning, intersex, pansexual, two-spirit, and asexual people
-* Women and people with other marginalized gender expressions
-* Disabled people/people with disabilities, neurodivergent people/people with neurodivergence, and chronically ill people/people with chronic illness[^2]
+* Black, Indigenous, People of Color, and people of marginalized ethnicities
+* Lesbian, gay, bisexual, queer, questioning, pansexual, and asexual people
+* Trans, genderfluid, agender, intersex, and two-spirit people, women, and others with marginalized genders
+* People who are blind, d/Deaf[^2] or hard of hearing, disabled/have a disability, neurodivergent, and chronically ill[^3]
 * People who have lower income, or lack access to financial or cultural capital
 * People with little or no prior experience in open source and creative coding
 * People from diverse educational backgrounds
 * People across all age groups, including children and elders
-* People with a variety of technological skill, tools and internet access
+* People with a variety of technological skill, tools, and internet access
 * People from diverse religious backgrounds
 * Other people who are systematically excluded and historically underrepresented
 * And all intersections thereof
 
-We recognize the complexity of the terms used to describe our respective identities. Language is nuanced, evolving and contested. This is not an exhaustive list. We provide an attempt to name and be accountable to our commitments and to the diverse needs of the p5.js community.
+We recognize the complexity of the terms used to describe our respective identities. Language is nuanced, evolving, and contested. This is not an exhaustive list. We provide an attempt to name and be accountable to our commitments and to the diverse needs of the p5.js community.
 
 # Examples
 
 These are examples of efforts we believe increase access:
 
-* Translating documentation and other materials into more languages, decentering linguistic imperialism[^3] (e.g., Rolando Vargas’ [Processing in Kuna Language](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7), Felipe Santos Gomes, Julia Brasil, Katherine Finn Zander, and Marcela Mancino’s [Pê Cinco: Internationalization and Popularization for Portuguese Speakers](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1))
+* Translating documentation and other materials into more languages, decentering linguistic imperialism[^4] (e.g., Rolando Vargas’ [Processing in Kuna Language](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7), Felipe Santos Gomes, Julia Brasil, Katherine Finn Zander, and Marcela Mancino’s [Pê Cinco: Internationalization and Popularization for Portuguese Speakers](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1))
 * Improving our support for assistive technologies, such as screen readers (e.g., Katie Liu’s [Adding Alt Text in p5.js](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8), Claire Kearney-Volpe’s [P5 Accessibility Project](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8))
 * Following [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG21/) in our tools and working towards making it easier for users to follow them in their projects
 * Making p5.js error messages more helpful and supportive to people using the tool (e.g., the [p5.js Friendly Error System (FES)](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system/))
@@ -51,6 +53,8 @@ This version of the p5.js Access Statement was revised in collaboration with Eve
 
 [^1]: Crenshaw, Kimberlé (1989). "Demarginalizing the intersection of race and sex: a black feminist critique of antidiscrimination doctrine, feminist theory and antiracist politics". University of Chicago Legal Forum. 1989 (1): 139–167. ISSN 0892-5593. Full text at Archive.org.
 
-[^2]: There are differing preferences between ‘person-first’ vs. ‘identity-first’ language within the disability community. Read [Unpacking the debate over person-first vs. identity-first language in the autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/) and [I am Disabled: On Identity-First Versus People-First Language](https://thebodyisnotanapology.com/magazine/i-am-disabled-on-identity-first-versus-people-first-language/).
+[^2]: Capital ‘D’ Deaf refers to people who are culturally Deaf or part of the Deaf community while lower case ‘d’ deaf is an audiological term that can describe people not associated with Deaf identity.
+
+[^3]: There are differing preferences between ‘person-first’ vs. ‘identity-first’ language within the disability community. Read [Unpacking the debate over person-first vs. identity-first language in the autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/) and [I am Disabled: On Identity-First Versus People-First Language](https://thebodyisnotanapology.com/magazine/i-am-disabled-on-identity-first-versus-people-first-language/).
 
-[^3]: Linguistic Imperialism, or Language Imperialism, refers to the ongoing domination/prioritization/imposition of certain languages such as English at the expense of native languages due to imperial expansion and globalization.
+[^4]: Linguistic Imperialism, or Language Imperialism, refers to the ongoing domination/prioritization/imposition of certain languages such as English at the expense of native languages due to imperial expansion and globalization.

public/images/contributor-docs/new-branch.png

@@ -0,0 +1,46 @@
+{/* Instructions on how to combine just the p5.js modules you need into a single file. */}
+
+# Creating a custom build of p5.js with select components
+
+## Overview
+
+An excellent new [feature](https://github.com/processing/p5.js/pull/2051) of p5.js allows user to build p5.js as a custom combination of its modules. This greatly helps in reducing the production version size of the library, as well as improves overall performance.
+
+This feature was suggested as a part of a proposal for Google Summer of Code 2017.
+
+## Usage
+
+Currently, the usage is through invoking a Grunt task manually from the command line:
+
+```sh
+git clone https://github.com/processing/p5.js.git
+cd p5.js
+npm ci
+npm run grunt
+npm run grunt combineModules:module_x:module_y
+```
+
+Here, `module_n` refers to the name of the modules which you want to select. Multiple modules must be passed as shown above. Also, these modules must have the same name as their folders in `/src` directory to work correctly. While `core` is included by default, `core/shape` needs to be included for shapes like line() and other core features to work.
+
+The above usage example will likely output a `p5Custom.js` larger than the complete `p5.min.js` as the output is not minified using the `uglify` task.
+
+The recommended steps to reduce bundle size as much as possible are:
+
+```sh
+git clone https://github.com/processing/p5.js.git
+cd p5.js
+npm ci
+npm run grunt
+npm run grunt combineModules:min:module_x:module_y uglify
+```
+
+## Examples
+
+* `npm run grunt combineModules:min:core/shape:color:math:image uglify`\
+  Generates a `p5Custom.min.js` bundle in the `lib/modules` directory with the combineModules and uglify tasks. Note that modules should be listed after `combineModules:min` and the `uglify` task should have a space after the modules list.
+
+* `npm run grunt combineModules:core/shape:color:math:image`\
+  Generates a non-minified `p5Custom.js` bundle in the `lib/modules` directory.
+
+* `npm run grunt combineModules:min:core/shape:color:math:image`\
+  Generates a `p5Custom.pre-min.js` in the `lib/modules` directory with the `combineModules:min` task. Note that in this example `npm run grunt uglify` can be run separately after running the `combineModules:min` task.

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

@@ -0,0 +1,97 @@
+{/* How we integrate translations into the p5.js codebase. */}
+
+# 🌐 Internationalization
+
+[Internationalization](https://developer.mozilla.org/docs/Glossary/Internationalization_and_localization) (sometimes abbreviated "i18n") refers to supporting multiple languages in a software project. This often means maintaining translations of text strings used in the project and letting users choose which translation they receive (or detecting it from their browser settings).
+
+p5.js uses internationalization in a bunch of areas (our contributor docs, [the official website](https://p5js.org), the reference, etc). We're expanding to include the console output of p5.js (which is primarily developer-facing error messages) in our internationalization efforts.
+
+## Tooling
+
+We've integrated [i18next](https://www.i18next.com) into the codebase. Currently we only use it in the un-minified build of p5.js. `p5.min.js` only includes the outer layer of our internationalization code and does not use it.
+
+### Setup
+
+We set up our i18next integration in `src/core/internationalization.js` and the translations are in `translations/`.
+
+We set up the translation engine and autodetect the user's language from their browser settings before the p5 sketch is initialized. This ensures we can use translations for any errors we encounter in sketch `setup()` and `preload()`.
+
+(If we encounter any errors in language autodetection, we fall back to English.)
+
+#### No translations in `p5.min.js`
+
+There is specific logic in the browserify build task and `src/core/init.js` to avoid loading or setting up translations in the minified build. Adding translations does not increase the size of the minified build.
+
+### Using translations
+
+To use translations include this line at the top of the file.
+
+```js
+import { translator } from './internationalization';
+```
+
+### Simple messages
+
+Without internationalization you might log a message with the text inline.
+
+```js
+console.log('Loading your sketch right now!')
+```
+
+Instead, you use `translator`:
+
+```js
+console.log(translator('sketch.loading'))
+```
+
+This tells the translator to get the "`sketch.loading`" message in whatever language we've detected that the user prefers.
+
+#### Dynamic messages
+
+You can also inject variables into a translated message. For example,
+
+```js
+console.log('I couldnt find ' + file.name + '. Are you sure it's there?')
+```
+
+would become something like
+
+```js
+console.log(translator('fileLoading.notFound', { fileName: file.name }))
+```
+
+Translations like this expect the variables it uses to have a certain name, so make sure you use that. Check a translation file (look in `translations/{YOUR_LANGUAGE}/`) to see what the variable name is. You'll find the translation under the object path in the translation key.
+
+"`fileLoading.notFound`" would be found at
+
+```json
+{
+  "fileLoading": {
+    "notFound": "I couldnt find {{fileName}}. Are you sure it's there?"
+  }
+}
+```
+
+Variables are framed in "`{{` `}}`".
+
+### Modifying translations
+
+Simply open `translations/{YOUR_LANGUAGE}/translation.json`, find the translation with the key (like in the example just above) and edit away!
+
+### Adding translations for new languages
+
+The easiest way to do this is to add your language code (like "de" for German, "it" for Italian, etc) to the [locales list](https://github.com/processing/p5.js/blob/84bc1f92c89786f48e5d6fd1045feb649b932eea/package.json#L111-L114) in `package.json` and then from the terminal run '$ npm run build'.
+
+This will generate you a fresh translations file in `translations/{LANGUAGE_CODE}/`! Now you can begin populating it with your fresh translations! 🥖
+
+You'll also need to add an entry for it in [`translations/index.js`](../translations/index.js) and [`translations/dev.js`](../translations/dev.js). You can follow the pattern used in that file for `en` and `es`.
+
+### Testing changes
+
+The bulk of translations are not included in the final library, but are hosted online and are automatically downloaded by p5.js when it needs them. Updates to these only happen whenever a new version of p5.js is released.
+
+However, if you want to see your changes (or any other changes which aren't released yet), you can simply run `npm run dev` which will build p5.js configured to use the translation files present locally on your computer, instead of the ones on the internet.
+
+### Further Reading
+
+See the [i18next translation function documentation](https://www.i18next.com/translation-function/essentials). Everything documented above is just a subset of their functionality.

src/content/contributor-docs/en/archive/custom_p5_build.mdx

@@ -0,0 +1,50 @@
+{/* A field guide to organizing p5.js GitHub issues. */}
+
+# p5.js issue labels
+
+p5.js uses a set of labels to help sort and organize issues.
+
+All issues should have at least two labels to indicate the status and which areas are affected.
+
+## Status
+
+| Label             | Usage                                                                |
+| ----------------- | -------------------------------------------------------------------- |
+| Announcement      | Announcement from p5.js leads/stewards                               |
+| Bug               |                                                                      |
+| Dependencies      |                                                                      |
+| Discussion        | Know what the problem is, need community input to determine solution |
+| Enhancement       | An improvement to the codebase                                       |
+| Feature Request   | An addition to the codebase                                          |
+| Help Wanted       | Not sure how to fix, looking for help from contributors              |
+| Known Issue       |                                                                      |
+| Good First Issue  | Issues recommended for first time contributors                       |
+| More Info Needed  | Require more info to illustrate the issue                            |
+| Please Help Label | Not sure which label should be added                                 |
+
+## Areas
+
+Indicate the part of the code base affected by the issue.
+
+All the Area labels are now coordinated with the  [src folder](https://github.com/processing/p5.js/tree/main/src) structure.
+
+* Area:Accessibility
+* Area:Color
+* Area:Core
+* Area:Data
+* Area:DOM
+* Area:Events
+* Area:Image
+* Area:IO
+* Area:Math
+* Area:Typography
+* Area:Utilities
+* Area:WebGL
+
+All the labels below are coordinated with the rest of the steward [focus areas](https://github.com/processing/p5.js#stewards).
+
+* Build Process
+* Unit Testing
+* Internalization
+* Friendly Errors
+* Documentation

src/content/contributor-docs/en/archive/internationalization.mdx

@@ -0,0 +1,19 @@
+{/* How we decide what to support. */}
+
+# Supported browsers
+
+## Our stated goal
+
+p5.js uses [browserslist](https://browsersl.ist/) and [Babel](https://babeljs.io/) to provide support for older browsers. The browserslist configuration in use is [`last 2 versions, not dead`](https://browserslist.dev/?q=bGFzdCAyIHZlcnNpb25zLCBub3QgZGVhZA%3D%3D). `last 2 versions` means the last two releases of any browsers, `not dead` means browsers that had official support or updates in the past 24 months. Both of these conditions must be true for a browser to be supported.
+
+In practice, you can still use most of the latest features available in Javascript because Babel will likely be able to transpile or polyfill them to something matching the required compatibility list. Some features such as [Web API](https://developer.mozilla.org/en-US/docs/Web/API), [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), or similar features not part of the core Javascript language cannot be handled by Babel and will need to be assessed on a case by case basis.
+
+Good places to check if a feature is available are [caniuse.com](https://caniuse.com/) and [MDN](https://developer.mozilla.org/en-US/).
+
+## Where does this apply
+
+The supported browsers requirement will apply to the p5.js source code, all examples (both website examples page and documentation), and all official tutorials. Third party add-on libraries does not have to adhere to the same requirement but are encouraged to do so.
+
+In many cases browsers not officially supported will likely still work with p5.js but we provide no guarantee for this case.
+
+Stewards of each section will be responsible for ensuring PR involving code changes adhere to this requirement.