Add a router

9 files changed, 89 insertions, 6 deletions

diff --git a/app/components/author/author.svelte b/app/components/author/author.svelte
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/app/components/author/author.svelte
diff --git a/app/components/home/home.svelte b/app/components/home/home.svelte
new file mode 100644
index 0000000..280bb5d
--- /dev/null
+++ b/app/components/home/home.svelte
@@ -0,0 +1,3 @@
+<h1>Welcome.</h1>
+<p>You are now in a forum. Select a category from the left or input a
+ valid URL.</p>
diff --git a/app/components/invalid_route/invalid_route.svelte b/app/components/invalid_route/invalid_route.svelte
new file mode 100644
index 0000000..32225f1
--- /dev/null
+++ b/app/components/invalid_route/invalid_route.svelte
@@ -0,0 +1,2 @@
+<h1> This is not right. </h1>
+<p>This URL is not valid. Try again.</p>
diff --git a/app/components/post/post.svelte b/app/components/post/post.svelte
new file mode 100644
index 0000000..429dfd6
--- /dev/null
+++ b/app/components/post/post.svelte
@@ -0,0 +1,29 @@
+<script>
+  import Glyph from '../glyph/glyph.svelte';
+</script>
+
+<aside class="post-meta" title="Post 2 of 2 metadata">
+  <Glyph uuid="b33f0339f7d64d1ca27f1c0aefb7d753" />
+  <span class="h-card">
+    By: <a href="/a/time4carrots" class="p-nickname u-url">time4carrots</a>.
+  </span>
+  <time role="presentation" class="dt-published" datetime="2018-08-15T04:10:00.929Z">
+    <a href="/p/da9910f3febde91948000ce1535ea">
+      2018-08-15 04:10:00
+    </a>
+  </time>
+</aside>
+<article class="e-content" title="Post 2 of 2 by time4carrots">
+  <p>It's just how it is...</p>
+</article>
+<hr/>
+
+<style>
+  article, hr, aside {
+    grid-column: col-start 2 / span 11;
+  }
+
+  .post-meta > * {
+    vertical-align: top;
+  }
+</style>
diff --git a/app/components/topic/topic.svelte b/app/components/topic/topic.svelte
index 3816bbc..c2462fd 100644
--- a/app/components/topic/topic.svelte
+++ b/app/components/topic/topic.svelte
@@ -11,10 +11,10 @@
   </aside>
   <aside class="topic-tags" title="Topic Tags">
     Tags:
-    <a href="/t/question" class="p-category">question<span class="tag-weight">(5)</span></a>
-    <a href="/t/meta" class="p-category">meta<span class="tag-weight">(34)</span></a>
-    <a href="/t/carrots" class="p-category">carrots<span class="tag-weight">(1)</span></a>
-    <a href="/t/tpbo" class="p-category">tpbo<span class="tag-weight">(2)</span></a>
+    <a href="/g/question" class="p-category">question<span class="tag-weight">(5)</span></a>
+    <a href="/g/meta" class="p-category">meta<span class="tag-weight">(34)</span></a>
+    <a href="/g/carrots" class="p-category">carrots<span class="tag-weight">(1)</span></a>
+    <a href="/g/tpbo" class="p-category">tpbo<span class="tag-weight">(2)</span></a>
   </aside>
   <aside class="post-meta" title="Post 1 of 2 metadata">
     <Glyph uuid="3cd8c84e18144a2da71f6bace9392abc" />
@@ -38,7 +38,7 @@
     <span class="h-card">
       By: <a href="/a/time4carrots" class="p-nickname u-url">time4carrots</a>.
     </span>
-    <time class="dt-published" datetime="2018-08-15T04:10:00.929Z">
+    <time role="presentation" class="dt-published" datetime="2018-08-15T04:10:00.929Z">
       <a href="/p/da9910f3febde91948000ce1535ea">
         2018-08-15 04:10:00
       </a>
diff --git a/app/components/topic_index/topic_index.svelte b/app/components/topic_index/topic_index.svelte
new file mode 100644
index 0000000..699550e
--- /dev/null
+++ b/app/components/topic_index/topic_index.svelte
@@ -0,0 +1,7 @@
+<script>
+  export let params;
+</script>
+
+<h1>Topic Index.</h1>
+<p>This component lists topics for category or tag with id: {params.id}</p>
+
diff --git a/app/forum.svelte b/app/forum.svelte
index d944d8e..038f176 100644
--- a/app/forum.svelte
+++ b/app/forum.svelte
@@ -1,10 +1,46 @@
 <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,
+      '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>
 
 <Header />
-<Topic />
+<svelte:component this={ page } params={ params } />
 <ForumList />
diff --git a/package-lock.json b/package-lock.json
index 03ba9cb..a418fc8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6135,6 +6135,11 @@
         "type-check": "~0.3.2"
       }
     },
+    "lightrouter": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/lightrouter/-/lightrouter-0.3.3.tgz",
+      "integrity": "sha1-GJX41G6kAHXfVMCogjYvyKDB0hs="
+    },
     "linkify-it": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
diff --git a/package.json b/package.json
index c1272d8..bd75030 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "koa": "^2.11.0",
     "koa-send": "^5.0.0",
     "koa-static": "^5.0.0",
+    "lightrouter": "^0.3.3",
     "rethinkdb": "^2.4.2",
     "uuid": "^3.3.3"
   },