fix: Playground: Add a 404.html identical to index.html (#398)

* fix(playground): Add a 404 route. cp index.html to 404.html.

Github pages hosting will automatically route to 404.html

* fix(playground): Rephrase 404 message, move cp 404.html to build-doc

Author: skvale

package.json

@@ -12,7 +12,7 @@
   },
   "scripts": {
     "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
-    "build-doc": "node scripts/build.js",
+    "build-doc": "node scripts/build.js && cp build/index.html build/404.html",
     "build-js": "node scripts/build.js",
     "build:lint:fix": "eslint --fix 'src/**' --ext .js,.jsx --env browser,node",
     "build:lint": "eslint 'src/**' --ext .js,.jsx --env browser,node",

src/_playground/Routes.js

@@ -10,6 +10,7 @@ import { DatePickerComponent } from '../DatePicker/DatePicker.Component';
 import { DropdownComponent } from '../Dropdown/Dropdown.Component';
 import { FormsComponent } from '../Forms/Forms.Component';
 import groupArray from 'group-array';
+import { Header } from './documentation/Header/Header';
 import { Home } from './documentation/Home/Home';
 import { IconComponent } from '../Icon/Icon.Component';
 import { IdentifierComponent } from '../Identifier/Identifier.Component';
@@ -37,7 +38,7 @@ import { TimePickerComponent } from '../TimePicker/TimePicker.Component';
 import { ToggleComponent } from '../Toggle/Toggle.Component';
 import { TokenComponent } from '../Token/Token.Component';
 import { TreeComponent } from '../Tree/Tree.Component';
-import { BrowserRouter, NavLink, Redirect, Route, Switch } from 'react-router-dom';
+import { BrowserRouter, Link, NavLink, Redirect, Route, Switch } from 'react-router-dom';
 
 const sections = [
     {
@@ -270,6 +271,13 @@ const routes = [
     }
 ];
 
+const RouteNotFound = () => (
+    <div>
+        <Header>Sorry, page not found.</Header>
+        <Link to=''>Home</Link>
+    </div>
+);
+
 export const Routes = () => {
     let sectionRoutes;
     const groupedRoutes = groupArray(routes, 'section');
@@ -320,6 +328,7 @@ export const Routes = () => {
                         })}
                         <Redirect exact from=''
                             to='/home' />
+                        <Route component={RouteNotFound} />
                     </Switch>
                 </div>
             </div>