63 lines
1.2 KiB
Svelte
63 lines
1.2 KiB
Svelte
<script>
|
|
export let pages;
|
|
export let showFolder;
|
|
</script>
|
|
|
|
<style>
|
|
.pagegrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 1rem;
|
|
padding: 0.5rem;
|
|
}
|
|
a {
|
|
color: unset;
|
|
text-decoration: unset;
|
|
}
|
|
h1 {
|
|
margin-top: 0.1em;
|
|
margin-bottom: 0.3em;
|
|
}
|
|
.desc {
|
|
color: #777;
|
|
}
|
|
.meta {
|
|
margin-top: 0.3em;
|
|
color: #666;
|
|
}
|
|
.tag {
|
|
text-transform: uppercase;
|
|
color: #555;
|
|
font-weight: 600;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
.desc {
|
|
color: #aaa;
|
|
}
|
|
.meta {
|
|
color: #888;
|
|
}
|
|
.tag {
|
|
color: #bbb;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
<div class="pagegrid">
|
|
{#each pages as page}
|
|
<a class="page" href="/p/{page.path}" sveltekit:prefetch>
|
|
{#if showFolder && (page.path.split('/').length !== 1)}
|
|
<span class="tag">{page.path.split('/')[page.path.split('/').length - 2]}</span>
|
|
{/if}
|
|
<h1>{page.name}</h1>
|
|
<span class="desc">
|
|
{page.description}
|
|
</span>
|
|
<br>
|
|
<div class="meta">
|
|
{Math.round(page.timeToRead.readingTime / 1000 / 60).toLocaleString()} min read • {page.timeToRead.wordCount.toLocaleString()} words
|
|
</div>
|
|
</a>
|
|
{/each}
|
|
</div> |