summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/routes/+page.svelte
diff options
context:
space:
mode:
authorWolfgang Müller2024-03-05 18:08:09 +0100
committerWolfgang Müller2024-03-05 19:25:59 +0100
commitd1d654ebac2d51e3841675faeb56480e440f622f (patch)
tree56ef123c1a15a10dfd90836e4038e27efde950c6 /frontend/src/routes/+page.svelte
downloadhircine-d1d654ebac2d51e3841675faeb56480e440f622f.tar.gz
Initial commit0.1.0
Diffstat (limited to 'frontend/src/routes/+page.svelte')
-rw-r--r--frontend/src/routes/+page.svelte66
1 files changed, 66 insertions, 0 deletions
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
new file mode 100644
index 0000000..97a7a60
--- /dev/null
+++ b/frontend/src/routes/+page.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+ import { version } from '$app/environment';
+ import { frontpageQuery } from '$gql/Queries';
+ import { ComicSort, SortDirection } from '$gql/graphql';
+ import { codename } from '$lib/Meta';
+ import { href } from '$lib/Navigation';
+ import { fadeDefault } from '$lib/Transitions';
+ import logo from '$lib/assets/logo.webp';
+ import Card, { comicCard } from '$lib/components/Card.svelte';
+ import Guard from '$lib/components/Guard.svelte';
+ import Head from '$lib/components/Head.svelte';
+ import Carousel from '$lib/containers/Carousel.svelte';
+ import { getContextClient } from '@urql/svelte';
+ import { fade } from 'svelte/transition';
+
+ const bookmarkLink = href('comics', { filter: { include: { bookmarked: true } } });
+ const recentLink = href('comics', {
+ sort: { on: ComicSort.CreatedAt, direction: SortDirection.Descending }
+ });
+ const favouriteLink = href('comics', { filter: { include: { favourite: true } } });
+
+ $: query = frontpageQuery(getContextClient());
+ $: recent = $query.data?.recent;
+ $: favourites = $query.data?.favourites;
+ $: bookmarked = $query.data?.bookmarked;
+</script>
+
+<Head section="Home" />
+
+<div class="flex flex-col justify-center gap-16 xl:flex-row">
+ {#if $query.data}
+ <div class="flex flex-col items-center gap-1">
+ <img src={logo} width="512" height="512" class="min-w-[400px]" alt="" />
+ <h1 class="text-4xl font-medium">
+ <span>hircine</span>
+ <span>{version}</span>
+ </h1>
+ <h2 class="text-2xl font-light text-zinc-400">{codename}</h2>
+ </div>
+ <div class="flex flex-col gap-8" in:fade={fadeDefault}>
+ {#if recent && recent.count > 0}
+ <Carousel title="Recently added" href={recentLink}>
+ {#each recent.edges as comic}
+ <Card coverOnly {...comicCard(comic)} />
+ {/each}
+ </Carousel>
+ {/if}
+ {#if favourites && favourites.count > 0}
+ <Carousel title="Favourites" href={favouriteLink}>
+ {#each favourites.edges as comic}
+ <Card coverOnly {...comicCard(comic)} />
+ {/each}
+ </Carousel>
+ {/if}
+ {#if bookmarked && bookmarked.count > 0}
+ <Carousel title="Bookmarks" href={bookmarkLink}>
+ {#each bookmarked.edges as comic}
+ <Card coverOnly {...comicCard(comic)} />
+ {/each}
+ </Carousel>
+ {/if}
+ </div>
+ {:else}
+ <Guard result={query} />
+ {/if}
+</div>