84 lines
1.8 KiB
Svelte
84 lines
1.8 KiB
Svelte
<script context="module" lang="typescript">
|
|
/**
|
|
* @type {import('@sveltejs/kit').Load}
|
|
*/
|
|
export function load({ fetch, page: { params, query } }) {
|
|
const blogQuery = query
|
|
? '?' +
|
|
Object.entries(query)
|
|
.map((q) => q.join('='))
|
|
.join('&')
|
|
: ''
|
|
return fetch(`blog.json${blogQuery}`)
|
|
.then((r) => r.json())
|
|
.then((posts) => {
|
|
return { props: { posts, query } }
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<script lang="typescript">
|
|
import ArticleFooter from '../../components/blog/article-footer.svelte'
|
|
import type { PostContent } from './_content'
|
|
|
|
export let posts: PostContent[]
|
|
export let query
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>My blog @michalvankodev</title>
|
|
</svelte:head>
|
|
|
|
{#if posts.length === 0}
|
|
<p class="no-posts">You've found void in the space.</p>
|
|
{:else}
|
|
<h1>
|
|
Recent
|
|
{#if query.tag}
|
|
<em>{query.tag}</em>
|
|
{/if}
|
|
posts
|
|
</h1>
|
|
{#if query.tag}
|
|
<div class="see-all">
|
|
<a href="/blog" class="">See all posts</a>
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
<ul class="post-list">
|
|
{#each posts as post}
|
|
<!-- we're using the non-standard `rel=prefetch` attribute to
|
|
tell Sapper to load the data for the page as soon as
|
|
the user hovers over the link or taps it, instead of
|
|
waiting for the 'click' event -->
|
|
<li>
|
|
<article>
|
|
<header>
|
|
<h2>
|
|
<a rel="prefetch" href="blog/{post.slug}">{post.title}</a>
|
|
</h2>
|
|
</header>
|
|
{@html post.preview}
|
|
</article>
|
|
<ArticleFooter {post} />
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
|
|
<style>
|
|
.post-list {
|
|
padding: 0;
|
|
line-height: 1.5;
|
|
list-style: none;
|
|
}
|
|
|
|
.post-list > li:not(:last-child) {
|
|
margin-bottom: 3em;
|
|
}
|
|
|
|
.see-all {
|
|
text-align: end;
|
|
margin-top: -1.5em;
|
|
}
|
|
</style>
|