From 9386952cd4ca1c0f3df8b96e08a778eba0261603 Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Sat, 10 Dec 2022 17:38:32 +0100
Subject: [PATCH] improved more information page

---
 src/routes/[manga]/+layout.ts          |   2 +-
 src/routes/[manga]/+page.svelte        |  77 +++++++--------
 src/routes/[manga]/favicon.svelte      |  11 +++
 src/routes/[manga]/relatedManga.svelte | 129 +++++++++++++++++++++++++
 4 files changed, 177 insertions(+), 42 deletions(-)
 create mode 100644 src/routes/[manga]/favicon.svelte
 create mode 100644 src/routes/[manga]/relatedManga.svelte

diff --git a/src/routes/[manga]/+layout.ts b/src/routes/[manga]/+layout.ts
index 2d9a03d..ad432e8 100644
--- a/src/routes/[manga]/+layout.ts
+++ b/src/routes/[manga]/+layout.ts
@@ -7,7 +7,7 @@ export async function load({ params }) {
     if (blocked.includes(params.manga)) {
         throw error(404, 'blocked because of copyright');
     }
-    const manga = await request("manga/" + params.manga + "?includes[]=author&includes[]=cover_art&includes[]=artist");
+    const manga = await request("manga/" + params.manga + "?includes[]=author&includes[]=cover_art&includes[]=artist&includes[]=manga");
     console.log(manga);
     return {
         manga: manga.data.attributes,
diff --git a/src/routes/[manga]/+page.svelte b/src/routes/[manga]/+page.svelte
index 93192fd..9bf754a 100644
--- a/src/routes/[manga]/+page.svelte
+++ b/src/routes/[manga]/+page.svelte
@@ -16,6 +16,8 @@
     import Navbar from "./navbar.svelte";
     import ExpandableDescription from "./expandableDescription.svelte";
     import { tick } from "svelte";
+    import Favicon from "./favicon.svelte";
+    import RelatedManga from "./relatedManga.svelte";
 
     export var data;
 
@@ -294,23 +296,12 @@
 
     var selectedImage = null;
 
-    const relatedMangaMap = {
-        spin_off: "Spin off",
-        doujinshi: "Doujinshi",
-        side_story: "Side story",
-        colored: "Colored version",
-        monochrome: "Monochrome version",
-        adapted_from: "Adapted from",
-        based_on: "Based on",
-        shared_universe: "Shared universe"
-    };
-
     var width;
 
     var smallScreenMode = width < 700;
     $: smallScreenMode = width < 700;
 
-    var scrollY, innerHeight, offsetHeight;
+    var scrollY, innerHeight;
 
     let additionalImages = [];
 
@@ -495,73 +486,77 @@
         </SwiperSlide>
         <SwiperSlide>
             <div style="min-height: 30rem;">
-                {#if anilistData} {#await anilistData then data}                    
-                    Genres: {data.genres.join(", ")}
-                    <br>
-                    
-                    AL popularity: {data.popularity} <br>
-                    favorite on AL: {data.isFavourite ? "yes" : "no"} <br>
-                    AL score: {data.averageScore} <br>
-                    Also known as: {data.synonyms.join(", ")} {Object.values(manga.title).filter(t => t !== title).join(", ")}
-
-                    <br><br>
-                {/await} {/if}
-
                 <div class="flex-wrapped">
-                    {#if relationships.filter(t => t.type === "manga").length}
+                    {#if anilistData} {#await anilistData then data}                    
                         <div>
-                            <h4>Related manga</h4>
-                            {#each relationships.filter(t => t.type === "manga") as relatedManga}
-                                <a href="/{relatedManga.id}">{relatedMangaMap[relatedManga.related] || relatedManga.related}</a> <br>
-                            {/each}
+                            <b>Genres</b>: {data.genres.join(", ")}
+                            <br>
+                            
+                            <b>AL popularity</b>: {data.popularity} <br>
+                            <b>favorite on AL</b>: {data.isFavourite ? "yes" : "no"} <br>
+                            <b>AL score</b>: {data.averageScore} <br>
+                            <b>Also known as</b>: {data.synonyms.join(", ")} {Object.values(manga.title).filter(t => t !== title).join(", ")}
+
+                            <br><br>
                         </div>
-                    {/if}
+                    {/await} {/if}
                     {#if manga.links}
                         <div>
                             <h4>Links</h4>
 
                             {#if manga.links.al}
-                                <a href="https://anilist.co/manga/{manga.links.al}">Anilist</a> <br>
+                                <a href="https://anilist.co/manga/{manga.links.al}"><Favicon url="https://anilist.co" /> Anilist</a> <br>
                             {/if}
                             {#if manga.links.ap}
-                                <a href="https://www.anime-planet.com/manga/{manga.links.ap}">Animeplanet</a> <br>
+                                <a href="https://www.anime-planet.com/manga/{manga.links.ap}"><Favicon url="https://anime-planet.com" /> Animeplanet</a> <br>
                             {/if}
                             {#if manga.links.bw}
-                                <a href="https://bookwalker.jp/{manga.links.bw}">Bookwalker</a> <br>
+                                <a href="https://bookwalker.jp/{manga.links.bw}"><Favicon url="https://bookwalker.jp" /> Bookwalker</a> <br>
                             {/if}
                             {#if manga.links.mu}
-                                <a href="https://www.mangaupdates.com/series.html?id={manga.links.mu}">Manga updates</a> <br>
+                                <a href="https://www.mangaupdates.com/series.html?id={manga.links.mu}"><Favicon url="https://www.mangaupdates.com" /> Manga updates</a> <br>
                             {/if}
                             {#if manga.links.nu}
-                                <a href="https://www.novelupdates.com/series/{manga.links.nu}">Novel updates</a> <br>
+                                <a href="https://www.novelupdates.com/series/{manga.links.nu}"><Favicon url="https://www.novelupdates.com" /> Novel updates</a> <br>
                             {/if}
                             {#if manga.links.amz}
-                                <a href={manga.links.amz}>Amazon</a> <br>
+                                <a href={manga.links.amz}><Favicon url={manga.links.amz} /> Amazon</a> <br>
                             {/if}
                             {#if manga.links.ebj}
-                                <a href={manga.links.ebj}>Ebookjapan</a> <br>
+                                <a href={manga.links.ebj}><Favicon url={manga.links.ebj} /> Ebookjapan</a> <br>
                             {/if}
                             {#if manga.links.mal}
-                                <a href="https://myanimelist.net/manga/{manga.links.mal}">MyAnimeList</a> <br>
+                                <a href="https://myanimelist.net/manga/{manga.links.mal}"><Favicon url="https://myanimelist.net" /> MyAnimeList</a> <br>
                             {/if}
                             {#if manga.links.cdj}
-                                <a href="{manga.links.cdj}">CDJapan</a> <br>
+                                <a href="{manga.links.cdj}"><Favicon url={manga.links.cdj} /> CDJapan</a> <br>
                             {/if}
                             {#if manga.links.raw}
-                                <a href="{manga.links.raw}">RAW</a> <br>
+                                <a href="{manga.links.raw}"><Favicon url={manga.links.raw} /> RAW</a> <br>
                             {/if}
                             {#if manga.links.engtl}
-                                <a href="{manga.links.engtl}">engtl</a> <br>
+                                <a href="{manga.links.engtl}"><Favicon url={manga.links.engtl} /> engtl</a> <br>
                             {/if}
+
+                            <a href="https://mangadex.org/title/{mangaId}"><Favicon url="https://mangadex.org"/> Mangadex.org</a>
                         </div>
                     {/if}
                 </div>
+
+                {#if relationships.filter(t => t.type === "manga").length}
+                    <div>
+                        <RelatedManga on:slideToClosest={() => swiper.slideToClosest()} mangaRelations={relationships.filter(t => t.type === "manga")} />
+                    </div>
+                {/if}
             </div>
         </SwiperSlide>
     </Swiper>
 </main>
 
 <style>
+    h4 {
+        margin: 0;
+    }
     .tags {
         display: flex;
         overflow: auto;
diff --git a/src/routes/[manga]/favicon.svelte b/src/routes/[manga]/favicon.svelte
new file mode 100644
index 0000000..2f78b6c
--- /dev/null
+++ b/src/routes/[manga]/favicon.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { imageproxy } from "$lib/util/request";
+
+    export var url: string;
+
+    var domain = (new URL(url)).hostname;
+    $: domain = (new URL(url)).hostname;
+    $: favicon = `https://www.google.com/s2/favicons?domain=${domain}`;
+</script>
+
+<img src="{imageproxy}{favicon}" alt="">
\ No newline at end of file
diff --git a/src/routes/[manga]/relatedManga.svelte b/src/routes/[manga]/relatedManga.svelte
new file mode 100644
index 0000000..c0544e5
--- /dev/null
+++ b/src/routes/[manga]/relatedManga.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+    import Item from "$lib/components/item.svelte";
+    import ShowTypeChooser, { showType } from "$lib/components/showTypeChooser.svelte";
+    import request, { imageproxy } from "$lib/util/request";
+    import { createEventDispatcher, tick } from "svelte";
+
+    const relatedMangaMap = {
+        main_story: "Main story",
+        prequel: "Prequel",
+        same_franchise: "Same franchise",
+        sequel: "Sequel",
+        alternate_story: "Alternate story",
+        alternate_version: "Alternate version",
+        preserialization: "Preserialization",
+        serialization: "Serialization",
+        spin_off: "Spin off",
+        doujinshi: "Doujinshi",
+        side_story: "Side story",
+        colored: "Colored version",
+        monochrome: "Monochrome version",
+        adapted_from: "Adapted from",
+        based_on: "Based on",
+        shared_universe: "Shared universe",
+    };
+
+    export var mangaRelations: {
+        id: string;
+        related: keyof typeof relatedMangaMap;
+        type: "manga";
+        attributes: {
+            title: {
+                en?: string;
+                [key: string]: string;
+            };
+            availableTranslatedLanguages: string[];
+            contentRating: "safe" | "suggestive" | "erotica" | "pornographic";
+            description: {
+                en?: string;
+                [key: string]: string;
+            };
+            status: string;
+            tags: {
+                id: string;
+                type: "tag";
+                attributes: {
+                    name: {
+                        en?: string;
+                        [key: string]: string;
+                    };
+                    group: string;
+                    version: number;
+                };
+            }[];
+            year: number;
+        };
+    }[];
+
+    let relations;
+    relations = getRelations(mangaRelations);
+    async function getRelations(rels) {
+        const params = new URLSearchParams();
+        for (let rel of rels) params.append("ids[]", rel.id);
+        params.append("limit", rels.length);
+        params.append("contentRating[]", "safe");
+        params.append("contentRating[]", "suggestive");
+        params.append("contentRating[]", "erotica");
+        params.append("contentRating[]", "pornographic");
+        params.append("includes[]", "cover_art");
+        const data = await request("manga?" + params);
+        console.log("rm", data.data);
+        return data.data;
+    }
+
+    function getData(relation, relations) {
+        let res = relations.find((t) => t.id === relation.id);
+        console.log("gd", relation, res);
+        return res;
+    }
+
+    function getCoverArt(relation, relations) {
+        let data = getData(relation, relations);
+        return data.relationships.find((t) => t.type === "cover_art").attributes.fileName;
+    }
+
+    const dispatch = createEventDispatcher();
+
+    $: {
+        $showType;
+        setTimeout(() => dispatch("slideToClosest"), 100);
+    }
+</script>
+
+<ShowTypeChooser />
+
+<div class="grid" class:list={$showType == "list"}>
+    {#each mangaRelations as manga}
+        <a href="/manga/{manga.id}" class="manga">
+            {#await relations then relations}
+                <Item
+                    r18={!['safe', 'suggestive'].includes(manga.attributes.contentRating)}
+                    title={manga.attributes.title.en}
+                    description={manga.attributes.description.en}
+                    cover={`https://uploads.mangadex.org/covers/${manga.id}/${getCoverArt(manga, relations)}.512.jpg`}
+
+                    />
+            {/await}
+        </a>
+    {/each}
+</div>
+
+<style>
+    .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 11rem);
+        grid-gap: 1rem;
+  		align-items: flex-start;
+        padding: 1rem;
+    }
+	.grid.list {
+		grid-template-columns: 1fr;
+	}
+    a {
+        color: white;
+    }
+    a:hover {
+        color: white;
+        text-decoration: none;
+    }
+</style>
\ No newline at end of file