Add anime, shows and movies to about page
This commit is contained in:
SirBlob committed
1 parent
d7476cff98
commit
7845cb5e6f
12 files changed
+754
-22
No files matched your search
@@ -0,0 +1,91 @@
|
||||
<script lang="ts">
|
||||
import type { AnimeProfile } from '#lib/anime/types';
|
||||
|
||||
let { anime }: { anime: AnimeProfile } = $props();
|
||||
|
||||
const hostName = 'anilist';
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
COMPLETED: 'green',
|
||||
CURRENT: 'blue',
|
||||
PLANNING: 'magenta',
|
||||
PAUSED: 'yellow',
|
||||
DROPPED: 'red'
|
||||
};
|
||||
|
||||
const shownStatuses = $derived(anime.statusCounts.filter((item) => item.count > 0));
|
||||
const listTotal = $derived(shownStatuses.reduce((total, item) => total + item.count, 0));
|
||||
const rows = $derived([
|
||||
['Anime', `${anime.stats.count}`],
|
||||
['Episodes', `${anime.stats.episodesWatched}`],
|
||||
['Watch time', `${anime.stats.daysWatched} days`]
|
||||
]);
|
||||
</script>
|
||||
|
||||
<div class="anime-fetch">
|
||||
<a class="heading" href={anime.profileUrl} target="_blank" rel="noopener noreferrer">
|
||||
<span class="user">{anime.name.toLowerCase()}</span><span class="at">@</span><span class="host">{hostName}</span>
|
||||
</a>
|
||||
<div class="separator">{'-'.repeat(anime.name.length + hostName.length + 1)}</div>
|
||||
|
||||
{#each rows as [label, value] (label)}
|
||||
<div class="row"><span class="label">{label}</span>: {value}</div>
|
||||
{/each}
|
||||
|
||||
{#each shownStatuses as item (item.status)}
|
||||
<div class="row">
|
||||
<span class="label">{item.label}</span>: <span style:color="var(--{statusColors[item.status]})">{item.count}</span>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
{#if listTotal > 0}
|
||||
<div class="breakdown" role="img" aria-label="List breakdown by status">
|
||||
{#each shownStatuses as item (item.status)}
|
||||
<span
|
||||
class="block"
|
||||
style:flex-grow={item.count}
|
||||
style:background="var(--{statusColors[item.status]})"
|
||||
title="{item.label}: {item.count}"
|
||||
></span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.anime-fetch {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.user,
|
||||
.host {
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.heading:hover .user,
|
||||
.heading:hover .host {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.at,
|
||||
.separator {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--blue);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.breakdown {
|
||||
display: flex;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
flex-basis: 0;
|
||||
min-width: 0.5rem;
|
||||
height: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,238 @@
|
||||
<script lang="ts">
|
||||
import Icon from '@iconify/svelte';
|
||||
import type { AnimeProfile } from '#lib/anime/types';
|
||||
import LinkButton from '#lib/components/ui/LinkButton.svelte';
|
||||
import Panel from '#lib/components/ui/Panel.svelte';
|
||||
import AnimeProfileHeader from './AnimeProfileHeader.svelte';
|
||||
|
||||
let { anime }: { anime: AnimeProfile } = $props();
|
||||
|
||||
const collapsedCount = 12;
|
||||
|
||||
let showAll = $state(false);
|
||||
|
||||
const shownTopRated = $derived(showAll ? anime.topRated : anime.topRated.slice(0, collapsedCount));
|
||||
|
||||
function progressPercent(progress: number, episodes: number | null): number {
|
||||
return episodes ? Math.min(100, (progress / episodes) * 100) : 0;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="overview" class:single={!anime.watching.length}>
|
||||
<Panel title="anilist" icon="simple-icons:anilist">
|
||||
<AnimeProfileHeader {anime} />
|
||||
</Panel>
|
||||
|
||||
{#if anime.watching.length}
|
||||
<Panel title="Currently watching" icon="mdi:play-circle-outline">
|
||||
<div class="watching">
|
||||
{#each anime.watching as entry (entry.id)}
|
||||
<a class="watching-row" href={entry.url} target="_blank" rel="noopener noreferrer">
|
||||
<img src={entry.cover} alt={entry.title} loading="lazy" />
|
||||
<div class="watching-text">
|
||||
<span class="title">{entry.title}</span>
|
||||
<div class="progress-track">
|
||||
<div class="progress-fill" style:width="{progressPercent(entry.progress, entry.episodes)}%"></div>
|
||||
</div>
|
||||
<span class="muted episode">Episode {entry.progress} / {entry.episodes ?? '?'}</span>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</Panel>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<h3 class="subheading"><Icon icon="mdi:star" width="16" /> Top rated</h3>
|
||||
<div class="cover-grid">
|
||||
{#each shownTopRated as entry (entry.id)}
|
||||
<a class="cover-card" href={entry.url} target="_blank" rel="noopener noreferrer" title={entry.title}>
|
||||
<div class="cover">
|
||||
<img src={entry.cover} alt={entry.title} loading="lazy" />
|
||||
<span class="score"><Icon icon="mdi:star" width="13" />{entry.score}</span>
|
||||
</div>
|
||||
<span class="cover-title">{entry.title}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
{#if anime.topRated.length > collapsedCount}
|
||||
<button class="toggle" onclick={() => (showAll = !showAll)}>
|
||||
<Icon icon={showAll ? 'mdi:chevron-up' : 'mdi:chevron-down'} width="16" />
|
||||
{showAll ? 'Show less' : `Show all ${anime.topRated.length}`}
|
||||
</button>
|
||||
{/if}
|
||||
<LinkButton href={anime.profileUrl} icon="simple-icons:anilist">Full list on AniList ({anime.completedCount} completed)</LinkButton>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.subheading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
margin: 1.25rem 0 0.6rem;
|
||||
color: var(--foreground);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.overview {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.overview.single {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.watching {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.watching-row {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
padding: 0.4rem;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.watching-row:hover,
|
||||
.cover-card:hover .cover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.watching-row img {
|
||||
flex-shrink: 0;
|
||||
width: 52px;
|
||||
height: 74px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.watching-text {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
overflow: hidden;
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
height: 4px;
|
||||
background: color-mix(in srgb, var(--foreground) 15%, transparent);
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.episode {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.cover-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 0.9rem 0.75rem;
|
||||
}
|
||||
|
||||
.cover-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cover {
|
||||
position: relative;
|
||||
aspect-ratio: 2 / 3;
|
||||
overflow: hidden;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 20%, transparent);
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.cover-card:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.score {
|
||||
position: absolute;
|
||||
top: 0.35rem;
|
||||
right: 0.35rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.15rem;
|
||||
padding: 0 0.35rem;
|
||||
background: var(--background);
|
||||
color: var(--yellow);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.cover-title {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.3;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.cover-card:hover .cover-title {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0.3rem 0.7rem;
|
||||
background: none;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 30%, transparent);
|
||||
color: var(--foreground);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.toggle:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
@container (max-width: 800px) {
|
||||
.overview {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 520px) {
|
||||
.cover-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,140 @@
|
||||
<script lang="ts">
|
||||
import Icon from '@iconify/svelte';
|
||||
import type { RatedTitle } from '#lib/content';
|
||||
import type { MediaDetails } from '#lib/media/types';
|
||||
|
||||
let { item, details, kind }: { item: RatedTitle; details?: MediaDetails; kind: 'show' | 'movie' } = $props();
|
||||
|
||||
const placeholderIcon = $derived(kind === 'show' ? 'mdi:television-classic' : 'mdi:movie-open-outline');
|
||||
const metaParts = $derived([details?.year, details?.runtime].filter(Boolean));
|
||||
</script>
|
||||
|
||||
<a class="media-card" href={item.url} target="_blank" rel="noopener noreferrer" title={item.name}>
|
||||
<div class="poster">
|
||||
{#if details?.poster}
|
||||
<img src={details.poster} alt="" loading="lazy" />
|
||||
{:else}
|
||||
<span class="placeholder"><Icon icon={placeholderIcon} width="36" /></span>
|
||||
{/if}
|
||||
|
||||
<span class="rating"><Icon icon="mdi:star" width="13" />{item.rating}/10</span>
|
||||
|
||||
{#if details?.plot}
|
||||
<p class="plot">{details.plot}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="text">
|
||||
<span class="title">{item.name}</span>
|
||||
{#if metaParts.length}
|
||||
<span class="meta">{metaParts.join(' · ')}</span>
|
||||
{/if}
|
||||
{#if details?.genre}
|
||||
<span class="genre">{details.genre}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.media-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.poster {
|
||||
position: relative;
|
||||
aspect-ratio: 2 / 3;
|
||||
overflow: hidden;
|
||||
background: var(--dark-background);
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 20%, transparent);
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.media-card:hover .poster {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.poster img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.media-card:hover .poster img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 100%;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.rating {
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
right: 0.4rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
padding: 0 0.4rem;
|
||||
background: var(--background);
|
||||
color: var(--yellow);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.plot {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0.6rem;
|
||||
background: color-mix(in srgb, var(--background) 92%, transparent);
|
||||
border-top: 1px solid var(--accent);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.45;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
|
||||
.media-card:hover .plot,
|
||||
.media-card:focus-visible .plot {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
overflow: hidden;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.meta,
|
||||
.genre {
|
||||
overflow: hidden;
|
||||
color: var(--muted);
|
||||
font-size: 0.75rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.poster img,
|
||||
.plot {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user