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

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