404 page (#268)

content/pages/404.json

@@ -0,0 +1,10 @@
+{
+  "title": "404 - Oops, that did not work",
+  "description": "Pardon us, the page you requested is not here.",
+  "actions": [
+    {
+      "title": "Back to Homepage",
+      "url": "/"
+    }
+  ]
+}

package-lock.json

@@ -3550,9 +3550,9 @@
       "integrity": "sha512-p0oOHXr60hXZuLNsQ/PsOQtCfia79thm7MjPxTrnnBvD+csJoHzARYMB0IFj/KTw6U5vLXODgjJAn8x6QksLwg=="
     },
     "@oceanprotocol/lib": {
-      "version": "0.9.15",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.9.15.tgz",
-      "integrity": "sha512-8ojjqGSDljE7iRL3ViAHqo+KJN/ycWazhd0HZbZrsjkCjTBkcsOL02o9EgqaDC+WixXo6n0ehCou5P1aQo2Ggw==",
+      "version": "0.9.17",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.9.17.tgz",
+      "integrity": "sha512-im/e3zD1d8C8rDi0yidRhb1DU77Ka+XrweWYKMNQ8W86X1ODGf8CzdxMbwM3nIcYeTbNT+PcbBraRLQxwZOe3A==",
       "requires": {
         "@ethereum-navigator/navigator": "^0.5.0",
         "@oceanprotocol/contracts": "^0.5.7",
@@ -15272,9 +15272,9 @@
       }
     },
     "file-saver": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
-      "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw=="
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
     },
     "file-selector": {
       "version": "0.2.2",

src/pages/404.tsx

@@ -0,0 +1,73 @@
+import React, { ReactElement } from 'react'
+import { PageProps, graphql } from 'gatsby'
+import Page from '../components/templates/Page'
+import fishfail from '../images/fishfail.gif'
+import { Helmet } from 'react-helmet'
+import Button from '../components/atoms/Button'
+
+export default function PageGatsby404(props: PageProps): ReactElement {
+  const {
+    title,
+    description,
+    actions
+  } = (props.data as any).content.edges[0].node.childPagesJson
+
+  return (
+    <>
+      <Helmet>
+        <style type="text/css">{`
+          body {
+            background: url(${fishfail}) center bottom no-repeat;
+            background-size: cover;
+            min-height: 100vh;
+          }
+
+          main {
+            text-align: center;
+          }
+
+          header *,
+          footer *,
+          main * {
+            color: var(--brand-white) !important;
+          }
+
+          header svg path {
+            fill: var(--brand-white) !important;
+          }
+        `}</style>
+      </Helmet>
+      <Page
+        title={title}
+        description={description}
+        uri={props.uri}
+        headerCenter
+      >
+        {actions.map((action: { title: string; url: string }) => (
+          <Button style="primary" key={action.title} to={action.url}>
+            {action.title}
+          </Button>
+        ))}
+      </Page>
+    </>
+  )
+}
+
+export const contentQuery = graphql`
+  query Page404Query {
+    content: allFile(filter: { relativePath: { eq: "pages/404.json" } }) {
+      edges {
+        node {
+          childPagesJson {
+            title
+            description
+            actions {
+              title
+              url
+            }
+          }
+        }
+      }
+    }
+  }
+`