git.r.bdr.sh - rbdr/forum/blob - app/forum.svelte

   1 <script>
   2   import LightRouter from 'lightrouter';
   3
   4   import ForumList from './components/forum_list/forum_list.svelte';
   5   import Header from './components/header/header.svelte';
   6
   7   // Routed Components
   8   import Author from './components/author/author.svelte';
   9   import Home from './components/home/home.svelte';
  10   import InvalidRoute from './components/invalid_route/invalid_route.svelte';
  11   import Post from './components/post/post.svelte';
  12   import Topic from './components/topic/topic.svelte';
  13   import TopicIndex from './components/topic_index/topic_index.svelte';
  14
  15   let page;
  16   let params;
  17
  18   // sets the route params and current page.
  19
  20   const setRoute = function setRoute(targetPage) {
  21
  22     return function (routerParams) {
  23
  24       params = routerParams;
  25       page = targetPage;
  26     };
  27   };
  28
  29   const router = new LightRouter({
  30     routes: {
  31       '': () => (page = Home) && true,
  32       'f/{id}': setRoute(TopicIndex),
  33       'g/{id}': setRoute(TopicIndex),
  34       'a/{id}': setRoute(Author),
  35       't/{id}': setRoute(Topic),
  36       'p/{id}': setRoute(Post),
  37       '.*': setRoute(InvalidRoute)
  38     }
  39   });
  40
  41   router.run();
  42
  43 </script>
  44
  45 <Header />
  46 <main>
  47   <svelte:component this={ page } params={ params } />
  48 </main>
  49 <ForumList />
  50
  51 <style>
  52   main {
  53     grid-column: col-start 2 / span 11;
  54   }
  55 </style>