From 1c627339866956a911dac2585c91805e3839a185 Mon Sep 17 00:00:00 2001 From: Alan Thai Date: Fri, 27 Mar 2026 12:16:12 -0400 Subject: [PATCH 1/2] fix mobile sizing --- client/src/app.css | 4 +- client/src/assets/bolt.svg | 3 + .../page-layout/PageLayout.module.css | 8 +++ .../src/components/section/Section.module.css | 1 + .../src/components/top-nav/TopNav.module.css | 57 ++++++++++++++++++- client/src/components/top-nav/TopNav.tsx | 8 ++- client/src/design/heading/Heading.module.css | 8 +-- 7 files changed, 80 insertions(+), 9 deletions(-) create mode 100644 client/src/assets/bolt.svg diff --git a/client/src/app.css b/client/src/app.css index 4629354..25a7d87 100644 --- a/client/src/app.css +++ b/client/src/app.css @@ -50,13 +50,13 @@ p { margin-top: 3rem; } -@media (max-width: 768px) { +@media (width < 768px) { .app-content { grid-template-columns: 1fr; } } -@media (max-width: 768px) { +@media (width < 768px) { .mobile-hidden { border: 0; clip: rect(0 0 0 0); diff --git a/client/src/assets/bolt.svg b/client/src/assets/bolt.svg new file mode 100644 index 0000000..4a0233f --- /dev/null +++ b/client/src/assets/bolt.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/components/page-layout/PageLayout.module.css b/client/src/components/page-layout/PageLayout.module.css index 2003330..ef9939e 100644 --- a/client/src/components/page-layout/PageLayout.module.css +++ b/client/src/components/page-layout/PageLayout.module.css @@ -56,3 +56,11 @@ margin-bottom: var(--bolt-space-8); } + +.hero h1 { + text-align: center; +} + +.hero p { + text-align: center; +} diff --git a/client/src/components/section/Section.module.css b/client/src/components/section/Section.module.css index d2da824..0ec5221 100644 --- a/client/src/components/section/Section.module.css +++ b/client/src/components/section/Section.module.css @@ -30,6 +30,7 @@ @media (width < 768px) { .section { grid-template-columns: 1fr; + gap: var(--bolt-space-10); } .preview { diff --git a/client/src/components/top-nav/TopNav.module.css b/client/src/components/top-nav/TopNav.module.css index d8cccec..4647ef7 100644 --- a/client/src/components/top-nav/TopNav.module.css +++ b/client/src/components/top-nav/TopNav.module.css @@ -7,21 +7,74 @@ z-index: 100; } +@media (width < 768px) { + .topNav { + padding: var(--bolt-space-3) var(--bolt-space-4); + } +} + +.navContainer { + display: flex; + align-items: center; +} + .navLeft { display: flex; align-items: center; - gap: 4rem; + gap: 1.5rem; +} + +.navBrand { + display: flex; + align-items: center; + flex-shrink: 0; +} + +.navBrandLink { + display: flex; + align-items: center; + color: var(--bolt-content-primary); +} + +.navLogoFull { + height: 24px; + display: block; +} + +.navLogoIcon { + height: 24px; + width: 24px; + display: none; +} + +@media (max-width: 640px) { + .navLogoFull { + display: none; + } + + .navLogoIcon { + display: block; + } } .navLinks { margin-top: 0.5rem; display: flex; - gap: var(--bolt-space-8); + gap: var(--bolt-space-6); + flex-wrap: wrap; +} + +@media (width < 480px) { + .navLinks { + gap: var(--bolt-space-4); + } } .navLink { color: var(--bolt-content-secondary); text-decoration: none; + white-space: nowrap; + font-size: clamp(0.8rem, 2.5vw, 1rem); } .active { diff --git a/client/src/components/top-nav/TopNav.tsx b/client/src/components/top-nav/TopNav.tsx index 5f09bd1..601eee7 100644 --- a/client/src/components/top-nav/TopNav.tsx +++ b/client/src/components/top-nav/TopNav.tsx @@ -1,5 +1,6 @@ import { Link } from "@tanstack/react-router"; +import BoltIcon from "../../assets/bolt.svg"; import BoltLightningGames from "../../assets/lightning-games.svg"; import styles from "./TopNav.module.css"; @@ -14,7 +15,12 @@ export function TopNav() { Game Logo + Game Logo diff --git a/client/src/design/heading/Heading.module.css b/client/src/design/heading/Heading.module.css index 2053b4f..5ba5f37 100644 --- a/client/src/design/heading/Heading.module.css +++ b/client/src/design/heading/Heading.module.css @@ -1,20 +1,20 @@ .heading1 { font-size: var(--bolt-font-heading-1-size); - line-height: 0; + line-height: 1.2; font-weight: var(--bolt-font-heading-1-weight); + margin-block: 0; } .heading1.large { font-size: var(--bolt-font-heading-1-large-size); - line-height: 0; } .heading1.xlarge { font-size: var(--bolt-font-heading-1-xlarge-size); - line-height: 0; } .heading2 { font-size: var(--bolt-font-heading-2-size); - line-height: 0; + line-height: 1.2; font-weight: var(--bolt-font-heading-2-weight); + margin-block: 0; } From 164c5df0ab7b6200b77028690672ce416f76507d Mon Sep 17 00:00:00 2001 From: Alan Thai Date: Mon, 30 Mar 2026 10:32:36 -0400 Subject: [PATCH 2/2] optimized images --- client/package-lock.json | 663 +++++++++++++++++- client/package.json | 3 +- client/src/assets/product-images.d.ts | 18 + client/src/assets/product-images.js | 24 + client/src/assets/sdk-images.d.ts | 5 + client/src/assets/sdk-images.js | 7 + client/src/globals.d.ts | 7 + client/src/pages/products/Products.tsx | 70 +- .../src/pages/sdks/DeveloperSDKs.module.css | 1 + client/src/pages/sdks/DeveloperSDKs.tsx | 10 +- client/tsconfig.app.json | 5 +- client/vite.config.ts | 3 +- 12 files changed, 765 insertions(+), 51 deletions(-) create mode 100644 client/src/assets/product-images.d.ts create mode 100644 client/src/assets/product-images.js create mode 100644 client/src/assets/sdk-images.d.ts create mode 100644 client/src/assets/sdk-images.js diff --git a/client/package-lock.json b/client/package-lock.json index 8043066..c757038 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -23,7 +23,8 @@ "@preact/preset-vite": "^2.10.1", "@tanstack/router-devtools": "^1.124.0", "typescript": "~5.8.3", - "vite": "^7.0.0" + "vite": "^7.0.0", + "vite-imagetools": "^10.0.0" } }, "node_modules/@ampproject/remapping": { @@ -71,7 +72,6 @@ "integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.27.1", @@ -366,6 +366,17 @@ "cors": "^2.8.5" } }, + "node_modules/@emnapi/runtime": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.1.tgz", + "integrity": "sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.25.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz", @@ -791,6 +802,496 @@ "node": ">=18" } }, + "node_modules/@img/colour": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz", + "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/@img/sharp-darwin-arm64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz", + "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "Apache-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-darwin-arm64": "1.2.4" + } + }, + "node_modules/@img/sharp-darwin-x64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz", + "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "Apache-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-darwin-x64": "1.2.4" + } + }, + "node_modules/@img/sharp-libvips-darwin-arm64": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz", + "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "darwin" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-darwin-x64": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz", + "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "darwin" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-arm": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz", + "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-arm64": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz", + "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-ppc64": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz", + "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-riscv64": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz", + "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-s390x": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz", + "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-x64": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz", + "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linuxmusl-arm64": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz", + "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linuxmusl-x64": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz", + "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-linux-arm": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz", + "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-arm": "1.2.4" + } + }, + "node_modules/@img/sharp-linux-arm64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz", + "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-arm64": "1.2.4" + } + }, + "node_modules/@img/sharp-linux-ppc64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz", + "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-ppc64": "1.2.4" + } + }, + "node_modules/@img/sharp-linux-riscv64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz", + "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-riscv64": "1.2.4" + } + }, + "node_modules/@img/sharp-linux-s390x": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz", + "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-s390x": "1.2.4" + } + }, + "node_modules/@img/sharp-linux-x64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz", + "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-x64": "1.2.4" + } + }, + "node_modules/@img/sharp-linuxmusl-arm64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz", + "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linuxmusl-arm64": "1.2.4" + } + }, + "node_modules/@img/sharp-linuxmusl-x64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz", + "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linuxmusl-x64": "1.2.4" + } + }, + "node_modules/@img/sharp-wasm32": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz", + "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==", + "cpu": [ + "wasm32" + ], + "dev": true, + "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT", + "optional": true, + "dependencies": { + "@emnapi/runtime": "^1.7.0" + }, + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-win32-arm64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz", + "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "Apache-2.0 AND LGPL-3.0-or-later", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-win32-ia32": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz", + "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "Apache-2.0 AND LGPL-3.0-or-later", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-win32-x64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz", + "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "Apache-2.0 AND LGPL-3.0-or-later", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.12", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz", @@ -1247,7 +1748,6 @@ "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.83.0.tgz", "integrity": "sha512-/XGYhZ3foc5H0VM2jLSD/NyBRIOK4q9kfeml4+0x2DlL6xVuAcVEW+hTlTapAmejObg0i3eNqhkr2dT+eciwoQ==", "license": "MIT", - "peer": true, "dependencies": { "@tanstack/query-core": "5.83.0" }, @@ -1281,7 +1781,6 @@ "resolved": "https://registry.npmjs.org/@tanstack/react-router/-/react-router-1.124.0.tgz", "integrity": "sha512-jJxuLbPP/Cxirnft3CoiGWyH0aj94VTmLNcYauvjTGRNbUitK4udvGaHXVEP8bcifYvpko7ptsqqBlisaosugA==", "license": "MIT", - "peer": true, "dependencies": { "@tanstack/history": "1.121.34", "@tanstack/react-store": "^0.7.0", @@ -1348,7 +1847,6 @@ "resolved": "https://registry.npmjs.org/@tanstack/router-core/-/router-core-1.124.0.tgz", "integrity": "sha512-mU2KA2v+ZFWC3NIjY2y+pPCx1sZDXPsUkzPjPPZxRgonE11nIu9MB89WuukqYuPbxoSWeodKNXsLe4KksGFCKA==", "license": "MIT", - "peer": true, "dependencies": { "@tanstack/history": "1.121.34", "@tanstack/store": "^0.7.0", @@ -1530,7 +2028,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001726", "electron-to-chromium": "^1.5.173", @@ -1641,8 +2138,7 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/debug": { "version": "4.4.1", @@ -1662,6 +2158,16 @@ } } }, + "node_modules/detect-libc": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", + "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=8" + } + }, "node_modules/dom-serializer": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", @@ -1865,6 +2371,16 @@ "he": "bin/he" } }, + "node_modules/imagetools-core": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/imagetools-core/-/imagetools-core-9.1.0.tgz", + "integrity": "sha512-xQjs+2vrxLnAjCq+omuNkd5UQTld9/bP8+YT0LyYTlKfuSQtgUBvqhUwGugzSAh6sCdN+LnROMuLswn5hZ9Fhg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20.0.0" + } + }, "node_modules/isbot": { "version": "5.1.28", "resolved": "https://registry.npmjs.org/isbot/-/isbot-5.1.28.tgz", @@ -2094,7 +2610,6 @@ "resolved": "https://registry.npmjs.org/preact/-/preact-10.26.9.tgz", "integrity": "sha512-SSjF9vcnF27mJK1XyFMNJzFd5u3pQiATFqoaDy03XuN00u4ziveVVEGt5RKJrDR8MHE/wJo9Nnad56RLzS2RMA==", "license": "MIT", - "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/preact" @@ -2180,7 +2695,8 @@ "version": "0.26.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz", "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/semver": { "version": "6.3.1", @@ -2198,7 +2714,6 @@ "integrity": "sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=10" } @@ -2216,6 +2731,64 @@ "seroval": "^1.0" } }, + "node_modules/sharp": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz", + "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==", + "dev": true, + "hasInstallScript": true, + "license": "Apache-2.0", + "dependencies": { + "@img/colour": "^1.0.0", + "detect-libc": "^2.1.2", + "semver": "^7.7.3" + }, + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-darwin-arm64": "0.34.5", + "@img/sharp-darwin-x64": "0.34.5", + "@img/sharp-libvips-darwin-arm64": "1.2.4", + "@img/sharp-libvips-darwin-x64": "1.2.4", + "@img/sharp-libvips-linux-arm": "1.2.4", + "@img/sharp-libvips-linux-arm64": "1.2.4", + "@img/sharp-libvips-linux-ppc64": "1.2.4", + "@img/sharp-libvips-linux-riscv64": "1.2.4", + "@img/sharp-libvips-linux-s390x": "1.2.4", + "@img/sharp-libvips-linux-x64": "1.2.4", + "@img/sharp-libvips-linuxmusl-arm64": "1.2.4", + "@img/sharp-libvips-linuxmusl-x64": "1.2.4", + "@img/sharp-linux-arm": "0.34.5", + "@img/sharp-linux-arm64": "0.34.5", + "@img/sharp-linux-ppc64": "0.34.5", + "@img/sharp-linux-riscv64": "0.34.5", + "@img/sharp-linux-s390x": "0.34.5", + "@img/sharp-linux-x64": "0.34.5", + "@img/sharp-linuxmusl-arm64": "0.34.5", + "@img/sharp-linuxmusl-x64": "0.34.5", + "@img/sharp-wasm32": "0.34.5", + "@img/sharp-win32-arm64": "0.34.5", + "@img/sharp-win32-ia32": "0.34.5", + "@img/sharp-win32-x64": "0.34.5" + } + }, + "node_modules/sharp/node_modules/semver": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz", + "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/simple-code-frame": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/simple-code-frame/-/simple-code-frame-1.3.0.tgz", @@ -2272,8 +2845,7 @@ "version": "1.3.3", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/tiny-lru": { "version": "11.4.5", @@ -2328,7 +2900,6 @@ "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -2336,6 +2907,14 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "dev": true, + "license": "0BSD", + "optional": true + }, "node_modules/typescript": { "version": "5.8.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz", @@ -2411,7 +2990,6 @@ "integrity": "sha512-hxdyZDY1CM6SNpKI4w4lcUc3Mtkd9ej4ECWVHSMrOdSinVc2zYOAppHeGc/hzmRo3pxM5blMzkuWHOJA/3NiFw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.6", @@ -2481,6 +3059,60 @@ } } }, + "node_modules/vite-imagetools": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/vite-imagetools/-/vite-imagetools-10.0.0.tgz", + "integrity": "sha512-+83L32YPU/2BOHWhudO2+9T5HBvb3+0qHoUNN7fb0+XcAoXilx7aE25cDPWU5kBi5Yc750zYCvHxgfyR+tAuMA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@rollup/pluginutils": "^5.0.5", + "imagetools-core": "^9.1.0", + "sharp": "^0.34.1" + }, + "engines": { + "node": ">=22.0.0" + }, + "peerDependencies": { + "vite": ">=7.0.0" + } + }, + "node_modules/vite-imagetools/node_modules/@rollup/pluginutils": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.3.0.tgz", + "integrity": "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^4.0.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/vite-imagetools/node_modules/picomatch": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", + "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/vite-prerender-plugin": { "version": "0.5.11", "resolved": "https://registry.npmjs.org/vite-prerender-plugin/-/vite-prerender-plugin-0.5.11.tgz", @@ -2520,7 +3152,6 @@ "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, diff --git a/client/package.json b/client/package.json index 7c02d32..8101357 100644 --- a/client/package.json +++ b/client/package.json @@ -24,7 +24,8 @@ "@preact/preset-vite": "^2.10.1", "@tanstack/router-devtools": "^1.124.0", "typescript": "~5.8.3", - "vite": "^7.0.0" + "vite": "^7.0.0", + "vite-imagetools": "^10.0.0" }, "volta": { "node": "22.17.0" diff --git a/client/src/assets/product-images.d.ts b/client/src/assets/product-images.d.ts new file mode 100644 index 0000000..6ba5f57 --- /dev/null +++ b/client/src/assets/product-images.d.ts @@ -0,0 +1,18 @@ +// Type declarations for product-images.js (vite-imagetools transforms). +// Icon exports are URL strings. SrcSet exports are "url Nw, url Mw" srcset strings. + +export declare const IconSwipeableAds: string; +export declare const IconCarouselAds: string; +export declare const IconVideoAds: string; +export declare const IconGameController: string; +export declare const IconCheckoutProduct: string; + +export declare const PreviewSwipeableAdSrcSet: string; +export declare const PreviewCarouselAdSrcSet: string; +export declare const PreviewVideoAdSrcSet: string; +export declare const PreviewCheckoutProductSrcSet: string; + +export declare const PreviewSwipeableGameSrcSet: string; +export declare const PreviewCarouselGameSrcSet: string; +export declare const PreviewVideoGameSrcSet: string; +export declare const PreviewCheckoutGameSrcSet: string; diff --git a/client/src/assets/product-images.js b/client/src/assets/product-images.js new file mode 100644 index 0000000..3d30b2c --- /dev/null +++ b/client/src/assets/product-images.js @@ -0,0 +1,24 @@ +// vite-imagetools query-param imports. +// TypeScript resolves the companion product-images.d.ts for types. +// Vite processes this file and runs the actual imagetools transforms at build time. + +// Icons: WebP at 2× display size (displayed at 80–88px), single URL +export { default as IconSwipeableAds } from "./icon-swipeable-ads.png?w=160&format=webp"; +export { default as IconCarouselAds } from "./icon-carousel-ads.png?w=160&format=webp"; +export { default as IconVideoAds } from "./icon-video-ads.png?w=160&format=webp"; +export { default as IconGameController } from "./icon-game-controller.png?w=176&format=webp"; +export { default as IconCheckoutProduct } from "./icon-checkout-product.png?w=160&format=webp"; + +// Ad preview images: displayed at height 400px (fixed CSS), width ~300px +// Generates two sizes and returns a "url 300w, url 600w" srcset string +export { default as PreviewSwipeableAdSrcSet } from "./preview-swipeable-ad.png?w=300;600&format=webp&as=srcset"; +export { default as PreviewCarouselAdSrcSet } from "./preview-carousel-ad.png?w=300;600&format=webp&as=srcset"; +export { default as PreviewVideoAdSrcSet } from "./preview-video-ad.png?w=300;600&format=webp&as=srcset"; +export { default as PreviewCheckoutProductSrcSet } from "./preview-checkout-product.png?w=300;600&format=webp&as=srcset"; + +// Game preview images: displayed at exactly 200×250px with object-fit: cover +// Generates two sizes and returns a "url 200w, url 400w" srcset string +export { default as PreviewSwipeableGameSrcSet } from "./preview-swipeable-game.png?w=200;400&format=webp&as=srcset"; +export { default as PreviewCarouselGameSrcSet } from "./preview-carousel-game.jpg?w=200;400&format=webp&as=srcset"; +export { default as PreviewVideoGameSrcSet } from "./preview-video-game.jpg?w=200;400&format=webp&as=srcset"; +export { default as PreviewCheckoutGameSrcSet } from "./preview-checkout-game.png?w=200;400&format=webp&as=srcset"; diff --git a/client/src/assets/sdk-images.d.ts b/client/src/assets/sdk-images.d.ts new file mode 100644 index 0000000..e1e77e0 --- /dev/null +++ b/client/src/assets/sdk-images.d.ts @@ -0,0 +1,5 @@ +// Type declarations for sdk-images.js (vite-imagetools transforms). +// All exports are "url Nw, url Mw" srcset strings. + +export declare const PreviewUnitySrcSet: string; +export declare const PreviewJSSrcSet: string; diff --git a/client/src/assets/sdk-images.js b/client/src/assets/sdk-images.js new file mode 100644 index 0000000..10428b9 --- /dev/null +++ b/client/src/assets/sdk-images.js @@ -0,0 +1,7 @@ +// vite-imagetools query-param imports. +// TypeScript resolves the companion sdk-images.d.ts for types. +// Vite processes this file and runs the actual imagetools transforms at build time. + +// SDK preview images: displayed at width 400px (fixed CSS) +export { default as PreviewUnitySrcSet } from "./preview-unity.png?w=400;800&format=webp&as=srcset"; +export { default as PreviewJSSrcSet } from "./preview-js.jpg?w=400;800&format=webp&as=srcset"; diff --git a/client/src/globals.d.ts b/client/src/globals.d.ts index 501b564..0625cf0 100644 --- a/client/src/globals.d.ts +++ b/client/src/globals.d.ts @@ -1,5 +1,12 @@ /// +// vite-imagetools: query-param image imports return a URL string by default. +// Using wildcards here because TypeScript can't resolve arbitrary query strings. +declare module "*.png?w=160&format=webp" { + const src: string; + export default src; +} + declare global { interface Window { BoltSDK?: any; diff --git a/client/src/pages/products/Products.tsx b/client/src/pages/products/Products.tsx index a12d6d8..a64e287 100644 --- a/client/src/pages/products/Products.tsx +++ b/client/src/pages/products/Products.tsx @@ -1,23 +1,20 @@ import Tabs from "../../design/tabs/Tabs"; import { Section, Sections } from "../../components/section/Section"; - -import IconSwipeableAds from "../../assets/icon-swipeable-ads.png"; -import PreviewSwipeableAd from "../../assets/preview-swipeable-ad.png"; -import PreviewSwipeableGame from "../../assets/preview-swipeable-game.png"; - -import IconCarouselAds from "../../assets/icon-carousel-ads.png"; -import PreviewCarouselAd from "../../assets/preview-carousel-ad.png"; -import PreviewCarouselGame from "../../assets/preview-carousel-game.jpg"; - -import IconVideoAds from "../../assets/icon-video-ads.png"; -import PreviewVideoAd from "../../assets/preview-video-ad.png"; -import PreviewVideoGame from "../../assets/preview-video-game.jpg"; - -import IconGameController from "../../assets/icon-game-controller.png"; - -import IconCheckoutProduct from "../../assets/icon-checkout-product.png"; -import PreviewCheckoutProduct from "../../assets/preview-checkout-product.png"; -import PreviewCheckoutGame from "../../assets/preview-checkout-game.png"; +import { + IconSwipeableAds, + IconCarouselAds, + IconVideoAds, + IconGameController, + IconCheckoutProduct, + PreviewSwipeableAdSrcSet, + PreviewCarouselAdSrcSet, + PreviewVideoAdSrcSet, + PreviewCheckoutProductSrcSet, + PreviewSwipeableGameSrcSet, + PreviewCarouselGameSrcSet, + PreviewVideoGameSrcSet, + PreviewCheckoutGameSrcSet, +} from "../../assets/product-images"; import styles from "./Product.module.css"; import { Heading1 } from "../../design/heading/Heading"; @@ -76,7 +73,10 @@ function AdsProductContent() { /> } preview={ - + } />
} preview={ - + } />
} - preview={} + preview={ + + } /> ); @@ -119,8 +127,8 @@ function CheckoutProductContent() { action={} preview={ } /> @@ -128,11 +136,21 @@ function CheckoutProductContent() { ); } -function Preview({ adUrl, gameUrl }: { adUrl: string; gameUrl: string }) { +function Preview({ adSrcSet, gameSrcSet }: { adSrcSet: string; gameSrcSet: string }) { return (
- Preview Ad - Preview Game + Preview Ad + Preview Game
); } diff --git a/client/src/pages/sdks/DeveloperSDKs.module.css b/client/src/pages/sdks/DeveloperSDKs.module.css index f80bdaf..d45f24c 100644 --- a/client/src/pages/sdks/DeveloperSDKs.module.css +++ b/client/src/pages/sdks/DeveloperSDKs.module.css @@ -8,4 +8,5 @@ .previewImage { width: 400px; + max-width: 100%; } diff --git a/client/src/pages/sdks/DeveloperSDKs.tsx b/client/src/pages/sdks/DeveloperSDKs.tsx index eb72903..7829e20 100644 --- a/client/src/pages/sdks/DeveloperSDKs.tsx +++ b/client/src/pages/sdks/DeveloperSDKs.tsx @@ -3,9 +3,7 @@ import { Section, Sections } from "../../components/section/Section"; import { Heading1 } from "../../design/heading/Heading"; import { TextBlock } from "../../design/text-block/TextBlock"; -import PreviewUnity from "../../assets/preview-unity.png"; - -import PreviewJS from "../../assets/preview-js.jpg"; +import { PreviewUnitySrcSet, PreviewJSSrcSet } from "../../assets/sdk-images"; import styles from "./DeveloperSDKs.module.css"; import { LinkButton } from "../../design/button/Button"; @@ -37,7 +35,8 @@ export function DevelopmentSDKs() { } preview={ Unity SDK Preview @@ -57,7 +56,8 @@ export function DevelopmentSDKs() { } preview={ TypeScript SDK Preview diff --git a/client/tsconfig.app.json b/client/tsconfig.app.json index 58a57ab..a255dcc 100644 --- a/client/tsconfig.app.json +++ b/client/tsconfig.app.json @@ -27,7 +27,8 @@ "noUnusedParameters": true, "erasableSyntaxOnly": true, "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true + "noUncheckedSideEffectImports": false }, - "include": ["src", "../server/src"] + "include": ["src", "../server/src"], + "files": ["src/globals.d.ts"] } diff --git a/client/vite.config.ts b/client/vite.config.ts index 5d164f7..537f434 100644 --- a/client/vite.config.ts +++ b/client/vite.config.ts @@ -1,5 +1,6 @@ import { defineConfig, loadEnv } from 'vite' import preact from '@preact/preset-vite' +import { imagetools } from 'vite-imagetools' // https://vite.dev/config/ export default defineConfig(({ mode }) => { @@ -7,7 +8,7 @@ export default defineConfig(({ mode }) => { const port = env.PORT ? parseInt(env.PORT) : 4264 return { - plugins: [preact()], + plugins: [preact(), imagetools()], resolve: { alias: { '@shared-types': '../src/server/types/shared'