Upgrade Node, Yarn, and packages

.github/workflows/ci.yml

@@ -14,18 +14,18 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: ".nvmrc"
+          node-version-file: ".tool-versions"
       - name: Get the Yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
       - uses: actions/cache@v4
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
       - name: Install packages
-        run: yarn install --frozen-lockfile
+        run: yarn install --immutable
       - name: Check formatting
         run: yarn run format:check
       - name: Lint the code

.gitignore

@@ -5,3 +5,12 @@
 extension/js/
 node_modules/
 web-ext-artifacts/
+
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.ignore

@@ -1 +1,2 @@
 *.lock
+.yarn

.prettierignore

@@ -1,2 +1,3 @@
 extension/js/
 package.json
+*.yml

.tool-versions

@@ -0,0 +1,2 @@
+nodejs 20.11.1
+yarn 1.22.11

.yarnrc.yml

@@ -0,0 +1,5 @@
+defaultSemverRangePrefix: ""
+
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-berry.cjs

package.json

@@ -7,7 +7,7 @@
     "license": "MIT",
     "author": {
         "name": "Danny Guo",
-        "email": "dannyguo91@gmail.com",
+        "email": "danny@dannyguo.com",
         "url": "https://dannyguo.com"
     },
     "repository": {
@@ -26,18 +26,19 @@
         "start": "yarn install && yarn run build:watch"
     },
     "dependencies": {
-        "font-color-contrast": "^1.0.3",
-        "image-promise": "^6.0.2",
-        "node-vibrant": "^3.1.4",
-        "parse-color": "^1.0.0"
+        "font-color-contrast": "1.1.1",
+        "image-promise": "6.0.2",
+        "node-vibrant": "3.1.6",
+        "parse-color": "1.0.0"
     },
     "devDependencies": {
-        "eslint": "^6.3.0",
-        "eslint-config-prettier": "^6.2.0",
-        "prettier": "^1.18.2",
-        "web-ext": "^3.1.1",
-        "webpack": "^4.39.3",
-        "webpack-cli": "^3.3.8"
+        "eslint": "8.57.0",
+        "eslint-config-prettier": "9.1.0",
+        "prettier": "3.2.5",
+        "rimraf": "5.0.5",
+        "web-ext": "7.11.0",
+        "webpack": "5.90.3",
+        "webpack-cli": "5.1.4"
     },
     "eslintConfig": {
         "env": {
@@ -56,6 +57,7 @@
     "prettier": {
         "bracketSpacing": false,
         "singleQuote": true,
-        "tabWidth": 4
+        "tabWidth": 4,
+        "trailingComma": "none"
     }
 }

src/background.js

@@ -21,7 +21,7 @@ async function getFaviconColor(url) {
         const favicon = await loadImage(url);
         const palette = await Vibrant.from(favicon).getPalette();
         const swatch = palette.Vibrant || palette.Muted;
-        color = swatch.getRgb().map(rgb => Math.min(255, Math.round(rgb)));
+        color = swatch.getRgb().map((rgb) => Math.min(255, Math.round(rgb)));
     } catch (error) {
         console.error(error);
     }