feat: add logo component supporting srcSet

Author: Cezar Sampaio

src/components/footer.js

@@ -3,6 +3,7 @@ import is from 'prop-types';
 import styled from '@emotion/styled';
 import { Link } from 'gatsby';
 import Wrap from './wrap';
+import Logo from './logo';
 
 const FooterContainer = styled.footer`
   margin-top: 32px;
@@ -65,7 +66,7 @@ export default function Footer(props) {
       <FooterContainer>
         <LogoContainer>
           <Link to="/">
-            <img src={props.logoUrl} alt={props.logoDescription} />
+            <Logo />
           </Link>
         </LogoContainer>
 
@@ -100,8 +101,6 @@ export default function Footer(props) {
 }
 
 Footer.propTypes = {
-  logoUrl: is.string.isRequired,
-  logoDescription: is.string.isRequired,
   links: is.arrayOf(
     is.shape({
       url: is.string.isRequired,

src/components/header.js

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { Link } from 'gatsby';
 import Wrap from './wrap';
 import { HamburgerIcon, CloseIcon } from './icons';
+import Logo from './logo';
 
 const HeaderWrap = styled(Wrap)`
   margin-bottom: 12px;
@@ -110,14 +111,12 @@ export default function Header(props) {
     setIsMenuOpened(false);
   }
 
-  function renderLogo() {
-    return <img src={props.logoUrl} alt={props.logoDescription} />;
-  }
-
   return (
     <HeaderWrap>
       <HeaderContainerDesktop>
-        <Link to="/">{renderLogo()}</Link>
+        <Link to="/">
+          <Logo />
+        </Link>
         <LinksNav>
           {props.links.map((link, index) => (
             <Anchor
@@ -134,7 +133,9 @@ export default function Header(props) {
 
       <HeaderContainerMobile>
         <div>
-          <Link to="/">{renderLogo()}</Link>
+          <Link to="/">
+            <Logo />
+          </Link>
         </div>
 
         <HamburgerIcon onClick={openMenu} />
@@ -146,7 +147,7 @@ export default function Header(props) {
         <MobileContainer>
           <MobileMenuLogoContainer>
             <Link to="/" onClick={closeMenu}>
-              {renderLogo()}
+              <Logo />
             </Link>
             <CloseIcon onClick={closeMenu} />
           </MobileMenuLogoContainer>
@@ -171,8 +172,6 @@ export default function Header(props) {
 }
 
 Header.propTypes = {
-  logoUrl: is.string.isRequired,
-  logoDescription: is.string.isRequired,
   links: is.arrayOf(
     is.shape({
       url: is.string.isRequired,

src/components/logo.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import useSiteSettings from '../hooks/useSiteSettings';
+
+export default function Logo() {
+  const { logo } = useSiteSettings();
+
+  if (!logo?.fixed?.src) return null;
+
+  return (
+    <img
+      src={logo?.fixed?.src}
+      alt={logo?.title}
+      srcSet={logo?.fixed?.srcSet}
+      width={logo?.fixed?.width}
+      height={logo?.fixed?.height}
+    />
+  );
+}

src/hooks/useSiteSettings.js

@@ -17,6 +17,9 @@ export default function useSiteSettings() {
             title
             fixed(width: 160) {
               src
+              srcSet
+              width
+              height
             }
           }
           googleAnalyticsId

src/templates/layout.js

@@ -34,11 +34,7 @@ export default function Layout(props) {
   return (
     <>
       <UpperContainer>
-        <Header
-          links={settings.headerLinks}
-          logoUrl={settings.logo.fixed.src}
-          logoDescription={settings.logo.title}
-        />
+        <Header links={settings.headerLinks} />
 
         {props.withSearch && (
           <SearchContainer>
@@ -51,11 +47,7 @@ export default function Layout(props) {
 
       <Wrap>{props.children}</Wrap>
 
-      <Footer
-        links={settings.headerLinks}
-        logoUrl={settings.logo.fixed.src}
-        logoDescription={settings.logo.title}
-      />
+      <Footer links={settings.headerLinks} />
 
       <CookieConsent />