mirror of
https://github.com/danbulant/Mangades
synced 2026-06-19 06:11:38 +00:00
improved more information page
This commit is contained in:
Daniel Bulant
parent
c3e0dbe394
commit
9386952cd4
4 changed files with 177 additions and 42 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
11
src/routes/[manga]/favicon.svelte
Normal file
11
src/routes/[manga]/favicon.svelte
Normal file
|
|
@ -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="">
|
||||
129
src/routes/[manga]/relatedManga.svelte
Normal file
129
src/routes/[manga]/relatedManga.svelte
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue