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