list chapters

.routify/routes.js

@@ -1,11 +1,11 @@
 
 /**
  * @roxi/routify 2.18.1
- * File generated Thu May 20 2021 16:57:51 GMT+0200 (GMT+02:00)
+ * File generated Thu May 20 2021 18:09:03 GMT+0200 (GMT+02:00)
  */
 
 export const __version = "2.18.1"
-export const __timestamp = "2021-05-20T14:57:51.330Z"
+export const __timestamp = "2021-05-20T16:09:03.946Z"
 
 //buildRoutes
 import { buildClientTree } from "@roxi/routify/runtime/buildRoutes"
@@ -51,6 +51,58 @@ export const _tree = {
       "id": "__fallback",
       "component": () => import('../src/pages/_fallback.svelte').then(m => m.default)
     },
+    {
+      "isFile": true,
+      "isDir": true,
+      "file": "_layout.svelte",
+      "filepath": "/[manga]/_layout.svelte",
+      "name": "_layout",
+      "ext": "svelte",
+      "badExt": false,
+      "absolutePath": "/home/dan/Documents/node_projects/mangades/src/pages/[manga]/_layout.svelte",
+      "children": [
+        {
+          "isFile": true,
+          "isDir": false,
+          "file": "index.svelte",
+          "filepath": "/[manga]/index.svelte",
+          "name": "index",
+          "ext": "svelte",
+          "badExt": false,
+          "absolutePath": "/home/dan/Documents/node_projects/mangades/src/pages/[manga]/index.svelte",
+          "importPath": "../src/pages/[manga]/index.svelte",
+          "isLayout": false,
+          "isReset": false,
+          "isIndex": true,
+          "isFallback": false,
+          "isPage": true,
+          "ownMeta": {},
+          "meta": {
+            "recursive": true,
+            "preload": "proximity",
+            "prerender": true
+          },
+          "path": "/:manga/index",
+          "id": "__manga_index",
+          "component": () => import('../src/pages/[manga]/index.svelte').then(m => m.default)
+        }
+      ],
+      "isLayout": true,
+      "isReset": false,
+      "isIndex": false,
+      "isFallback": false,
+      "isPage": false,
+      "importPath": "../src/pages/[manga]/_layout.svelte",
+      "ownMeta": {},
+      "meta": {
+        "recursive": true,
+        "preload": "proximity",
+        "prerender": true
+      },
+      "path": "/:manga",
+      "id": "__manga__layout",
+      "component": () => import('../src/pages/[manga]/_layout.svelte').then(m => m.default)
+    },
     {
       "isFile": true,
       "isDir": false,

assets/global.css

@@ -12,6 +12,16 @@ body {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }
 
+h1 {
+	text-align: center;
+}
+
+main
+{
+	max-width: 450px;
+	margin: auto;
+}
+
 a {
 	color: rgb(0,100,200);
 	text-decoration: none;

src/pages/[manga]/_layout.svelte

@@ -0,0 +1,18 @@
+<script>
+    import request from "../../util/request";
+
+    export var manga;
+
+    function getManga(id) {
+        return request("manga/" + id);
+    }
+    var mangaData = getManga(manga);
+    $: mangaData = getManga(manga);
+    console.log(mangaData);
+</script>
+
+{#await mangaData}
+    loading...
+{:then manga}
+    <slot scoped={({ manga: manga.data.attributes, id: manga.data.id })} />
+{/await}

src/pages/[manga]/index.svelte

@@ -0,0 +1,34 @@
+<script>
+    import request from "../../util/request";
+
+    export var scoped;
+
+    var mangaId = scoped.id;
+    $: mangaId = scoped.id;
+    var manga = scoped.manga;
+    $: manga = scoped.manga;
+
+    function getMangaChapters(id) {
+        return request("manga/" + id + "/feed");
+    }
+
+    var chapters = getMangaChapters(mangaId);
+    $: chapters = getMangaChapters(mangaId);
+
+    console.log(manga);
+    console.log(chapters);
+</script>
+
+<main>
+    <h1>{manga.title.en}</h1>
+
+    {#await chapters}
+        Loading chapters...
+    {:then chapters}
+        <ol>
+           {#each chapters.results as chapter} 
+                <li>{chapter.data.attributes.title}</li>
+           {/each}
+        </ol>
+    {/await}
+</main>

src/pages/index.svelte

@@ -2,11 +2,12 @@
     import { params } from '@roxi/routify'
 	import request from "../util/request";
     import ratelimit from "../util/ratelimit";
+    import { url } from '@roxi/routify/runtime/helpers';
     
 	var name = $params.search;
     $: {
         const url = new URL(window.location.toString());
-        url.searchParams.set("search", name);
+        url.searchParams.set("search", name || "");
         history.replaceState(history.state, "", url.toString());
     }
     /**
@@ -41,7 +42,9 @@
 		<ul>
 			{#each result.results as manga}
 				<li>
-					{manga.data.attributes.title.en}
+                    <a href={$url("./" + manga.data.id)}>
+                        {manga.data.attributes.title.en}
+                    </a>
 				</li>
 			{/each}
 		</ul>
@@ -49,11 +52,6 @@
 </main>
 
 <style>
-	main
-	{
-		max-width: 450px;
-		margin: auto;
-	}
 	input {
 		width: 100%;
 	}

src/util/request.js

@@ -1,7 +1,7 @@
 const base = "https://api.mangadex.org/";
 
 function request(endpoint, query, type = "GET", body) {
-    return fetch(base + endpoint + "?" + query, {
+    return fetch(base + endpoint + (query ? "?" + query : ""), {
         method: type,
         body: body ? JSON.stringify(body) : undefined
     }).then(resp => resp.json());