404

components/Error.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Column, Row } from 'hedron';
+import { prefixLink } from 'gatsby-helpers';
+import { ErrorTitle, ErrorBody, StyledLink } from './styled/';
+
+export default class Error extends React.Component {
+  render() {
+    const { route } = this.props;
+    const { body } = route.page.data;
+
+    return (
+      <Row>
+        <Column>
+          <ErrorTitle>Yikes!</ErrorTitle>
+        </Column>
+        <Column>
+          <ErrorBody>
+            <div dangerouslySetInnerHTML={{ __html: body }} />
+            <StyledLink to={prefixLink('/')}>back home</StyledLink>
+          </ErrorBody>
+        </Column>
+      </Row>
+    );
+  }
+}

components/styled/index.js

@@ -241,3 +241,23 @@ export const From = styled.div`
     font-weight: bolder;
   }
 `;
+
+/*
+ * ErrorTitle
+ */
+export const ErrorTitle = styled.h4`
+  font-size: 34px;
+  margin-bottom: 0;
+`;
+
+/*
+ * ErrorBody
+ */
+export const ErrorBody = styled.div`
+  font-size: 18px;
+
+  a {
+    display: block;
+    margin-top: 50px;
+  }
+`;

pages/404.md

@@ -0,0 +1,7 @@
+---
+title: "Error 404"
+layout: error
+path: /404.html
+---
+
+Nothing to see here, either you're accessing a wrong url or this page doesn't exist anymore.

wrappers/md.jsx

@@ -4,6 +4,7 @@ import { prefixLink } from 'gatsby-helpers';
 import { Page, Row, Column } from 'hedron';
 import { config } from 'config';
 import Post from '../components/Post';
+import Error from '../components/Error';
 import { StyledLink } from '../components/styled/';
 
 class MarkdownWrapper extends React.Component {
@@ -12,22 +13,28 @@ class MarkdownWrapper extends React.Component {
     const post = route.page.data;
     const layout = post.layout;
     let template;
+    let header;
 
     if (layout === 'post') {
       template = <Post {...this.props} />;
+      header = (
+        <Row>
+          <Column>
+            <StyledLink to={prefixLink('/blog/')}>back to articles</StyledLink>
+          </Column>
+        </Row>
+      );
+    } else if (layout === 'error') {
+      template = <Error {...this.props} />;
     }
 
     return (
-     <Page>
-       <Helmet title={`${config.siteTitle} - ${post.title}`} />
-       <Row>
-         <Column>
-           <StyledLink to={prefixLink('/blog/')}>back to articles</StyledLink>
-         </Column>
-       </Row>
-       {template}
-     </Page>
-   );
+      <Page>
+        <Helmet title={`${config.siteTitle} - ${post.title}`} />
+        {header}
+        {template}
+      </Page>
+    );
   }
 }