From 7d7916baf0e0dd69d085431a1e7b032af9004beb Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Sat, 5 Jan 2019 20:16:29 -0500
Subject: [PATCH] Applying Layout component in gatsby-browser

---
 gatsby-browser.js                             |   8 +
 gatsby-ssr.js                                 |   8 +
 .../Layout/__snapshots__/test.js.snap         | 264 -------
 src/components/Layout/index.js                |   7 +-
 src/components/Layout/test.js                 |   9 -
 .../Metadata/__snapshots__/test.js.snap       | 171 +++++
 src/components/Metadata/index.js              |  15 +
 src/components/Metadata/test.js               |  20 +
 src/pages/404.js                              |   7 +-
 src/pages/__snapshots__/404.test.js.snap      | 132 ++--
 src/pages/__snapshots__/index.test.js.snap    |  24 +-
 src/pages/__snapshots__/privacy.test.js.snap  | 654 +++++++++---------
 src/pages/index.js                            |   7 +-
 src/pages/privacy.js                          |   7 +-
 14 files changed, 684 insertions(+), 649 deletions(-)
 create mode 100644 gatsby-ssr.js
 create mode 100644 src/components/Metadata/__snapshots__/test.js.snap
 create mode 100644 src/components/Metadata/index.js
 create mode 100644 src/components/Metadata/test.js

diff --git a/gatsby-browser.js b/gatsby-browser.js
index 09a1cf8..34e0714 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -1,8 +1,16 @@
+import React from 'react';
 import * as Sentry from '@sentry/browser';
 
+import Layout from 'components/Layout';
+
 import 'site.css';
 
 export const onClientEntry = () => {
   Sentry.getCurrentHub().getClient().getOptions().enabled =
     (navigator.doNotTrack !== '1' && window.doNotTrack !== '1');
 };
+
+// eslint-disable-next-line react/prop-types
+export const wrapPageElement = ({ element }) => {
+  return <Layout>{ element }</Layout>;
+};
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
new file mode 100644
index 0000000..75ec661
--- /dev/null
+++ b/gatsby-ssr.js
@@ -0,0 +1,8 @@
+import React from 'react';
+
+import Layout from 'components/Layout';
+
+// eslint-disable-next-line react/prop-types
+export const wrapPageElement = ({ element }) => {
+  return <Layout>{ element }</Layout>;
+};
diff --git a/src/components/Layout/__snapshots__/test.js.snap b/src/components/Layout/__snapshots__/test.js.snap
index 55699cd..8a88786 100644
--- a/src/components/Layout/__snapshots__/test.js.snap
+++ b/src/components/Layout/__snapshots__/test.js.snap
@@ -20,14 +20,6 @@ ShallowWrapper {
     "nodeType": "class",
     "props": Object {
       "children": Array [
-        <HelmetWrapper
-          defer={true}
-          encodeSpecialCharacters={true}
-        >
-          <title>
-            Regexper
-          </title>
-        </HelmetWrapper>,
         <Header />,
         <SentryBoundary>
           Example content
@@ -37,31 +29,6 @@ ShallowWrapper {
     },
     "ref": null,
     "rendered": Array [
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "class",
-        "props": Object {
-          "children": <title>
-            Regexper
-          </title>,
-          "defer": true,
-          "encodeSpecialCharacters": true,
-        },
-        "ref": null,
-        "rendered": Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "Regexper",
-          },
-          "ref": null,
-          "rendered": "Regexper",
-          "type": "title",
-        },
-        "type": [Function],
-      },
       Object {
         "instance": null,
         "key": undefined,
@@ -101,14 +68,6 @@ ShallowWrapper {
       "nodeType": "class",
       "props": Object {
         "children": Array [
-          <HelmetWrapper
-            defer={true}
-            encodeSpecialCharacters={true}
-          >
-            <title>
-              Regexper
-            </title>
-          </HelmetWrapper>,
           <Header />,
           <SentryBoundary>
             Example content
@@ -118,229 +77,6 @@ ShallowWrapper {
       },
       "ref": null,
       "rendered": Array [
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "class",
-          "props": Object {
-            "children": <title>
-              Regexper
-            </title>,
-            "defer": true,
-            "encodeSpecialCharacters": true,
-          },
-          "ref": null,
-          "rendered": Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": "Regexper",
-            },
-            "ref": null,
-            "rendered": "Regexper",
-            "type": "title",
-          },
-          "type": [Function],
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "function",
-          "props": Object {},
-          "ref": null,
-          "rendered": null,
-          "type": [Function],
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "class",
-          "props": Object {
-            "children": "Example content",
-          },
-          "ref": null,
-          "rendered": "Example content",
-          "type": [Function],
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "function",
-          "props": Object {},
-          "ref": null,
-          "rendered": null,
-          "type": [Function],
-        },
-      ],
-      "type": [Function],
-    },
-  ],
-  Symbol(enzyme.__options__): Object {
-    "adapter": ReactSixteenAdapter {
-      "options": Object {
-        "enableComponentDidUpdateOnSetState": true,
-        "lifecycles": Object {
-          "componentDidUpdate": Object {
-            "onSetState": true,
-          },
-          "getDerivedStateFromProps": true,
-          "getSnapshotBeforeUpdate": true,
-          "setState": Object {
-            "skipsComponentDidUpdateOnNullish": true,
-          },
-        },
-      },
-    },
-  },
-}
-`;
-
-exports[`Layout rendering with a title 1`] = `
-ShallowWrapper {
-  Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <Layout
-    title="Testing"
-  >
-    Example content
-  </Layout>,
-  Symbol(enzyme.__renderer__): Object {
-    "batchedUpdates": [Function],
-    "getNode": [Function],
-    "render": [Function],
-    "simulateError": [Function],
-    "simulateEvent": [Function],
-    "unmount": [Function],
-  },
-  Symbol(enzyme.__node__): Object {
-    "instance": null,
-    "key": undefined,
-    "nodeType": "class",
-    "props": Object {
-      "children": Array [
-        <HelmetWrapper
-          defer={true}
-          encodeSpecialCharacters={true}
-        >
-          <title>
-            Regexper - Testing
-          </title>
-        </HelmetWrapper>,
-        <Header />,
-        <SentryBoundary>
-          Example content
-        </SentryBoundary>,
-        <Footer />,
-      ],
-    },
-    "ref": null,
-    "rendered": Array [
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "class",
-        "props": Object {
-          "children": <title>
-            Regexper - Testing
-          </title>,
-          "defer": true,
-          "encodeSpecialCharacters": true,
-        },
-        "ref": null,
-        "rendered": Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "Regexper - Testing",
-          },
-          "ref": null,
-          "rendered": "Regexper - Testing",
-          "type": "title",
-        },
-        "type": [Function],
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "function",
-        "props": Object {},
-        "ref": null,
-        "rendered": null,
-        "type": [Function],
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "class",
-        "props": Object {
-          "children": "Example content",
-        },
-        "ref": null,
-        "rendered": "Example content",
-        "type": [Function],
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "function",
-        "props": Object {},
-        "ref": null,
-        "rendered": null,
-        "type": [Function],
-      },
-    ],
-    "type": [Function],
-  },
-  Symbol(enzyme.__nodes__): Array [
-    Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "class",
-      "props": Object {
-        "children": Array [
-          <HelmetWrapper
-            defer={true}
-            encodeSpecialCharacters={true}
-          >
-            <title>
-              Regexper - Testing
-            </title>
-          </HelmetWrapper>,
-          <Header />,
-          <SentryBoundary>
-            Example content
-          </SentryBoundary>,
-          <Footer />,
-        ],
-      },
-      "ref": null,
-      "rendered": Array [
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "class",
-          "props": Object {
-            "children": <title>
-              Regexper - Testing
-            </title>,
-            "defer": true,
-            "encodeSpecialCharacters": true,
-          },
-          "ref": null,
-          "rendered": Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": "Regexper - Testing",
-            },
-            "ref": null,
-            "rendered": "Regexper - Testing",
-            "type": "title",
-          },
-          "type": [Function],
-        },
         Object {
           "instance": null,
           "key": undefined,
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
index a64c2eb..e653f1a 100644
--- a/src/components/Layout/index.js
+++ b/src/components/Layout/index.js
@@ -1,15 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Helmet } from 'react-helmet';
 
 import SentryBoundary from 'components/SentryBoundary';
 import Header from 'components/Header';
 import Footer from 'components/Footer';
 
-const Layout = ({ title, children }) => <SentryBoundary>
-  <Helmet>
-    <title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
-  </Helmet>
+const Layout = ({ children }) => <SentryBoundary>
   <Header />
   <SentryBoundary>
     { children }
@@ -18,7 +14,6 @@ const Layout = ({ title, children }) => <SentryBoundary>
 </SentryBoundary>;
 
 Layout.propTypes = {
-  title: PropTypes.string,
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node
diff --git a/src/components/Layout/test.js b/src/components/Layout/test.js
index 2f9b712..236f609 100644
--- a/src/components/Layout/test.js
+++ b/src/components/Layout/test.js
@@ -12,13 +12,4 @@ describe('Layout', () => {
     );
     expect(component).toMatchSnapshot();
   });
-
-  test('rendering with a title', () => {
-    const component = shallow(
-      <Layout title="Testing">
-        Example content
-      </Layout>
-    );
-    expect(component).toMatchSnapshot();
-  });
 });
diff --git a/src/components/Metadata/__snapshots__/test.js.snap b/src/components/Metadata/__snapshots__/test.js.snap
new file mode 100644
index 0000000..c8ea1dc
--- /dev/null
+++ b/src/components/Metadata/__snapshots__/test.js.snap
@@ -0,0 +1,171 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Metadata rendering 1`] = `
+ShallowWrapper {
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Metadata />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateError": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "class",
+    "props": Object {
+      "children": <title>
+        Regexper
+      </title>,
+      "defer": true,
+      "encodeSpecialCharacters": true,
+    },
+    "ref": null,
+    "rendered": Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": "Regexper",
+      },
+      "ref": null,
+      "rendered": "Regexper",
+      "type": "title",
+    },
+    "type": [Function],
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "class",
+      "props": Object {
+        "children": <title>
+          Regexper
+        </title>,
+        "defer": true,
+        "encodeSpecialCharacters": true,
+      },
+      "ref": null,
+      "rendered": Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": "Regexper",
+        },
+        "ref": null,
+        "rendered": "Regexper",
+        "type": "title",
+      },
+      "type": [Function],
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+        "lifecycles": Object {
+          "componentDidUpdate": Object {
+            "onSetState": true,
+          },
+          "getDerivedStateFromProps": true,
+          "getSnapshotBeforeUpdate": true,
+          "setState": Object {
+            "skipsComponentDidUpdateOnNullish": true,
+          },
+        },
+      },
+    },
+  },
+}
+`;
+
+exports[`Metadata rendering with a title 1`] = `
+ShallowWrapper {
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Metadata
+    title="Testing"
+  />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateError": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "class",
+    "props": Object {
+      "children": <title>
+        Regexper - Testing
+      </title>,
+      "defer": true,
+      "encodeSpecialCharacters": true,
+    },
+    "ref": null,
+    "rendered": Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": "Regexper - Testing",
+      },
+      "ref": null,
+      "rendered": "Regexper - Testing",
+      "type": "title",
+    },
+    "type": [Function],
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "class",
+      "props": Object {
+        "children": <title>
+          Regexper - Testing
+        </title>,
+        "defer": true,
+        "encodeSpecialCharacters": true,
+      },
+      "ref": null,
+      "rendered": Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": "Regexper - Testing",
+        },
+        "ref": null,
+        "rendered": "Regexper - Testing",
+        "type": "title",
+      },
+      "type": [Function],
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+        "lifecycles": Object {
+          "componentDidUpdate": Object {
+            "onSetState": true,
+          },
+          "getDerivedStateFromProps": true,
+          "getSnapshotBeforeUpdate": true,
+          "setState": Object {
+            "skipsComponentDidUpdateOnNullish": true,
+          },
+        },
+      },
+    },
+  },
+}
+`;
diff --git a/src/components/Metadata/index.js b/src/components/Metadata/index.js
new file mode 100644
index 0000000..7ff1200
--- /dev/null
+++ b/src/components/Metadata/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+
+const Metadata = ({ title }) => (
+  <Helmet>
+    <title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
+  </Helmet>
+);
+
+Metadata.propTypes = {
+  title: PropTypes.string
+};
+
+export default Metadata;
diff --git a/src/components/Metadata/test.js b/src/components/Metadata/test.js
new file mode 100644
index 0000000..e278829
--- /dev/null
+++ b/src/components/Metadata/test.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Metadata from 'components/Metadata';
+
+describe('Metadata', () => {
+  test('rendering', () => {
+    const component = shallow(
+      <Metadata />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with a title', () => {
+    const component = shallow(
+      <Metadata title="Testing" />
+    );
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/pages/404.js b/src/pages/404.js
index c0688d0..75b2626 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,12 +1,13 @@
 import React from 'react';
 
-import Layout from 'components/Layout';
+import Metadata from 'components/Metadata';
 import Message from 'components/Message';
 
-const ErrorPage = () => <Layout title="Page Not Found">
+const ErrorPage = () => <>
+  <Metadata title="Page Not Found" />
   <Message type="error" heading="404 Page Not Found">
     <p>The page you have requrested could not be found.</p>
   </Message>
-</Layout>;
+</>;
 
 export default ErrorPage;
diff --git a/src/pages/__snapshots__/404.test.js.snap b/src/pages/__snapshots__/404.test.js.snap
index 581937e..aee03da 100644
--- a/src/pages/__snapshots__/404.test.js.snap
+++ b/src/pages/__snapshots__/404.test.js.snap
@@ -17,51 +17,11 @@ ShallowWrapper {
     "key": undefined,
     "nodeType": "function",
     "props": Object {
-      "children": <Message
-        heading="404 Page Not Found"
-        type="error"
-      >
-        <p>
-          The page you have requrested could not be found.
-        </p>
-      </Message>,
-      "title": "Page Not Found",
-    },
-    "ref": null,
-    "rendered": Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "function",
-      "props": Object {
-        "children": <p>
-          The page you have requrested could not be found.
-        </p>,
-        "heading": "404 Page Not Found",
-        "type": "error",
-      },
-      "ref": null,
-      "rendered": Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": "The page you have requrested could not be found.",
-        },
-        "ref": null,
-        "rendered": "The page you have requrested could not be found.",
-        "type": "p",
-      },
-      "type": [Function],
-    },
-    "type": [Function],
-  },
-  Symbol(enzyme.__nodes__): Array [
-    Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "function",
-      "props": Object {
-        "children": <Message
+      "children": Array [
+        <Metadata
+          title="Page Not Found"
+        />,
+        <Message
           heading="404 Page Not Found"
           type="error"
         >
@@ -69,10 +29,22 @@ ShallowWrapper {
             The page you have requrested could not be found.
           </p>
         </Message>,
-        "title": "Page Not Found",
+      ],
+    },
+    "ref": null,
+    "rendered": Array [
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "function",
+        "props": Object {
+          "title": "Page Not Found",
+        },
+        "ref": null,
+        "rendered": null,
+        "type": [Function],
       },
-      "ref": null,
-      "rendered": Object {
+      Object {
         "instance": null,
         "key": undefined,
         "nodeType": "function",
@@ -97,7 +69,69 @@ ShallowWrapper {
         },
         "type": [Function],
       },
-      "type": [Function],
+    ],
+    "type": Symbol(react.fragment),
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "function",
+      "props": Object {
+        "children": Array [
+          <Metadata
+            title="Page Not Found"
+          />,
+          <Message
+            heading="404 Page Not Found"
+            type="error"
+          >
+            <p>
+              The page you have requrested could not be found.
+            </p>
+          </Message>,
+        ],
+      },
+      "ref": null,
+      "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "function",
+          "props": Object {
+            "title": "Page Not Found",
+          },
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "function",
+          "props": Object {
+            "children": <p>
+              The page you have requrested could not be found.
+            </p>,
+            "heading": "404 Page Not Found",
+            "type": "error",
+          },
+          "ref": null,
+          "rendered": Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "children": "The page you have requrested could not be found.",
+            },
+            "ref": null,
+            "rendered": "The page you have requrested could not be found.",
+            "type": "p",
+          },
+          "type": [Function],
+        },
+      ],
+      "type": Symbol(react.fragment),
     },
   ],
   Symbol(enzyme.__options__): Object {
diff --git a/src/pages/__snapshots__/index.test.js.snap b/src/pages/__snapshots__/index.test.js.snap
index 185874d..e937719 100644
--- a/src/pages/__snapshots__/index.test.js.snap
+++ b/src/pages/__snapshots__/index.test.js.snap
@@ -18,6 +18,7 @@ ShallowWrapper {
     "nodeType": "function",
     "props": Object {
       "children": Array [
+        <Metadata />,
         <noscript>
           <Message
             heading="JavaScript Required"
@@ -44,6 +45,15 @@ ShallowWrapper {
     },
     "ref": null,
     "rendered": Array [
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "function",
+        "props": Object {},
+        "ref": null,
+        "rendered": null,
+        "type": [Function],
+      },
       Object {
         "instance": null,
         "key": undefined,
@@ -154,7 +164,7 @@ ShallowWrapper {
         "type": "div",
       },
     ],
-    "type": [Function],
+    "type": Symbol(react.fragment),
   },
   Symbol(enzyme.__nodes__): Array [
     Object {
@@ -163,6 +173,7 @@ ShallowWrapper {
       "nodeType": "function",
       "props": Object {
         "children": Array [
+          <Metadata />,
           <noscript>
             <Message
               heading="JavaScript Required"
@@ -189,6 +200,15 @@ ShallowWrapper {
       },
       "ref": null,
       "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "function",
+          "props": Object {},
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
         Object {
           "instance": null,
           "key": undefined,
@@ -299,7 +319,7 @@ ShallowWrapper {
           "type": "div",
         },
       ],
-      "type": [Function],
+      "type": Symbol(react.fragment),
     },
   ],
   Symbol(enzyme.__options__): Object {
diff --git a/src/pages/__snapshots__/privacy.test.js.snap b/src/pages/__snapshots__/privacy.test.js.snap
index 1bfeb5d..38b2b78 100644
--- a/src/pages/__snapshots__/privacy.test.js.snap
+++ b/src/pages/__snapshots__/privacy.test.js.snap
@@ -17,312 +17,11 @@ ShallowWrapper {
     "key": undefined,
     "nodeType": "function",
     "props": Object {
-      "children": <Message
-        heading="Privacy Policy"
-        type="info"
-      >
-        <p>
-          Regexper and the tools used to create it are all open source. If you are concerned that the JavaScript being delivered is in any way malicious, please inspect the source in the 
-          <a
-            href="https://gitlab.com/javallone/regexper-static"
-            rel="external noopener noreferrer"
-            target="_blank"
-          >
-            GitLab repository
-          </a>
-          .
-        </p>
-        <p>
-          There are two data collection tools integrated in the app. These tools are not used to collect personal information:
-        </p>
-        <ul>
-          <li>
-            <b>
-              Google Analytics
-            </b>
-             is used to track browser usage data and application performance. It is configured to anonymize the client IP address.
-          </li>
-          <li>
-            <b>
-              Sentry.io
-            </b>
-             is a tool used to capture and report client-side JavaScript errors. It is configured to not store the client IP address.
-          </li>
-        </ul>
-        <p>
-          Regexper honors the browser 
-          <b>
-            “Do Not Track”
-          </b>
-           setting and will not enable these data collection tools if that setting is enabled. Also, most popular ad blockers will prevent these tools from sending any tracking data. Disabling or blocking these data collection tools will 
-          <b>
-            not
-          </b>
-           impact the performance of this app. The information collected by these tools is used to monitor application performance, determine browser support, and collect error reports.
-        </p>
-        <p>
-          Regexper is not supported by ad revenue or sales of any kind.
-        </p>
-      </Message>,
-      "title": "Privacy Policy",
-    },
-    "ref": null,
-    "rendered": Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "function",
-      "props": Object {
-        "children": Array [
-          <p>
-            Regexper and the tools used to create it are all open source. If you are concerned that the JavaScript being delivered is in any way malicious, please inspect the source in the 
-            <a
-              href="https://gitlab.com/javallone/regexper-static"
-              rel="external noopener noreferrer"
-              target="_blank"
-            >
-              GitLab repository
-            </a>
-            .
-          </p>,
-          <p>
-            There are two data collection tools integrated in the app. These tools are not used to collect personal information:
-          </p>,
-          <ul>
-            <li>
-              <b>
-                Google Analytics
-              </b>
-               is used to track browser usage data and application performance. It is configured to anonymize the client IP address.
-            </li>
-            <li>
-              <b>
-                Sentry.io
-              </b>
-               is a tool used to capture and report client-side JavaScript errors. It is configured to not store the client IP address.
-            </li>
-          </ul>,
-          <p>
-            Regexper honors the browser 
-            <b>
-              “Do Not Track”
-            </b>
-             setting and will not enable these data collection tools if that setting is enabled. Also, most popular ad blockers will prevent these tools from sending any tracking data. Disabling or blocking these data collection tools will 
-            <b>
-              not
-            </b>
-             impact the performance of this app. The information collected by these tools is used to monitor application performance, determine browser support, and collect error reports.
-          </p>,
-          <p>
-            Regexper is not supported by ad revenue or sales of any kind.
-          </p>,
-        ],
-        "heading": "Privacy Policy",
-        "type": "info",
-      },
-      "ref": null,
-      "rendered": Array [
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": Array [
-              "Regexper and the tools used to create it are all open source. If you are concerned that the JavaScript being delivered is in any way malicious, please inspect the source in the ",
-              <a
-                href="https://gitlab.com/javallone/regexper-static"
-                rel="external noopener noreferrer"
-                target="_blank"
-              >
-                GitLab repository
-              </a>,
-              ".",
-            ],
-          },
-          "ref": null,
-          "rendered": Array [
-            "Regexper and the tools used to create it are all open source. If you are concerned that the JavaScript being delivered is in any way malicious, please inspect the source in the ",
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": "GitLab repository",
-                "href": "https://gitlab.com/javallone/regexper-static",
-                "rel": "external noopener noreferrer",
-                "target": "_blank",
-              },
-              "ref": null,
-              "rendered": "GitLab repository",
-              "type": "a",
-            },
-            ".",
-          ],
-          "type": "p",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "There are two data collection tools integrated in the app. These tools are not used to collect personal information:",
-          },
-          "ref": null,
-          "rendered": "There are two data collection tools integrated in the app. These tools are not used to collect personal information:",
-          "type": "p",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": Array [
-              <li>
-                <b>
-                  Google Analytics
-                </b>
-                 is used to track browser usage data and application performance. It is configured to anonymize the client IP address.
-              </li>,
-              <li>
-                <b>
-                  Sentry.io
-                </b>
-                 is a tool used to capture and report client-side JavaScript errors. It is configured to not store the client IP address.
-              </li>,
-            ],
-          },
-          "ref": null,
-          "rendered": Array [
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": Array [
-                  <b>
-                    Google Analytics
-                  </b>,
-                  " is used to track browser usage data and application performance. It is configured to anonymize the client IP address.",
-                ],
-              },
-              "ref": null,
-              "rendered": Array [
-                Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "children": "Google Analytics",
-                  },
-                  "ref": null,
-                  "rendered": "Google Analytics",
-                  "type": "b",
-                },
-                " is used to track browser usage data and application performance. It is configured to anonymize the client IP address.",
-              ],
-              "type": "li",
-            },
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": Array [
-                  <b>
-                    Sentry.io
-                  </b>,
-                  " is a tool used to capture and report client-side JavaScript errors. It is configured to not store the client IP address.",
-                ],
-              },
-              "ref": null,
-              "rendered": Array [
-                Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "children": "Sentry.io",
-                  },
-                  "ref": null,
-                  "rendered": "Sentry.io",
-                  "type": "b",
-                },
-                " is a tool used to capture and report client-side JavaScript errors. It is configured to not store the client IP address.",
-              ],
-              "type": "li",
-            },
-          ],
-          "type": "ul",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": Array [
-              "Regexper honors the browser ",
-              <b>
-                “Do Not Track”
-              </b>,
-              " setting and will not enable these data collection tools if that setting is enabled. Also, most popular ad blockers will prevent these tools from sending any tracking data. Disabling or blocking these data collection tools will ",
-              <b>
-                not
-              </b>,
-              " impact the performance of this app. The information collected by these tools is used to monitor application performance, determine browser support, and collect error reports.",
-            ],
-          },
-          "ref": null,
-          "rendered": Array [
-            "Regexper honors the browser ",
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": "“Do Not Track”",
-              },
-              "ref": null,
-              "rendered": "“Do Not Track”",
-              "type": "b",
-            },
-            " setting and will not enable these data collection tools if that setting is enabled. Also, most popular ad blockers will prevent these tools from sending any tracking data. Disabling or blocking these data collection tools will ",
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": "not",
-              },
-              "ref": null,
-              "rendered": "not",
-              "type": "b",
-            },
-            " impact the performance of this app. The information collected by these tools is used to monitor application performance, determine browser support, and collect error reports.",
-          ],
-          "type": "p",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "Regexper is not supported by ad revenue or sales of any kind.",
-          },
-          "ref": null,
-          "rendered": "Regexper is not supported by ad revenue or sales of any kind.",
-          "type": "p",
-        },
-      ],
-      "type": [Function],
-    },
-    "type": [Function],
-  },
-  Symbol(enzyme.__nodes__): Array [
-    Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "function",
-      "props": Object {
-        "children": <Message
+      "children": Array [
+        <Metadata
+          title="Privacy Policy"
+        />,
+        <Message
           heading="Privacy Policy"
           type="info"
         >
@@ -369,10 +68,22 @@ ShallowWrapper {
             Regexper is not supported by ad revenue or sales of any kind.
           </p>
         </Message>,
-        "title": "Privacy Policy",
+      ],
+    },
+    "ref": null,
+    "rendered": Array [
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "function",
+        "props": Object {
+          "title": "Privacy Policy",
+        },
+        "ref": null,
+        "rendered": null,
+        "type": [Function],
       },
-      "ref": null,
-      "rendered": Object {
+      Object {
         "instance": null,
         "key": undefined,
         "nodeType": "function",
@@ -619,7 +330,330 @@ ShallowWrapper {
         ],
         "type": [Function],
       },
-      "type": [Function],
+    ],
+    "type": Symbol(react.fragment),
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "function",
+      "props": Object {
+        "children": Array [
+          <Metadata
+            title="Privacy Policy"
+          />,
+          <Message
+            heading="Privacy Policy"
+            type="info"
+          >
+            <p>
+              Regexper and the tools used to create it are all open source. If you are concerned that the JavaScript being delivered is in any way malicious, please inspect the source in the 
+              <a
+                href="https://gitlab.com/javallone/regexper-static"
+                rel="external noopener noreferrer"
+                target="_blank"
+              >
+                GitLab repository
+              </a>
+              .
+            </p>
+            <p>
+              There are two data collection tools integrated in the app. These tools are not used to collect personal information:
+            </p>
+            <ul>
+              <li>
+                <b>
+                  Google Analytics
+                </b>
+                 is used to track browser usage data and application performance. It is configured to anonymize the client IP address.
+              </li>
+              <li>
+                <b>
+                  Sentry.io
+                </b>
+                 is a tool used to capture and report client-side JavaScript errors. It is configured to not store the client IP address.
+              </li>
+            </ul>
+            <p>
+              Regexper honors the browser 
+              <b>
+                “Do Not Track”
+              </b>
+               setting and will not enable these data collection tools if that setting is enabled. Also, most popular ad blockers will prevent these tools from sending any tracking data. Disabling or blocking these data collection tools will 
+              <b>
+                not
+              </b>
+               impact the performance of this app. The information collected by these tools is used to monitor application performance, determine browser support, and collect error reports.
+            </p>
+            <p>
+              Regexper is not supported by ad revenue or sales of any kind.
+            </p>
+          </Message>,
+        ],
+      },
+      "ref": null,
+      "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "function",
+          "props": Object {
+            "title": "Privacy Policy",
+          },
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "function",
+          "props": Object {
+            "children": Array [
+              <p>
+                Regexper and the tools used to create it are all open source. If you are concerned that the JavaScript being delivered is in any way malicious, please inspect the source in the 
+                <a
+                  href="https://gitlab.com/javallone/regexper-static"
+                  rel="external noopener noreferrer"
+                  target="_blank"
+                >
+                  GitLab repository
+                </a>
+                .
+              </p>,
+              <p>
+                There are two data collection tools integrated in the app. These tools are not used to collect personal information:
+              </p>,
+              <ul>
+                <li>
+                  <b>
+                    Google Analytics
+                  </b>
+                   is used to track browser usage data and application performance. It is configured to anonymize the client IP address.
+                </li>
+                <li>
+                  <b>
+                    Sentry.io
+                  </b>
+                   is a tool used to capture and report client-side JavaScript errors. It is configured to not store the client IP address.
+                </li>
+              </ul>,
+              <p>
+                Regexper honors the browser 
+                <b>
+                  “Do Not Track”
+                </b>
+                 setting and will not enable these data collection tools if that setting is enabled. Also, most popular ad blockers will prevent these tools from sending any tracking data. Disabling or blocking these data collection tools will 
+                <b>
+                  not
+                </b>
+                 impact the performance of this app. The information collected by these tools is used to monitor application performance, determine browser support, and collect error reports.
+              </p>,
+              <p>
+                Regexper is not supported by ad revenue or sales of any kind.
+              </p>,
+            ],
+            "heading": "Privacy Policy",
+            "type": "info",
+          },
+          "ref": null,
+          "rendered": Array [
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "host",
+              "props": Object {
+                "children": Array [
+                  "Regexper and the tools used to create it are all open source. If you are concerned that the JavaScript being delivered is in any way malicious, please inspect the source in the ",
+                  <a
+                    href="https://gitlab.com/javallone/regexper-static"
+                    rel="external noopener noreferrer"
+                    target="_blank"
+                  >
+                    GitLab repository
+                  </a>,
+                  ".",
+                ],
+              },
+              "ref": null,
+              "rendered": Array [
+                "Regexper and the tools used to create it are all open source. If you are concerned that the JavaScript being delivered is in any way malicious, please inspect the source in the ",
+                Object {
+                  "instance": null,
+                  "key": undefined,
+                  "nodeType": "host",
+                  "props": Object {
+                    "children": "GitLab repository",
+                    "href": "https://gitlab.com/javallone/regexper-static",
+                    "rel": "external noopener noreferrer",
+                    "target": "_blank",
+                  },
+                  "ref": null,
+                  "rendered": "GitLab repository",
+                  "type": "a",
+                },
+                ".",
+              ],
+              "type": "p",
+            },
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "host",
+              "props": Object {
+                "children": "There are two data collection tools integrated in the app. These tools are not used to collect personal information:",
+              },
+              "ref": null,
+              "rendered": "There are two data collection tools integrated in the app. These tools are not used to collect personal information:",
+              "type": "p",
+            },
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "host",
+              "props": Object {
+                "children": Array [
+                  <li>
+                    <b>
+                      Google Analytics
+                    </b>
+                     is used to track browser usage data and application performance. It is configured to anonymize the client IP address.
+                  </li>,
+                  <li>
+                    <b>
+                      Sentry.io
+                    </b>
+                     is a tool used to capture and report client-side JavaScript errors. It is configured to not store the client IP address.
+                  </li>,
+                ],
+              },
+              "ref": null,
+              "rendered": Array [
+                Object {
+                  "instance": null,
+                  "key": undefined,
+                  "nodeType": "host",
+                  "props": Object {
+                    "children": Array [
+                      <b>
+                        Google Analytics
+                      </b>,
+                      " is used to track browser usage data and application performance. It is configured to anonymize the client IP address.",
+                    ],
+                  },
+                  "ref": null,
+                  "rendered": Array [
+                    Object {
+                      "instance": null,
+                      "key": undefined,
+                      "nodeType": "host",
+                      "props": Object {
+                        "children": "Google Analytics",
+                      },
+                      "ref": null,
+                      "rendered": "Google Analytics",
+                      "type": "b",
+                    },
+                    " is used to track browser usage data and application performance. It is configured to anonymize the client IP address.",
+                  ],
+                  "type": "li",
+                },
+                Object {
+                  "instance": null,
+                  "key": undefined,
+                  "nodeType": "host",
+                  "props": Object {
+                    "children": Array [
+                      <b>
+                        Sentry.io
+                      </b>,
+                      " is a tool used to capture and report client-side JavaScript errors. It is configured to not store the client IP address.",
+                    ],
+                  },
+                  "ref": null,
+                  "rendered": Array [
+                    Object {
+                      "instance": null,
+                      "key": undefined,
+                      "nodeType": "host",
+                      "props": Object {
+                        "children": "Sentry.io",
+                      },
+                      "ref": null,
+                      "rendered": "Sentry.io",
+                      "type": "b",
+                    },
+                    " is a tool used to capture and report client-side JavaScript errors. It is configured to not store the client IP address.",
+                  ],
+                  "type": "li",
+                },
+              ],
+              "type": "ul",
+            },
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "host",
+              "props": Object {
+                "children": Array [
+                  "Regexper honors the browser ",
+                  <b>
+                    “Do Not Track”
+                  </b>,
+                  " setting and will not enable these data collection tools if that setting is enabled. Also, most popular ad blockers will prevent these tools from sending any tracking data. Disabling or blocking these data collection tools will ",
+                  <b>
+                    not
+                  </b>,
+                  " impact the performance of this app. The information collected by these tools is used to monitor application performance, determine browser support, and collect error reports.",
+                ],
+              },
+              "ref": null,
+              "rendered": Array [
+                "Regexper honors the browser ",
+                Object {
+                  "instance": null,
+                  "key": undefined,
+                  "nodeType": "host",
+                  "props": Object {
+                    "children": "“Do Not Track”",
+                  },
+                  "ref": null,
+                  "rendered": "“Do Not Track”",
+                  "type": "b",
+                },
+                " setting and will not enable these data collection tools if that setting is enabled. Also, most popular ad blockers will prevent these tools from sending any tracking data. Disabling or blocking these data collection tools will ",
+                Object {
+                  "instance": null,
+                  "key": undefined,
+                  "nodeType": "host",
+                  "props": Object {
+                    "children": "not",
+                  },
+                  "ref": null,
+                  "rendered": "not",
+                  "type": "b",
+                },
+                " impact the performance of this app. The information collected by these tools is used to monitor application performance, determine browser support, and collect error reports.",
+              ],
+              "type": "p",
+            },
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "host",
+              "props": Object {
+                "children": "Regexper is not supported by ad revenue or sales of any kind.",
+              },
+              "ref": null,
+              "rendered": "Regexper is not supported by ad revenue or sales of any kind.",
+              "type": "p",
+            },
+          ],
+          "type": [Function],
+        },
+      ],
+      "type": Symbol(react.fragment),
     },
   ],
   Symbol(enzyme.__options__): Object {
diff --git a/src/pages/index.js b/src/pages/index.js
index 6d48ffe..a5d2a99 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import { Link } from 'gatsby';
 
-import Layout from 'components/Layout';
+import Metadata from 'components/Metadata';
 import Message from 'components/Message';
 
-const IndexPage = () => <Layout>
+const IndexPage = () => <>
+  <Metadata/>
   <noscript>
     <Message type="error" heading="JavaScript Required">
       <p>You need JavaScript to use Regexper.</p>
@@ -13,6 +14,6 @@ const IndexPage = () => <Layout>
     </Message>
   </noscript>
   <div>Hello world</div>
-</Layout>;
+</>;
 
 export default IndexPage;
diff --git a/src/pages/privacy.js b/src/pages/privacy.js
index 3b67fe1..adb9935 100644
--- a/src/pages/privacy.js
+++ b/src/pages/privacy.js
@@ -1,9 +1,10 @@
 import React from 'react';
 
-import Layout from 'components/Layout';
+import Metadata from 'components/Metadata';
 import Message from 'components/Message';
 
-const PrivacyPage = () => <Layout title="Privacy Policy">
+const PrivacyPage = () => <>
+  <Metadata title="Privacy Policy" />
   <Message type="info" heading="Privacy Policy">
     <p>
       Regexper and the tools used to create it are all open source. If you are
@@ -41,6 +42,6 @@ const PrivacyPage = () => <Layout title="Privacy Policy">
       Regexper is not supported by ad revenue or sales of any kind.
     </p>
   </Message>
-</Layout>;
+</>;
 
 export default PrivacyPage;