Upgrades dependencies and node versions

.github/README.md

@@ -901,7 +901,7 @@ git clone https://github.com/Lissy93/web-check.git  # Download the code from Git
 cd web-check                                        # Navigate into the project dir
 yarn install                                        # Install the NPM dependencies
 yarn build                                          # Build the app for production
-yarn serve                                          # Start the app (API and GUI)
+yarn start                                          # Start the app (API and GUI)
 ```
 
 ---
@@ -966,7 +966,7 @@ Note that keys that are prefixed with `REACT_APP_` are used client-side, and as
 3. Install dependencies: `yarn`
 4. Start the dev server, with `yarn dev`
 
-You'll need [Node.js](https://nodejs.org/en) (V 18.16.1 or later) installed, plus [yarn](https://yarnpkg.com/getting-started/install) as well as [git](https://git-scm.com/).
+You'll need [Node.js](https://nodejs.org/en) (v22.12 or later) installed, plus [yarn](https://yarnpkg.com/getting-started/install) as well as [git](https://git-scm.com/).
 Some checks also require `chromium`, `traceroute` and `dns` to be installed within your environment. These jobs will just be skipped if those packages aren't present.
 
 ---

.yarnrc

@@ -1,4 +1,2 @@
-# engines.node is pinned to 20.x so @astrojs/vercel@7.x emits a supported
-# Vercel runtime for the SSR _render function. Local devs on a different
-# Node version can still run yarn install via this flag.
---install.ignore-engines true
+# Node engines are enforced (see engines.node in package.json). Astro 7 needs
+# Node >=22.12, which our build, CI and Docker images all use.

astro.config.mjs

@@ -1,3 +1,4 @@
+import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'astro/config';
 import { loadEnv } from 'vite';
 
@@ -10,7 +11,6 @@ import sitemap from '@astrojs/sitemap';
 import vercelAdapter from '@astrojs/vercel';
 import netlifyAdapter from '@astrojs/netlify';
 import nodeAdapter from '@astrojs/node';
-import cloudflareAdapter from '@astrojs/cloudflare';
 
 // Pre-load .env so values are available in this config, before Vite
 const fileEnv = loadEnv(process.env.NODE_ENV || 'development', process.cwd(), '');
@@ -19,7 +19,7 @@ const fileEnv = loadEnv(process.env.NODE_ENV || 'development', process.cwd(), ''
 const unwrapEnvVar = (varName, fallbackValue) =>
   process.env[varName] ?? fileEnv[varName] ?? fallbackValue;
 
-// Determine the deploy target (vercel, netlify, cloudflare, node)
+// Determine the deploy target (vercel, netlify, node)
 const deployTarget = unwrapEnvVar('PLATFORM', 'node').toLowerCase();
 
 // Determine the output mode (static or server). Mixed prerender supported in static mode
@@ -44,8 +44,6 @@ function getAdapter(target) {
       return vercelAdapter();
     case 'netlify':
       return netlifyAdapter();
-    case 'cloudflare':
-      return cloudflareAdapter();
     case 'node':
       return nodeAdapter({ mode: 'middleware' });
     default:
@@ -74,5 +72,16 @@ if (!isBossServer && isBossServer !== true) {
   redirects['/'] = '/check';
 }
 
+// Resolve the @styles alias for sass @use (rolldown-vite needs it set explicitly)
+const stylesDir = fileURLToPath(new URL('./src/styles', import.meta.url));
+
 // Export Astro configuration
-export default defineConfig({ output, base, integrations, site, adapter, redirects });
+export default defineConfig({
+  output,
+  base,
+  integrations,
+  site,
+  adapter,
+  redirects,
+  vite: { resolve: { alias: { '@styles': stylesDir } } },
+});

netlify.toml

@@ -9,10 +9,10 @@
 [build.environment]
   PLATFORM = "netlify"
   PUBLIC_API_ENDPOINT = "/.netlify/functions"
+  NODE_VERSION = "22"  # Astro 7 needs Node >=22.12, so pin a compatible version
   # Build configuration env vars (uncomment if you want to conigure these)
   # CI="false" # Set CI to false, to prevent warnings from exiting the build
   # CHROME_PATH='/usr/bin/chromium' # Path to Chromium binary
-  # NODE_VERSION = "16.16.0"  # Set the version of Node.js to use
 
   # Optional secrets and API keys (uncomment if you want to add these)
   # GOOGLE_CLOUD_API_KEY=''     # Google Cloud API key, for running Lighthouse scans

package.json

@@ -4,7 +4,7 @@
   "version": "2.1.11",
   "homepage": "https://web-check.xyz",
   "engines": {
-    "node": ">=22"
+    "node": ">=22.12.0"
   },
   "scripts": {
     "start": "node server",
@@ -21,70 +21,70 @@
     "hold-my-beer": "yarn format:fix && yarn lint && yarn typecheck"
   },
   "dependencies": {
-    "@astrojs/check": "^0.9.9",
-    "@astrojs/react": "^5.0.4",
+    "@astrojs/check": "^0.9.10",
+    "@astrojs/react": "^6.0.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@fortawesome/fontawesome-svg-core": "^7.2.0",
-    "@fortawesome/free-brands-svg-icons": "^7.2.0",
-    "@fortawesome/free-regular-svg-icons": "^7.2.0",
-    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/fontawesome-svg-core": "^7.3.1",
+    "@fortawesome/free-brands-svg-icons": "^7.3.1",
+    "@fortawesome/free-regular-svg-icons": "^7.3.1",
+    "@fortawesome/free-solid-svg-icons": "^7.3.1",
     "@fortawesome/svelte-fontawesome": "^0.2.4",
     "@sparticuz/chromium": "^148.0.0",
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "astro": "^6.2.2",
+    "astro": "^7.1.5",
     "cheerio": "^1.2.0",
     "chromium": "^3.0.3",
+    "cookie": "^2.0.1",
     "cors": "^2.8.6",
     "dotenv": "^17.4.2",
     "express": "^5.2.1",
-    "express-rate-limit": "^8.5.0",
-    "framer-motion": "^12.38.0",
+    "express-rate-limit": "^8.6.1",
+    "framer-motion": "^12.43.0",
     "prop-types": "^15.8.1",
     "psl": "^1.15.0",
-    "puppeteer": "^24.42.0",
-    "puppeteer-core": "^24.42.0",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "react-router-dom": "^7.14.2",
+    "puppeteer": "^24.43.1",
+    "puppeteer-core": "^24.43.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-router": "^8.3.0",
     "react-simple-maps": "^3.0.0",
     "react-toastify": "^11.1.0",
-    "recharts": "^3.8.1",
-    "svelte": "^5.55.5",
+    "recharts": "^3.10.1",
+    "svelte": "^5.56.8",
     "typescript": "^6.0.3",
     "wappalyzer": "^6.10.66",
     "whoiser": "^2.0.0-beta.10",
     "xml2js": "^0.6.2"
   },
   "resolutions": {
-    "tar-fs": "^2.1.4",
-    "basic-ftp": "^5.2.0",
-    "picomatch": "^2.3.2",
-    "systeminformation": "^5.31.0",
     "d3-color": "^3.1.0",
-    "braces": "^3.0.3",
-    "wappalyzer/**/ws": "^8.17.1",
-    "@vercel/routing-utils/path-to-regexp": "^6.3.0",
-    "uuid": "^14.0.0",
-    "yaml": "^2.8.3"
+    "@astrojs/vercel/**/path-to-regexp": "^6.3.0",
+    "tar-fs": "^2.1.5",
+    "ws": "^8.21.1",
+    "yaml": "^2.9.0",
+    "tmp": "^0.2.6",
+    "sharp": "^0.35.0",
+    "brace-expansion": "^5.0.8",
+    "@opentelemetry/core": "^2.8.0",
+    "@opentelemetry/propagator-jaeger": "^2.9.0"
   },
   "devDependencies": {
-    "@astrojs/cloudflare": "^13.3.1",
-    "@astrojs/netlify": "^7.0.8",
-    "@astrojs/node": "^10.0.6",
-    "@astrojs/sitemap": "^3.7.2",
-    "@astrojs/svelte": "^8.1.0",
-    "@astrojs/ts-plugin": "^1.10.7",
-    "@astrojs/vercel": "^10.0.6",
-    "@typescript-eslint/parser": "^8.59.2",
-    "concurrently": "^9.2.1",
-    "eslint": "^10.3.0",
+    "@astrojs/netlify": "^8.1.3",
+    "@astrojs/node": "^11.0.3",
+    "@astrojs/sitemap": "^3.7.3",
+    "@astrojs/svelte": "^9.0.1",
+    "@astrojs/ts-plugin": "^1.10.10",
+    "@astrojs/vercel": "^11.0.4",
+    "@typescript-eslint/parser": "^8.65.0",
+    "concurrently": "^9.2.4",
+    "eslint": "^10.8.0",
     "eslint-plugin-astro": "^1.7.0",
     "nodemon": "^3.1.14",
-    "prettier": "^3.8.3",
+    "prettier": "^3.9.6",
     "prettier-plugin-astro": "^0.14.1",
-    "sass": "^1.99.0"
+    "sass": "^1.102.0"
   },
   "prettier": {
     "printWidth": 100,

src/client/App.tsx

@@ -1,4 +1,4 @@
-import { Routes, Route, Outlet } from 'react-router-dom';
+import { Routes, Route, Outlet } from 'react-router';
 
 import Home from 'client/views/Home.tsx';
 import Results from 'client/views/Results.tsx';

src/client/components/Results/Rank.tsx

@@ -56,7 +56,7 @@ function Chart(chartData: { date: string; uv: number }[], data: any) {
         />
         <Tooltip
           contentStyle={{ background: colors.background, color: colors.textColor, borderRadius: 4 }}
-          labelFormatter={(value) => ['Date : ', data[value].date]}
+          labelFormatter={(value) => ['Date : ', data[value as number].date]}
         />
         <Area
           type="monotone"

src/client/components/boundaries/PageError.tsx

@@ -7,7 +7,7 @@ import Footer from 'client/components/misc/Footer';
 import Nav from 'client/components/Form/Nav';
 import Button from 'client/components/Form/Button';
 import { StyledCard } from 'client/components/Form/Card';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 interface ErrorBoundaryState {
   hasError: boolean;

src/client/components/misc/Footer.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import colors from 'client/styles/colors';
 
 const StyledFooter = styled.footer`

src/client/main.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 import App from './App.tsx';
 
 export default () => (

src/client/views/About.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import colors from 'client/styles/colors';
 import Heading from 'client/components/Form/Heading';

src/client/views/Home.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { type ChangeEvent, type SyntheticEvent, useState, useEffect } from 'react';
-import { Link, useNavigate, useLocation, type NavigateOptions } from 'react-router-dom';
+import { Link, useNavigate, useLocation, type NavigateOptions } from 'react-router';
 
 import Heading from 'client/components/Form/Heading';
 import Input from 'client/components/Form/Input';

src/client/views/Results.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo, type ReactNode } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import styled from '@emotion/styled';
 import { ToastContainer } from 'react-toastify';
 

src/components/homepage/ButtonGroup.astro

@@ -15,7 +15,7 @@ const { links } = Astro.props;
 
 <div class="button-wrap">
   {
-    links.map((link) => (
+    links.map((link: Props['links'][number]) => (
       <a href={link.url} class={link.isCta ? 'cta' : ''}>
         <Icon name={link.icon} size={2} />
         {link.title}

src/components/homepage/Features.astro

@@ -10,7 +10,7 @@ const { supportedChecks } = Astro.props;
 
 <ul class="features">
   {
-    supportedChecks.map((check) => (
+    supportedChecks.map((check: string) => (
       <li>
         <Icon name="check" />
         {check}

src/layouts/MetaTags.astro

@@ -47,12 +47,14 @@ const makeBreadcrumbs = () => {
   return {
     '@context': 'https://schema.org',
     '@type': 'BreadcrumbList',
-    itemListElement: breadcrumbs.map((breadcrumb, index) => ({
-      '@type': 'ListItem',
-      position: index + 1,
-      name: breadcrumb.name,
-      item: `${site}/${breadcrumb.item}`,
-    })),
+    itemListElement: breadcrumbs.map(
+      (breadcrumb: NonNullable<Props['breadcrumbs']>[number], index: number) => ({
+        '@type': 'ListItem',
+        position: index + 1,
+        name: breadcrumb.name,
+        item: `${site}/${breadcrumb.item}`,
+      }),
+    ),
   };
 };
 ---

tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "module": "ES2020",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "plugins": [
       {