page template

src/pages/404.jsx

@@ -1,20 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
-import Layout from '../components/Layout'
+import Page from '../templates/Page'
 import styles from './404.module.scss'
 
-const NotFound = ({ location }) => (
-  <Layout location={location}>
+const NotFound = () => (
+  <Page title="404 - Not Found">
     <div className={styles.hal9000} />
 
     <div className={styles.wrapper}>
-      <h1 className={styles.title}>I am sorry Dave,</h1>
-      <p className={styles.text}>I am afraid I can not do that.</p>
-
+      {/* eslint-disable-next-line quotes */}
+      <h1 className={styles.title}>{"I'm sorry Dave"}</h1>{' '}
+      {/* eslint-disable-next-line quotes */}
+      <p className={styles.text}>{"I'm afraid I can't do that"}</p>
       <Link to={'/'}>Back to homepage</Link>
     </div>
-  </Layout>
+  </Page>
 )
 
 NotFound.propTypes = {

src/pages/404.module.scss

@@ -2,6 +2,7 @@
 
 .wrapper {
     text-align: center;
+    margin-bottom: $spacer * 4;
 }
 
 .title {

src/pages/goodies.jsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { graphql, Link } from 'gatsby'
-import Layout from '../components/Layout'
 import Image from '../components/atoms/Image'
+import Page from '../templates/Page'
 
 import styles from './goodies.module.scss'
 
-const Goodies = ({ data, location }) => {
+const Goodies = ({ data }) => {
   const edges = data.goodies.edges
 
   const GoodiesThumbs = edges.map(({ node }) => {
@@ -28,10 +28,9 @@ const Goodies = ({ data, location }) => {
   })
 
   return (
-    <Layout location={location}>
-      <h1 className={styles.pageTitle}>Goodies</h1>
+    <Page title="Goodies">
       <section className={styles.goodies}>{GoodiesThumbs}</section>
-    </Layout>
+    </Page>
   )
 }
 

src/pages/goodies.module.scss

@@ -15,11 +15,6 @@
     }
 }
 
-.pageTitle {
-    composes: archiveTitle from '../templates/Posts.module.scss';
-    margin-bottom: $spacer * 2;
-}
-
 .title {
     font-size: $font-size-h3;
     color: $brand-grey;

src/pages/photos.jsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { graphql, Link } from 'gatsby'
-import Layout from '../components/Layout'
 import Image from '../components/atoms/Image'
+import Page from '../templates/Page'
 
 import styles from './photos.module.scss'
 
-const Photos = ({ data, location }) => {
+const Photos = ({ data }) => {
   const edges = data.photos.edges
 
   const PhotoThumbs = edges.map(({ node }) => {
@@ -25,10 +25,9 @@ const Photos = ({ data, location }) => {
   })
 
   return (
-    <Layout location={location}>
-      <h1 className={styles.pageTitle}>Photos</h1>
+    <Page title="Photos">
       <section className={styles.photos}>{PhotoThumbs}</section>
-    </Layout>
+    </Page>
   )
 }
 

src/pages/photos.module.scss

@@ -17,8 +17,3 @@
         display: block;
     }
 }
-
-.pageTitle {
-    composes: archiveTitle from '../templates/Posts.module.scss';
-    margin-bottom: $spacer * 2;
-}

src/templates/Page.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Layout from '../components/Layout'
+
+import styles from './Page.module.scss'
+
+const Page = ({ title, location, children }) => {
+  return (
+    <Layout location={location}>
+      <h1 className={styles.pageTitle}>{title}</h1>
+      {children}
+    </Layout>
+  )
+}
+
+Page.propTypes = {
+  location: PropTypes.object,
+  children: PropTypes.any.isRequired,
+  title: PropTypes.string.isRequired
+}
+
+export default Page

src/templates/Page.module.scss

@@ -0,0 +1,6 @@
+@import 'variables';
+
+.pageTitle {
+    composes: archiveTitle from '../templates/Posts.module.scss';
+    margin-bottom: $spacer * 2;
+}