feat: public system page!

src/App.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { Router, Link, Route } from "svelte-navigator";
+  import { Router, Route } from "svelte-navigator";
   import Navigation from "./lib/Navigation.svelte";
   import Dash from "./pages/Dash.svelte";
   import Home from "./pages/Home.svelte";
   import Settings from './pages/Settings.svelte';
   import Footer from './lib/Footer.svelte';
+  import Public from "./pages/Public.svelte";
+  import System from "./pages/profiles/System.svelte";
   
   // theme cdns (I might make some myself too)
   let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css";
@@ -31,6 +33,7 @@
       localStorage.setItem("pk-style", "dark");
     };
   };
+
 </script>
 
 <svelte:head>
@@ -39,14 +42,35 @@
 
 <Router>
   <Navigation bind:style={style}/>
-    <Route path="/">
-        <Home />
-    </Route>
-    <Route path="/dash">
-      <Dash />
-    </Route>
-    <Route path="/settings">
-      <Settings />
+    <Route path="/"><Home /></Route>
+    <Route path="/dash"><Dash /></Route>
+    <Route path="/settings"><Settings /></Route>
+    <Route path="/public/*">
+      <Route path="/"><Public /></Route>
+      <Route path="/s/*">
+        <Route path = "/:id">
+          <System />
+        </Route>
+        <Route path = "/">
+          hey please provide a system
+        </Route>
+      </Route>
+      <Route path="/m/*">
+        <Route path = "/:id">
+          member
+        </Route>
+        <Route path = "/">
+          hey please provide a member
+        </Route>
+      </Route>
+      <Route path="/g/*">
+        <Route path = "/:id">
+          group
+        </Route>
+        <Route path = "/">
+          hey please provide a group
+        </Route>
+      </Route>
     </Route>
   <Footer />
 </Router>