setup router (#10)

Author: MathyouMB

.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
   plugins: ['svelte3', '@typescript-eslint'],
   rules: {
     'no-multiple-empty-lines': 'off',
-    'no-undef': 'off'
+    'no-undef': 'off',
+    'no-use-before-define': 'off'
   }
 }

package.json

@@ -53,7 +53,8 @@
   },
   "dependencies": {
     "@lottiefiles/svelte-lottie-player": "^0.2.0",
-    "sirv-cli": "^1.0.0"
+    "sirv-cli": "^1.0.0",
+    "svelte-spa-router": "^3.1.0"
   },
   "jest": {
     "transform": {

src/App.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
-	import { Navbar } from './components'
-	import { Home } from './pages'
+	import Router from 'svelte-spa-router'
+	// import { Navbar } from './components'
+	import { Home, Question, NotFound } from './pages'
+
+	const routes = {
+	  '/': Home,
+	  '/question': Question,
+	  '*': NotFound
+	}
 </script>
 
-<Navbar/>
-<Home/>
+<!--<Navbar/>-->
+<Router {routes}/>

src/components/HeaderInformation/HeaderInformation.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { link } from 'svelte-spa-router'
     import { Button, ButtonInverse } from '../../components'
 </script>
 
@@ -9,7 +10,7 @@
         In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface.
     </div>
     <div class="header-buttons">
-        <Button label="Questions"/>
+        <a href="/question" use:link><Button label="Questions"/></a>
         <span class="button-spacing">
             <ButtonInverse label="About"/>
         </span>
@@ -53,6 +54,6 @@
     }
 
     .button-spacing {
-       margin-left: 1rem; 
+       margin-left: 1rem;
     }
-</style>
+</style>

src/pages/Home/Home.stories.svelte

@@ -0,0 +1 @@
+<h1>404</h1>

src/pages/NotFound/NotFound.svelte

@@ -0,0 +1 @@
+export { default as NotFound } from './NotFound.svelte'

src/pages/NotFound/index.ts

@@ -0,0 +1 @@
+<h1>question</h1>

src/pages/Question/Question.svelte

@@ -0,0 +1 @@
+export { default as Question } from './Question.svelte'

src/pages/Question/index.ts

@@ -1 +1,3 @@
 export { Home } from './Home'
+export { NotFound } from './NotFound'
+export { Question } from './Question'

src/pages/index.ts

@@ -9456,6 +9456,11 @@ regexp.prototype.flags@^1.3.1:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
 
+[email protected]:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
+
 regexpp@^3.0.0, regexpp@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
@@ -10584,6 +10589,13 @@ svelte-preprocess@^4.0.0:
     detect-indent "^6.0.0"
     strip-indent "^3.0.0"
 
+svelte-spa-router@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/svelte-spa-router/-/svelte-spa-router-3.1.0.tgz#a929f0def7e12c41f32bc356f91685aeadcd75bf"
+  integrity sha512-jlM/xwjn57mylr+pzHYCOOy+IPQauT46gOucNGTBu6jHcFXu3F+oaojN4PXC1LYizRGxFB6QA0qnYbZnRfX7Sg==
+  dependencies:
+    regexparam "1.3.0"
+
 svelte@^3.37.0:
   version "3.37.0"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.37.0.tgz#dc7cd24bcc275cdb3f8c684ada89e50489144ccd"