Merge branch '2.0' into 1229-2.0

Author: doradocodes

.github/workflows/beta_deploy.yml

@@ -26,6 +26,8 @@ jobs:
         env:
           NODE_OPTIONS: "--max_old_space_size=4096"
         uses: withastro/action@v2
+        with:
+          node-version: 22
 
       - name: Deploy to Netlify
         uses: nwtgck/actions-netlify@v3.0

.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

@@ -152,8 +152,8 @@ export const Dropdown = ({
           </div>
           <button
             onClick={() => handleOptionClick(option)}
-            ref={el => {
-              optionRefs.current[index] = el as HTMLButtonElement
+            ref={(el) => {
+              optionRefs.current[index] = el as HTMLButtonElement;
             }}
             onBlur={handleBlur}
           >

src/components/Dropdown/index.tsx

@@ -41,7 +41,7 @@ const { config } = Astro.props;
       im.linkTarget ?
       <a href={im.linkTarget} class={`max-lg:flex-1 max-lg:min-h-0 hero-image-container ${i > 0 ? "hidden" : ""}`}>
       <Image
-          containerClass={"relative"}
+          containerClass={"relative h-full"}
           class={"hero-image"}
           aspectRatio="none"
           src={im.image}
@@ -80,4 +80,4 @@ const { config } = Astro.props;
       }
     }
   });
-</script>
+</script>