diff options
| author | Wolfgang Müller | 2024-03-05 18:08:09 +0100 |
|---|---|---|
| committer | Wolfgang Müller | 2024-03-05 19:25:59 +0100 |
| commit | d1d654ebac2d51e3841675faeb56480e440f622f (patch) | |
| tree | 56ef123c1a15a10dfd90836e4038e27efde950c6 /frontend/src/routes/+page.svelte | |
| download | hircine-d1d654ebac2d51e3841675faeb56480e440f622f.tar.gz | |
Initial commit0.1.0
Diffstat (limited to 'frontend/src/routes/+page.svelte')
| -rw-r--r-- | frontend/src/routes/+page.svelte | 66 |
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> |