<script context="module">
    import Banner from '../../components/Banner.svelte'

    export function preload({params, query}) {
        return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
            return {posts};
        });
    }
</script>

<script>
    export let posts;
</script>

<style>
    ul {
        margin: 0 0 1em 0;
        line-height: 1.5;
    }
</style>

<svelte:head>
    <title>Quartznet - Blog</title>
</svelte:head>

<Banner title="Blog"/>

<main class="container">
    <section>
        <h2>Posts</h2>
        <ul>
            <!-- {#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><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li> -->
            <!-- {/each} -->
        </ul>
    </section>
</main>