Add working 404 page

src/app/Router.ts

@@ -1,6 +1,7 @@
 import { App, checkVersion, Models } from './App';
 import { View } from './views/View';
 import { Home } from './views/Home'
+import { NotFound } from './views/NotFound'
 import { FieldSettings } from './views/FieldSettings'
 import { Generator } from './views/Generator'
 import { locale } from './Locales';
@@ -29,16 +30,19 @@ const router = async () => {
     renderer = Home
   } else {
     panel = 'tree'
-    App.model.set(config.models.find(m => m.id === urlParts.join('/'))!)
-    if (urlParams.has('q')) {
-      try {
-        const data = atob(urlParams.get('q') ?? '')
-        Models[App.model.get()!.id].reset(JSON.parse(data))
-      } catch (e) {}
-    }
-    renderer = Generator
-    if (App.model.get()) {
-      title = locale('title.generator', [locale(App.model.get()!.id)])
+    const model = config.models.find(m => m.id === urlParts.join('/')) ?? null
+    App.model.set(model)
+    if (model) {
+      if (urlParams.has('q')) {
+        try {
+          const data = atob(urlParams.get('q') ?? '')
+          Models[model.id].reset(JSON.parse(data))
+        } catch (e) {}
+      }
+      renderer = Generator
+      title = locale('title.generator', [locale(model.id)])
+    } else {
+      renderer = NotFound
     }
   }
 

src/app/views/Home.ts

@@ -4,9 +4,14 @@ import { View } from './View'
 import { Octicon } from '../components/Octicon'
 import config from '../../config.json'
 
-const GeneratorCard = (url: string, name: string, arrow?: boolean, active?: boolean) =>  `
+function cleanUrl(url: string) {
+  url = url.startsWith('/') ? url : '/' + url
+  return url.endsWith('/') ? url : url + '/'
+}
+
+export const GeneratorCard = (url: string, name: string, arrow?: boolean, active?: boolean) =>  `
   <li>
-    <a data-link href="/${url}/" class="generators-card${active ? ' selected' : ''}">
+    <a data-link href="${cleanUrl(url)}" class="generators-card${active ? ' selected' : ''}">
       ${name}
       ${arrow ? Octicon.chevron_right : ''}
     </a>

src/app/views/NotFound.ts

@@ -0,0 +1,17 @@
+import { Header } from '../components/Header'
+import { View } from './View'
+import { locale } from '../Locales'
+import { GeneratorCard } from './Home'
+
+export const NotFound = (view: View): string => {  
+  return `
+    ${Header(view, 'Data Pack Generators')}
+    <div class="home center">
+      <h2 class="very-large">404</h2>
+      <p>${locale('not_found.description')}</p>
+      <ul class="generators-list">
+        ${GeneratorCard('/', locale('home'), true)}
+      </ul>
+    </div>
+  `
+}