From 621502f61f041e357ce512416dc495b9d9a9a272 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 20 Aug 2024 21:50:04 +0400 Subject: [PATCH] feat(optimization): Page loading speed optimization (#6) * feat(optimize): prevent layout reshifts while loading fonts * feat(optimzie): prevent scroll overflow on embeded frame loading * feat(optimize): image size optimization on static export feat: codestyle fix fix: code style --------- Co-authored-by: Evgeniy Geraskin --- next.config.mjs | 16 +- package-lock.json | 475 ++++++++++++++++-- package.json | 5 +- src/app/globals.css | 8 +- src/app/page.tsx | 2 +- src/components/About/about.types.ts | 4 +- .../ImageHeader/image-header.types.ts | 2 +- src/components/ImageHeader/index.tsx | 2 +- .../InstagramEmbed/Content/content.module.css | 3 + .../InstagramEmbed/Content/index.tsx | 5 +- src/components/Kits/kit-block.tsx | 2 +- src/components/Logo/index.tsx | 2 +- src/components/Text/text.module.css | 10 +- 13 files changed, 491 insertions(+), 45 deletions(-) create mode 100644 src/components/InstagramEmbed/Content/content.module.css diff --git a/next.config.mjs b/next.config.mjs index 4aadff4..52262a7 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -2,7 +2,19 @@ const nextConfig = { output: 'export', images: { - unoptimized: true + loader: 'custom', + imageSizes: [16, 32, 48, 64, 96, 128, 256, 384], + deviceSizes: [320, 640, 750, 828, 1080, 1200, 1920, 2048, 3840], + }, + transpilePackages: ['next-image-export-optimizer'], + env: { + nextImageExportOptimizer_imageFolderPath: 'public/images', + nextImageExportOptimizer_exportFolderPath: 'out', + nextImageExportOptimizer_quality: '75', + nextImageExportOptimizer_storePicturesInWEBP: 'true', + nextImageExportOptimizer_exportFolderName: 'nextImageExportOptimizer', + nextImageExportOptimizer_generateAndUseBlurImages: 'true', + nextImageExportOptimizer_remoteImageCacheTTL: '0', }, webpack: (config, { isServer }) => { if (!isServer) { @@ -23,4 +35,4 @@ const nextConfig = { } }; -export default nextConfig; \ No newline at end of file +export default nextConfig; diff --git a/package-lock.json b/package-lock.json index c820297..9024b4d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@next/third-parties": "^14.1.3", "classnames": "^2.5.1", "next": "14.1.1", + "next-image-export-optimizer": "^1.14.1", "react": "^18", "react-dom": "^18" }, @@ -2202,6 +2203,15 @@ "node": ">=10.0.0" } }, + "node_modules/@emnapi/runtime": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.2.0.tgz", + "integrity": "sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@emotion/use-insertion-effect-with-fallbacks": { "version": "1.0.1", "dev": true, @@ -2347,6 +2357,348 @@ "dev": true, "license": "BSD-3-Clause" }, + "node_modules/@img/sharp-darwin-arm64": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz", + "integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==", + "cpu": [ + "arm64" + ], + "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.0.4" + } + }, + "node_modules/@img/sharp-darwin-x64": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz", + "integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==", + "cpu": [ + "x64" + ], + "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.0.4" + } + }, + "node_modules/@img/sharp-libvips-darwin-arm64": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz", + "integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-darwin-x64": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz", + "integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-arm": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz", + "integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-arm64": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz", + "integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-s390x": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz", + "integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==", + "cpu": [ + "s390x" + ], + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-x64": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz", + "integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linuxmusl-arm64": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz", + "integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linuxmusl-x64": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz", + "integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-linux-arm": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz", + "integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==", + "cpu": [ + "arm" + ], + "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.0.5" + } + }, + "node_modules/@img/sharp-linux-arm64": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz", + "integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==", + "cpu": [ + "arm64" + ], + "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.0.4" + } + }, + "node_modules/@img/sharp-linux-s390x": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz", + "integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==", + "cpu": [ + "s390x" + ], + "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.0.4" + } + }, + "node_modules/@img/sharp-linux-x64": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz", + "integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==", + "cpu": [ + "x64" + ], + "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.0.4" + } + }, + "node_modules/@img/sharp-linuxmusl-arm64": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz", + "integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==", + "cpu": [ + "arm64" + ], + "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.0.4" + } + }, + "node_modules/@img/sharp-linuxmusl-x64": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz", + "integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==", + "cpu": [ + "x64" + ], + "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.0.4" + } + }, + "node_modules/@img/sharp-wasm32": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz", + "integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==", + "cpu": [ + "wasm32" + ], + "optional": true, + "dependencies": { + "@emnapi/runtime": "^1.2.0" + }, + "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.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz", + "integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==", + "cpu": [ + "ia32" + ], + "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.33.5", + "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz", + "integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "dev": true, @@ -6654,7 +7006,6 @@ }, "node_modules/ansi-regex": { "version": "5.0.1", - "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -7915,6 +8266,35 @@ "node": ">=8" } }, + "node_modules/cli-progress": { + "version": "3.12.0", + "resolved": "https://registry.npmjs.org/cli-progress/-/cli-progress-3.12.0.tgz", + "integrity": "sha512-tRkV3HJ1ASwm19THiiLIXLO7Im7wlTuKnvkYaTkyoAPefqjNg7W7DHKUlGRxy9vxDvbyCYQkQozvptuMkGCg8A==", + "dependencies": { + "string-width": "^4.2.3" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/cli-progress/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + }, + "node_modules/cli-progress/node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/cli-spinners": { "version": "2.9.2", "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz", @@ -8003,7 +8383,6 @@ }, "node_modules/color": { "version": "4.2.3", - "dev": true, "license": "MIT", "dependencies": { "color-convert": "^2.0.1", @@ -8015,7 +8394,6 @@ }, "node_modules/color-convert": { "version": "2.0.1", - "dev": true, "license": "MIT", "dependencies": { "color-name": "~1.1.4" @@ -8026,12 +8404,10 @@ }, "node_modules/color-name": { "version": "1.1.4", - "dev": true, "license": "MIT" }, "node_modules/color-string": { "version": "1.9.1", - "dev": true, "license": "MIT", "dependencies": { "color-name": "^1.0.0", @@ -8733,9 +9109,9 @@ } }, "node_modules/detect-libc": { - "version": "2.0.2", - "dev": true, - "license": "Apache-2.0", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz", + "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==", "engines": { "node": ">=8" } @@ -11370,7 +11746,6 @@ }, "node_modules/is-fullwidth-code-point": { "version": "3.0.0", - "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -12600,6 +12975,64 @@ } } }, + "node_modules/next-image-export-optimizer": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/next-image-export-optimizer/-/next-image-export-optimizer-1.14.1.tgz", + "integrity": "sha512-S1IlXANLlWomg5Szfbw65mkpM5wLW7BezoaiBRzhl98gaQfb4DSbHGL+Qy6MoQh39OpNgPMDzIwlWHmH+cUuCQ==", + "dependencies": { + "cli-progress": "^3.10.0", + "sharp": "^0.33.1", + "typescript": "^5.2.2" + }, + "bin": { + "next-image-export-optimizer": "dist/optimizeImages.js" + }, + "engines": { + "node": ">=16.0.0" + }, + "peerDependencies": { + "next": ">=13.1.0", + "react": "^18.0.0-0" + } + }, + "node_modules/next-image-export-optimizer/node_modules/sharp": { + "version": "0.33.5", + "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz", + "integrity": "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==", + "hasInstallScript": true, + "dependencies": { + "color": "^4.2.3", + "detect-libc": "^2.0.3", + "semver": "^7.6.3" + }, + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-darwin-arm64": "0.33.5", + "@img/sharp-darwin-x64": "0.33.5", + "@img/sharp-libvips-darwin-arm64": "1.0.4", + "@img/sharp-libvips-darwin-x64": "1.0.4", + "@img/sharp-libvips-linux-arm": "1.0.5", + "@img/sharp-libvips-linux-arm64": "1.0.4", + "@img/sharp-libvips-linux-s390x": "1.0.4", + "@img/sharp-libvips-linux-x64": "1.0.4", + "@img/sharp-libvips-linuxmusl-arm64": "1.0.4", + "@img/sharp-libvips-linuxmusl-x64": "1.0.4", + "@img/sharp-linux-arm": "0.33.5", + "@img/sharp-linux-arm64": "0.33.5", + "@img/sharp-linux-s390x": "0.33.5", + "@img/sharp-linux-x64": "0.33.5", + "@img/sharp-linuxmusl-arm64": "0.33.5", + "@img/sharp-linuxmusl-x64": "0.33.5", + "@img/sharp-wasm32": "0.33.5", + "@img/sharp-win32-ia32": "0.33.5", + "@img/sharp-win32-x64": "0.33.5" + } + }, "node_modules/no-case": { "version": "3.0.4", "dev": true, @@ -14880,12 +15313,9 @@ } }, "node_modules/semver": { - "version": "7.6.0", - "dev": true, - "license": "ISC", - "dependencies": { - "lru-cache": "^6.0.0" - }, + "version": "7.6.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", + "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", "bin": { "semver": "bin/semver.js" }, @@ -14893,17 +15323,6 @@ "node": ">=10" } }, - "node_modules/semver/node_modules/lru-cache": { - "version": "6.0.0", - "dev": true, - "license": "ISC", - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/send": { "version": "0.18.0", "dev": true, @@ -15145,7 +15564,6 @@ }, "node_modules/simple-swizzle": { "version": "0.2.2", - "dev": true, "license": "MIT", "dependencies": { "is-arrayish": "^0.3.1" @@ -15153,7 +15571,6 @@ }, "node_modules/simple-swizzle/node_modules/is-arrayish": { "version": "0.3.2", - "dev": true, "license": "MIT" }, "node_modules/sisteransi": { @@ -15495,7 +15912,6 @@ }, "node_modules/strip-ansi": { "version": "6.0.1", - "dev": true, "license": "MIT", "dependencies": { "ansi-regex": "^5.0.1" @@ -16270,7 +16686,6 @@ }, "node_modules/typescript": { "version": "5.3.3", - "dev": true, "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", diff --git a/package.json b/package.json index 3d3ec0d..1066e75 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "scripts": { "predeploy": "./increment-version.sh", "deploy": "npm run lint && npm run build && git push origin", - "build": "next build", + "build": "next build && next-image-export-optimizer", "dev": "next dev", "start": "next start", "lint": "next lint", @@ -16,6 +16,7 @@ "@next/third-parties": "^14.1.3", "classnames": "^2.5.1", "next": "14.1.1", + "next-image-export-optimizer": "^1.14.1", "react": "^18", "react-dom": "^18" }, @@ -36,4 +37,4 @@ "storybook": "^7.6.17", "typescript": "^5" } -} +} \ No newline at end of file diff --git a/src/app/globals.css b/src/app/globals.css index dcf0ba9..514e7c3 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,5 +1,10 @@ @import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wght@100..800&display=swap'); +@font-face { + font-family: 'martian-mono-normal-400-fallback'; + size-adjust: 116.681%; + src: local('Courier New'); +} * { box-sizing: border-box; @@ -11,11 +16,10 @@ html, body { width: 100%; overflow-x: hidden; - font-family: 'Martian Mono', monospace; + font-family: 'Martian Mono', 'martian-mono-normal-400-fallback'; } a { color: inherit; text-decoration: none; } - diff --git a/src/app/page.tsx b/src/app/page.tsx index 5b85f8b..da2900e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,5 +1,5 @@ import React from "react"; -import Image from "next/image"; +import Image from "next-image-export-optimizer"; import { FAQ } from "@/components/Faq"; import { Hero } from "@/components/Hero"; import { Kits } from "@/components/Kits"; diff --git a/src/components/About/about.types.ts b/src/components/About/about.types.ts index bf9485b..95dfc55 100644 --- a/src/components/About/about.types.ts +++ b/src/components/About/about.types.ts @@ -1,5 +1,5 @@ export type Props = { className?: string; children?: React.ReactNode; - cover: string | import("../../../node_modules/next/dist/shared/lib/get-img-props").StaticImport; -}; + cover: string | import("../../../node_modules/next/dist/shared/lib/get-img-props").StaticImageData; +}; \ No newline at end of file diff --git a/src/components/ImageHeader/image-header.types.ts b/src/components/ImageHeader/image-header.types.ts index 1565cc5..bb28723 100644 --- a/src/components/ImageHeader/image-header.types.ts +++ b/src/components/ImageHeader/image-header.types.ts @@ -2,5 +2,5 @@ export type Props = { id?: string; alt: string; className?: string; - image: string | import("../../../node_modules/next/dist/shared/lib/get-img-props").StaticImport; + image: string | import("../../../node_modules/next/dist/shared/lib/get-img-props").StaticImageData; }; diff --git a/src/components/ImageHeader/index.tsx b/src/components/ImageHeader/index.tsx index c54e9a2..11c2875 100644 --- a/src/components/ImageHeader/index.tsx +++ b/src/components/ImageHeader/index.tsx @@ -2,7 +2,7 @@ import React from "react"; import classNames from "classnames"; -import Image from "next/image"; +import Image from "next-image-export-optimizer"; import {Props} from "./image-header.types"; import styles from "./image-header.module.css"; diff --git a/src/components/InstagramEmbed/Content/content.module.css b/src/components/InstagramEmbed/Content/content.module.css new file mode 100644 index 0000000..fb47da4 --- /dev/null +++ b/src/components/InstagramEmbed/Content/content.module.css @@ -0,0 +1,3 @@ +.instaContainer { + position: relative; +} \ No newline at end of file diff --git a/src/components/InstagramEmbed/Content/index.tsx b/src/components/InstagramEmbed/Content/index.tsx index 42c1468..fb6511d 100644 --- a/src/components/InstagramEmbed/Content/index.tsx +++ b/src/components/InstagramEmbed/Content/index.tsx @@ -1,6 +1,9 @@ 'use client' import React, { useEffect, useRef } from 'react'; +import classnames from 'classnames'; + +import styles from './content.module.css'; interface InstagramEmbedContentProps { url: string; @@ -29,7 +32,7 @@ const InstagramEmbedContent: React.FC = ({ url, clas }, []); return ( -
+