feat: page titles

src/layout.js

@@ -89,7 +89,7 @@ const GlobalStyles = css`
   }
 `;
 
-export default function Layout({ location, children }) {
+export default function Layout({ location, title: pageTitle, children }) {
   const data = useStaticQuery(graphql`
     query HeaderQuery {
       site {
@@ -115,7 +115,7 @@ export default function Layout({ location, children }) {
     <>
       <main>
         <Helmet
-          title={title}
+          title={pageTitle ? `${pageTitle} : ${title}` : title}
           meta={[
             { name: "description", content: description },
             { name: "keywords", content: keywords }

src/pages/404.js

@@ -5,7 +5,7 @@ import { Header, Link, Section } from "../components";
 
 export default function Index({ data }) {
   return (
-    <Layout>
+    <Layout title="Page not found">
       <Header image={data.headerImage.childImageSharp.fluid}>
         <h2>404</h2>
       </Header>

src/pages/about.js

@@ -5,7 +5,7 @@ import { Header, Heading, Section, Text } from "../components";
 
 export default function Index({ data }) {
   return (
-    <Layout location="/about">
+    <Layout location="/about" title="About">
       <Header
         image={data.headerImage.childImageSharp.fluid}
         position="bottom right"

src/pages/area-covered.js

@@ -22,7 +22,7 @@ const triangleCoords = [
 
 export default function Index() {
   return (
-    <Layout location="/area-covered">
+    <Layout location="/area-covered" title="Area Covered">
       <Header
         map={
           <Map

src/pages/contact.js

@@ -52,7 +52,7 @@ export default function Index({ data }) {
       .catch(error => console.log(error));
   };
   return (
-    <Layout location="/contact">
+    <Layout location="/contact" title="Contact us">
       <Header
         image={data.headerImage.childImageSharp.fluid}
         position="bottom right"

src/pages/services/bathrooms/case-study-1.js

@@ -13,7 +13,7 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/bathrooms/case-study-1">
+    <Layout location="/services/bathrooms/case-study-1" title="Modern Bathroom Case Study">
       <Header image={images[0].full}>
         <Heading shadow="xl-black">Modern Bathroom</Heading>
         <Text size="lg">Maldon, Essex</Text>

src/pages/services/bathrooms/case-study-2.js

@@ -13,7 +13,7 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/bathrooms/case-study-2">
+    <Layout location="/services/bathrooms/case-study-2" title="Compact Bathroom Case Study">
       <Header image={images[0].full}>
         <Heading shadow="xl-black">Compact Bathroom</Heading>
         <Text size="lg">Hackney, London</Text>

src/pages/services/bathrooms/case-study-3.js

@@ -13,7 +13,7 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/bathrooms/case-study-3">
+    <Layout location="/services/bathrooms/case-study-3" title="Modest Shower Room Case Study">
       <Header image={images[0].full}>
         <Heading shadow="xl-black">Modest Shower Room</Heading>
         <Text size="lg">Location unknown</Text>

src/pages/services/bathrooms/case-study-4.js

@@ -13,7 +13,7 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/bathrooms/case-study-4">
+    <Layout location="/services/bathrooms/case-study-4" title="Period with a Modern Twist Case Study">
       <Header image={images[0].full}>
         <Heading shadow="xl-black">Period with a Modern Twist</Heading>
         <Text size="lg">Hampstead, London</Text>

src/pages/services/bathrooms/case-study-5.js

@@ -13,7 +13,7 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/bathrooms/case-study-5">
+    <Layout location="/services/bathrooms/case-study-5" title="En-suite Case Study">
       <Header image={images[0].full}>
         <Heading shadow="xl-black">En-suite</Heading>
         <Text size="lg">Chelmsford, Essex</Text>

src/pages/services/bathrooms/index.js

@@ -12,7 +12,7 @@ import {
 
 export default function Index({ data }) {
   return (
-    <Layout location="/services/bathrooms">
+    <Layout location="/services/bathrooms" title="Bathrooms">
       <Header image={data.headerImage.childImageSharp.fluid}>
         <Heading shadow="xl-white">Bathrooms</Heading>
       </Header>

src/pages/services/index.js

@@ -5,7 +5,7 @@ import { Card, Grid, Header, Heading, Section } from "../../components";
 
 export default function Index({ data }) {
   return (
-    <Layout location="/services">
+    <Layout location="/services" title="Services">
       <Header image={data.headerImage.childImageSharp.fluid}>
         <Heading shadow="xl-white">Services</Heading>
       </Header>

src/pages/services/tiling/case-study-1.js

@@ -13,7 +13,10 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/tiling/case-study-1">
+    <Layout
+      location="/services/tiling/case-study-1"
+      title="New Extension Case Study"
+    >
       <Header image={images[3].full}>
         <Heading shadow="xl-black">New Extension</Heading>
         <Text size="lg">Eltham, London</Text>

src/pages/services/tiling/case-study-2.js

@@ -13,7 +13,10 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/tiling/case-study-2">
+    <Layout
+      location="/services/tiling/case-study-2"
+      title="Ceramic Floor Tiles Case Study"
+    >
       <Header image={images[3].full}>
         <Heading shadow="xl-black">Ceramic Floor Tiles</Heading>
         <Text size="lg">Brentwood, Essex</Text>

src/pages/services/tiling/case-study-3.js

@@ -13,7 +13,10 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/tiling/case-study-3">
+    <Layout
+      location="/services/tiling/case-study-3"
+      title="Period Floor Tiles Case Study"
+    >
       <Header image={images[0].full}>
         <Heading shadow="xl-black">Period Floor Tiles</Heading>
         <Text size="lg">Barnes, London</Text>

src/pages/services/tiling/case-study-4.js

@@ -13,7 +13,7 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/tiling/case-study-4">
+    <Layout location="/services/tiling/case-study-4" title="Wood Effect Porcelain Case Study">
       <Header image={images[0].full}>
         <Heading shadow="xl-black">Wood Effect Porcelain</Heading>
         <Text size="lg">Charlton, London</Text>

src/pages/services/tiling/case-study-5.js

@@ -13,7 +13,7 @@ import {
 export default function Index({ data }) {
   const images = data.images.nodes.map(node => node.childImageSharp);
   return (
-    <Layout location="/services/tiling/case-study-5">
+    <Layout location="/services/tiling/case-study-5" title="Period Floor Tiles Case Study">
       <Header image={images[0].full}>
         <Heading shadow="xl-black">Period Floor Tiles</Heading>
         <Text size="lg">Chelsea, London</Text>

src/pages/services/tiling/index.js

@@ -12,7 +12,7 @@ import {
 
 export default function Index({ data }) {
   return (
-    <Layout location="/services/tiling">
+    <Layout location="/services/tiling" title="Tiling">
       <Header image={data.headerImage.childImageSharp.fluid}>
         <Heading shadow="xl-white">Tiling</Heading>
       </Header>