Fixup styles

next.config.js

@@ -13,27 +13,13 @@ module.exports = {
       },
     ],
     deviceSizes: [
-      // 640,
-      750,
-      // 828,
-      // 1080,
+      320,
+      768,
       1200,
-      // 1920,
-      // 2048,
-      3840
-    ],
-    imageSizes: [
-      // 16,
-      // 32,
-      // 48,
-      // 64,
-      // 96,
-      128,
-      // 256,
-      384
+      2000,
     ],
     loader: 'custom',
-    loaderFile: './components/patterns/elements/image-loader.tsx',
+    loaderFile: './src/components/patterns/elements/image-loader.tsx',
   },
   typescript: {
     ignoreBuildErrors: process.env.CI !== 'true',

src/components/patterns/elements/image-loader.tsx

@@ -1,13 +1,15 @@
-const ImageLoader = ({ src, width }) => {
+const ImageLoader = ({src, width}: { src: string, width: number }) => {
   const imageStyles = [
     {w: 128, s: 'breakpoint_sm_2x'},
     {w: 384, s: 'breakpoint_md_2x'},
     {w: 400, s: 'breakpoint_md_2x'},
     {w: 750, s: 'breakpoint_lg_2x'},
     {w: 1200, s: 'breakpoint_xl_2x'},
-    {w: 3840, s: 'breakpoint_2xl_2x'},
+    {w: 9999999, s: 'breakpoint_2xl_2x'},
   ];
-  const style = imageStyles.find(s => s.w === width)?.s || 'breakpoint_xl_2x';
+  // Find the first image style that is larger than the desired width.
+  const style = imageStyles.find(s => s.w >= width)?.s;
+
   // Switch the image style for the desired width. Add the width parameter just to prevent console logs.
   // https://nextjs.org/docs/messages/next-image-missing-loader-width
   return src.toString().replace(/styles\/\w+\//, `styles/${style}/`) + `&w=${width}`;