40 lines
771 B
HTML
40 lines
771 B
HTML
|
<:Head>
|
||
|
|
<title>Blog</title>
|
||
|
|
</:Head>
|
||
|
|
|
||
|
|
<Layout page='blog'>
|
||
|
|
<h1>Recent posts</h1>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
</Layout>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
ul {
|
||
|
|
margin: 0 0 1em 0;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Layout from '../_components/Layout.html';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
Layout
|
||
|
|
},
|
||
|
|
|
||
|
|
preload({ params, query }) {
|
||
|
|
return fetch(`/api/blog`).then(r => r.json()).then(posts => {
|
||
|
|
return { posts };
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|