Route missing pages to a soft 404 handler

.eslintrc.json

@@ -32,6 +32,13 @@
           "src/js/utils/generateApi.js"
         ]
       }
+    ],
+    "import/no-unresolved": [
+      "error", {
+        "ignore": [
+          "../public/api.json"
+        ]
+      }
     ]
   }
 }

package.json

@@ -19,6 +19,7 @@
     "@babel/eslint-parser": "^7.14.4",
     "@babel/eslint-plugin": "^7.13.16",
     "@babel/preset-env": "^7.14.4",
+    "@rollup/plugin-json": "^4.1.0",
     "chokidar-cli": "^2.1.0",
     "eslint": "^7.27.0",
     "eslint-config-airbnb-base": "^14.2.1",

rollup.config.js

@@ -17,6 +17,7 @@
 import css from 'rollup-plugin-import-css';
 import generateApi from './src/js/utils/generateApi.js';
 import generateAssetsToCache from './src/js/utils/generateAssetsToCache';
+import json from '@rollup/plugin-json';
 
 async function setupApi() {
   try {
@@ -35,6 +36,8 @@ export default [
       format: 'cjs',
     },
     plugins: [
+      setupApi(),
+      json(),
       css(),
     ],
   },

src/index.js

@@ -20,6 +20,7 @@
 import Router from './js/classes/Router';
 import VideoDownloaderRegistry from './js/classes/VideoDownloaderRegistry';
 import ConnectionStatus from './js/classes/ConnectionStatus';
+import api from '../public/api.json';
 
 /**
  * Web Components implementation.
@@ -39,6 +40,7 @@ import VideoPage from './js/pages/Video';
 import CategoryPage from './js/pages/Category';
 import DownloadsPage from './js/pages/Downloads';
 import SettingsPage from './js/pages/Settings';
+import ErrorPage from './js/pages/Error';
 
 /**
  * Settings
@@ -118,15 +120,24 @@ const router = new Router({
   videoDownloaderRegistry,
   connectionStatus,
 });
-router.route('^/settings/?', SettingsPage);
-router.route('^/downloads/?', DownloadsPage);
-router.route('^/category/([^/]*)/?', CategoryPage);
 router.route('^/?$', HomePage);
+router.route('^/downloads/$', DownloadsPage);
+router.route('^/settings/$', SettingsPage);
 
 /**
- * Consider all else a single video page.
+ * Add the category pages.
  */
-router.route('.*', VideoPage);
+api.categories.forEach((category) => router.route(`^/category/${category.slug}/$`, CategoryPage));
+
+/**
+ * Add the video pages.
+ */
+api.videos.forEach((video) => router.route(`^/${video.id}/$`, VideoPage));
+
+/**
+ * Consider all else an error.
+ */
+router.route('.*', ErrorPage);
 
 /**
  * Register Service Worker.

src/js/pages/Error.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright 2021 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @param {RouterContext} routerContext Context object passed by the Router.
+ */
+export default (routerContext) => {
+  const {
+    mainContent,
+    path,
+  } = routerContext;
+
+  mainContent.innerHTML = `
+    <style>
+      ins {
+        color: var(--accent-text);
+        font-weight: normal;
+      }
+    </style>
+    <div class="container">
+      <header class="page-header">
+        <h1>404. <ins>That’s an error.</ins></h1>
+        <p>The requested URL <code>${path}</code> was not found on this server. <br><ins>That’s all we know.</ins></p>
+      </header>
+    </div>
+  `;
+
+  const meta = document.createElement('meta');
+  meta.name = 'robots';
+  meta.content = 'noindex';
+  document.head.appendChild(meta);
+};