Files
sapper/site/src/routes/index.svelte
2019-06-06 17:13:11 -04:00

65 lines
2.0 KiB
Svelte

<script>
import { Hero, Blurb } from '@sveltejs/site-kit';
</script>
<style>
</style>
<svelte:head>
<title>Sapper • The next small thing in web development</title>
</svelte:head>
<Hero
title="Sapper"
tagline="The next small thing in web development"
outline="sapper-logo-outline.svg"
logotype="sapper-logotype.svg"
/>
<Blurb>
<a href="https://svelte.dev" slot="one">
<h2>Powered by Svelte</h2>
<p>Sapper is an application framework powered by Svelte — build bigger apps with a smaller footprint</p>
<span class="learn-more">learn more</span>
</a>
<a href="docs" slot="two">
<h2>Best of both worlds</h2>
<p>All the SEO and progressive enhancement of a server-rendered app, with the slick navigation of an SPA</p>
<span class="learn-more">learn more</span>
</a>
<a href="docs" slot="three">
<h2>Build fast</h2>
<p>Hit the ground running with advanced routing, server-side rendering, code-splitting, offline support and more</p>
<span class="learn-more">learn more</span>
</a>
<div class="description" slot="what">
<p>Sapper is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.</p>
<p>Unlike single-page apps, Sapper doesn't compromise on SEO, progressive enhancement or the initial load experience — but unlike traditional server-rendered apps, navigation is instantaneous for that app-like feel.</p>
<p><a href="https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework">Read the introductory blog post</a> to learn more.</p>
</div>
<div style="grid-area: start; display: flex; flex-direction: column; min-width: 0" slot="how">
<pre class="language-bash" style="margin: 0 0 1em 0; min-width: 0; min-height: 0">
# for Rollup
npx degit "sveltejs/sapper-template#rollup" my-app
# for webpack
npx degit "sveltejs/sapper-template#webpack" my-app
cd my-app
npm install
npm run dev & open http://localhost:3000
</pre>
<p class="cta"><a rel="prefetch" href="docs">Learn Sapper</a></p>
</div>
</Blurb>