add about page

musical-leptos/public/styles.css

@@ -10,7 +10,7 @@
 /* ------------------------------------------------------------ */
 
 body {
-  font-family: sans-serif;
+  font-family: "Comic Sans MS", "Comic Sans", sans-serif;
   text-align: center;
 }
 
@@ -42,11 +42,11 @@ button {
   margin: var(--size-6);
 }
 
-body > picture,
+body>picture,
 button {
   display: block;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   margin: 2rem;
-}
+}

musical-leptos/src/components/dancing_lights.rs

@@ -42,11 +42,11 @@ async fn load_media_stream() -> Result<MediaStream, JsValue> {
 #[component]
 pub fn DancingLights() -> impl IntoView {
     // TODO: do this on button click
-    let (listen, set_listen) = create_signal(0);
+    let (listen, set_listen) = create_signal(false);
 
     // TODO: this is wrong. this runs immediatly, not on first click. why?
     let start_listening = create_resource(listen, |x| async move {
-        if x == 0 {
+        if x == false {
             return Ok(None);
         }
 
@@ -87,15 +87,22 @@ pub fn DancingLights() -> impl IntoView {
             None | Some(Ok(None)) => view! {
                 <button
                     on:click= move |_| {
-                        set_listen(1)
-
-                        // TODO: hide this button?
+                        set_listen(true)
                     }
                 >
                     Start Listening
                 </button>
             }.into_view(),
-            Some(Ok(Some(media_stream_id))) => view! { <button>Now listening to {media_stream_id}</button> }.into_view(),
+            Some(Ok(Some(media_stream_id))) => view! {
+                <button
+                    on:click= move |_| {
+                        // set_listen(false)
+
+                        // TODO: set_listen to false. once we figure out how to turn off this media_stream
+                    }
+                >
+                    Now listening to {media_stream_id}
+                </button> }.into_view(),
             Some(Err(err)) => view! { <div>Error: {err}</div> }.into_view(),
         }}
 

musical-leptos/src/lib.rs

@@ -8,6 +8,7 @@ mod pages;
 mod wasm_audio;
 
 // Top-Level pages
+use crate::pages::about::About;
 use crate::pages::home::Home;
 use crate::pages::not_found::NotFound;
 
@@ -27,14 +28,17 @@ pub fn App() -> impl IntoView {
         <Meta charset="UTF-8"/>
         <Meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
-        // <Router>
-        //     <Routes>
-        //         <Route path="/" view=Home/>
-        //         <Route path="/*" view=NotFound/>
-        //     </Routes>
-        // </Router>
-
-        // TODO: figure out how to get the router working on github pages. i thought public url would do it
-        <Home />
+        <div class="container">
+            <Router>
+                <nav>
+                    <A href="">"Home"</A> - <A href="about">"About"</A>
+                </nav>
+                <Routes>
+                    <Route path="" view=Home />
+                    <Route path="about" view=About />
+                    <Route path="*" view=NotFound />
+                </Routes>
+            </Router>
+        </div>
     }
 }

musical-leptos/src/pages/mod.rs

@@ -1,2 +1,3 @@
+pub mod about;
 pub mod home;
 pub mod not_found;