fix loading of images, improve styles, add more info

assets/global.css

@@ -18,7 +18,7 @@ h1 {
 
 main
 {
-	max-width: 550px;
+	max-width: 600px;
 	margin: auto;
 }
 

src/components/chapter.svelte

@@ -7,6 +7,7 @@
     export var selected;
     export var disabledDownload = false;
     export var progress = 0;
+    var scanlationGroup = chapter.relationships.find(t => t.type === "scanlation_group")?.attributes.name;
 
     /**
      * @param {MouseEvent} e
@@ -28,7 +29,10 @@
 <tr on:mouseenter={mouseenter} on:mousedown={click} class:selected={selected} style="background-image: linear-gradient(to right, rgba(0, 255, 0, 0.247) {progress * 100}%, transparent {progress * 100}%)">
     <td class="no-wrap">{chapter.attributes.volume ? "Vol " + chapter.attributes.volume : ""}</td>
     <td class="no-wrap">{chapter.attributes.chapter ? "Chapter " + chapter.attributes.chapter : ""}</td>
-    <td>{chapter.attributes.title}</td>
+    <td>
+        <div class="title">{chapter.attributes.title}</div>
+        <div class="scanlation">{scanlationGroup}</div>
+    </td>
     <td class="action no-wrap"><a href={$url("./" + chapter.id)} on:click|stopPropagation={() => !disabledDownload && dispatch("view")}>View</a></td>
 </tr>
 
@@ -40,6 +44,13 @@
         background-repeat: no-repeat;
         user-select: none;
     }
+    .scanlation {
+        color: grey;
+        font-size: 0.9rem;
+    }
+    .title {
+        font-size: 1.1rem;
+    }
 
     tr.selected {
         background: rgba(0,0,0,0.15);
@@ -50,6 +61,9 @@
     tr.selected:hover {
         background: rgba(0,0,0,0.25);
     }
+    .no-wrap {
+        white-space: nowrap;
+    }
 
     td {
         padding: 5px 5px;

src/pages/[manga]/_layout.svelte

@@ -7,11 +7,12 @@
 
     function getManga(id) {
         if(!id) return;
-        return request("manga/" + id);
+        return request("manga/" + id + "?includes[]=author&includes[]=cover_art&includes[]=artist");
     }
     var mangaData = getManga(manga);
     $: mangaData = getManga(manga);
-    console.log(mangaData);
+    console.log("mangadata", mangaData);
+    $: mangaData.then(t => console.log("manga data", t));
 
     const blocked = ["227e3f72-863f-46f9-bafe-c43104ca29ee", "b0b721ff-c388-4486-aa0f-c2b0bb321512"];
 </script>
@@ -40,7 +41,7 @@
         loading...
     {:then manga}
         {#if manga}
-            <slot scoped={({ manga: manga.data.attributes, mangaRelationships: manga.relationships, id: manga.data.id })} />
+            <slot scoped={({ manga: manga.data.attributes, mangaRelationships: manga.data.relationships, id: manga.data.id })} />
         {:else}
             Manga not found.
         {/if}

src/pages/[manga]/index.svelte

@@ -19,7 +19,7 @@
     $: title = manga.title.en || manga.title.jp || Object.values(manga.title)[0];
 
     async function getMangaChapters(id) {
-        const data = await request("manga/" + id + "/feed?limit=500&translatedLanguage[]=en");
+        const data = await request("manga/" + id + "/feed?limit=500&translatedLanguage[]=en&includes[]=scanlation_group");
         console.log(data);
         data.data = data.data
             .filter(datum => !datum.attributes?.externalUrl)
@@ -27,11 +27,12 @@
         return data;
     }
 
+    var chapters;
     $: chapters = getMangaChapters(mangaId);
 
-    console.log(manga);
-    console.log(chapters);
-    console.log(relationships);
+    console.log("manga", manga);
+    console.log("chapters", chapters);
+    console.log("relationships", relationships);
 
     var progress = 0;
     var state = "idle";
@@ -149,6 +150,7 @@
             author: "Unknown",
             chapters: selected.map(chapter => ({
                 id: chapter.id,
+                title: chapter.attributes.title,
                 number: chapter.attributes.chapter,
                 volume: chapter.attributes.volume
             }))
@@ -223,6 +225,36 @@
 <main>
     <h1>{title}</h1>
 
+    <h3>
+        {#if manga.altTitles.find(t => t.en)}
+            {manga.altTitles.find(t => t.en)?.en} &middot;
+        {/if}
+        {#if manga.year}
+            {manga.year} &middot;
+        {/if}
+        {manga.status}
+    </h3>
+
+    <div class="flex">
+        {#if relationships.find(t => t.type === "cover_art")}
+            <img class="cover" draggable="false" src="https://cors-anywhere.danbulant.workers.dev/?https://uploads.mangadex.org/covers/{mangaId}/{relationships.find(t => t.type === "cover_art").attributes.fileName}.512.jpg" alt="">
+        {/if}
+        <div class="info">
+            {#if relationships.find(t => t.type === "author")}
+                <span class="block">Author: {relationships.find(t => t.type === "author").attributes.name}</span>
+            {/if}
+            {#if relationships.find(t => t.type === "artist")}
+                <span class="block">Artist: {relationships.find(t => t.type === "artist").attributes.name}</span>
+            {/if}
+            {#if relationships.find(t => t.related === "colored" && t.type === "manga")}
+                <a href="/{relationships.find(t => t.related === "colored" && t.type === "manga").id}" class="block">Colored version</a>
+            {/if}
+            {#if manga.description.en}
+                <p>{manga.description.en}</p>
+            {/if}
+        </div>
+    </div>
+
     <div class="flex">
         <div class="linklist">
             <a href={$url("..")}>Go back to search page</a>
@@ -293,6 +325,24 @@
 </main>
 
 <style lang="postcss">
+    .cover {
+        border-radius: 10px;
+        height: 350px;
+        margin-right: 15px;
+    }
+    .block {
+        display: block;
+    }
+    .flex {
+        display: flex;
+    }
+    h3 {
+        text-align: center;
+        margin-top: 0;
+    }
+    h1 {
+        margin-bottom: 0;
+    }
     .flex {
         display: flex;
         justify-content: space-between;

src/util/baseGenerator.js

@@ -7,6 +7,7 @@
  * @property {string[]} links
  * @property {string} hash
  * @property {string} baseUrl
+ * @property {string} title
  */
 
 import request, { proxy } from "./request";

src/util/generateCbz.js

@@ -39,7 +39,7 @@ export class CBZGenerator extends BaseGenerator {
                 const start = performance.now();
                 const res = await this.fetchImage(url, chapter);
                 const chapterText = chapter.number.toString().padStart(chapterCountLength, "0");
-                const image = new ZipPassThrough(`${this.opts.title} ${chapterText}/${this.opts.title} ${chapterText} page ${i.toString().padStart(imageCountLength, "0")}.${hash.substr(hash.lastIndexOf(".") + 1)}`);
+                const image = new ZipPassThrough(`${this.opts.title} ${chapter.volume ? "vol " + chapter.volume.toString().padStart(3, "00") + " " : ""} ch ${chapterText}${chapter.title ? " " + chapter.title : ""}/${this.opts.title} ${chapterText} page ${i.toString().padStart(imageCountLength, "0")}.${hash.substr(hash.lastIndexOf(".") + 1)}`);
                 this.zip.add(image);
                 const data = new Uint8Array(await res.arrayBuffer());
                 const end = performance.now() - start;