feat(frontend): add genre display UI and enhance link component
- Anime.svelte: Add genre display section with clickable badges that link to AniList search results for each genre. Genres are now displayed above the existing tags section with consistent styling. - WebsiteLink.svelte: Enhance component to support custom URLs via the `url` export parameter. Previously, the component only generated URLs based on service prefixes (a-, m-, s-). Now it accepts a direct URL parameter for flexible linking to AniList searches and other external resources. These changes provide users with an improved browsing experience by making genres interactive and easily searchable.
This commit is contained in:
@@ -8,6 +8,7 @@
|
|||||||
simklLoggedIn,
|
simklLoggedIn,
|
||||||
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
|
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
|
||||||
import { push } from "svelte-spa-router";
|
import { push } from "svelte-spa-router";
|
||||||
|
import WebsiteLink from "./WebsiteLink.svelte";
|
||||||
import type { AniListGetSingleAnime } from "../anilist/types/AniListCurrentUserWatchListType";
|
import type { AniListGetSingleAnime } from "../anilist/types/AniListCurrentUserWatchListType";
|
||||||
import Rating from "./Rating.svelte";
|
import Rating from "./Rating.svelte";
|
||||||
import {
|
import {
|
||||||
@@ -827,14 +828,31 @@
|
|||||||
|
|
||||||
<div class="flex m-5">
|
<div class="flex m-5">
|
||||||
<div>
|
<div>
|
||||||
|
<h3 class="text-2xl">Genres</h3>
|
||||||
|
{#each currentAniListAnime.data.MediaList.media.genres as genre}
|
||||||
|
<div>
|
||||||
|
<Badge large border color="blue" class="m-1 w-52">
|
||||||
|
<div>
|
||||||
|
<WebsiteLink
|
||||||
|
id={genre}
|
||||||
|
url="https://anilist.co/search/anime/{genre}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Badge>
|
||||||
|
<Tooltip>{genre}</Tooltip>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
<h3 class="text-2xl">Tags</h3>
|
<h3 class="text-2xl">Tags</h3>
|
||||||
<div class="mt-2">
|
<div class="mt-2">
|
||||||
{#each currentAniListAnime.data.MediaList.media.tags as tag}
|
{#each currentAniListAnime.data.MediaList.media.tags as tag}
|
||||||
<div>
|
<div>
|
||||||
<Badge large border color="blue" class="m-1 w-52">
|
<Badge large border color="blue" class="m-1 w-52">
|
||||||
<div>
|
<div>
|
||||||
{tag.name} -
|
<WebsiteLink
|
||||||
<span class="text-xs">{tag.rank}%</span>
|
id={tag.name}
|
||||||
|
url="https://anilist.co/search/anime/?genres={tag.name}"
|
||||||
|
/>
|
||||||
|
<span class="text-xs">({tag.rank}%)</span>
|
||||||
</div>
|
</div>
|
||||||
</Badge>
|
</Badge>
|
||||||
<Tooltip>{tag.description}</Tooltip>
|
<Tooltip>{tag.description}</Tooltip>
|
||||||
|
|||||||
@@ -1,28 +1,32 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {BrowserOpenURL} from "../../wailsjs/runtime"
|
import { BrowserOpenURL } from "../../wailsjs/runtime";
|
||||||
|
|
||||||
export let id: string
|
export let id: string;
|
||||||
let url = ""
|
export let url = "";
|
||||||
let isAniList = false
|
let isAniList = false;
|
||||||
let isMAL = false
|
let isMAL = false;
|
||||||
let isSimkl = false
|
let isSimkl = false;
|
||||||
let newId = id
|
let newId = id;
|
||||||
let re = /[ams]?-?(.*)/
|
let re = /[ams]?-?(.*)/;
|
||||||
if (id !== undefined && id.length > 0) {
|
if (id !== undefined && id.length > 0) {
|
||||||
isAniList = id.includes("a-")
|
isAniList = id.includes("a-");
|
||||||
isMAL = id.includes("m-")
|
isMAL = id.includes("m-");
|
||||||
isSimkl = id.includes("s-")
|
isSimkl = id.includes("s-");
|
||||||
newId = id.match(re)[1]
|
if (isAniList || isMAL || isSimkl) newId = id.match(re)[1];
|
||||||
|
else newId = id;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (isAniList) url = `https://anilist.co/anime/${newId}`;
|
||||||
if (isAniList) url = `https://anilist.co/anime/${newId}`
|
if (isMAL) url = `https://myanimelist.net/anime/${newId}`;
|
||||||
if (isMAL) url = `https://myanimelist.net/anime/${newId}`
|
if (isSimkl) url = `https://simkl.com/anime/${newId}`;
|
||||||
if (isSimkl) url = `https://simkl.com/anime/${newId}`
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if url.length > 0}
|
{#if url.length > 0}
|
||||||
<button class="underline underline-offset-2 px-4 py-1" on:click={() => BrowserOpenURL(url)}>{newId}</button>
|
<button
|
||||||
|
type="button"
|
||||||
|
class="underline underline-offset-2 px-4 py-1"
|
||||||
|
on:click={() => BrowserOpenURL(url)}>{newId}</button
|
||||||
|
>
|
||||||
{:else}
|
{:else}
|
||||||
{id}
|
{id}
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
Reference in New Issue
Block a user