add gatsby-plugin-react-svg & enhance Footer

`npm i --save gatsby-plugin-react-svg`

gatsby-config.js

@@ -80,5 +80,13 @@ module.exports = {
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     `gatsby-plugin-offline`,
+    {
+      resolve: "gatsby-plugin-react-svg",
+      options: {
+        rule: {
+          include: /\.inline\.svg$/,
+        },
+      },
+    },
   ],
 }

package.json

@@ -16,6 +16,7 @@
     "gatsby-plugin-manifest": "^2.4.17",
     "gatsby-plugin-offline": "^3.2.16",
     "gatsby-plugin-react-helmet": "^3.3.9",
+    "gatsby-plugin-react-svg": "^3.0.0",
     "gatsby-plugin-sharp": "^2.6.17",
     "gatsby-plugin-styled-components": "^3.3.9",
     "gatsby-plugin-typography": "^2.5.9",

src/components/footer.js

@@ -0,0 +1,61 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+import styled from "styled-components"
+import TwitterLogo from "../../content/assets/social-media-icons/twitter.inline.svg"
+
+const StyledFooter = styled.footer`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  grid-column-gap: 1.2rem;
+  grid-row-gap: 0.5rem;
+  font-size: 0.8em;
+  div {
+    display: flex;
+    > * {
+      margin: auto;
+      box-shadow: none;
+    }
+    svg {
+      display: block;
+      fill: currentColor;
+      transition: 1.2s;
+    }
+    a:hover svg {
+      fill: black;
+      transition: 1.2s;
+    }
+  }
+`
+const Footer = ({ className }) => {
+  const data = useStaticQuery(graphql`
+    query LayoutQuery {
+      site {
+        siteMetadata {
+          social {
+            twitter
+          }
+        }
+      }
+    }
+  `)
+  const twitter = data.site.siteMetadata.social.twitter
+
+  return (
+    <StyledFooter className={className}>
+      <div>
+        <a
+          href={`https://twitter.com/${twitter}`}
+          aria-label={`Follow ${twitter} on Twitter`}
+        >
+          <TwitterLogo width="36" height="36" />
+        </a>
+      </div>
+      <div>
+        <p>Copyright © {new Date().getFullYear()} </p>
+      </div>
+    </StyledFooter>
+  )
+}
+
+
+export default Footer

src/components/layout.js

@@ -1,6 +1,7 @@
 import React from "react"
-import { Link, useStaticQuery, graphql } from "gatsby"
+import { Link } from "gatsby"
 import styled from "styled-components"
+import Footer from "./footer"
 import { rhythm, scale, cssVariables } from "../utils/typography"
 
 const { brandColor } = cssVariables
@@ -32,23 +33,18 @@ const H3 = styled.h3`
   margin-top: 0;
 `
 const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
   margin-left: auto;
   margin-right: auto;
   max-width: ${rhythm(24)};
   padding: ${rhythm(1.5)} ${rhythm(3 / 4)};
 `
+const Main = styled.main`
+  flex: 1;
+`
 const Layout = ({ location, title, children }) => {
-  const data = useStaticQuery(graphql`
-    query LayoutQuery {
-      site {
-        siteMetadata {
-          social {
-            twitter
-          }
-        }
-      }
-    }
-  `)
   const rootPath = `${__PATH_PREFIX__}/`
   let header
   let navbar = (
@@ -85,16 +81,8 @@ const Layout = ({ location, title, children }) => {
   return (
     <Container>
       <header>{header}</header>
-      <main>{children}</main>
-      <footer>
-        © {new Date().getFullYear()}, Built with care and attention, by
-        {` `}
-        <a
-          href={`https://twitter.com/${data.site.siteMetadata.social.twitter}`}
-        >
-          Antonio
-        </a>
-      </footer>
+      <Main>{children}</Main>
+      <Footer />
     </Container>
   )
 }

src/pages/about.js

@@ -14,9 +14,21 @@ const AboutPage = ({ location, data }) => {
   return (
     <Layout location={location} title={siteTitle}>
       <div>
-        <H1>About</H1>
-        <p>Our brand.</p>
-        <p>Our team.</p>
+        <H1> About </H1>
+        <p> Our brand. </p>
+        <p> Our team. </p>
+        <h2> This site. </h2>
+        <p>
+          Twitter Icon made by{" "}
+          <a href="https://www.flaticon.com/authors/freepik" title="Freepik">
+            Freepik
+          </a>{" "}
+          from{" "}
+          <a href="https://www.flaticon.com/" title="Flaticon">
+            {" "}
+            www.flaticon.com
+          </a>
+        </p>
         <p>
           Go {` `}
           <Link to="/">back to the homepage</Link>.