65 lines
1.5 KiB
Svelte
65 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import type { PageData } from './$types';
|
|
export let data: PageData;
|
|
const { posts, pageN, maxPageN } = data;
|
|
import siteMetadata from '$content/metadata.json';
|
|
|
|
import { DoubleArrowLeft, DoubleArrowRight, ChevronLeft, ChevronRight } from 'svelte-radix';
|
|
import PostHeader from '$lib/components/PostHeader.svelte';
|
|
|
|
const disableLinkPrev = pageN == 1;
|
|
const disableLinkNext = pageN == maxPageN;
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Page {pageN} | {siteMetadata.blogName}</title>
|
|
</svelte:head>
|
|
|
|
<hr class="separator" />
|
|
<ul id="catalog" class="content">
|
|
{#each posts as post}
|
|
<li>
|
|
<PostHeader post={post}/>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
<hr class="separator" />
|
|
<div id="page-navigator">
|
|
<a
|
|
class="nav-link icon"
|
|
class:disabled-link={disableLinkPrev}
|
|
href="/page/1"><DoubleArrowLeft /></a>
|
|
<a
|
|
class="nav-link icon"
|
|
class:disabled-link={disableLinkPrev}
|
|
href="/page/{Math.max(1, pageN-1)}"><ChevronLeft /></a>
|
|
<div id="page-map">
|
|
<p id="page-num">{pageN}/{maxPageN}</p>
|
|
</div>
|
|
<a
|
|
class="nav-link icon"
|
|
class:disabled-link={disableLinkNext}
|
|
href="/page/{Math.min(maxPageN, pageN+1)}"><ChevronRight /></a>
|
|
<a
|
|
class="nav-link icon"
|
|
class:disabled-link={disableLinkNext}
|
|
href="/page/{maxPageN}"><DoubleArrowRight /></a>
|
|
</div>
|
|
|
|
<style>
|
|
#page-navigator {
|
|
display: flex;
|
|
flex-direction: horizontal;
|
|
justify-content: space-between;
|
|
margin: 1em auto 1em auto;
|
|
width: 80%;
|
|
align-items: center;
|
|
}
|
|
#page-map {
|
|
display: inline-block;
|
|
}
|
|
#page-num {
|
|
color: rgb(128,128,128);
|
|
}
|
|
</style>
|