Tools and Longevity Improvements

src/components/ArticleSection/ArticleSection.tsx

@@ -78,7 +78,7 @@ const ArticleSection = forwardRef<HTMLElement, ArticleSectionProps>(
                   bgImage={
                     article?.coverImage
                       ? isRecommendedOrFeatured
-                        ? `${process.env.NEXT_PUBLIC_STRAPI}${article?.coverImage.data.attributes.url}`
+                        ? `${process.env.NEXT_PUBLIC_STRAPI}${article?.coverImage?.data?.attributes?.url}`
                         : `${process.env.NEXT_PUBLIC_STRAPI}${article?.coverImage?.url}`
                       : ''
                   }

src/components/SeoGenerator/SeoGenerator.tsx

@@ -18,6 +18,7 @@ interface SeoGeneratorProps {
   type?: string;
   forceNoIndex?: boolean;
   canonicalOverride?: string;
+  preloadImages?: string[];
   ogTags?: {
     ogDescription: string;
     ogTitle: string;
@@ -47,6 +48,7 @@ const SeoGenerator: FC<SeoGeneratorProps> = ({
   type,
   forceNoIndex,
   canonicalOverride,
+  preloadImages,
 }) => {
   const router = useRouter();
 
@@ -190,6 +192,9 @@ const SeoGenerator: FC<SeoGeneratorProps> = ({
           type="font/woff2"
           crossOrigin="anonymous"
         />
+        {preloadImages?.map(src => (
+          <link key={src} rel="preload" as="image" href={src} />
+        ))}
         <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
         <meta name="theme-color" content="#1e2023" />
         {pathname.includes('/user') ? (

src/hooks/usePreloadImages.ts

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+
+const usePreloadImages = (urls: string[]) => {
+  useEffect(() => {
+    if (!urls?.length) return;
+
+    urls.forEach(src => {
+      if (!src) return;
+      const img = new Image();
+      img.src = src;
+    });
+  }, [urls]);
+};
+
+export default usePreloadImages;

src/layouts/ToolsLayout/ToolsLayout.tsx

@@ -32,11 +32,28 @@ const ToolsLayout: FC<ToolsLayoutProps> = ({
   const [transitionKey, setTransitionKey] = useState(0);
   const typedBufferRef = useRef('');
   const easterThemeIndexRef = useRef(0);
+  const easterActivatedRef = useRef(false);
 
   useEffect(() => {
     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;
@@ -64,19 +81,26 @@ const ToolsLayout: FC<ToolsLayoutProps> = ({
       const normalizedBuffer = nextBuffer.replace(/\s+/g, '');
       const idx = easterThemeIndexRef.current;
 
-      if (idx === 0 && normalizedBuffer.endsWith(FIBONACCI_CODE_NORMALIZED)) {
+      if (
+        !easterActivatedRef.current &&
+        normalizedBuffer.endsWith(FIBONACCI_CODE_NORMALIZED)
+      ) {
         typedBufferRef.current = '';
+        easterActivatedRef.current = true;
+        easterThemeIndexRef.current = 1;
         setEasterThemeIndex(1);
         setTransitionKey(prev => prev + 1);
         return;
       }
 
       if (
-        idx > 0 &&
+        easterActivatedRef.current &&
         normalizedBuffer.endsWith(EASTER_SUBSEQUENT_CODE_NORMALIZED)
       ) {
         typedBufferRef.current = '';
-        setEasterThemeIndex(prev => (prev + 1) % 4);
+        const next = (idx + 1) % 4;
+        easterThemeIndexRef.current = next;
+        setEasterThemeIndex(next);
         setTransitionKey(prev => prev + 1);
       }
     };

src/pages/_app.tsx

@@ -168,6 +168,39 @@ function AppContent({ Component, pageProps: { session, ...pageProps } }: TApp) {
     }
   }, [isDarkTheme, router]);
 
+  useEffect(() => {
+    const isLongevityProtocolPage = router.asPath.startsWith(
+      '/tools/longevity-protocol',
+    );
+    if (!isLongevityProtocolPage) return;
+
+    const imagesToPreload = [
+      '/keepsimple_/assets/longevity/diet/hearts/sugar.svg',
+      '/keepsimple_/assets/longevity/diet/hearts/seed-oil.svg',
+      '/keepsimple_/assets/longevity/diet/hearts/sugary-drinks.svg',
+      '/keepsimple_/assets/longevity/diet/hearts/ultra-porcessed-food.svg',
+      '/keepsimple_/assets/longevity/diet/hearts/white-flour.svg',
+      '/keepsimple_/assets/longevity/diet/hearts/deceptive-food.svg',
+      '/keepsimple_/assets/longevity/diet/tooltip-line.png',
+      '/keepsimple_/assets/longevity/diet/damage-icon.svg',
+      '/keepsimple_/assets/longevity/diet/info-icon.svg',
+      '/keepsimple_/assets/longevity/diet/examples-icon.svg',
+      '/keepsimple_/assets/longevity/diet/diet-results-icons/borderline-ok-foods.png',
+      '/keepsimple_/assets/longevity/diet/diet-results-icons/supportive-foods.png',
+      '/keepsimple_/assets/longevity/diet/diet-results-icons/protective-foods.png',
+      '/keepsimple_/assets/longevity/diet/diet-results-icons/clean-nutrients.png',
+      '/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',
+    ];
+
+    imagesToPreload.forEach(src => {
+      const img = new Image();
+      img.src = src;
+    });
+  }, [router.asPath]);
+
   useEffect(() => {
     let handleRouteChange: (url: string) => void;
 

src/pages/tools/index.tsx

@@ -56,6 +56,14 @@ const ToolsPage: FC<ToolsPageProps> = ({ tools }) => {
           ogDescription: tools?.ogDescription,
           ogTitle: tools?.ogTitle,
           ogType: tools?.ogType,
+          ogImage: {
+            data: {
+              attributes: {
+                staticUrl: `${process.env.NEXT_PUBLIC_DOMAIN}/keepsimple_/assets/tools/tools-og.png`,
+                url: '',
+              },
+            },
+          },
         }}
         createdDate={tools?.publishedAt}
         modifiedDate={tools?.updatedAt}

src/pages/tools/longevity-protocol/about-project.tsx

@@ -1,10 +1,13 @@
+import { getAboutProjectImageUrls } from '@utils/getLongevityImageUrls';
 import { GetServerSideProps } from 'next';
 import { useRouter } from 'next/router';
 
 import { ogImage } from '@constants/longevity';
 
 import type { TRouter } from '@local-types/global';
 
+import usePreloadImages from '@hooks/usePreloadImages';
+
 import { getAboutProject } from '@api/longevity/about-project';
 
 import SeoGenerator from '@components/SeoGenerator';
@@ -15,6 +18,8 @@ const AboutProject = ({ aboutTheProject }) => {
   const router = useRouter();
   const { locale } = router as TRouter;
   const currentLocale = locale === 'ru' ? 'ru' : 'en';
+  const imageUrls = getAboutProjectImageUrls();
+  usePreloadImages(imageUrls);
   const OGTags = {
     ogDescription: aboutTheProject[currentLocale]?.ogDescription || '',
     ogTitle: aboutTheProject[currentLocale]?.ogTitle || '',
@@ -44,6 +49,7 @@ const AboutProject = ({ aboutTheProject }) => {
         ogTags={OGTags}
         createdDate={aboutTheProject[currentLocale]?.createdAt || ''}
         modifiedDate={aboutTheProject[currentLocale]?.updatedAt || ''}
+        preloadImages={imageUrls}
       />
       <AboutProjectLayout
         data={aboutTheProject ? aboutTheProject[currentLocale] : null}

src/pages/tools/longevity-protocol/environment.tsx

@@ -1,8 +1,11 @@
+import { getEnvironmentImageUrls } from '@utils/getLongevityImageUrls';
 import { GetStaticProps } from 'next';
 import { useRouter } from 'next/router';
 
 import { ogImage } from '@constants/longevity';
 
+import usePreloadImages from '@hooks/usePreloadImages';
+
 import { getEnvironment } from '@api/longevity/environment';
 
 import SeoGenerator from '@components/SeoGenerator';
@@ -13,6 +16,9 @@ const Environment = ({ environment }) => {
   const router = useRouter();
   const { locale } = router;
   const currentLocale = locale === 'ru' ? 'ru' : 'en';
+  const data = environment?.[currentLocale];
+  const imageUrls = getEnvironmentImageUrls(data);
+  usePreloadImages(imageUrls);
   const OGTags = {
     ogDescription: environment[currentLocale]?.ogDescription || '',
     ogTitle: environment[currentLocale]?.ogTitle || '',
@@ -41,6 +47,7 @@ const Environment = ({ environment }) => {
         ogTags={OGTags}
         createdDate={environment[currentLocale]?.createdAt || ''}
         modifiedDate={environment[currentLocale]?.updatedAt || ''}
+        preloadImages={imageUrls}
       />
       <EnvironmentLayout
         data={environment ? environment[currentLocale] : null}

src/pages/tools/longevity-protocol/habits/diet.tsx

@@ -1,10 +1,13 @@
+import { getDietImageUrls } from '@utils/getLongevityImageUrls';
 import { GetStaticProps } from 'next';
 import { useRouter } from 'next/router';
 
 import { ogImage } from '@constants/longevity';
 
 import type { TRouter } from '@local-types/global';
 
+import usePreloadImages from '@hooks/usePreloadImages';
+
 import { getDiet } from '@api/longevity/diet';
 
 import SeoGenerator from '@components/SeoGenerator';
@@ -15,6 +18,9 @@ const Diet = ({ dietData }) => {
   const router = useRouter();
   const { locale } = router as TRouter;
   const currentLocale = locale === 'ru' ? 'ru' : 'en';
+  const data = dietData?.[currentLocale];
+  const imageUrls = getDietImageUrls(data);
+  usePreloadImages(imageUrls);
 
   const OGTags = {
     ogDescription: dietData?.[currentLocale]?.ogDescription || '',
@@ -44,6 +50,7 @@ const Diet = ({ dietData }) => {
         type={'MedicalWebPage'}
         createdDate={dietData[currentLocale]?.createdAt || ''}
         modifiedDate={dietData[currentLocale]?.updatedAt || ''}
+        preloadImages={imageUrls}
       />
       <DietLayout
         locale={currentLocale}

src/pages/tools/longevity-protocol/habits/lifestyle.tsx

@@ -1,10 +1,13 @@
+import { getLifestyleImageUrls } from '@utils/getLongevityImageUrls';
 import { GetStaticProps } from 'next';
 import { useRouter } from 'next/router';
 
 import { ogImage } from '@constants/longevity';
 
 import type { TRouter } from '@local-types/global';
 
+import usePreloadImages from '@hooks/usePreloadImages';
+
 import { getLifestyleProtocol } from '@api/longevity/lifestyle';
 
 import SeoGenerator from '@components/SeoGenerator';
@@ -15,6 +18,9 @@ const Lifestyle = ({ habitsData }) => {
   const router = useRouter();
   const { locale } = router as TRouter;
   const currentLocale = locale === 'ru' ? 'ru' : 'en';
+  const data = habitsData?.[currentLocale];
+  const imageUrls = getLifestyleImageUrls(data);
+  usePreloadImages(imageUrls);
 
   const OGTags = {
     ogDescription: habitsData[currentLocale]?.ogDescription || '',
@@ -44,6 +50,7 @@ const Lifestyle = ({ habitsData }) => {
         ogTags={OGTags}
         createdDate={habitsData[currentLocale]?.createdAt || ''}
         modifiedDate={habitsData[currentLocale]?.updatedAt || ''}
+        preloadImages={imageUrls}
       />
       <LifestyleLayout
         data={habitsData ? habitsData[currentLocale] : null}

src/pages/tools/longevity-protocol/habits/sleep.tsx

@@ -1,10 +1,13 @@
+import { getSleepImageUrls } from '@utils/getLongevityImageUrls';
 import { GetStaticProps } from 'next';
 import { useRouter } from 'next/router';
 
 import { ogImage } from '@constants/longevity';
 
 import type { TRouter } from '@local-types/global';
 
+import usePreloadImages from '@hooks/usePreloadImages';
+
 import { getSleep } from '@api/longevity/sleep';
 import { getSleepSupplements } from '@api/longevity/sleep-supplements';
 
@@ -16,6 +19,8 @@ const Sleep = ({ sleepData, sleepSupplements }) => {
   const router = useRouter();
   const { locale } = router as TRouter;
   const currentLocale = locale === 'ru' ? 'ru' : 'en';
+  const imageUrls = getSleepImageUrls();
+  usePreloadImages(imageUrls);
   const OGTags = {
     ogDescription: sleepData[currentLocale]?.ogDescription || '',
     ogTitle: sleepData[currentLocale]?.ogTitle || '',
@@ -44,6 +49,7 @@ const Sleep = ({ sleepData, sleepSupplements }) => {
         ogTags={OGTags}
         createdDate={sleepData[currentLocale]?.createdAt || ''}
         modifiedDate={sleepData[currentLocale]?.updatedAt || ''}
+        preloadImages={imageUrls}
       />
       <SleepLayout
         locale={locale}

src/pages/tools/longevity-protocol/habits/study.tsx

@@ -1,10 +1,13 @@
+import { getStudyImageUrls } from '@utils/getLongevityImageUrls';
 import { GetStaticProps } from 'next';
 import { useRouter } from 'next/router';
 
 import { ogImage } from '@constants/longevity';
 
 import type { TRouter } from '@local-types/global';
 
+import usePreloadImages from '@hooks/usePreloadImages';
+
 import { getStudy } from '@api/longevity/study';
 
 import SeoGenerator from '@components/SeoGenerator';
@@ -15,6 +18,9 @@ const Study = ({ studyData }) => {
   const router = useRouter();
   const { locale } = router as TRouter;
   const currentLocale = locale === 'ru' ? 'ru' : 'en';
+  const data = studyData?.[currentLocale];
+  const imageUrls = getStudyImageUrls(data);
+  usePreloadImages(imageUrls);
 
   const OGTags = {
     ogDescription: studyData[currentLocale]?.ogDescription || '',
@@ -44,6 +50,7 @@ const Study = ({ studyData }) => {
         ogTags={OGTags}
         createdDate={studyData[currentLocale]?.createdAt || ''}
         modifiedDate={studyData[currentLocale]?.updatedAt || ''}
+        preloadImages={imageUrls}
       />
       <StudyLayout
         data={studyData ? studyData[currentLocale] : null}

src/pages/tools/longevity-protocol/habits/supplements.tsx

@@ -1,10 +1,13 @@
+import { getSupplementsImageUrls } from '@utils/getLongevityImageUrls';
 import { GetStaticProps } from 'next';
 import { useRouter } from 'next/router';
 
 import { ogImage } from '@constants/longevity';
 
 import type { TRouter } from '@local-types/global';
 
+import usePreloadImages from '@hooks/usePreloadImages';
+
 import { getSupplements } from '@api/longevity/supplements';
 
 import SeoGenerator from '@components/SeoGenerator';
@@ -15,6 +18,9 @@ const Supplements = ({ supplements }) => {
   const router = useRouter();
   const { locale } = router as TRouter;
   const currentLocale = locale === 'ru' ? 'ru' : 'en';
+  const data = supplements?.[currentLocale];
+  const imageUrls = getSupplementsImageUrls(data);
+  usePreloadImages(imageUrls);
   const OGTags = {
     ogDescription: supplements[currentLocale]?.ogDescription || '',
     ogTitle: supplements[currentLocale]?.ogTitle || '',
@@ -43,6 +49,7 @@ const Supplements = ({ supplements }) => {
         ogTags={OGTags}
         createdDate={supplements[currentLocale]?.createdAt || ''}
         modifiedDate={supplements[currentLocale]?.updatedAt || ''}
+        preloadImages={imageUrls}
       />
       <SupplementsLayout
         data={!!supplements ? supplements[currentLocale] : null}