Added 404 page and noscript

ljones92 · Sep 2, 2017 · 7f7ec41 · 7f7ec41
1 parent ce97449
commit 7f7ec41
Show file tree

Hide file tree

Showing 9 changed files with 862 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [1.4.0]
+- Added noscript tag
+- Added 404 page
+
 ## [1.3.1]
 ### Fixed
 - Fixed issue where Istanbul doesn't cover all files

diff --git a/app/assets/scss/partials/_main.scss b/app/assets/scss/partials/_main.scss
@@ -11,4 +11,46 @@ a:hover {
     span.highlight {
         color: $dark;
     }
+}
+
+.no-js, .error--404 {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: -webkit-linear-gradient(bottom, $gradient);
+    background: -moz-linear-gradient(bottom, $gradient);
+    background: -o-linear-gradient(bottom, $gradient);
+    background: linear-gradient(to top, $gradient);
+    h1 {
+        color: #fff;
+        position: absolute;
+        text-align: center;
+        font-size: 50px;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        @media #{$break-mobile} {
+            font-size: 60px;
+        }
+        @media #{$break-large} {
+            font-size: 80px;
+        }
+        @media #{$break-ex-ex-large} {
+            font-size: 4vw;
+        }
+    }
+}
+
+.error--404 {
+    line-height: 1.3;
+
+    a {
+        color: $dark;
+        text-decoration: none;
+
+        &:hover {
+            color: $highlight;
+            border-bottom: 6px solid $highlight;
+        }
+    }
 }
diff --git a/app/index.ejs b/app/index.ejs
@@ -10,5 +10,10 @@
 </head>
 <body>
     <div id="root"></div>
+    <noscript>
+        <div class="no-js">
+            <h1>You'll need to enable JS to use this site</h1>
+        </div>
+    </noscript>
 </body>
 </html>
diff --git a/app/main.jsx b/app/main.jsx
@@ -1,7 +1,20 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 import App from './App';
+import Error from './views/Error';
+
+const Root = () => (
+    <Router>
+        <div>
+            <Switch>
+                <Route exact path='/' component={App} />
+                <Route component={Error} />
+            </Switch>
+        </div>
+    </Router>
+);
 
 const render = (Component) => {
   ReactDOM.render(
@@ -10,4 +23,4 @@ const render = (Component) => {
   );
 };
 
-render(App);
+render(Root);
diff --git a/app/views/Error.jsx b/app/views/Error.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Error = () => (
+    <div className='error error--404'>
+        <h1 className='panel__heading'>
+            Oops, I can{"'"}t seem to find that page. Try returning to the <a href='/'>home<span className='highlight'>page</span></a>
+        </h1>
+    </div>
+);
+
+export default Error;