Merge branch '2.0' into update-script

Author: ksen0

.github/workflows/test.yml

@@ -12,6 +12,10 @@ jobs:
     steps:
       - name: Checkout your repository using git
         uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
       - name: Install dependencies
         run: npm ci
       - name: Test
@@ -21,6 +25,10 @@ jobs:
     steps:
       - name: Checkout your repository using git
         uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
       - name: Install dependencies
         run: npm ci
       - name: Lint
@@ -30,6 +38,10 @@ jobs:
     steps:
       - name: Checkout your repository using git
         uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
       - name: Install dependencies
         run: npm ci
       - name: Typecheck
@@ -39,6 +51,10 @@ jobs:
     steps:
       - name: Checkout your repository using git
         uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
       - name: Install dependencies
         run: npm ci
       - name: Build

.npmrc

@@ -0,0 +1,2 @@
+# Force npm to fail (not just warn) if the node.js version in "engines" isn't met
+engine-strict=true

docs/technical_overview.md

@@ -4,7 +4,7 @@
 
 ### Setup
 
-1. Make sure you have [node and npm installed on your machine](https://nodejs.org/en/learn/getting-started/how-to-install-nodejs).
+1. Make sure you have [node (at least version 22) and npm installed on your machine](https://nodejs.org/en/learn/getting-started/how-to-install-nodejs).
 2. Clone this repo by typing git clone https://github.com/processing/p5.js-website/ in your terminal. (You can also use [GitHub Desktop](https://desktop.github.com/)).
 3. Then install the project's dependencies with:
 

package-lock.json

@@ -19,6 +19,9 @@
     "custom:dev": "tsx ./src/scripts/branchTest.ts",
     "custom:cleanup": "tsx ./src/scripts/resetBranchTest.ts"
   },
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "dependencies": {
     "@astrojs/check": "^0.9.6",
     "@astrojs/mdx": "^4.3.13",

package.json

@@ -5,12 +5,12 @@ const { Content } = await entry.render();
 const { link, title } = entry.data;
 ---
 
-<div class="banner bg-accent-color text-accent-type-color" style={{ display: 'none' }} data-title={title}>
+<footer class="banner bg-accent-color text-accent-type-color" style={{ display: 'none' }} data-title={title} aria-label="sticky">
   <a class="banner-content" href={link} target="_blank">
     <Content />
   </a>
   <button id="hideBanner" aria-label="Hide banner"><Icon kind="close" /></button>
-</div>
+</footer>
 
 <script>
 const banner = document.querySelector('.banner');

src/components/Banner/index.astro

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from "preact/hooks";
 import { useLiveRegion } from '../hooks/useLiveRegion';
 import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
-import { cdnLibraryUrl, cdnSoundUrl } from "@/src/globals/globals";
+import { cdnLibraryUrl, cdnSoundUrl, cdnWebGPUUrl } from "@/src/globals/globals";
 
 import { CodeFrame } from "./frame";
 import { CopyCodeButton } from "../CopyCodeButton";
@@ -39,7 +39,7 @@ export const CodeEmbed = (props) => {
   );
 
   let { previewWidth, previewHeight } = props;
-  const canvasMatch = /createCanvas\(\s*(\d+),\s*(\d+)\s*(?:,\s*(?:\w+\.)?(?:P2D|WEBGL)\s*)?\)/m.exec(initialCode);
+  const canvasMatch = /createCanvas\(\s*(\d+),\s*(\d+)\s*(?:,\s*(?:\w+\.)?(?:P2D|WEBGL|WEBGPU)\s*)?\)/m.exec(initialCode);
   if (canvasMatch) {
     previewWidth = previewWidth || parseFloat(canvasMatch[1]);
     previewHeight = previewHeight || parseFloat(canvasMatch[2]);
@@ -99,6 +99,7 @@ export const CodeEmbed = (props) => {
               lazyLoad={props.lazyLoad}
               scripts={[
                 ...(props.includeSound ? [cdnSoundUrl] : []),
+                ...(props.includeWebGPU ? [cdnWebGPUUrl] : []),
                 ...(props.scripts ?? []),
               ]}
             />

src/components/CodeEmbed/index.jsx

@@ -79,9 +79,9 @@ To file a new issue, simply go to the "Issues" tab on the p5.js repo and click o
 
 ![Cropped screenshot of the GitHub repository's issue page with the green "New issue" button highlighted with a red box surrounding it.](src/content/contributor-docs/images/new-issue.png)
 
-### ["Found a bug"](https://github.com/processing/p5.js/issues/new?assignees=\&labels=Bug\&projects=\&template=found-a-bug.yml)
+### ["Found a bug"](https://github.com/processing/p5.js/issues/new?assignees=\&labels=Bug\&projects=\&template=2-found-a-bug.yml)
 
-When you encounter possible incorrect behavior in p5.js or something not behaving as described in the documentation, use [this template](https://github.com/processing/p5.js/issues/new?assignees=\&labels=Bug\&projects=\&template=found-a-bug.yml). Please note that if you are trying to debug your sketch and you think it may be a problem with your code, you should first ask on the [Discourse forum](https://discourse.processing.org) instead.
+When you encounter possible incorrect behavior in p5.js or something not behaving as described in the documentation, use [this template](https://github.com/processing/p5.js/issues/new?assignees=\&labels=Bug\&projects=\&template=2-found-a-bug.yml). Please note that if you are trying to debug your sketch and you think it may be a problem with your code, you should first ask on the [Discourse forum](https://discourse.processing.org) instead.
 
 There are a few fields for you to fill in for this template:
 
@@ -135,7 +135,7 @@ If you wish to contribute a fix to the bug you just reported, you can indicate s
 
 For bug reports to be accepted for fixing, they must be approved by at least one [area steward or maintainer](https://github.com/processing/p5.js#stewards) before work can begin on a pull request.
 
-### ["Existing Feature Enhancement"](https://github.com/processing/p5.js/issues/new?assignees=\&labels=Enhancement\&projects=\&template=existing-feature-enhancement.yml)
+### ["Existing Feature Enhancement"](https://github.com/processing/p5.js/issues/new?assignees=\&labels=Enhancement\&projects=\&template=3-existing-feature-enhancement.yml)
 
 This template should be used if you wish to propose changes or add functionality to existing features of p5.js (functions, constants, rendering, etc). For example, if you want to add a new way to define a color to the `color()` function and other functions that accept colors, this is the template to use.
 
@@ -149,7 +149,7 @@ For feature enhancement proposals to be accepted they must be approved by at lea
 
 **You should not file a pull request (or start working on code changes) without a corresponding issue or before an issue has been approved for implementation**, because there is no guarantee that the proposal will be accepted. Any pull requests filed before a proposal has been approved will be closed until approval is given to the issue.
 
-### ["New Feature Request"](https://github.com/processing/p5.js/issues/new?assignees=\&labels=Feature+Request\&projects=\&template=feature-request.yml)
+### ["New Feature Request"](https://github.com/processing/p5.js/issues/new?assignees=\&labels=Feature+Request\&projects=\&template=4-feature-request.yml)
 
 This template should be used if you wish to propose a new feature to be added to p5.js. For example to add support for drawing native HTML `<table>` elements with a new `createTable` function. Some proposals may overlap with existing feature enhancement proposals, in these cases you should just choose whichever template you feel is most appropriate.
 
@@ -159,7 +159,7 @@ For new feature request proposals to be accepted, they must be approved by at le
 
 **You should not file a pull request (or start working on code changes) without a corresponding issue or before an issue has been approved for implementation**, that is because there is no guarantee that the proposal will be accepted. Any pull requests filed before a proposal has been approved will be closed until approval is given to the issue.
 
-### ["Discussion"](https://github.com/processing/p5.js/issues/new?assignees=\&labels=Discussion\&projects=\&template=discussion.yml)
+### ["Discussion"](https://github.com/processing/p5.js/issues/new?assignees=\&labels=Discussion\&projects=\&template=5-discussion.yml)
 
 This template is used when the issue you are filing does not fit into any of the above in any way. An issue not fitting into any of the above templates should be relatively rare in practice. For example, a discussion about whether to adopt a specific Web API feature in p5.js should be filed as a [new feature request](#new-feature-request); a discussion about adding an additional color mode to the various color functions should be filed as a [feature enchancement](#existing-feature-enchancement); an announcement about a local creative coding event that you are organizing should be posted on the forum and contacting the Processing Foundation if you are looking for support or publicity; etc.