Merge pull request #43 from MikeCheek/dev

Performance improvements

gatsby-node.ts

@@ -6,18 +6,18 @@ export const createPages: GatsbyNode['createPages'] = async ({ graphql, actions,
   const { createPage } = actions;
 
   // you'll call `createPage` for each result
-  // edizioniData.forEach((data) => {
-  //   createPage({
-  //     // As mentioned above you could also query something else like frontmatter.title above and use a helper function
-  //     // like slugify to create a slug
-  //     path: `/edizioni/${data.year}`,
-  //     // Provide the path to the MDX content file so webpack can pick it up and transform it into JSX
-  //     component: resolve(__dirname, 'src/templates/Edizioni/index.tsx'),
-  //     // You can use the values in this context in
-  //     // our page layout component
-  //     context: { ...data },
-  //   });
-  // });
+  edizioniData.forEach((data) => {
+    createPage({
+      // As mentioned above you could also query something else like frontmatter.title above and use a helper function
+      // like slugify to create a slug
+      path: `/edizioni/${data.year}`,
+      // Provide the path to the MDX content file so webpack can pick it up and transform it into JSX
+      component: resolve(__dirname, 'src/templates/Edizioni/index.tsx'),
+      // You can use the values in this context in
+      // our page layout component
+      context: { ...data },
+    });
+  });
 };
 
 export const createSchemaCustomization: GatsbyNode['createSchemaCustomization'] = ({ stage, loaders, actions }) => {

src/components/atoms/BigPictureSection/index.module.scss

@@ -59,6 +59,7 @@
   width: 100vw;
   height: 100vh;
   overflow: hidden;
+
   span {
     position: absolute;
     top: 0;

src/components/atoms/BigPictureSection/index.tsx

@@ -1,11 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { BigPictureSectionProps } from './index.types';
 import * as styles from './index.module.scss';
 import ShowOnView from '../ShowOnView';
-import { useInView } from 'react-intersection-observer';
 import { GatsbyImage } from 'gatsby-plugin-image';
-import Slider from 'react-slick';
-import Button from '../Button';
+import Carousel from '../Carousel';
 
 const Index = ({ title, text, reverse = false, images, videos }: BigPictureSectionProps) => {
   // let base = 0;
@@ -71,31 +69,7 @@ const Index = ({ title, text, reverse = false, images, videos }: BigPictureSecti
           }}
           className={reverse ? styles.scrollingImagesReverse : styles.scrollingImages}
         > */}
-        <Slider
-          dots
-          infinite
-          slidesToShow={1}
-          slidesToScroll={1}
-          touchMove
-          autoplay
-          autoplaySpeed={5000}
-          // pauseOnHover
-          arrows
-          responsive={[
-            {
-              breakpoint: 850,
-              settings: {
-                dots: false,
-              },
-            },
-            {
-              breakpoint: 300,
-              settings: 'unslick', // destroys slick
-            },
-          ]}
-        >
-          {slides}
-        </Slider>
+        <Carousel>{slides}</Carousel>
         {/* </div> */}
       </div>
     </div>

src/components/atoms/CardImage/index.types.ts

@@ -1,5 +1,5 @@
 export interface CardImageProps {
-  children: React.ReactElement;
+  children: React.ReactNode;
   reversed?: boolean;
   onlyMobile?: boolean;
   onlyDesktop?: boolean;

src/components/atoms/Carousel/index.module.scss

@@ -0,0 +1,15 @@
+.wrap {
+  ul {
+    z-index: 2;
+    bottom: 20px;
+    li {
+      button {
+        &::before {
+          color: var(--nt-orange) !important;
+          background-color: var(--nt-orange) !important;
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+}

src/components/atoms/Carousel/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import CarouselProps from './index.types';
+import * as styles from './index.module.scss';
+import Slider from 'react-slick';
+
+const Carousel = ({
+  children,
+  className,
+  dots = true,
+  infinite = true,
+  touchMove = true,
+  autoplay = true,
+  arrows = true,
+  ...settings
+}: CarouselProps) => {
+  return (
+    <Slider
+      dots={dots}
+      infinite={infinite}
+      slidesToShow={1}
+      slidesToScroll={1}
+      touchMove={touchMove}
+      autoplay={autoplay}
+      autoplaySpeed={5000}
+      className={className ? [className, styles.wrap] : styles.wrap}
+      arrows={arrows}
+      responsive={[
+        {
+          breakpoint: 850,
+          settings: {
+            dots: false,
+          },
+        },
+        {
+          breakpoint: 300,
+          settings: 'unslick', // destroys slick
+        },
+      ]}
+      {...settings}
+    >
+      {children}
+    </Slider>
+  );
+};
+
+export default Carousel;

src/components/atoms/Carousel/index.types.ts

@@ -0,0 +1,3 @@
+import { Settings } from 'react-slick';
+
+export default interface CarouselProps extends Settings {}

src/components/atoms/ScrollySection/index.module.scss

@@ -12,19 +12,25 @@
   margin-left: 10%;
   margin-right: auto;
   text-align: left;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
 }
 
 .childReverse {
   @extend .child;
   margin-left: auto;
   margin-right: 10%;
   text-align: right;
+  align-items: flex-end;
 }
 
 .steps {
   position: absolute;
   width: 100vw;
-  height: 100vh;
+  min-height: 100vh;
+  height: 100%;
   top: 0;
   left: 0;
   z-index: -1;

src/components/atoms/ScrollySection/index.tsx

@@ -49,6 +49,7 @@ const Index = ({ children, reverse = false, first = false }: ScrollySectionProps
                 180 + // to make steps point down
                 (reverse ? -1 : 1) * // to change direction if section is reversed
                   (key * 15) + // amount to steer
+                (key == 5 ? (reverse ? 20 : -20) : 0) + // to make last steps coherent with next ones
                 (key == 0 ? (reverse ? 30 : -30) : 0) // to make first steps coherent with precedents
               }deg)`,
               top: `${curveTop(key)}%`,

src/components/atoms/Seo/index.tsx

@@ -6,6 +6,7 @@ import { DefaultTicketProps, info as tickets } from '../../../utilities/tickets'
 import { faqIT as dataFAQ } from '../../../utilities/dataFAQ';
 import guests from '../../../utilities/guests';
 import { removeHTMLTags } from '../../../utilities/sanitizer';
+import { Script } from 'gatsby';
 
 const Index = ({
   lang = 'it',
@@ -20,7 +21,6 @@ const Index = ({
   tally = false,
 }: SeoProps) => {
   const { metadata, featuredImage } = useSiteMetadata();
-  console.log(lang);
 
   const seo = {
     title: title && pathname != '/' ? title + ' | ' + metadata.title : metadata.title,
@@ -191,12 +191,13 @@ const Index = ({
 
       <meta name="robots" content="max-image-preview:large" />
 
-      {structuredData ? <script type="application/ld+json">{JSON.stringify(microData)}</script> : <></>}
+      {structuredData ? <Script type="application/ld+json">{JSON.stringify(microData)}</Script> : <></>}
       {noIndex ? <meta name="robots" content="noindex,nofollow" /> : <></>}
 
-      <script
+      <Script
         id="saro"
         defer
+        strategy="idle"
         dangerouslySetInnerHTML={{
           __html: `(function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){
       var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
@@ -209,18 +210,18 @@ const Index = ({
       ml_webform_5919036('animation', 'fadeIn');
       `,
         }}
-      ></script>
+      ></Script>
       <link rel="dns-prefetch" href="https://static.mailerlite.com/" />
-      <link rel="dns-prefetch" href="https://www.google.com/" />
+      {/* <link rel="dns-prefetch" href="https://www.google.com/" /> */}
       <link rel="dns-prefetch" href="https://www.googletagmanager.com" />
       <link rel="dns-prefetch" href="https://assets.mlcdn.com" />
       <link rel="preconnect" href="https://static.mailerlite.com/" />
-      <link rel="preconnect" href="https://www.google.com/" />
+      {/* <link rel="preconnect" href="https://www.google.com/" /> */}
       <link rel="preconnect" href="https://www.googletagmanager.com" />
       <link rel="preconnect" href="https://assets.mlcdn.com" />
-      {/* <script defer src="https://tally.so/widgets/embed.js"></script> */}
+      {/* <S defer src="https://tally.so/widgets/embed.js"></script> */}
       {tally ? (
-        <script
+        <Script
           async
           dangerouslySetInnerHTML={{
             __html: `
@@ -231,7 +232,7 @@ const Index = ({
       if("undefined"!=typeof Tally)v();
       else if(d.querySelector('script[src="'+w+'"]')==null){var s=d.createElement("script");s.src=w,s.onload=v,s.onerror=v,d.body.appendChild(s);}`,
           }}
-        ></script>
+        ></Script>
       ) : (
         <></>
       )}

src/components/atoms/VideoMasked/index.module.scss

@@ -0,0 +1,20 @@
+.videoWrap {
+  position: relative;
+  width: 80vw;
+  height: auto;
+  margin: 0;
+  mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzU0LjUiIGhlaWdodD0iNzQuNzAxIiB2aWV3Qm94PSIwIDAgMzU0LjUgNzQuNzAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGlkPSJzdmdHcm91cCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZvbnQtc2l6ZT0iOXB0IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMG1tIiBmaWxsPSIjMDAwIiBzdHlsZT0ic3Ryb2tlOiMwMDA7c3Ryb2tlLXdpZHRoOjBtbTtmaWxsOiMwMDAiPjxwYXRoIGQ9Ik0gOTEuMyAzMi42MDEgTCA3NS41IDMyLjYwMSBMIDczLjUgNDIuMTAxIEwgODQuNSA0Mi4xMDEgTCA4NC41IDYyLjMwMSBMIDY5LjEgNjIuMzAxIEwgNjYuNSA3NC43MDEgTCA0NS45IDc0LjcwMSBMIDQ4LjUgNjIuMzAxIEwgMzQuNiA2Mi4zMDEgTCAzMiA3NC43MDEgTCAxMS41IDc0LjcwMSBMIDE0LjEgNjIuMzAxIEwgMCA2Mi4zMDEgTCAwIDQyLjEwMSBMIDE4LjUgNDIuMTAxIEwgMjAuNSAzMi42MDEgTCA2LjggMzIuNjAxIEwgNi44IDEyLjQwMSBMIDI0LjggMTIuNDAxIEwgMjcuMyAwLjcwMSBMIDQ3LjggMC43MDEgTCA0NS4zIDEyLjQwMSBMIDU5LjIgMTIuNDAxIEwgNjEuNyAwLjcwMSBMIDgyLjMgMC43MDEgTCA3OS44IDEyLjQwMSBMIDkxLjMgMTIuNDAxIEwgOTEuMyAzMi42MDEgWiBNIDE2NS4yIDMuOTAxIEwgMTY1LjIgNzQuNzAxIEwgMTQzIDc0LjcwMSBMIDExOS41IDM5LjEwMSBMIDExOS41IDc0LjcwMSBMIDk3LjMgNzQuNzAxIEwgOTcuMyAzLjkwMSBMIDExOS41IDMuOTAxIEwgMTQzIDQwLjEwMSBMIDE0MyAzLjkwMSBMIDE2NS4yIDMuOTAxIFogTSAyNTUuOCAyNi45MDEgTCAyMzQuMyAyNi45MDEgQSA0MC4yOTcgNDAuMjk3IDAgMCAxIDIzNS4wMSAyMC4zOSBRIDIzNS43MjYgMTYuNzY4IDIzNy4xMzggMTMuODEyIEEgMjIuMzI5IDIyLjMyOSAwIDAgMSAyMzguMzUgMTEuNjAxIEEgMjMuNjg2IDIzLjY4NiAwIDAgMSAyNDMuOTk3IDUuMjg4IEEgMjEuOTQxIDIxLjk0MSAwIDAgMSAyNDguMSAyLjgwMSBBIDMwLjE2IDMwLjE2IDAgMCAxIDI1OS4wNzkgMC4wNjkgQSAzNS42NTkgMzUuNjU5IDAgMCAxIDI2MS4zIDAuMDAxIEEgNDIuMjExIDQyLjIxMSAwIDAgMSAyNjguMTI4IDAuNTE1IFEgMjcxLjczMiAxLjEwNyAyNzQuNTc3IDIuMzgyIEEgMTcuNDM3IDE3LjQzNyAwIDAgMSAyODAuMDUgNi4xNTEgQSAyMC45MDggMjAuOTA4IDAgMCAxIDI4NS44MjQgMTguNzAzIEEgMjguMzQgMjguMzQgMCAwIDEgMjg2IDIxLjkwMSBBIDMxLjAzMiAzMS4wMzIgMCAwIDEgMjgwLjg4NCAzOC45IEEgMzguNzE4IDM4LjcxOCAwIDAgMSAyNzkuNTUgNDAuODUxIFEgMjczLjEgNDkuNzAxIDI2My40IDU1LjgwMSBMIDI4Ni4zIDU1LjgwMSBMIDI4Ni4zIDczLjcwMSBMIDIzNC42IDczLjcwMSBMIDIzNC42IDU3LjAwMSBBIDI0OC42NDQgMjQ4LjY0NCAwIDAgMCAyNDMuNTA4IDUwLjA1MiBRIDI0Ny42MTIgNDYuNjg4IDI1MC45ODggNDMuNTY1IEEgMTExLjEzMSAxMTEuMTMxIDAgMCAwIDI1NS44IDM4Ljg1MSBRIDI2MC40MjUgMzQuMDE5IDI2Mi4zMDcgMjkuNTU2IEEgMTUuMjcyIDE1LjI3MiAwIDAgMCAyNjMuNiAyMy42MDEgQSA4LjgwNiA4LjgwNiAwIDAgMCAyNjMuNDkyIDIyLjE3NiBRIDI2My4yNjQgMjAuNzg0IDI2Mi41NSAxOS45MDEgUSAyNjEuNSAxOC42MDEgMjU5LjggMTguNjAxIEEgMy4yNTggMy4yNTggMCAwIDAgMjU3LjE5NCAxOS44NTIgQSA1LjI2MyA1LjI2MyAwIDAgMCAyNTYuNjUgMjAuNjUxIFEgMjU1LjUgMjIuNzAxIDI1NS44IDI2LjkwMSBaIE0gMTcxLjIgMy45MDEgTCAyMzAuOCAzLjkwMSBMIDIzMC44IDIxLjUwMSBMIDIxMiAyMS41MDEgTCAyMTIgNzQuNzAxIEwgMTg5LjggNzQuNzAxIEwgMTg5LjggMjEuNTAxIEwgMTcxLjIgMjEuNTAxIEwgMTcxLjIgMy45MDEgWiBNIDMyNC45IDYzLjcwMSBMIDI5My42IDYzLjcwMSBMIDI5My42IDQ1LjIwMSBMIDMyMy40IDIuNzAxIEwgMzQ3LjMgMi43MDEgTCAzNDcuMyA0NC41MDEgTCAzNTQuNSA0NC41MDEgTCAzNTQuNSA2My43MDEgTCAzNDcuMyA2My43MDEgTCAzNDcuMyA3NC43MDEgTCAzMjQuOSA3NC43MDEgTCAzMjQuOSA2My43MDEgWiBNIDUyLjkgNDIuMTAxIEwgNTQuOSAzMi42MDEgTCA0MSAzMi42MDEgTCAzOSA0Mi4xMDEgTCA1Mi45IDQyLjEwMSBaIE0gMzI2LjcgNDQuNTAxIEwgMzI2LjcgMjguMDAxIEwgMzE1LjkgNDQuNTAxIEwgMzI2LjcgNDQuNTAxIFoiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIvPjwvZz48L3N2Zz4=);
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  mask-position: center;
+
+  animation: morph 10s infinite alternate;
+
+  video {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    max-height: 45vh;
+    transition: transform 200ms ease;
+  }
+}

src/components/atoms/VideoMasked/index.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useRef, useState } from 'react';
+import VideoMaskedProps from './index.types';
+import * as styles from './index.module.scss';
+import BoscoCoste from '../../../assets/video/bosco_coste_forward.mp4';
+import ShowOnView from '../ShowOnView';
+
+const VideoMasked = ({}: VideoMaskedProps) => {
+  const [loadVideo, setLoadVideo] = useState<boolean>(false);
+
+  useEffect(() => {
+    setLoadVideo(true);
+  }, []);
+
+  return (
+    <ShowOnView className={styles.videoWrap}>
+      <video height={500} muted autoPlay controls={false} loop playsInline>
+        {loadVideo ? <source src={BoscoCoste} type="video/mp4" /> : <></>}
+        Your browser doesn't support video tag
+      </video>
+    </ShowOnView>
+  );
+};
+
+export default VideoMasked;

src/components/atoms/VideoMasked/index.types.ts

@@ -0,0 +1,3 @@
+export default interface VideoMaskedProps {
+
+}

src/components/molecules/ContattaciBody/index.module.scss

@@ -4,7 +4,7 @@
   flex-direction: row;
   flex-wrap: wrap;
   gap: 40px 20px;
-  margin-top: 100px;
+  margin: 100px 0;
   align-items: center;
   justify-content: center;
 }

src/components/molecules/FlyingInsects/index.module.scss

@@ -6,7 +6,7 @@
   overflow-y: hidden;
   width: 100vw;
   height: 100vh;
-  z-index: -1;
+  // z-index: -1;
 }
 
 .zen {

src/components/molecules/FlyingInsects/index.tsx

@@ -1,14 +1,13 @@
 import React, { Suspense, lazy, useEffect, useState } from 'react';
 import FlyingInsect from '../../atoms/FlyingInsect';
 import * as styles from './index.module.scss';
-// import Flocking from '../../atoms/Flocking';
+import Flocking from '../../atoms/Flocking';
 import detectBrowser from '../../../utilities/detectBrowser';
 
 // const isBrowser = typeof window !== 'undefined';
 
 const Index = () => {
-  const Flocking = lazy(() => import('../../atoms/Flocking'));
-  // const [animate, setAnimate] = useState<boolean>(false);
+  const [animate, setAnimate] = useState<boolean>(false);
   // const [catched, setCatched] = useState<number>(0);
   // const handleClick = () => setCatched((old) => old + 1);
 
@@ -51,13 +50,11 @@ const Index = () => {
       <FlyingInsect top={50} onClick={handleClick} />
       <FlyingInsect top={70} onClick={handleClick} />
       <FlyingInsect top={20} onClick={handleClick} /> */}
-      {/* <button className={styles.zen} onClick={() => setAnimate((a) => !a)}>
+      <button className={styles.zen} onClick={() => setAnimate((a) => !a)}>
         Animate Background
-      </button> */}
-      {/* {animate ? <Flocking /> : <></>} */}
-      <Suspense>
-        <Flocking />
-      </Suspense>
+      </button>
+      {animate ? <Flocking /> : <></>}
+      {/* <Flocking /> */}
     </div>
   );
 };

src/components/molecules/Footer/index.tsx

@@ -34,7 +34,7 @@ const Index = () => {
                 </Link>
               ))}
           </div>
-          <div className={styles.links}>
+          {/* <div className={styles.links}>
             {links(language)
               .filter((l) => l.multiple)
               .map((link) =>
@@ -44,7 +44,7 @@ const Index = () => {
                   </Link>
                 ))
               )}
-          </div>
+          </div> */}
         </div>
       </div>
       <div className={styles.bottom}>