chore: upgrade to Yarn 4.1.1 and Node 20 in CI (#3934)

* chore: upgrade to Yarn 4.1.1 and Node 20 in CI

Requires developers to use Node 18+ and `corepack enable`

* Update website/yarn.lock

.github/workflows/ci.yml

@@ -15,10 +15,13 @@ jobs:
       with:
         persist-credentials: false # minimize exposure and prevent accidental pushes
 
-    - name: Use Node.js 16
-      uses: actions/setup-node@v3
+    - name: Enable Corepack
+      run: corepack enable
+
+    - name: Use Node.js 20
+      uses: actions/setup-node@v4
       with:
-        node-version: '16'
+        node-version: '20'
         cache: yarn
 
     - name: Install dependencies
@@ -57,10 +60,13 @@ jobs:
         persist-credentials: false
         fetch-depth: 0
 
-    - name: Use Node.js 16
-      uses: actions/setup-node@v3
+    - name: Enable Corepack
+      run: corepack enable
+
+    - name: Use Node.js 20
+      uses: actions/setup-node@v4
       with:
-        node-version: '16'
+        node-version: '20'
         cache: yarn
 
     - name: Install dependencies

.github/workflows/screenshotter.yml

@@ -39,20 +39,14 @@ jobs:
         ref: ${{ github.event_name == 'pull_request_target' && format('refs/pull/{0}/merge', github.event.pull_request.number) || '' }}
         persist-credentials: false # do not persist credentials
 
-    - name: Use Node.js 14
-      uses: actions/setup-node@v3
-      with:
-        node-version: '14'
+    - name: Enable Corepack
+      run: corepack enable
 
-    - name: Restore cached dependencies # restore only to prevent cache poisoning
-      uses: ylemkimon/cache-restore@v2
+    - name: Use Node.js 20
+      uses: actions/setup-node@v4
       with:
-        path: |
-          .yarn/cache
-          .pnp.js
-        key: yarn-deps-v1-${{ hashFiles('yarn.lock') }}
-        restore-keys: |
-          yarn-deps-v1-
+        node-version: '20'
+        cache: yarn
 
     - name: Run screenshotter
       run: |
@@ -70,7 +64,7 @@ jobs:
           -w /code \
           -e YARN_ENABLE_SCRIPTS=0 \
           -e CI=true \
-          node:14 \
+          node:20 \
           /bin/bash -c 'yarn --immutable && yarn node dockers/screenshotter/screenshotter.js -b ${{ matrix.browser }} --verify --diff --new --katex-ip $HOSTNAME ${{ matrix.browserstack && format('--selenium-proxy http://selenium:4445/build --browserstack --selenium-capabilities ''\''''{0}''\', toJson(matrix.browserstack)) || '--selenium-ip selenium' }}'
         echo "::$TOKEN::"
       timeout-minutes: 10

.yarnrc.yml

@@ -1 +1,2 @@
-yarnPath: .yarn/releases/yarn-3.2.2.cjs
+compressionLevel: mixed
+enableGlobalCache: false

CONTRIBUTING.md

@@ -59,8 +59,8 @@ They are expanded in the "gullet" (`MacroExpander`).
 ## Testing
 
 Local testing can be done by running the webpack-dev-server using configuration
-`webpack.dev.js`. Run `yarn` to install dependencies, and then `yarn start`
-to start the server.
+`webpack.dev.js`. Run `corepack enable` and `yarn` to install dependencies,
+and then `yarn start` to start the server.
 
 This will host an interactive editor at
 [http://localhost:7936/](http://localhost:7936/) to play around with and test
@@ -121,7 +121,7 @@ changes in as many browsers as possible.
 ## Building
 
 KaTeX is built using webpack with configuration `webpack.config.js`. Run
-`yarn build` to build the project.
+`corepack enable` (if you haven't already) and `yarn build` to build the project.
 
 ## Style guide
 

package.json

@@ -47,7 +47,7 @@
     "dist/"
   ],
   "license": "MIT",
-  "packageManager": "yarn@3.2.2",
+  "packageManager": "yarn@4.1.1",
   "devDependencies": {
     "@babel/core": "^7.18.13",
     "@babel/eslint-parser": "^7.18.9",