75 lines
No EOL
1.8 KiB
Svelte
75 lines
No EOL
1.8 KiB
Svelte
<script lang="ts">
|
||
const { data } = $props();
|
||
import Postgrid from './grid.svelte'
|
||
|
||
import { base } from '$app/paths';
|
||
import { PUBLIC_HOSTNAME } from '$env/static/public';
|
||
</script>
|
||
|
||
<svelte:head>
|
||
<title>記事一覧 | moris.day Blog</title>
|
||
<link rel="canonical" href="https://{PUBLIC_HOSTNAME}{base}/0/" />
|
||
</svelte:head>
|
||
|
||
|
||
<div class='contain'>
|
||
<h1 style="margin-top:0; font-weight:500;">Posts <span style="font-size:1.6rem; opacity:0.7">#page{data.pageNo}</span></h1>
|
||
<div class="posts">
|
||
{#each data.posts as post}
|
||
<article class:unpublished={!post.metadata.published}>
|
||
<a style='text-decoration:none; color:currentColor;' href="../post/{post.postId}" tabindex="0">
|
||
<Postgrid {...post.metadata}></Postgrid>
|
||
</a>
|
||
</article>
|
||
{/each}
|
||
{#if data.posts.length%4}
|
||
{#each Array(4-data.posts.length%4) as i}
|
||
<div class="blank"></div>
|
||
{/each}
|
||
{/if}
|
||
</div>
|
||
|
||
<div class='paging'>
|
||
<a href={data.pageNo==0? "":`../${Number(data.pageNo)-1}`} style:visibility={data.pageNo==0? 'hidden':''}>＜</a>
|
||
<span>{data.pageNo}</span><span>/</span><span>{data.lastPage}</span>
|
||
<a href={data.pageNo==data.lastPage? "":`../${Number(data.pageNo)+1}`} style:visibility={data.pageNo==data.lastPage? 'hidden':''}>＞</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<style>
|
||
.contain {
|
||
margin-inline: auto;
|
||
padding: 2vw 3vw;
|
||
max-width: 1599px;
|
||
}
|
||
|
||
.posts {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
grid-template-rows: max-content;
|
||
gap: 25px;
|
||
justify-content: center;
|
||
}
|
||
article {
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 0 6px #0001;
|
||
|
||
&.unpublished {
|
||
border: solid red 3px;
|
||
}
|
||
}
|
||
|
||
.paging {
|
||
display: flex;
|
||
justify-content: center;
|
||
column-gap: 8px;
|
||
margin: 20px;
|
||
font-size: 1.5em;
|
||
font-weight: 550;
|
||
& a {
|
||
color: var(--theme-color);
|
||
}
|
||
}
|
||
</style> |