feat(landing): cover mode list demos

1 files changed, 6 insertions, 88 deletions

diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte
index ae8dcca0..9e5df53d 100644
--- a/src/lib/Landing.svelte
+++ b/src/lib/Landing.svelte
@@ -1,74 +1,15 @@
 <script lang="ts">
-	import locale from '$stores/locale';
-	import ListTitle from './List/ListTitle.svelte';
-	import sampleManga from '$lib/Data/Static/SampleMedia/manga.json';
-	import sampleAnime from '$lib/Data/Static/SampleMedia/anime.json';
-	import MediaTitleDisplay from './List/MediaTitleDisplay.svelte';
-	import { outboundLink } from './Media/links';
-	import settings from '$stores/settings';
 	import root from './Utility/root';
-	import type { Media } from './Data/AniList/media';
 	import { env } from '$env/dynamic/public';
 	import tooltip from './Tooltip/tooltip';
-
-	const mangaCount = 8;
-	const animeCount = 6;
-	const randomManga = sampleManga
-		.filter(
-			(manga) =>
-				manga.chapters &&
-				!manga.tags.some((tag) => tag.name === 'Nudity') &&
-				!manga.tags.some((tag) => tag.name === 'Rape') &&
-				!manga.tags.some((tag) => tag.name === 'Tragedy') &&
-				!manga.tags.some((tag) => tag.name === 'Bondage') &&
-				manga.genres.some((genre) => genre === 'Comedy') &&
-				!manga.genres.some((genre) => genre === 'Hentai')
-		)
-		.sort(() => 0.5 - Math.random())
-		.slice(0, mangaCount) as unknown as Media[];
-	const randomAnime = sampleAnime
-		.filter(
-			(anime) =>
-				anime.episodes &&
-				!anime.tags.some((tag) => tag.name === 'Nudity') &&
-				!anime.tags.some((tag) => tag.name === 'Rape') &&
-				!anime.tags.some((tag) => tag.name === 'Tragedy') &&
-				!anime.tags.some((tag) => tag.name === 'Bondage') &&
-				!anime.genres.some((genre) => genre === 'Hentai') &&
-				anime.genres.some((genre) => genre === 'Comedy') &&
-				anime.status !== 'NOT_YET_RELEASED'
-		)
-		.sort(() => 0.5 - Math.random())
-		.slice(0, animeCount) as unknown as Media[];
+	import CompletedAnimeList from './List/Anime/CompletedAnimeList.svelte';
+	import MangaListTemplate from './List/Manga/MangaListTemplate.svelte';
 </script>
 
 <div class="example-item card">
 	<div class="item-content">
-		<details open={true} class="list">
-			<ListTitle title={$locale().lists.due.mangaAndLightNovels} count={mangaCount} hideTime />
-
-			<ul>
-				{#each randomManga as manga}
-					{@const readChapters = Math.floor(Math.random() * (manga.chapters || 0))}
-
-					<li>
-						<a
-							href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)}
-							target="_blank"
-							title={`<img src="${manga.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
-							use:tooltip
-						>
-							<MediaTitleDisplay title={manga.title} />
-						</a>
-						<span class="opaque">|</span>
-						{readChapters}<span class="opaque">/{manga.chapters || '?'}</span>
-						<button class="button-square button-action">+</button>
-						[{Math.floor(Math.random() * ((manga.chapters ?? 0) - readChapters)) +
-							readChapters +
-							1}]
-					</li>
-				{/each}
-			</ul>
+		<details class="list" open>
+			<MangaListTemplate due={true} dummy displayUnresolved={false} />
 		</details>
 	</div>
 
@@ -118,31 +59,8 @@
 		>
 	</div>
 	<div class="item-content">
-		<details open={true} class="list">
-			<ListTitle title={$locale().lists.due.episodes} count={animeCount} hideTime />
-
-			<ul>
-				{#each randomAnime as anime}
-					{@const watchedEpisodes = Math.floor(Math.random() * (anime.episodes || 0))}
-
-					<li>
-						<a
-							href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)}
-							target="_blank"
-							title={`<img src="${anime.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
-							use:tooltip
-						>
-							<MediaTitleDisplay title={anime.title} />
-						</a>
-						<span class="opaque">|</span>
-						{watchedEpisodes}<span class="opaque">/{anime.episodes || '?'}</span>
-						<button class="button-square button-action">+</button>
-						[{Math.floor(Math.random() * ((anime.episodes ?? 0) - watchedEpisodes)) +
-							watchedEpisodes +
-							1}]
-					</li>
-				{/each}
-			</ul>
+		<details class="list" open>
+			<CompletedAnimeList dummy />
 		</details>
 	</div>
 </div>