<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>
<Header />
-<Topic />
+<main>
+ <svelte:component this={ page } params={ params } />
+</main>
<ForumList />
+
+<style>
+ main {
+ grid-column: col-start 2 / span 11;
+ }
+</style>