path: root/src/lib/Landing.svelte

<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[];
</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>
	</div>

	<div class="card item-description">
		<span class="big-text">
			Instantly view which manga on your lists have newly released chapters
		</span>

		<p>
			<a href={root('/')}>due.moe</a> will automatically check which manga on your lists have new
			chapters available. <a href={root('/')}>due.moe</a> will even alert you when you need to update
			your logged volume count if you are trailing behind.
		</p>

		<p>
			Separating concluded and publishing manga, <a href={root('/')}>due.moe</a> truly gives a one-of-a-kind
			experience when it comes to staying on top of your favourite titles.
		</p>

		<p class="medium-text">
			<a href={root('/')}>due.moe</a> even supports checking for new light novels chapters!
		</p>

		<small>This is simulated data including concluded manga.</small>
	</div>
</div>

<p />

<div class="example-item card">
	<div class="card item-description">
		<span class="big-text">Let's not forget anime!</span>

		<p>
			<a href={root('/')}>due.moe</a> will let you know which episodes you still need to watch, which
			anime you are caught up on, and planned anime which will begin to air soon.
		</p>

		<p>
			We'll always let you know when your next episodes are coming out with a countdown, and did we
			mention that all displayed countdowns are for <b>subtitled release times by default</b>? Cool,
			right?
		</p>

		<small
			>This is simulated data including concluded anime. Cover grid view is also supported.</small
		>
	</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>
	</div>
</div>

<p />

<div class="example-item card">
	<div class="item-content">
		<span class="big-text">Tools & More!</span>

		<p>
			<a href={root('/')}>due.moe</a> also offers a suite of helpful tools to make your life on AniList
			that much easier. Some examples include &#8230;
		</p>

		<ul>
			<li><a href={root('/wrapped')}>AniList Wrapped</a> — Your Year on AniList</li>
			<li>
				Badge Wall — A unified badge collection experience for AniList
				<blockquote style="margin: 0 0 0 1.5rem;">
					Easily display all of your earned badges in a single place, with your Anime Watching Club
					(AWC) badges automatically included!
				</blockquote>
			</li>
			<li>
				<a href={root('/schedule')}>Subtitle Schedule</a> — A release calendar which displaying the
				scheduled <b>subtitle release times</b> for simulcast anime!
			</li>
			<li>
				<a href={root('/birthdays')}>Today's Character Birthdays</a> — A calendar to help you stay up
				to date with your favourite characters' birthdays, featuring an even bigger character database
				than AniList!
			</li>
			<li>
				<a href={root('/tools/sequel_spy')}>Sequel Spy</a>
				<blockquote style="margin: 0 0 0 1.5rem;">
					Find media with prequels you haven't seen for any simulcast season
				</blockquote>
			</li>
		</ul>

		<p />

		<span class="big-text">
			<a
				href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`}
				on:click={() => {
					localStorage.setItem(
						'redirect',
						window.location.origin + window.location.pathname + window.location.search
					);
				}}>Log in</a
			> with AniList to get started!
		</span>

		<p />

		<div class="example-item images">
			<img src="https://i.imgur.com/dpijzKn.png" alt="Badge Wall" title="Badge Wall" use:tooltip />
			<img
				src="https://i.imgur.com/huEi683.png"
				alt="Schedule (List View)"
				title="Schedule (List View)"
				use:tooltip
			/>
			<img
				src="https://i.imgur.com/PkuJZdW.png"
				alt="Schedule"
				title="Schedule (Cover Grid View)"
				use:tooltip
			/>
		</div>
	</div>

	<div class="item-description demo">
		<a href="https://i.imgur.com/yLSBz2f.mp4" target="_blank">
			<img src="https://i.imgur.com/yLSBz2f.gif" alt="Demo" title="Demo" use:tooltip />
		</a>
	</div>
</div>

<style>
	.example-item {
		display: flex;
		flex-wrap: wrap;
	}

	.images {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.images img {
		border-radius: 8px;
		margin: 0.15rem;
		width: 32.5%;
	}

	.demo {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.demo img {
		border-radius: 8px;
		margin: 0.15rem;
		width: 100%;
	}

	.item-content {
		flex: 1 1 50%;
	}

	.item-description {
		flex: 1 1 50%;
	}

	.medium-text {
		font-size: 1.125rem;
	}

	.big-text {
		font-size: 1.25rem;
	}
</style>