Add visual regression tests to code review process (#166)

.github/workflows/check-app-quality.yml

@@ -1,53 +0,0 @@
-name: Check App Quality
-
-on:
-  pull_request:
-    branches: [main]
-
-jobs:
-  preview:
-    name: Create deploy preview
-    if: github.repository == 'KonradSzwarc/devscard'
-    runs-on: ubuntu-latest
-    outputs:
-      deploy-url: ${{ steps.netlify.outputs.deploy-url }}
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: npm
-      - name: Install dependencies
-        run: npm ci
-      - name: Run Astro build command
-        run: npm run build
-      - name: Deploy to Netlify
-        id: netlify
-        uses: nwtgck/actions-netlify@v2
-        with:
-          publish-dir: dist
-          production-branch: main
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          alias: deploy-preview-${{ github.event.number }}
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
-        timeout-minutes: 1
-
-  lighthouse:
-    name: Run Lighthouse tests
-    if: github.repository == 'KonradSzwarc/devscard'
-    needs: preview
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Lighthouse
-        uses: foo-software/lighthouse-check-action@master
-        with:
-          urls: ${{ needs.preview.outputs.deploy-url }}
-          gitAuthor: ${{ github.actor }}
-          gitBranch: ${{ github.ref }}
-          gitHubAccessToken: ${{ secrets.GITHUB_TOKEN }}
-          device: all
-          prCommentEnabled: true
-          prCommentSaveOld: false

.github/workflows/check-code-quality.yml

@@ -1,50 +0,0 @@
-name: Check Code Quality
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-jobs:
-  prettier:
-    name: Run Prettier check
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: npm
-      - name: Install dependencies
-        run: npm ci
-      - name: Run Prettier
-        run: npm run prettier:check
-
-  typescript:
-    name: Check TypeScript types
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: npm
-      - name: Install dependencies
-        run: npm ci
-      - name: Run TypeScript types check
-        run: npm run ts:check
-
-  astro:
-    name: Run Astro check
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: npm
-      - name: Install dependencies
-        run: npm ci
-      - name: Run Astro check
-        run: npm run astro:check

.github/workflows/main-branch.yml

@@ -0,0 +1,112 @@
+name: Main Branch
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  prettier:
+    name: Run Prettier check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Prettier
+        run: npm run prettier:check
+
+  typescript:
+    name: Run TypeScript check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run TypeScript types check
+        run: npm run ts:check
+
+  astro:
+    name: Run Astro check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Astro check
+        run: npm run astro:check
+
+  percy:
+    name: Run Percy check
+    if: github.repository == 'KonradSzwarc/devscard'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Astro build command
+        env:
+          PUBLIC_APP_ENV: snapshot
+        run: npm run build
+      - name: Percy check
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+        run: npx percy snapshot dist/
+
+  deploy:
+    name: Deploy to Netlify
+    needs: [prettier, typescript, astro]
+    if: github.repository == 'KonradSzwarc/devscard'
+    runs-on: ubuntu-latest
+    outputs:
+      deploy-url: ${{ steps.netlify.outputs.deploy-url }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Astro build command
+        run: npm run build
+      - name: Deploy to Netlify
+        id: netlify
+        uses: nwtgck/actions-netlify@v2
+        with:
+          publish-dir: dist
+          production-branch: main
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          production-deploy: true
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        timeout-minutes: 1
+
+  lighthouse:
+    name: Run Lighthouse check
+    if: github.repository == 'KonradSzwarc/devscard'
+    needs: deploy
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Lighthouse check
+        uses: foo-software/lighthouse-check-action@master
+        with:
+          urls: ${{ needs.deploy.outputs.deploy-url }}
+          device: all

.github/workflows/pull-request.yml

@@ -0,0 +1,117 @@
+name: Pull Request
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  prettier:
+    name: Run Prettier check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Prettier
+        run: npm run prettier:check
+
+  typescript:
+    name: Run TypeScript check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run TypeScript types check
+        run: npm run ts:check
+
+  astro:
+    name: Run Astro check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Astro check
+        run: npm run astro:check
+
+  percy:
+    name: Run Percy check
+    if: github.repository == 'KonradSzwarc/devscard'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Astro build command
+        env:
+          PUBLIC_APP_ENV: snapshot
+        run: npm run build
+      - name: Percy check
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+        run: npx percy snapshot dist/
+
+  preview:
+    name: Create deploy preview
+    needs: [prettier, typescript, astro]
+    if: github.repository == 'KonradSzwarc/devscard'
+    runs-on: ubuntu-latest
+    outputs:
+      deploy-url: ${{ steps.netlify.outputs.deploy-url }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Astro build command
+        run: npm run build
+      - name: Deploy to Netlify
+        id: netlify
+        uses: nwtgck/actions-netlify@v2
+        with:
+          publish-dir: dist
+          production-branch: main
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          alias: deploy-preview-${{ github.event.number }}
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        timeout-minutes: 1
+
+  lighthouse:
+    name: Run Lighthouse check
+    if: github.repository == 'KonradSzwarc/devscard'
+    needs: preview
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Lighthouse check
+        uses: foo-software/lighthouse-check-action@master
+        with:
+          urls: ${{ needs.preview.outputs.deploy-url }}
+          gitAuthor: ${{ github.actor }}
+          gitBranch: ${{ github.ref }}
+          gitHubAccessToken: ${{ secrets.GITHUB_TOKEN }}
+          device: all
+          prCommentEnabled: true
+          prCommentSaveOld: false

.percy.json

@@ -0,0 +1,18 @@
+{
+  "version": 2,
+  "snapshot": {
+    "widths": [375, 1280],
+    "minHeight": 1024,
+    "enable-javascript": true
+  },
+  "static": {
+    "include": ["/index.html"]
+  },
+  "discovery": {
+    "allowedHostnames": ["api.iconify.design"],
+    "networkIdleTimeout": 750
+  },
+  "upload": {
+    "files": "**/*.{png,jpg,jpeg,svg,webp}"
+  }
+}

package-lock.json

@@ -16,6 +16,7 @@
         "@astrojs/image": "0.12.1",
         "@astrojs/react": "1.2.2",
         "@astrojs/tailwind": "2.1.3",
+        "@percy/cli": "1.17.0",
         "astro": "1.9.2",
         "astro-compress": "1.1.27",
         "concurrently": "7.6.0",
@@ -791,6 +792,244 @@
         "pako": "^1.0.10"
       }
     },
+    "node_modules/@percy/cli": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli/-/cli-1.17.0.tgz",
+      "integrity": "sha512-uY755vWT+bx3IVvzZKTbX7UJclPXStp85M9LSaWff1K8nk47c+patB9ydLSZKQu+Qkj1L/5L46plaResn8SfsA==",
+      "dev": true,
+      "dependencies": {
+        "@percy/cli-app": "1.17.0",
+        "@percy/cli-build": "1.17.0",
+        "@percy/cli-command": "1.17.0",
+        "@percy/cli-config": "1.17.0",
+        "@percy/cli-exec": "1.17.0",
+        "@percy/cli-snapshot": "1.17.0",
+        "@percy/cli-upload": "1.17.0",
+        "@percy/client": "1.17.0",
+        "@percy/logger": "1.17.0"
+      },
+      "bin": {
+        "percy": "bin/run.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/cli-app": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-app/-/cli-app-1.17.0.tgz",
+      "integrity": "sha512-8Vc/pfaKsubKXRaPNdB3Snd8h7NfGPNio5RtETgQpJHwE+hu4rbjN4WovkjntiUSsQwLGYpXmKqV9n+8Z4oskA==",
+      "dev": true,
+      "dependencies": {
+        "@percy/cli-command": "1.17.0",
+        "@percy/cli-exec": "1.17.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/cli-build": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-build/-/cli-build-1.17.0.tgz",
+      "integrity": "sha512-ES5Cwwa4n7/czOObqhG/o2Lr2l4VZFG2DEH/WGarCgsG42yiKqNWUHjFZj2AYfvv24f0b1KpL/Hz7gBauagGZA==",
+      "dev": true,
+      "dependencies": {
+        "@percy/cli-command": "1.17.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/cli-command": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-command/-/cli-command-1.17.0.tgz",
+      "integrity": "sha512-KmYorWxT+M+Ei/UVZiVx1WVJ4g87D+gvHX5tC4KS8C+oVy31Z01rJ4YChM0OSS92COMX0hCOacOxrFCNGbMgow==",
+      "dev": true,
+      "dependencies": {
+        "@percy/config": "1.17.0",
+        "@percy/core": "1.17.0",
+        "@percy/logger": "1.17.0"
+      },
+      "bin": {
+        "percy-cli-readme": "bin/readme.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/cli-config": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-config/-/cli-config-1.17.0.tgz",
+      "integrity": "sha512-dpwCLyy9e1ubsZY3QaZj1A3KNHOQOjSuvNCZ01yM+VH5hSPsh9OD50Jhie/6W4BTMbn/THMo5KyHc76ahc0nYA==",
+      "dev": true,
+      "dependencies": {
+        "@percy/cli-command": "1.17.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/cli-exec": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-exec/-/cli-exec-1.17.0.tgz",
+      "integrity": "sha512-W3Mb3t8dZOaEdvRX7uPStpiBEWFnUGQ2S+2X5nk4aGdikIO1jVwZrXRyFRs/NU6gkDocREJ2MFEwAQGsuCB3qg==",
+      "dev": true,
+      "dependencies": {
+        "@percy/cli-command": "1.17.0",
+        "cross-spawn": "^7.0.3",
+        "which": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/cli-snapshot": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-snapshot/-/cli-snapshot-1.17.0.tgz",
+      "integrity": "sha512-QYKSqlC3bMjaz9k1ClOUCq6Jwz4FPf1q+x9IlYQsUUOQ68Sx7qBy8edw1iS09BsKkESFHqFIBi7j7laWU/al3g==",
+      "dev": true,
+      "dependencies": {
+        "@percy/cli-command": "1.17.0",
+        "yaml": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/cli-snapshot/node_modules/yaml": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.1.tgz",
+      "integrity": "sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@percy/cli-upload": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-upload/-/cli-upload-1.17.0.tgz",
+      "integrity": "sha512-vhfi4AXptDLKG2UdE94sI1FZLh6kR1YvDh7UlbxvJmRl6+vkkxEOHkZZ6B575b3Mzm+20LBfw4gU7maajs/16Q==",
+      "dev": true,
+      "dependencies": {
+        "@percy/cli-command": "1.17.0",
+        "fast-glob": "^3.2.11",
+        "image-size": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/client": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/client/-/client-1.17.0.tgz",
+      "integrity": "sha512-7ur4SN/FLf7wPDcJyOMquQT3oCRVZ9Up4Ux3zbRV8eaYgdmnkpYn1+F8uRqwwXLsVngWGqB0x+ckbQ2N0oXA4Q==",
+      "dev": true,
+      "dependencies": {
+        "@percy/env": "1.17.0",
+        "@percy/logger": "1.17.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/config": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/config/-/config-1.17.0.tgz",
+      "integrity": "sha512-azAdqWHC3Neb5HC4sThvobuHsawiBBoRO6taBIrB6gO66mzhG76p1avChmsgZTeuAGIUE9gnF3GYW6FJiqnXAQ==",
+      "dev": true,
+      "dependencies": {
+        "@percy/logger": "1.17.0",
+        "ajv": "^8.6.2",
+        "cosmiconfig": "^7.0.0",
+        "yaml": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/config/node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dev": true,
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@percy/config/node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@percy/config/node_modules/yaml": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.1.tgz",
+      "integrity": "sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@percy/core": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/core/-/core-1.17.0.tgz",
+      "integrity": "sha512-kIzSxKNEjwl+Y+86XHZfEYBFyvPvuISwGzKhmL/03lJRggvmH+eThHvB+P8zX1v/9wHEKA/YwQU8uSggZMN2yA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@percy/client": "1.17.0",
+        "@percy/config": "1.17.0",
+        "@percy/dom": "1.17.0",
+        "@percy/logger": "1.17.0",
+        "content-disposition": "^0.5.4",
+        "cross-spawn": "^7.0.3",
+        "extract-zip": "^2.0.1",
+        "fast-glob": "^3.2.11",
+        "micromatch": "^4.0.4",
+        "mime-types": "^2.1.34",
+        "path-to-regexp": "^6.2.0",
+        "rimraf": "^3.0.2",
+        "ws": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/dom": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/dom/-/dom-1.17.0.tgz",
+      "integrity": "sha512-C6qaqOk4p8ax/gPruQtVy+Ml7Yb6nWpKYThk4afy4N0Jq9hZa0qBzlVE1vO4jtxHK8JaZ2lXGG4Gdxz4FOQuMA==",
+      "dev": true
+    },
+    "node_modules/@percy/env": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/env/-/env-1.17.0.tgz",
+      "integrity": "sha512-z6O7VauoKXDq66hS8HhVmR2poJZLdM0xVAJ7XBmfdalVnnCSzub1Fjubd12eN12Gt9fZpX8WCeOI8+0PjAAspQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@percy/logger": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/logger/-/logger-1.17.0.tgz",
+      "integrity": "sha512-UEzXcoxwDl8SfvJc4Gy0Ib8lYKDxM7WkgVsg/C5bniUyKuqpDnJdvqiV82vzOVI9nmlYikCG09ebZbNIjnXDWg==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@pkgr/utils": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.1.tgz",
@@ -994,6 +1233,12 @@
       "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
       "dev": true
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
+    },
     "node_modules/@types/parse5": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz",
@@ -1158,6 +1403,22 @@
         "node": ">= 6.0.0"
       }
     },
+    "node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/ansi-align": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
@@ -2251,6 +2512,38 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-disposition/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/convert-source-map": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
@@ -3270,6 +3563,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
     "node_modules/fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -4320,6 +4619,12 @@
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "dev": true
     },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
     "node_modules/json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
@@ -5528,6 +5833,27 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -6479,6 +6805,15 @@
         "once": "^1.3.1"
       }
     },
+    "node_modules/punycode": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
+      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/puppeteer": {
       "version": "19.5.2",
       "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-19.5.2.tgz",
@@ -6818,6 +7153,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -8196,6 +8540,15 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -9676,6 +10029,192 @@
         "pako": "^1.0.10"
       }
     },
+    "@percy/cli": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli/-/cli-1.17.0.tgz",
+      "integrity": "sha512-uY755vWT+bx3IVvzZKTbX7UJclPXStp85M9LSaWff1K8nk47c+patB9ydLSZKQu+Qkj1L/5L46plaResn8SfsA==",
+      "dev": true,
+      "requires": {
+        "@percy/cli-app": "1.17.0",
+        "@percy/cli-build": "1.17.0",
+        "@percy/cli-command": "1.17.0",
+        "@percy/cli-config": "1.17.0",
+        "@percy/cli-exec": "1.17.0",
+        "@percy/cli-snapshot": "1.17.0",
+        "@percy/cli-upload": "1.17.0",
+        "@percy/client": "1.17.0",
+        "@percy/logger": "1.17.0"
+      }
+    },
+    "@percy/cli-app": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-app/-/cli-app-1.17.0.tgz",
+      "integrity": "sha512-8Vc/pfaKsubKXRaPNdB3Snd8h7NfGPNio5RtETgQpJHwE+hu4rbjN4WovkjntiUSsQwLGYpXmKqV9n+8Z4oskA==",
+      "dev": true,
+      "requires": {
+        "@percy/cli-command": "1.17.0",
+        "@percy/cli-exec": "1.17.0"
+      }
+    },
+    "@percy/cli-build": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-build/-/cli-build-1.17.0.tgz",
+      "integrity": "sha512-ES5Cwwa4n7/czOObqhG/o2Lr2l4VZFG2DEH/WGarCgsG42yiKqNWUHjFZj2AYfvv24f0b1KpL/Hz7gBauagGZA==",
+      "dev": true,
+      "requires": {
+        "@percy/cli-command": "1.17.0"
+      }
+    },
+    "@percy/cli-command": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-command/-/cli-command-1.17.0.tgz",
+      "integrity": "sha512-KmYorWxT+M+Ei/UVZiVx1WVJ4g87D+gvHX5tC4KS8C+oVy31Z01rJ4YChM0OSS92COMX0hCOacOxrFCNGbMgow==",
+      "dev": true,
+      "requires": {
+        "@percy/config": "1.17.0",
+        "@percy/core": "1.17.0",
+        "@percy/logger": "1.17.0"
+      }
+    },
+    "@percy/cli-config": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-config/-/cli-config-1.17.0.tgz",
+      "integrity": "sha512-dpwCLyy9e1ubsZY3QaZj1A3KNHOQOjSuvNCZ01yM+VH5hSPsh9OD50Jhie/6W4BTMbn/THMo5KyHc76ahc0nYA==",
+      "dev": true,
+      "requires": {
+        "@percy/cli-command": "1.17.0"
+      }
+    },
+    "@percy/cli-exec": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-exec/-/cli-exec-1.17.0.tgz",
+      "integrity": "sha512-W3Mb3t8dZOaEdvRX7uPStpiBEWFnUGQ2S+2X5nk4aGdikIO1jVwZrXRyFRs/NU6gkDocREJ2MFEwAQGsuCB3qg==",
+      "dev": true,
+      "requires": {
+        "@percy/cli-command": "1.17.0",
+        "cross-spawn": "^7.0.3",
+        "which": "^2.0.2"
+      }
+    },
+    "@percy/cli-snapshot": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-snapshot/-/cli-snapshot-1.17.0.tgz",
+      "integrity": "sha512-QYKSqlC3bMjaz9k1ClOUCq6Jwz4FPf1q+x9IlYQsUUOQ68Sx7qBy8edw1iS09BsKkESFHqFIBi7j7laWU/al3g==",
+      "dev": true,
+      "requires": {
+        "@percy/cli-command": "1.17.0",
+        "yaml": "^2.0.0"
+      },
+      "dependencies": {
+        "yaml": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.1.tgz",
+          "integrity": "sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==",
+          "dev": true
+        }
+      }
+    },
+    "@percy/cli-upload": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/cli-upload/-/cli-upload-1.17.0.tgz",
+      "integrity": "sha512-vhfi4AXptDLKG2UdE94sI1FZLh6kR1YvDh7UlbxvJmRl6+vkkxEOHkZZ6B575b3Mzm+20LBfw4gU7maajs/16Q==",
+      "dev": true,
+      "requires": {
+        "@percy/cli-command": "1.17.0",
+        "fast-glob": "^3.2.11",
+        "image-size": "^1.0.0"
+      }
+    },
+    "@percy/client": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/client/-/client-1.17.0.tgz",
+      "integrity": "sha512-7ur4SN/FLf7wPDcJyOMquQT3oCRVZ9Up4Ux3zbRV8eaYgdmnkpYn1+F8uRqwwXLsVngWGqB0x+ckbQ2N0oXA4Q==",
+      "dev": true,
+      "requires": {
+        "@percy/env": "1.17.0",
+        "@percy/logger": "1.17.0"
+      }
+    },
+    "@percy/config": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/config/-/config-1.17.0.tgz",
+      "integrity": "sha512-azAdqWHC3Neb5HC4sThvobuHsawiBBoRO6taBIrB6gO66mzhG76p1avChmsgZTeuAGIUE9gnF3GYW6FJiqnXAQ==",
+      "dev": true,
+      "requires": {
+        "@percy/logger": "1.17.0",
+        "ajv": "^8.6.2",
+        "cosmiconfig": "^7.0.0",
+        "yaml": "^2.0.0"
+      },
+      "dependencies": {
+        "cosmiconfig": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+          "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+          "dev": true,
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.2.1",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.10.0"
+          },
+          "dependencies": {
+            "yaml": {
+              "version": "1.10.2",
+              "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+              "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+              "dev": true
+            }
+          }
+        },
+        "yaml": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.1.tgz",
+          "integrity": "sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==",
+          "dev": true
+        }
+      }
+    },
+    "@percy/core": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/core/-/core-1.17.0.tgz",
+      "integrity": "sha512-kIzSxKNEjwl+Y+86XHZfEYBFyvPvuISwGzKhmL/03lJRggvmH+eThHvB+P8zX1v/9wHEKA/YwQU8uSggZMN2yA==",
+      "dev": true,
+      "requires": {
+        "@percy/client": "1.17.0",
+        "@percy/config": "1.17.0",
+        "@percy/dom": "1.17.0",
+        "@percy/logger": "1.17.0",
+        "content-disposition": "^0.5.4",
+        "cross-spawn": "^7.0.3",
+        "extract-zip": "^2.0.1",
+        "fast-glob": "^3.2.11",
+        "micromatch": "^4.0.4",
+        "mime-types": "^2.1.34",
+        "path-to-regexp": "^6.2.0",
+        "rimraf": "^3.0.2",
+        "ws": "^8.0.0"
+      }
+    },
+    "@percy/dom": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/dom/-/dom-1.17.0.tgz",
+      "integrity": "sha512-C6qaqOk4p8ax/gPruQtVy+Ml7Yb6nWpKYThk4afy4N0Jq9hZa0qBzlVE1vO4jtxHK8JaZ2lXGG4Gdxz4FOQuMA==",
+      "dev": true
+    },
+    "@percy/env": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/env/-/env-1.17.0.tgz",
+      "integrity": "sha512-z6O7VauoKXDq66hS8HhVmR2poJZLdM0xVAJ7XBmfdalVnnCSzub1Fjubd12eN12Gt9fZpX8WCeOI8+0PjAAspQ==",
+      "dev": true
+    },
+    "@percy/logger": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@percy/logger/-/logger-1.17.0.tgz",
+      "integrity": "sha512-UEzXcoxwDl8SfvJc4Gy0Ib8lYKDxM7WkgVsg/C5bniUyKuqpDnJdvqiV82vzOVI9nmlYikCG09ebZbNIjnXDWg==",
+      "dev": true
+    },
     "@pkgr/utils": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.1.tgz",
@@ -9867,6 +10406,12 @@
       "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
       "dev": true
     },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
+    },
     "@types/parse5": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz",
@@ -10015,6 +10560,18 @@
         "debug": "4"
       }
     },
+    "ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      }
+    },
     "ansi-align": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
@@ -10810,6 +11367,23 @@
         }
       }
     },
+    "content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.2.1"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+          "dev": true
+        }
+      }
+    },
     "convert-source-map": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
@@ -11467,6 +12041,12 @@
         }
       }
     },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
     "fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -12217,6 +12797,12 @@
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "dev": true
     },
+    "json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
@@ -13024,6 +13610,21 @@
       "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
       "dev": true
     },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
     "mimic-fn": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -13692,6 +14293,12 @@
         "once": "^1.3.1"
       }
     },
+    "punycode": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
+      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+      "dev": true
+    },
     "puppeteer": {
       "version": "19.5.2",
       "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-19.5.2.tgz",
@@ -13947,6 +14554,12 @@
       "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
       "dev": true
     },
+    "require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -14924,6 +15537,15 @@
         "picocolors": "^1.0.0"
       }
     },
+    "uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -29,6 +29,7 @@
     "@astrojs/image": "0.12.1",
     "@astrojs/react": "1.2.2",
     "@astrojs/tailwind": "2.1.3",
+    "@percy/cli": "1.17.0",
     "astro": "1.9.2",
     "astro-compress": "1.1.27",
     "concurrently": "7.6.0",

src/web/components/photo.astro

@@ -13,6 +13,13 @@ export interface Props {
 const { src, ...props } = Astro.props;
 
 const isRemoteImage = typeof src === 'string';
+const loading = import.meta.env.PUBLIC_APP_ENV === 'snapshot' ? 'eager' : 'lazy';
 ---
 
-{isRemoteImage ? <img src={src} {...props} /> : <Image format="webp" fit="cover" src={src} {...props} />}
+{
+  isRemoteImage ? (
+    <img src={src} {...props} />
+  ) : (
+    <Image format="webp" fit="cover" src={src} loading={loading} {...props} />
+  )
+}