refactor pages to use the Gatsby Head API

Author: marvinjude

package-lock.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "gatsby": "^4.0.0",
+    "gatsby": "^4.19.0",
     "gatsby-plugin-image": "^2.0.0",
     "gatsby-plugin-mdx": "^3.0.0",
     "gatsby-plugin-sharp": "^4.0.0",

package.json

@@ -22,7 +22,6 @@ const Layout = ({ pageTitle, children }) => {
 
   return (
     <div className={container}>
-      <title>{pageTitle} | {data.site.siteMetadata.title}</title>
       <header className={siteTitle}>{data.site.siteMetadata.title}</header>
       <nav>
         <ul className={navLinks}>

src/components/layout.js

@@ -28,7 +28,6 @@ const codeStyles = {
 const NotFoundPage = () => {
   return (
     <main style={pageStyles}>
-      <title>Not found</title>
       <h1 style={headingStyles}>Page not found</h1>
       <p style={paragraphStyles}>
         Sorry{" "}
@@ -51,4 +50,6 @@ const NotFoundPage = () => {
   )
 }
 
+export const Head = () => <title>Not found</title>
+
 export default NotFoundPage

src/pages/404.js

@@ -9,4 +9,6 @@ const AboutPage = () => {
   )
 }
 
+export const Head = () => <title>About Me</title>
+
 export default AboutPage

src/pages/about.js

@@ -35,5 +35,6 @@ export const query = graphql`
     }
   }
 `
+export const Head = () => <title>My Blog Posts</title>
 
 export default BlogPage

src/pages/blog/index.js

@@ -47,4 +47,6 @@ export const query = graphql`
   }
 `
 
+export const Head = ({ data }) => <title>{data.mdx.frontmatter.title}</title>
+
 export default BlogPost

src/pages/blog/{mdx.slug}.js

@@ -14,4 +14,6 @@ const IndexPage = () => {
   )
 }
 
+export const Head = () => <title>Home Page</title>
+
 export default IndexPage