add 404 catch-all Vizality route (completes #79)

renderer/src/builtins/dashboard/pages/404.jsx

@@ -0,0 +1,26 @@
+import { joinClassNames } from '@vizality/util/dom';
+import { getModule } from '@vizality/webpack';
+import React, { memo } from 'react';
+
+export default memo(() => {
+  const { placeholderImage } = getModule('placeholderImage');
+
+  return (
+    <>
+      <div class='vz-dashboard-404-meta'>
+        <div className='vz-dashboard-404-heading' style={ { '--vz-404-stacks': 3 } }>
+          <span style={ { '--vz-404-index': 0 } }>404</span>
+          <span style={ { '--vz-404-index': 1 } }>404</span>
+          <span style={ { '--vz-404-index': 2 } }>404</span>
+        </div>
+        <div className='vz-dashboard-404-subheading'>
+          Page Not Found
+        </div>
+        <div className='vz-dashboard-404-description'>
+          Oh no! You're looking for something which just isn't here! Fear not however, errors are to be expected, and luckily there are tools on the sidebar for you to use in your search for what you need.
+        </div>
+      </div>
+      <div className={joinClassNames('vz-dashboard-404-image', placeholderImage)} />
+    </>
+  );
+});

renderer/src/builtins/dashboard/routes/Routes.jsx

@@ -8,6 +8,7 @@ import Markdown from '../pages/docs/components/Markdown';
 import Icons from '../pages/docs/components/Icons';
 import Changelog from '../pages/Changelog';
 import ErrorTest from '../pages/ErrorTest';
+import FourOhFour from '../pages/404';
 import Home from '../pages/Home';
 import Test from '../pages/Test';
 
@@ -118,6 +119,13 @@ export default memo(() => {
             </Content>
           </Layout>
         </Route>
+        <Route>
+          <Layout>
+            <Content>
+              <FourOhFour />
+            </Content>
+          </Layout>
+        </Route>
       </Switch>
     </>
   );

renderer/src/builtins/dashboard/styles/pages/_404.scss

@@ -0,0 +1,100 @@
+.vz-dashboard-404 {
+  &-image {
+    position: absolute;
+    inset: unset;
+    bottom: 0;
+    right: 0;
+    height: 75%;
+    width: 75%;
+    background-size: contain;
+    background-position: bottom right;
+    @media (max-height: 740px) {
+      display: none;
+    }
+    @media (max-height: 900px) {
+      width: 60%;
+      height: 60%;
+    }
+  }
+  &-meta {
+    max-width: 800px;
+  }
+  /**
+   * @see {@link https://codepen.io/aldrie/pen/PojGYLo}
+   * @author Aldriê
+   * @license MIT
+   */
+  &-heading {
+    display: grid;
+    grid-template-columns: 1fr;
+    span {
+      grid-row-start: 1;
+      grid-column-start: 1;
+      font-size: 220px;
+      font-weight: 700;
+      color: var(--text-brand);
+      --vz-404-stack-height: calc(100% / var(--vz-404-stacks) - 1px);
+      --vz-404-inverse-index: calc(calc(var(--vz-404-stacks) - 1) - var(--vz-404-index));
+      --vz-404-clip-top: calc(var(--vz-404-stack-height) * var(--vz-404-index));
+      --vz-404-clip-bottom: calc(var(--vz-404-stack-height) * var(--vz-404-inverse-index));
+      clip-path: inset(var(--vz-404-clip-top) 0 var(--vz-404-clip-bottom) 0);
+      animation:
+        vz-404-stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--vz-404-index) * 120ms),
+        vz-404-glitch 2s ease infinite 2s alternate-reverse;
+    }
+
+    span:nth-child(odd) {
+      --vz-404-glitch-translate: 8px;
+    }
+    span:nth-child(even) {
+      --vz-404-glitch-translate: -8px;
+    }
+  }
+  &-subheading {
+    font-size: 50px;
+    font-weight: 700;
+    line-height: 1;
+    text-transform: uppercase;
+    margin-top: -14px;
+    padding: 10px;
+  }
+  &-description {
+    font-size: 22px;
+    line-height: 1.5;
+    padding: 10px;
+    margin-top: -10px;
+    z-index: 1;
+    position: relative;
+  }
+}
+
+@keyframes vz-404-stack {
+  0% {
+    opacity: 0;
+    transform: translateX(-50%);
+    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
+  };
+  60% {
+    opacity: 0.5;
+    transform: translateX(50%);
+  }
+  80% {
+    transform: none;
+    opacity: 1;
+    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
+  }
+  100% {
+    text-shadow: none;
+  }
+}
+
+@keyframes vz-404-glitch {
+  0% {
+    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
+    transform: translate(var(--vz-404-glitch-translate));
+  }
+  2% {
+    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
+  }
+  4%, 100% {  text-shadow: none; transform: none; }
+}

renderer/src/builtins/dashboard/styles/pages/_index.scss

@@ -1,2 +1,3 @@
 @forward 'docs';
 @forward 'home';
+@forward '404';