aboutsummaryrefslogtreecommitdiff
path: root/src/routes/+layout.svelte
blob: 8b802755d4d34575c8cbd2e00c6cc6d63e453b38 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<script>
	import { env } from '$env/dynamic/public';
	import { userIdentity as getUserIdentity } from '$lib/AniList/identity';
	import { onMount } from 'svelte';
	import userIdentity from '../stores/userIdentity';
	import settings from '../stores/settings';

	export let data;

	let currentUserIdentity = { name: '...', id: -1 };

	onMount(async () => {
		settings.subscribe((value) => {
			if (value.forceLightTheme === true) {
				document.documentElement.classList.add('light-theme');
			} else {
				document.documentElement.classList.remove('light-theme');
			}
		});

		if (data.user !== undefined) {
			if ($userIdentity === '') {
				userIdentity.set(JSON.stringify(await getUserIdentity(data.user)));
			}

			currentUserIdentity = JSON.parse($userIdentity);
			currentUserIdentity.name = currentUserIdentity.name;

			// document.getElementsByTagName('html')[0].classList.add('limit-height');
			// document.getElementsByTagName('body')[0].classList.add('limit-height');
		}
	});
</script>

<div id="container">
	<div id="header">
		<p />

		<h1><a href="/">期限</a></h1>

		{#if data.user === undefined}
			<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`}
				>Log in with AniList</a
			>
		{:else}
			<a href="/api/authentication-log-out">Log out from AniList ({currentUserIdentity.name})</a>
		{/if}

		<p />

		<p>
			「 <a href="/">Home</a> • <a href="/updates">Manga & LN Updates</a> •
			<a href="/tools">Tools</a> • <a href="/settings">Settings</a> 」
		</p>

		<hr />
	</div>

	<slot />
</div>

<style>
	:global(html.light-theme) {
		filter: invert(0);
	}

	:global(html.light-theme img) {
		filter: invert(0);
	}

	:global(.limit-height) {
		height: 100%;
	}

	#container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
</style>