diff options
Diffstat (limited to 'frontend/src/routes/+page.svelte')
| -rw-r--r-- | frontend/src/routes/+page.svelte | 43 |
1 files changed, 27 insertions, 16 deletions
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index 97a7a60..237b573 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -6,29 +6,40 @@ 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 ComicCard from '$lib/components/ComicCard.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 bookmarkLink = href('comics', { + filter: { include: { bookmarked: true } }, + sort: { on: ComicSort.Random, seed: dailySeed() } + }); const recentLink = href('comics', { sort: { on: ComicSort.CreatedAt, direction: SortDirection.Descending } }); - const favouriteLink = href('comics', { filter: { include: { favourite: true } } }); + const favouriteLink = href('comics', { + filter: { include: { favourite: true } }, + sort: { on: ComicSort.Random, seed: dailySeed() } + }); + + function dailySeed() { + const date = new Date(); + return +`${date.getFullYear()}${date.getMonth() + 1}${date.getDate()}`; + } - $: query = frontpageQuery(getContextClient()); - $: recent = $query.data?.recent; - $: favourites = $query.data?.favourites; - $: bookmarked = $query.data?.bookmarked; + let query = $derived(frontpageQuery(getContextClient(), { seed: dailySeed() })); + let recent = $derived($query.data?.recent); + let favourites = $derived($query.data?.favourites); + let bookmarked = $derived($query.data?.bookmarked); </script> <Head section="Home" /> -<div class="flex flex-col justify-center gap-16 xl:flex-row"> - {#if $query.data} +{#if $query.data} + <div class="flex flex-col justify-center gap-16 xl:flex-row"> <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"> @@ -41,26 +52,26 @@ {#if recent && recent.count > 0} <Carousel title="Recently added" href={recentLink}> {#each recent.edges as comic} - <Card coverOnly {...comicCard(comic)} /> + <ComicCard coverOnly {comic} /> {/each} </Carousel> {/if} {#if favourites && favourites.count > 0} <Carousel title="Favourites" href={favouriteLink}> {#each favourites.edges as comic} - <Card coverOnly {...comicCard(comic)} /> + <ComicCard coverOnly {comic} /> {/each} </Carousel> {/if} {#if bookmarked && bookmarked.count > 0} <Carousel title="Bookmarks" href={bookmarkLink}> {#each bookmarked.edges as comic} - <Card coverOnly {...comicCard(comic)} /> + <ComicCard coverOnly {comic} /> {/each} </Carousel> {/if} </div> - {:else} - <Guard result={query} /> - {/if} -</div> + </div> +{:else} + <Guard result={query} /> +{/if} |