chore: image optimization p2

next.config.js

@@ -27,8 +27,7 @@ module.exports = withBundleAnalyzer({
     NEXTAUTH_URL: process.env.NEXTAUTH_URL,
   },
   compiler: {
-    removeConsole:
-      process.env.NODE_ENV === 'prod' ? { exclude: ['error'] } : false,
+    removeConsole: process.env.NODE_ENV === 'prod',
   },
   eslint: {
     ignoreDuringBuilds: true,

src/api/tools.ts

@@ -1,5 +1,15 @@
 export const getTools = async (locale: string) => {
-  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/tool-setting?populate[tools_list][populate]=*&populate[Seo]=*&locale=${locale}`;
+  const fields = [
+    'idForDev',
+    'link',
+    'title',
+    'description',
+    'poweredBy',
+    'isInDevelopment',
+  ]
+    .map((f, i) => `populate[tools_list][fields][${i}]=${f}`)
+    .join('&');
+  const url = `${process.env.NEXT_PUBLIC_STRAPI}/api/tool-setting?${fields}&populate[Seo]=*&locale=${locale}`;
   return await fetch(url)
     .then(resp => resp.json())
     .then(json => json?.data?.attributes || null);

src/components/longevity/WhyDoThisTooltip/WhyDoThisTooltip.tsx

@@ -51,7 +51,7 @@ const WhyDoThisTooltip: FC<WhyDoThisTooltipProps> = ({
     <div className={styles.whyDoThisTooltip} data-cy="why-do-this-content">
       <div>
         <Image
-          src={'/keepsimple_/assets/longevity/habits/what-is-this-bg.webp'}
+          src={'/keepsimple_/assets/longevity/habits/what-is-this-bg.png'}
           alt="Background"
           width={700}
           height={300}

src/components/tools/ToolHero/ToolHero.tsx

@@ -48,12 +48,25 @@ const ToolHero: FC<ToolHeroProps> = ({
           styles.lightBackground,
           isTransitioning && styles.lightBackgroundAnimated,
         )}
-        style={{ backgroundImage: `url('${backgroundImage}')` }}
-      />
-      <div
-        className={cn(styles.backgroundLayer, styles.darkBackground)}
-        style={{ backgroundImage: `url('${darkBackgroundImage}')` }}
-      />
+      >
+        <Image
+          src={backgroundImage}
+          alt="tools background"
+          fill
+          priority
+          sizes="100vw"
+          style={{ objectFit: 'cover', objectPosition: 'center' }}
+        />
+      </div>
+      <div className={cn(styles.backgroundLayer, styles.darkBackground)}>
+        <Image
+          src={darkBackgroundImage}
+          alt="tools background dark"
+          fill
+          sizes="100vw"
+          style={{ objectFit: 'cover', objectPosition: 'center' }}
+        />
+      </div>
       <div className={styles.content}>
         <div className={styles.logoRow}>
           <span className={styles.diamond} />

src/layouts/ToolsLayout/ToolsLayout.module.scss

@@ -68,6 +68,12 @@
   }
 }
 
+@media (min-width: 1921px) {
+  .contentInner {
+    gap: 26px;
+  }
+}
+
 @media (max-width: 768px) {
   .layout {
     margin-top: 54px;

src/layouts/ToolsLayout/ToolsLayout.tsx

@@ -38,22 +38,6 @@ const ToolsLayout: FC<ToolsLayoutProps> = ({
     easterThemeIndexRef.current = easterThemeIndex;
   }, [easterThemeIndex]);
 
-  useEffect(() => {
-    const easterImages = [
-      '/keepsimple_/assets/tools/hero/green.png',
-      '/keepsimple_/assets/tools/logo/green.svg',
-      '/keepsimple_/assets/tools/hero/white.png',
-      '/keepsimple_/assets/tools/logo/white.svg',
-      '/keepsimple_/assets/tools/hero/black.png',
-      '/keepsimple_/assets/tools/logo/black.svg',
-    ];
-
-    easterImages.forEach(src => {
-      const img = new Image();
-      img.src = src;
-    });
-  }, []);
-
   useEffect(() => {
     const handleSequence = (event: KeyboardEvent) => {
       const target = event.target as HTMLElement | null;
@@ -87,6 +71,17 @@ const ToolsLayout: FC<ToolsLayoutProps> = ({
       ) {
         typedBufferRef.current = '';
         easterActivatedRef.current = true;
+        [
+          '/keepsimple_/assets/tools/hero/green.png',
+          '/keepsimple_/assets/tools/logo/green.svg',
+          '/keepsimple_/assets/tools/hero/white.png',
+          '/keepsimple_/assets/tools/logo/white.svg',
+          '/keepsimple_/assets/tools/hero/black.png',
+          '/keepsimple_/assets/tools/logo/black.svg',
+        ].forEach(src => {
+          const img = new Image();
+          img.src = src;
+        });
         easterThemeIndexRef.current = 1;
         setEasterThemeIndex(1);
         setTransitionKey(prev => prev + 1);

src/pages/_app.tsx

@@ -195,7 +195,7 @@ function AppContent({ Component, pageProps: { session, ...pageProps } }: TApp) {
       '/keepsimple_/assets/longevity/diet/diet-results-icons/metabolic-gold.png',
       '/keepsimple_/assets/longevity/habits/tooltip-bg.png',
       '/keepsimple_/assets/longevity/habits/tooltip-headline-bg.png',
-      '/keepsimple_/assets/longevity/habits/what-is-this-bg.webp',
+      '/keepsimple_/assets/longevity/habits/what-is-this-bg.png',
     ];
 
     imagesToPreload.forEach(src => {

src/pages/tools/index.tsx

@@ -103,6 +103,6 @@ export const getStaticProps: GetStaticProps = async ({
       locale,
       tools: tools,
     },
-    revalidate: 10,
+    revalidate: 3600,
   };
 };