updating page meta information

gatsby-config.js

@@ -8,6 +8,7 @@ module.exports = {
   /* Your site config here */
   plugins: [
     `gatsby-plugin-sass`,
+    `gatsby-plugin-react-helmet`,
 
     {
       resolve: "gatsby-source-prismic",
@@ -28,7 +29,6 @@ module.exports = {
           use_cases_page: require("./src/schemas/use_cases_page.json"),
           use_case: require("./src/schemas/use_case.json"),
           About: require("./src/schemas/About.json"),
-
         },
         typePathsFilenamePrefix: "prismic-typepaths---powerhouse-site",
       },

package.json

@@ -23,6 +23,7 @@
     "gatsby-cli": "^3.4.0",
     "gatsby-plugin-exclude": "^1.0.2",
     "gatsby-plugin-netlify-headers": "^1.0.1",
+    "gatsby-plugin-react-helmet": "^4.6.0",
     "gatsby-plugin-react-svg": "^3.0.0",
     "gatsby-plugin-sass": "^4.4.0",
     "gatsby-plugin-sharp": "^3.4.0",

src/components/about/about.js

@@ -99,7 +99,7 @@ export default function About({ data }) {
                 </IndustryContextExamples>
 
                 <ComparisonCTA>
-                  <a href={data.cta_button_destination.url}>
+                  <a href="/process">
                     {data.cta_button_text}
                   </a>
                 </ComparisonCTA>

src/components/layout.js

@@ -3,6 +3,8 @@ import styled from "@emotion/styled"
 import Footer from "../components/footer/footer"
 import Header from "../components/header/header"
 import dimensions from "../style/dimensions"
+import favicon from "../images/favicon.ico"
+import Helmet from "react-helmet"
 import "../style/global.scss"
 import "../style/typography.scss"
 import { layoutPaddingDesktop, layoutPaddingMobile } from "../style/variables"
@@ -21,6 +23,9 @@ const LayoutBody = styled.div`
 const Layout = ({ children, home }) => {
   return (
     <LayoutContainer>
+      <Helmet>
+        <link rel="icon" href={favicon} />
+      </Helmet>
       <Header home={home} />
       <LayoutBody>{children}</LayoutBody>
       <Footer />

src/pages/about.js

@@ -4,11 +4,16 @@ import React from "react"
 import styled from "@emotion/styled"
 import dimensions from "../style/dimensions"
 import AboutPage from "../components/about/about"
+import { Helmet } from "react-helmet"
 
 export default function About({ data }) {
   const aboutData = data.prismicAboutPage.data
   return (
     <Layout>
+      <Helmet>
+        <meta charSet="utf-8" />
+        <title>About</title>
+      </Helmet>
       <AboutPage data={aboutData} />
     </Layout>
   )

src/pages/index.js

@@ -2,12 +2,17 @@ import React from "react"
 import { graphql } from "gatsby"
 import Layout from "../components/layout"
 import Homepage from "../components/homepage/index"
+import { Helmet } from "react-helmet"
 
 export default function Home({ data }) {
   const homepageData = data.prismicHomepage.data
 
   return (
     <Layout home={true}>
+      <Helmet>
+        <meta charSet="utf-8" />
+        <title>PowerHouse</title>
+      </Helmet>
       <Homepage data={homepageData} />
     </Layout>
   )

src/pages/process.js

@@ -2,12 +2,17 @@ import { graphql } from "gatsby"
 import Layout from "../components/layout"
 import React from "react"
 import ProcessComponent from "../components/process/process"
+import { Helmet } from "react-helmet"
 
 export default function Process({ data }) {
   const processData = data.prismicProcessPage.data
 
   return (
     <Layout>
+      <Helmet>
+        <meta charSet="utf-8" />
+        <title>Process</title>
+      </Helmet>
       <ProcessComponent data={data} />
     </Layout>
   )

src/pages/solutions.js

@@ -1,6 +1,7 @@
 import { graphql } from "gatsby"
 
 import React from "react"
+import { Helmet } from "react-helmet"
 
 import SolutionsComponent from "../components/solutions/solutions"
 import Layout from "../components/layout"
@@ -10,6 +11,10 @@ export default function UseCasesPage({ data }) {
 
   return (
     <Layout>
+      <Helmet>
+        <meta charSet="utf-8" />
+        <title>Solutions</title>
+      </Helmet>
       <SolutionsComponent data={data} />
     </Layout>
   )