Merge branch 'main' into feat-improve-sketch-build-validation

Author: ksen0

.github/workflows/auto-close-issues.yml

@@ -0,0 +1,19 @@
+name: Close Linked Issues on PR Merge
+
+on:
+  pull_request:
+    types: [closed]
+    branches:
+      - 2.0
+      - dev-2.0
+
+jobs:
+  close_issues:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    steps:
+      - name: Close linked issues on non-default branches
+        uses: processing/branch-pr-close-issue@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          branch: dev-2.0

.gitignore

@@ -25,5 +25,8 @@ in/
 out/
 translator/
 
+playwright-report/
+test-results/
+
 # Don't commit custom dev builds
 public/p5.min.js

package-lock.json

@@ -17,7 +17,8 @@
     "build:search": "tsx ./src/scripts/builders/search.ts",
     "build:p5-version": "tsx ./src/scripts/p5-version.ts",
     "custom:dev": "tsx ./src/scripts/branchTest.ts",
-    "custom:cleanup": "tsx ./src/scripts/resetBranchTest.ts"
+    "custom:cleanup": "tsx ./src/scripts/resetBranchTest.ts",
+    "test:a11y": "playwright test test/a11y"
   },
   "dependencies": {
     "@astrojs/check": "^0.5.5",
@@ -51,7 +52,9 @@
     }
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.10.2",
     "@codemirror/lang-javascript": "^6.2.2",
+    "@playwright/test": "^1.54.1",
     "@preact/preset-vite": "^2.8.2",
     "@swc/html": "^1.10.9",
     "@testing-library/preact": "^3.2.3",

package.json

@@ -0,0 +1,79 @@
+import { defineConfig, devices } from '@playwright/test';
+
+// --- Runtime modes ---
+// RUN_MODE=LOCAL   -> Start Astro dev server (local development)
+// RUN_MODE=BUILD   -> Build Astro site and serve from "dist" (CI / closest to production)
+// RUN_MODE=REMOTE  -> Do not start any local server, test directly against remote URL
+const RUN_MODE = process.env.RUN_MODE ?? (process.env.CI ? 'BUILD' : 'LOCAL');
+
+// Allow overriding test directory via environment variable (default: ./tests)
+const testDir = process.env.TEST_DIR ?? './test';
+
+// Base URL changes depending on the mode
+// LOCAL -> http://localhost:4321 (Astro dev server)
+// BUILD -> http://localhost:4173 (served "dist")
+// REMOTE -> PROD_BASE_URL (falls back to p5js.org)
+const baseURL =
+  RUN_MODE === 'LOCAL'
+    ? 'http://localhost:4321'
+    : RUN_MODE === 'BUILD'
+    ? 'http://localhost:4173'
+    : process.env.PROD_BASE_URL ?? 'https://p5js.org';
+
+
+export default defineConfig({
+  // Use dynamic testDir (default ./tests)
+  testDir,
+  outputDir: 'test-results',
+  // Global timeout for each test to improve stability
+  timeout: 30 * 1000,
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  // Retry failed tests in CI
+  retries: process.env.CI ? 2 : 0,
+  // Force single worker in CI to avoid port/resource conflicts
+  workers: process.env.CI ? 1 : undefined,
+  // Reporters: "list" for readable console logs + "html" for detailed report
+  reporter: [
+    ['list'],
+    ['html', { outputFolder: 'playwright-report', open: 'never' }],
+  ],
+  use: {
+    baseURL,
+    // Save trace only on first retry for debugging failed tests
+    trace: 'on-first-retry',
+    // Capture screenshot only on failure
+    screenshot: 'only-on-failure',
+    // Keep video only on failure in CI
+    video: process.env.CI ? 'retain-on-failure' : 'off',
+  },
+
+  // Test projects: three major engines + iPhone 15 viewport
+  projects: [
+    { name: 'Desktop Chrome', use: { ...devices['Desktop Chrome'] } },
+    { name: 'Desktop Firefox',  use: { ...devices['Desktop Firefox'] } },
+    { name: 'Desktop Safari',   use: { ...devices['Desktop Safari'] } },
+    { name: 'iPhone 15', use: { ...devices['iPhone 15'] } },
+    { name: 'Pixel 7', use: { ...devices['Pixel 7'] } },
+  ],
+
+  // Start appropriate webServer depending on the mode
+  webServer:
+    RUN_MODE === 'LOCAL'
+      ? {
+          // Start Astro dev server for local development
+          command: 'npm run dev',
+            port: 4321,
+          reuseExistingServer: !process.env.CI,
+          timeout: 180_000,
+        }
+      : RUN_MODE === 'BUILD'
+      ? {
+        command: 'npm run build && npm run preview -- --port 4173 --host',
+        port: 4173, // choose port OR url (not both)
+        reuseExistingServer: !process.env.CI,
+        timeout: 180_000,
+      }
+      : undefined, // REMOTE mode → no server started
+});
+

playwright.config.ts

@@ -12,7 +12,7 @@ const { link, title } = entry.data;
   <button id="hideBanner" aria-label="Hide banner"><Icon kind="close" /></button>
 </div>
 
-<script>
+<script is:inline>
 const banner = document.querySelector('.banner');
 const hideBannerBtn = document.querySelector('#hideBanner');
 if (banner && hideBannerBtn) {

src/components/Banner/index.astro

@@ -0,0 +1,11 @@
+name: p5.spatial.js
+description: Adds multichannel audio support for p5.sound.js.
+category: sound
+sourceUrl: https://github.com/ogbabydiesal/p5.spatial.js
+featuredImage: ../images/p5spatialjs.png
+featuredImageAlt: An array of 8 overlapping circles.
+author:
+  name: Tommy Martinez
+  url: https://thomasjohnmartinez.com/
+license: LPGL-2.1
+featured: true

src/content/libraries/en/p5.spatial.js.yaml

@@ -4,7 +4,7 @@ description: A quick tutorial for setting up the p5.js Web Editor and VS Code to
 category: introduction
 categoryIndex: 0
 featuredImage: ../images/featured/SetupA.jpg
-featuredImageAlt: An interactive sketch in the p5.js Web Editor draws circles on the canvas as the mouse pointer moves.
+featuredImageAlt: An interactive sketch in the p5.js Editor draws circles on the canvas as the mouse pointer moves.
 relatedContent:
   references:
     - en/p5/setup
@@ -61,7 +61,7 @@ If you are new to p5.js, start with the [p5.js Web Editor](https://editor.p5js.o
 - Open a desktop browser on your computer and go to [https://editor.p5js.org/](https://editor.p5js.org/).
 - Click the [“Sign up”](https://editor.p5js.org/signup) link on the top-right of the web page.
 
-![An arrow pointing to the “Sign Up” link in the top right corner of the p5.js Editor.](../images/introduction/p5_editor_sign_up.png)
+![An arrow to the “Sign Up” link.](../images/introduction/p5_editor_sign_up.png)
 
 
 ### Step 2: Create an account with [p5.js Web Editor](https://editor.p5js.org/)
@@ -73,7 +73,7 @@ If you are new to p5.js, start with the [p5.js Web Editor](https://editor.p5js.o
   - Create and confirm a password. 
   - Click the “Sign Up” button.
 
-![An arrow pointing to the highlighted User Name, Emaill, Password, and Confirm Password fields on the Sign Up page.](../images/introduction/p5_editor_sign_up_page.png)
+![An arrow pointing to the highlighted fields on the Sign Up page, as described above.](../images/introduction/p5_editor_sign_up_page.png)
 
 - Using a Google account
   - Click on the button on the bottom of the page that says “Login with Google.” 

src/content/libraries/images/p5spatialjs.png

@@ -0,0 +1,10 @@
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test } from "@playwright/test";
+
+test.describe("a11y-home-page", () => {
+    test("should not have any automatically detectable accessibility issues", async ({ page }) => {
+        await page.goto("/");
+        const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+        expect(accessibilityScanResults.violations).toEqual([]);
+    });
+});