Add Not Found page

binderhub/static/js/App.jsx

@@ -8,6 +8,7 @@ import "@fontsource/clear-sans/300.css";
 import "@fontsource/clear-sans/400.css";
 import { HomePage } from "./pages/HomePage.jsx";
 import { AboutPage } from "./pages/AboutPage.jsx";
+import { NotFoundPage } from "./pages/NotFoundPage.jsx";
 
 export const PAGE_CONFIG = window.pageConfig;
 
@@ -83,6 +84,7 @@ export function App() {
                 />
               }
             />
+            <Route path="*" element={<NotFoundPage />} />
           </Routes>
         </div>
       </div>

binderhub/static/js/App.test.jsx

@@ -25,3 +25,12 @@ test("render About page", () => {
   expect(screen.queryByText(/This is the about message/)).toBeInTheDocument();
   expect(screen.queryByText(/v123.456/)).toBeInTheDocument();
 });
+
+test("render Not Found page", () => {
+  render(
+    <MemoryRouter initialEntries={["/not-found"]}>
+      <App />
+    </MemoryRouter>,
+  );
+  expect(screen.queryByText(/Not Found/)).toBeInTheDocument();
+});

binderhub/static/js/index.scss

@@ -52,4 +52,8 @@ a {
   font-size: 1rem;
 }
 
+.jumbotron {
+  margin-bottom: 100px;
+}
+
 @import "bootstrap-icons/font/bootstrap-icons.css";

binderhub/static/js/pages/NotFoundPage.jsx

@@ -0,0 +1,20 @@
+export function NotFoundPage() {
+  return (
+    <>
+      <div className="container text-center jumbotron">
+        <h1>
+          404: Not Found
+        </h1>
+
+        <p className="lead">
+          Note: Some errors disappear by refreshing the page.
+        </p>
+      </div>
+      <div className="container">
+        <div className="row text-center">
+          <h3>questions?<br/>join the <a href="https://discourse.jupyter.org/c/binder">discussion</a>, read the <a href="https://mybinder.readthedocs.io/en/latest/">docs</a>, see the <a href="https://github.com/jupyterhub/binderhub">code</a></h3>
+        </div>
+      </div>
+    </>
+  );
+}