X-Git-Url: https://git.r.bdr.sh/rbdr/forum/blobdiff_plain/890274a7b3ac70848ba9973ef33d53ed58ff88a8..2dc5448262ce444ead594376c47a62c3e88e0f8e:/app/forum.svelte?ds=sidebyside

diff --git a/app/forum.svelte b/app/forum.svelte
index 99ce5a8..85c6d12 100644
--- a/app/forum.svelte
+++ b/app/forum.svelte
@@ -1,35 +1,55 @@
 <script>
+  import LightRouter from 'lightrouter';
+
   import ForumList from './components/forum_list/forum_list.svelte';
   import Header from './components/header/header.svelte';
 
+  // Routed Components
+  import Author from './components/author/author.svelte';
+  import Home from './components/home/home.svelte';
+  import InvalidRoute from './components/invalid_route/invalid_route.svelte';
+  import Post from './components/post/post.svelte';
+  import Topic from './components/topic/topic.svelte';
+  import TopicIndex from './components/topic_index/topic_index.svelte';
+
+  let page;
+  let params;
+
+  // sets the route params and current page.
+
+  const setRoute = function setRoute(targetPage) {
+
+    return function (routerParams) {
+
+      params = routerParams;
+      page = targetPage;
+    };
+  };
+
+  const router = new LightRouter({
+    routes: {
+      '': () => (page = Home) && true,
+      'f/{id}': setRoute(TopicIndex),
+      'g/{id}': setRoute(TopicIndex),
+      'a/{id}': setRoute(Author),
+      't/{id}': setRoute(Topic),
+      'p/{id}': setRoute(Post),
+      '.*': setRoute(InvalidRoute)
+    }
+  });
+
+  router.run();
+
 </script>
 
-<main class="topic">
-  <h1>Is this really what the forum looks like?</h1>
-  <p class="topic-meta">
-    <span class="topic-location">Posted on <a href="/f/interaction">Interaction</a>.</span>
-    <span class="topic-ttl"><a href="/t/2a3fc567af8c897ca6f55fb5fj">3 days remaining</a>.</span>
-  </p>
-  <p class="topic-tags">
-    Tags:
-    <a href="/t/question">question<span class="tag-weight">(5)</span></a>
-    <a href="/t/meta">meta<span class="tag-weight">(34)</span></a>
-    <a href="/t/carrots">carrots<span class="tag-weight">(1)</span></a>
-    <a href="/t/tpbo">tpbo<span class="tag-weight">(2)</span></a>
-  </p>
-  <article class="post">
-    <footer>
-      <span class="post-author">By: <a href="/a/rbdr">rbdr</a>.</span>
-      <span class="post-date"><a href="/p/a80c70ea0120387123097ce1907ff">2018-08-14 03:32:10</a></span>
-      <p>So, I’m new here and I had heard a lot about the forums.<br><br>Is this really it??<br><br>It has barely any features, also I think I accidentaally created a post without a board? what’s up with that??</p>
-    </footer>
-  </article>
-</main>
 <Header />
+<main>
+  <svelte:component this={ page } params={ params } />
+</main>
 <ForumList />
 
 <style>
-  h1 {
-    color: magenta;
+  main {
+    grid-column: col-start 2 / span 11;
   }
 </style>