titles

.gitignore

@@ -2,3 +2,4 @@
 /public/build/
 
 .DS_Store
+.routify

src/pages/[manga]/[chapter]/_layout.svelte

@@ -0,0 +1,20 @@
+<script>
+    export var scoped;
+    export var chapter;
+
+    var mangaId = scoped.id;
+    $: mangaId = scoped.id;
+    var manga = scoped.manga;
+    $: manga = scoped.manga;
+
+    function getChapter(id) {
+        const data = request("chapter/" + id);
+        console.log(data);
+        return data;
+    }
+
+    var chapterData = getchapter(chapter);
+    $: chapterData = getChapter(chapter);
+</script>
+
+<slot scoped={({ manga, mangaId, id: chapter, chapter: chapterData })} />

src/pages/[manga]/index.svelte

@@ -1,5 +1,6 @@
 <script>
-    import request from "../../util/request";
+    import { title } from "process";
+import request from "../../util/request";
 
     export var scoped;
 
@@ -8,8 +9,10 @@
     var manga = scoped.manga;
     $: manga = scoped.manga;
 
-    function getMangaChapters(id) {
-        return request("manga/" + id + "/feed");
+    async function getMangaChapters(id) {
+        const data = await request("manga/" + id + "/feed");
+        data.results.sort((a, b) => a.data.attributes.chapter - b.data.attributes.chapter);
+        return data;
     }
 
     var chapters = getMangaChapters(mangaId);
@@ -19,16 +22,26 @@
     console.log(chapters);
 </script>
 
+<svelte:head>
+    <title>Chapters of {manga.title.en}</title>
+</svelte:head>
+
 <main>
     <h1>{manga.title.en}</h1>
 
     {#await chapters}
         Loading chapters...
     {:then chapters}
-        <ol>
+        <ol class="hide-nums">
            {#each chapters.results as chapter} 
-                <li>{chapter.data.attributes.title}</li>
+                <li>{chapter.data.attributes.volume ? "Vol " + chapter.data.attributes.volume : ""} Chapter {chapter.data.attributes.chapter} {chapter.data.attributes.title}</li>
            {/each}
         </ol>
     {/await}
-</main>
+</main>
+
+<style>
+    .hide-nums {
+        list-style-type: disc;
+    }
+</style>

src/pages/index.svelte

@@ -27,6 +27,10 @@
 	$: result.then(console.log);
 </script>
 
+<svelte:head>
+	<title>Mangadex search</title>
+</svelte:head>
+
 <main>
 
 	<h1>MANGADEX</h1>