From afda8895451040b35eafc2bde5b62ec9286a4014 Mon Sep 17 00:00:00 2001
From: ben little <ben.little@benlittle.dev>
Date: Fri, 7 Jun 2024 18:43:39 -0600
Subject: [PATCH] add description to catch-all page

---
 ui/src/pages/not_found.rs   | 31 ++++++++++++++++++++++++++++++-
 ui/src/pages/player/info.rs |  4 +---
 ui/style.scss               | 11 +++++++++++
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/ui/src/pages/not_found.rs b/ui/src/pages/not_found.rs
index 2f867cb..0935540 100644
--- a/ui/src/pages/not_found.rs
+++ b/ui/src/pages/not_found.rs
@@ -3,5 +3,34 @@ use leptos::*;
 /// 404 Not Found Page
 #[component]
 pub fn NotFound() -> impl IntoView {
-    view! { <h1>"Uh oh!" <br/> "We couldn't find that page!"</h1>  }
+    let spa_wiki = "https://en.wikipedia.org/wiki/Single-page_application";
+    view! {
+        <div id="not-found">
+            <h3>"Not Found"</h3>
+            <br/>
+            <h4>
+                "Check out the navigation menu by hovering your cursor \
+                 over the blue-ish purple-ish bar on the left."
+            </h4>
+            <br/>
+            <h5>"But this URL worked before!"</h5>
+            <p>
+                "This app is a " <a href=spa_wiki>"Single Page Applicaton"</a> " \
+                or SPA. This means that routing (how your browser decides what \
+                to do with the URL) is determined by code running on this page \
+                rather than by making a web request to a remote server."
+            </p>
+            <p>
+                "This would normally be fine, but this site is also hosted on Github \
+                Pages, which doesn't currently provide support for a SPA's routing \
+                mechanism. That means you may need to navigate to the page using \
+                a " <em>"link in the app"</em> " rather than by following an external \
+                link."
+            </p>
+            <p>
+                "If you clicked something inside the app and got to this page, that's \
+                definitely a bug!"
+            </p>
+        </div>
+    }
 }
diff --git a/ui/src/pages/player/info.rs b/ui/src/pages/player/info.rs
index cbfef97..eb69f82 100644
--- a/ui/src/pages/player/info.rs
+++ b/ui/src/pages/player/info.rs
@@ -40,9 +40,7 @@ pub fn Info() -> impl IntoView {
                     </p>
                 }
             }
-            <h3>
-                <ClickToEdit sig=title/>
-            </h3>
+            <h3> <ClickToEdit sig=title/> </h3>
             <table>
                 <tr class="editable">
                     <td>"Shortname"</td>
diff --git a/ui/style.scss b/ui/style.scss
index 41a8a0a..554d84c 100644
--- a/ui/style.scss
+++ b/ui/style.scss
@@ -450,4 +450,15 @@ nav ul {
 
 .hidden {
   display: none !important;
+}
+
+#not-found {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  text-align: left;
+  
+  >* {
+    margin-bottom: 1rem;
+  }
 }
\ No newline at end of file