Improve build speed

gatsby-config.js

@@ -38,7 +38,6 @@ if (env.errors) {
       'gatsby-transformer-sharp',
       'gatsby-transformer-remark',
       'gatsby-plugin-root-import',
-      'gatsby-transformer-inline-svg',
       {
         resolve: `gatsby-source-contentful`,
         options: {

package.json

@@ -49,7 +49,6 @@
     "gatsby-plugin-well-known": "^1.0.0",
     "gatsby-source-contentful": "^8.13.2",
     "gatsby-source-filesystem": "^5.0.0",
-    "gatsby-transformer-inline-svg": "^1.1.0",
     "gatsby-transformer-remark": "^6.9.0",
     "gatsby-transformer-sharp": "^5.12.3",
     "gl-matrix": "^3.4.3",
@@ -95,7 +94,7 @@
     "jest": "^29.7.0",
     "p-whilst": "^2.0.0",
     "prettier": "^1.15.2",
-    "puppeteer": "^21.7.0",
+    "puppeteer": "^23.3.1",
     "stylelint": "^14.16.1",
     "stylelint-config-property-sort-order-smacss": "^9.1.0",
     "stylelint-config-recommended": "^9.0.0",

src/components/Contentful/ContentfulLayoutFooter.js

@@ -11,9 +11,6 @@ const ContentfulLayoutFooter = props => {
   return (
     <Footer
       logo={logo}
-      logoTitle={logo.title}
-      logoUrl={logo.logo.file.url}
-      logoSvg={logo.logo.svg}
       menus={menuItems}
       copyright={copyright}
       previewMode={previewMode}
@@ -45,6 +42,11 @@ const parsePreviewData = data => {
                 url: data.logo.logo?.url,
               },
             },
+            logoDarkMode: {
+              file: {
+                url: data.logo.logoDarkMode?.url,
+              },
+            },
           }
         : undefined,
     },

src/components/Contentful/ContentfulLayoutHeader.js

@@ -56,6 +56,7 @@ const parsePreviewData = data => {
     }
   })
   menuItems = !isEmpty(menuItems) ? menuItems : undefined
+
   const dataUpdate = {
     moduleConfig: {
       previewMode: true,
@@ -64,7 +65,12 @@ const parsePreviewData = data => {
             title: data.logo.title,
             logo: {
               file: {
-                url: data.logo.logo.url,
+                url: data.logo.logo?.url,
+              },
+            },
+            logoDarkMode: {
+              file: {
+                url: data.logo.logoDarkMode?.url,
               },
             },
           }

src/components/Footer.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import styled from 'styled-components'
+import ContextClientSide from '../Context/ContextClientSide'
 import { contentfulModuleToComponent } from '../lib/utils/moduleToComponent'
 import Link from './Link'
 import Wrapper from './ContentWrapper'
@@ -10,7 +11,10 @@ import { GB_BLOCKED_PATHS } from '../lib/config.mjs'
 import { useIsUKBlocked } from '../hooks/useIsUKBlocked'
 
 const StyledFooter = props => {
-  const { menus, copyright, logoTitle, logoUrl, logoSvg, previewMode } = props
+  const { menus, copyright, logo, previewMode } = props
+
+  const { darkMode: darkModeContextValue } = useContext(ContextClientSide)
+  const { isDarkMode } = darkModeContextValue || {}
 
   const [filteredMenus, setFilteredMenus] = useState(menus)
 
@@ -27,6 +31,9 @@ const StyledFooter = props => {
     setFilteredMenus(filteredMenus)
   }, [isUKBlocked, menus])
 
+  const footerLogo =
+    isDarkMode && logo?.logoDarkMode ? logo.logoDarkMode : logo?.logo
+
   return (
     <FooterContainer>
       <Wrapper
@@ -36,18 +43,11 @@ const StyledFooter = props => {
         <FooterInner>
           <LogoContainer>
             <Link to="/" aria-label="Go to the home page">
-              <LogoWrapper>
-                {logoSvg?.content ? (
-                  <div
-                    className="logoMetamaskSvg"
-                    dangerouslySetInnerHTML={{
-                      __html: logoSvg?.content,
-                    }}
-                  />
-                ) : (
-                  <Logo src={logoUrl} alt={logoTitle} />
-                )}
-              </LogoWrapper>
+              {footerLogo?.file ? (
+                <LogoWrapper>
+                  <Logo src={footerLogo.file.url} alt={footerLogo.title} />
+                </LogoWrapper>
+              ) : null}
             </Link>
           </LogoContainer>
           <ColumnWrapper columns={filteredMenus?.length}>

src/components/Header.js

@@ -27,14 +27,7 @@ import { useCountry } from '../hooks/useCountry'
 
 const StyledHeader = props => {
   const {
-    logo: {
-      title: titleLogo,
-      logo: {
-        file: { url: srcLogo },
-        svg: svgLogo,
-      },
-      widthLogo,
-    },
+    logo,
     logoMobile,
     menus,
     downloadButton,
@@ -167,6 +160,13 @@ const StyledHeader = props => {
     }
   }, [isUKBlocked, country, pathname, locale, menus])
 
+  const desktopLogo =
+    isDarkMode && logo?.logoDarkMode ? logo.logoDarkMode : logo?.logo
+  const mobileLogo =
+    isDarkMode && logoMobile?.logoDarkMode
+      ? logoMobile.logoDarkMode
+      : logoMobile?.logo
+
   return (
     <HeaderElement ref={headerRef} className={classnames({ sticky: isSticky })}>
       <Announcement>
@@ -178,46 +178,28 @@ const StyledHeader = props => {
       <HeaderContainer>
         <LogoContainer>
           <Link to="/" aria-label="Go to home page">
-            {srcLogo ? (
+            {desktopLogo?.file ? (
               <LogoWrapper
                 className={classnames({
                   'hidden-mobile': logoMobile,
                 })}
               >
-                {svgLogo?.content ? (
-                  <div
-                    className="logoMetamaskSvg"
-                    dangerouslySetInnerHTML={{
-                      __html: svgLogo?.content,
-                    }}
-                  />
-                ) : (
-                  <Logo
-                    src={srcLogo}
-                    alt={titleLogo}
-                    $widthCustom={widthLogo}
-                  />
-                )}
+                <Logo
+                  src={desktopLogo.file.url}
+                  alt={desktopLogo.title}
+                  $widthCustom={desktopLogo.widthLogo}
+                />
               </LogoWrapper>
             ) : null}
-            {logoMobile ? (
+            {mobileLogo?.file ? (
               <LogoWrapper className={classnames('hidden-desktop')}>
-                {logoMobile.logo.svg?.content ? (
-                  <div
-                    className="logoMetamaskSvg"
-                    dangerouslySetInnerHTML={{
-                      __html: logoMobile.logo.svg?.content,
-                    }}
-                  />
-                ) : (
-                  <Logo
-                    src={logoMobile.logo.file.url}
-                    alt={logoMobile.title}
-                    $widthCustom={logoMobile.widthLogo}
-                    width={logoMobile.logo.gatsbyImageData.width}
-                    height={logoMobile.logo.gatsbyImageData.height}
-                  />
-                )}
+                <Logo
+                  src={mobileLogo.file.url}
+                  alt={mobileLogo.title}
+                  $widthCustom={mobileLogo.widthLogo}
+                  width={mobileLogo.gatsbyImageData?.width}
+                  height={mobileLogo.gatsbyImageData?.height}
+                />
               </LogoWrapper>
             ) : null}
           </Link>

src/components/Link.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { useContext } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { DEFAULT_LOCALE_CODE } from '../lib/config.mjs'
 import ContextClientSide from '../Context/ContextClientSide'
 import Context from '../Context/ContextPage'
@@ -18,11 +18,12 @@ const DefaultLink = props => {
   const { localization } = useContext(ContextClientSide)
   const { localizedPages } = useContext(Context)
   const { locale } = localization || {}
-  if (!to) {
+  const [href, setHref] = useState(to)
+
+  if (!href) {
     return <div {...rest}>{children}</div>
   }
 
-  let href = to
   const isAnchorLink = href.startsWith('#')
   if (isAnchorLink) {
     newTab = false
@@ -36,12 +37,14 @@ const DefaultLink = props => {
     rel: newTab ? 'noopener' : null,
   }
 
-  if (localizedPages && localizedPages.includes(href)) {
-    const localeCode = locale?.code
-    if (localeCode && localeCode !== DEFAULT_LOCALE_CODE) {
-      href = `/${localeCode}${to}`
+  useEffect(() => {
+    if (localizedPages && localizedPages.includes(href)) {
+      const localeCode = locale?.code
+      if (localeCode && localeCode !== DEFAULT_LOCALE_CODE) {
+        setHref(`/${localeCode}${to}`)
+      }
     }
-  }
+  }, [to, localizedPages, locale])
 
   return isInternal ? (
     <Link

src/components/PortfolioPage/Layout/PortfolioFooter.js

@@ -149,16 +149,12 @@ const PortfolioFooter = props => {
           <ContentInner>
             <LeftColumn>
               <LeftColumnInner>
-                {logo?.logo?.svg?.content ? (
-                  <div
-                    dangerouslySetInnerHTML={{ __html: logo.logo.svg.content }}
-                  />
-                ) : (
+                {logo ? (
                   <img
-                    src={previewMode ? logo?.logo?.url : logo?.file?.url}
+                    src={previewMode ? logo.logo?.url : logo.logo?.file?.url}
                     alt={logo.title}
                   />
-                )}
+                ) : null}
                 <PortfolioLinkWrapper>
                   <PortfolioLink to={logo.link} newTab={logo.newTab}>
                     {logo.title}

src/components/PortfolioPage/Layout/PortfolioHeader.js

@@ -25,18 +25,9 @@ const PortfolioHeader = props => {
       <LogoWrapper>
         <Link to="/" aria-label="Go to Homepage">
           <ButtonShadow as="div" short>
-            {logo?.svg?.content ? (
-              <LogoSvgWrapper
-                dangerouslySetInnerHTML={{
-                  __html: logo.svg.content,
-                }}
-              />
-            ) : (
-              <Logo
-                src={previewMode ? logo?.url : logo?.file?.url}
-                alt={title}
-              />
-            )}
+            {logo ? (
+              <Logo src={previewMode ? logo.url : logo.file?.url} alt={title} />
+            ) : null}
           </ButtonShadow>
         </Link>
       </LogoWrapper>

src/components/layout.scss

@@ -1241,10 +1241,6 @@ figcaption {
   }
 }
 
-.logoMetamaskSvg {
-  width: 100%;
-}
-
 body {
   transition: background 0.3s ease;
 
@@ -1327,14 +1323,6 @@ body.dark-mode {
     background-color: #393e46;
   }
 
-  .logoMetamaskSvg {
-    svg {
-      path:nth-child(1) {
-        fill: #fff;
-      }
-    }
-  }
-
   .logoSvg {
     svg {
       path {

src/fragments/ContentfulContent.js

@@ -719,13 +719,6 @@ export const ContentfulLogoFields = graphql`
     logo {
       title
       description
-      svg {
-        content # SVG content optimized with SVGO
-        originalContent # Original SVG content
-        dataURI # Optimized SVG as compact dataURI
-        absolutePath #
-        relativePath #
-      }
       file {
         url
       }
@@ -734,13 +727,6 @@ export const ContentfulLogoFields = graphql`
     logoDarkMode {
       title
       description
-      svg {
-        content # SVG content optimized with SVGO
-        originalContent # Original SVG content
-        dataURI # Optimized SVG as compact dataURI
-        absolutePath #
-        relativePath #
-      }
       file {
         url
       }