index.svelte

<script context="module">
  import blocksToHtml from '@sanity/block-content-to-html'
  import client from '../../sanityClient'
  import serializers from '../../components/serializers'
	export function preload({ params, query }) {
		const projection = `{
			...,
			excerpt[]{
				...
			}
		}`
    	return client.fetch('*[_type == "theme" && defined(slug.current)]').then(themes => {
			return { themes: {
				...theme,
					excerpt: blocksToHtml({blocks: post.excerpt, serializers, ...client.clientConfig })
				} 
			};
		}).catch(err => this.error(500, err));

	}
</script>

<script>
  export let themes;
  export let theme;
</script>

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

<svelte:head>
	<title>Themes</title>
</svelte:head>

<h1>Themes</h1>

<ul>
	{#each themes as theme}
		<!-- 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='tuts/{theme.slug.current}'>
				<h2>{theme.title}</h2>
				<p>{theme.excerpt}</p>
			</a>
		</li>
	{/each}
</ul>