routing not working

colobas · Feb 7, 2024 · fc69ca2 · fc69ca2
1 parent b844e36
commit fc69ca2
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Svelte</title>
+    <title>Legislativas 2024</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/App.svelte b/src/App.svelte
@@ -1,13 +1,8 @@
 <script>
-  import { Router, Route } from 'svelte-spa-router'
-  import HomePage from './HomePage.svelte'; // Your homepage component
-  import Debate from './Debate.svelte'; // The debate component
-
-  // Define your routes
-  const routes = {
-    '/': HomePage,
-    '/debate/:slug': Debate
-  };
+  import './app.css'
+  import Router from 'svelte-spa-router';
+  import { routes } from './routes.js'
 </script>
 
 <Router {routes} />
+
diff --git a/src/Debate.svelte b/src/Debate.svelte
@@ -56,6 +56,8 @@
   }
 </style>
 
+<h1>{debateData.title}</h1>
+
 <video id="video" controls>
   <track label="Português" kind="subtitles" srclang="pt" src={subtitlesUrl} default>
 </video>

diff --git a/src/HomePage.svelte b/src/HomePage.svelte
@@ -1,8 +1,12 @@
 <script>
-  // Import the debates data from the JSON file
   import debates from './debates.json';
 </script>
 
+Aqui pode encontrar os vídeos dos debates para as eleições legislativas de 2024,
+bem como as respectivas transcrições (obtidas automáticamente, e por isso sujeitas a erros.
+
+Clique num vídeo para ver o debate completo.
+
 <style>
   .grid {
     display: grid;
@@ -20,6 +24,8 @@
   }
 </style>
 
+<h1>Debates Legislativas 2024</h1>
+
 <div class="grid">
   {#each debates as { title, thumbnail, slug }}
     <div class="debate" on:click={() => (window.location.href = `/debate/${slug}`)}>

diff --git a/src/main.js b/src/main.js
@@ -1,8 +1,7 @@
-import './app.css'
+// Initialize the Svelte app and inject it in the DOM
 import App from './App.svelte'
-
 const app = new App({
-  target: document.getElementById('app'),
+    target: document.body
 })
 
 export default app
diff --git a/src/routes.js b/src/routes.js
@@ -0,0 +1,8 @@
+import HomePage from './HomePage.svelte'
+import Debate from './Debate.svelte'
+
+// Export the route definition object
+export const routes = {
+    '/debate/:slug': Debate,
+    '/': HomePage,
+}